Sigamos Diseñando la WEB
paso 11: Ahora crea tres documentos HTML con los nombres que diste a los enlaces. Si dejaste
igual el codigo como esta escrito en la exposicion del curso, entonces los nombres deben de ser "pagina1.html", "pagina2.html
y "pagina3.html". Nada mas crea estos tres archivos y dejalos ahi quietos, esto se hace para que los enlaces no queden rotos
y surtan efecto. Despues de crear las paginas veras que te llevan a unas paginas en blanco, por el momento no importa, deja
asi y sigamos con la pagina actual.
Agregar Imagenes y Gif a la Pagina WEB
paso 12: Para agregar una imagen a la pagina WEB se requiere del uso de la siguiente forma que
se expersa en el cuadro guia de donde has copiado hasta ahora las lineas de codigo. Pero antes te he dejado dos imagenes
para que las descargues y con ellas sigas el ejercicio. Las imagenes las puedes descargar ubicando el puntero del mouse
sobre la imagen, haciendo clic derecho y eligiendo del menu "Guardar imagen como...". Recuerda debes de guardarla en el
directorio "elementos".
A continuacion escribe en el documento "index.html" las siguientes lineas para agregar la imagen a la pagina WEB.
<HTML>
<HEAD>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</HEAD>
<BODY>
<table bgcolor="black" width="800px" height="150px" align="center">
<tr>
<td align="center"><font color="white" size="20">Nombre del Sitio WEB
</td>
</tr>
</table>
<div id="conte">
<ul>
<li><a href="Pagina1.html">Enlace1</a></li>
<li><a href="Pagina2.html">Enlace2</a></li>
<li><a href="Pagina3.html">Enlace3</a></li>
</ul>
<img src="elementos/bartolomeo.jpg"></img>
</div>
</BODY>
</HTML>
Solo se agrego una imagen en la guia pero si tu quieres puedes agregar la otra o mas. Eso si ten en cuenta que debes escribir la ruta de busqueda de la imagen, como veras en la guia, alli esta en la direccion "elementos/ bartolomeo.jpg", tambien se debe escribir la extension del archivo.
Un Titulo en el Contenido de la WEB
paso 12: Ahora agregar un titulo a la pagina WEB, y luego un o unos parrafos. Esto sera muy facil, haras uso de la etiqueta de cabecera <h> para agregar titulos; y de la etiqueta <p> para parrafos.
<HTML>
<HEAD>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</HEAD>
<BODY>
<table bgcolor="black" width="800px" height="150px" align="center">
<tr>
<td align="center"><font color="white" size="20">Nombre del Sitio WEB
</td>
</tr>
</table>
<div id="conte">
<ul>
<li><a href="Pagina1.html">Enlace1</a></li>
<li><a href="Pagina2.html">Enlace2</a></li>
<li><a href="Pagina3.html">Enlace3</a></li>
</ul>
<h3>Mi WEB Personal</h3>
<p>Esta web la construi con la colaboracion de WebTuya, facil y rapido. Constituye
mis primeras nociones y experiencia para la edificacion de paginas WEB.<br>
WebTuya tambien tiene recursos de electronica, resumiendo un poco en la seccion de electronica
puedes encontrar temas de diseño electronico, esquemas, diagramas de circuitos, proyectos,
y muchas otras cosas mas. Tambien puedes visitar http://Wbien.zxq.net, alli encontraras
temas mas detallados para la construccion de sitios WEB.</p>
<img src="elementos/bartolomeo.jpg"></img>
</div>
</BODY>
</HTML>
Como ya te habia explicado la etiqueta cabecera usada para el titulo es la <h> y el valor
numerico que se agrega a seguidamente de la letra "h" (para el el contenido de la guia "h3") denota el tamaño que tendra
el titulo. Se puede agregar valores hasta "6", siendo este el tamaño mas pequeño, practica un poco variando el valor entre
uno y seis.
En cuanto a lo que concierne al parrafo esta contenido entre las etiquetas <p>, y </p>, puedes escribir todo
lo que quieras. Cuando necesites hacer un salto de linea (dejar un espacio entre lineas) agrega la etiqueta <br>
como se puede apreciar en la guia al finalizar la segunda linea.
