Textos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.comTextos Animados en MuchoGrafico.com

viernes, 18 de octubre de 2013

Página web con códigos HTML

 Estos últimas clases hemos estado utilizando los códigos HTML de manera muy sencilla con el fin de crear una página web personal muy simple para el disfrute de todos.Para ello hemos seguido unos pasos que indican cómo crear una página fácilmente. Esta es la dirección de dicho manual :
http://ldc.usb.ve/~vtheok/webmaestro/.
Lo primero que debéis hacer es  crear un archivo del blog de notas en el que iréis escribiendo la página poco a poco. Tenéis que incluir siempre al principio del texto las etiquetas ´´<HTML> y <BODY>´´ y al final, </HTML> y </BODY>









A continuación iremos añadiendo etiquetas como <H1>/</H1> (donde el número es el tamaño), para añadir un título.Las etiquetas <HR> y </HR> para añadir un subrayado al título(les podemos añadir
< WIDTH=75%> donde el porcentaje es el grosor de la línea de subrayado)
Las etiquetas <BR> que se colocan entre los párrafos para separlos(cuantas más pogamos, más espacio existirá entre ellos)
También podemos añadir una lista con el siguiente código:
<UL>
<LI> <FONT SIZE=8> Informática</FONT>
<LI> <FONT SIZE=6> Educación Física </FONT>
<LI> <FONT SIZE=4> Biología </FONT>
<LI> <FONT SIZE=2> Matemáticas </FONT>
<LI> <FONT SIZE=0.8> Ética </FONT>
</UL>





La etiqueta <UL> permite abrir la lista, <LI> es cada punto de dicha lista, <FONT SIZE=8> para cambiar el tamaño del texto, y </UL> para cerrar la lista.
Para cambiar el color del texto , debemos añadir la etiqueta <FONT COLOR="#FF0000">TEXTO EN COLOR></FONT> Y la etiqueta barra FONT al final.

Imágenes: 
Para añadir una imagen al blog basta con insertar la etiqueta <IMG SRC="nombre de nuestro archivo.gif>
En cambio,si queremos colocar una imagen que actúe como enlace, utilizaremos la siguiente etiqueta:
<A HREF="direccion que queramos(copiamos enlace)o archivo.html"><IMG SRC="imagen.gif"></A>


¡Magnífica¡


Tablas:
Para introducir una tabla con color de fondo,para mí la que mejor queda, debemos colocar esta etiqueta:
<TABLE BORDER BGCOLOR="FF0000"(rojo) CELLPADING=30>(esto último es la separación de celdas)
Para añadir filas utilizaremos la etiqueta <TR>.
Dentro de esta etiqueta, utilizamos tantas etiquetas <TD>Texto de celda</TD> como columnas queramos en dicha celda.
Por último, no debemos olvidar colocar la etiqueta</TABLE>




Gifts animados:
Colocar un gift animado es igual que colocar una imagen y siempre,siempre, con el .gif al final
Para enlazar el gift con una página, haremos lo mismo que con las imágenes,ya explicado más arriba.






Mapa:
Colocar un mapa es una de las cosas más costosas que podemos encontrar.Para ello debemos utilizar las siguientes etiquetas:

<MAP NAME="mi_mapa">
<AREA SHAPE="RECT" COORDS="46,40,250,75" HREF="mipag2.html">
<AREA SHAPE="RECT" COORDS="46,100,250,135" HREF="mipag3.html">
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<IMG SRC="pulsadr1.gif" USEMAP="#mi_mapa">

Aquí, mi_mapa es el nombre que le hemos puesto al mapa.
Las cordenadas las obtendremos con un programa gráfico como paint,donde nos aparecerán al seleccionar un área rectangular de la imagen.
Junto a ellas, colocaremos el enlace al que nos llevará esa zona si clickeamos.
Por último introducimos la imagen que utilizaremos de mapa, que debe estar en nuestras carpeta.
Lo llamaremos como al principio de la etiqueta y ya podremos disfrutar de él .Ejemplo:




Sonidos


Para poder colocar un sonido en nuestra web debemos utilizar las siguiente etiqueta:
                       
                           <A HREF="sonido.wav"><IMG SRC="imagen.gif"></A>

De esta manera , al pinchar en la imagen, se abrirá automáticamente un reproductor de sonido.










Mi página web

Para acceder a ell haz clck en el siguiente enlace: http://jesustrabado.hol.es