Otra division para mi sitio WEB
paso 09: Hasta el momento solo se ha trabajado en el archivo "index.html", de aqui en adelante
necesitaras la ayuda de otro archivo que ya creaste; se llama "estilo.css". Ubicate en el archivo "estilo.css", elimina
el contenido, deja el documento en blanco.
Como veras este documento tiene como extension ".css" diferente al que has venido trabajando que tiene extension ".html".
El documen "estilo.css" se hara cargo de recopilar la informacion concerniente a las propiedades que le des ahora en adelante
a las paginas WEB; es decir el color, el tipo de letra, los margenes etcetera etcetera. Para que sirve: para realizar un
control mas rapido y efectivo de las propiedades; me explico, si tienes ya creadas 5 paginas en tu sitio WEB, y a todas le
quieres dar las mismas propiedades de color, de tipo de letra y tamaño, de margen...pues con solo indicarlo una sola vez
en la hoja de estilo basta para todas las cinco paginas WEB.
en la hoja de estilo "css" escribe:
body {text-align:center}
#conte {border:blue 1px solid; width:800px; height:600px}
Ahora en el "index.html" escribe estas otras lineas: con el codigo ya escrito antes debe de quedar asi:
<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">
</div>
</BODY>
</HTML>
Que viste de nuevo? : Pues bueno, antes que todo. Que hace esa linea que dice...<link rel=
"stylesheet" href="estilo.css" type="text/css" media="all"> ?????. esa linea sirve para asociar el documento "index.html"
con las propiedades descritas en el documento "estilo.css". Sin esta linea las propiedades puestas en la hoja de estilo
"estilo.css" no prestaria ningun servicio al documento html.
En segundo lugar se ha agregado una nueva etiqueta llamada div, un div se asemeja a una division, capa o seccion. Es una
parte rectangular que ocupa algun espacio en la pantalla. Al div que agregaste tiene un nombre : "conte" y sera el contenido
general, es decir este div sera la seccion, o capa, o division, como lo quieras llamar, de la pantalla que se encargara de
contener todo el contenido visible de la WEB.
Al div en mension se le asigno un nuevo atributo desde la hoja de estilo; el atributo border, le diste en ancho de borde un
pixel (1px), un color (blue) y el tipo (solid).
paso 10: El siguiente paso sera agregar un menu, es muy sencillo. Se hace agregando una lista , para ello recurrimos a la etiqueta <ul> </ul> y la etiqueta <li> </li>
<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>
</div>
</BODY>
</HTML>
Las etiquetas <ul> </ul> contendran cada uno de los componentes de la lista, cada componente esta descrito
entre las etiquetas <li> </li>. Puedes agregar cuantas quieras.
Como podras ver existe otra nueva etiqueta dentro de las etiquetas <li> </li>, esa etiqueta a la que nos
referimos es la <a> </a>. la etiqueta <a> </a> crea un enlace; un enlace es un texto o grafico
que al evento de dar clic sobre el te conduce a otra pagina. Estos enlaces bien pueden ser internos, lo que indica que
nos llevara a una pagina del propio sitio, a lo cual no mas sera necesario el nombre de la pagina seguida de la extension
".html" para el caso que estas practicando. O tambien existe enlaces externos, que conducen a otras paginas que no son de
propiedad del sitio, por ejemplo un enlace que nos lleva a Google es un sitio externo.
El atributo "href" es necesario, indica la pagina a la que debe de conducirse. El texto contenido entre las etiquetas de
enlace, es el texto que se vera o indicara el enlace en la pagina web, para este caso son tres enlaces : "enlace1", "enlace2"
y "enlace3". los nombres son a tu gusto pero recuerda que deben de ser alucivos al contenido que te llevara.
Por otro lado debes de agregar las siguientes lineas al codigo de la hoja de estilo "estilo.css", asi :
body {text-align:center}
#conte {border:blue 1px solid; width:800px; height:600px}
#conte ul {border:red 1px solid; width:150px; height:200px; background-color:gray;
float:left; margin: 1px}
Lo nuevo: La etiqueta ul y a continuacion las propiedades que le agregaste, voy a obviar lo que ya se
ha explicado y abrimos espacio a lo nuevo. Entre lo nuevo aparece la propiedad "float", esta propiedad le dice al "ul"
que debe de "flotar" o ubicarse, para mejor entendimiento, en el lado que le indiquemos de su contenedor, por supuesto su
contenedor es el div "conte" y el valor que se le indica al "float" es "left" es decir "izquierda".
El margin le dice al ul que el recuadro que lo conforma debe de separarse por los cuatro lados de cualquier otro elemento.
Como prodras observar a pesar de que le diste la propiedad left al atributo float este dejo un pequeño espacio en la parte
superior e izquierda; ese espacio es el margin.
