Etiquetas
div html head body linkAtributos
width margin background text-alignir a sigiente leccion
- inicio »»
- Creando el Index »»
- Pagina estructurada
El Encabezado de la Pagina
Antes de,
que quede claro que el encabezado de la pagina es diferente a la cabecera del documento html, recuerda que el contenido de
la cabecera del HTML es solo de caracter informativo, a diferencia del encabezado de la pagina que se refiere a la seccion
comprendida en la parte superior y en la que se posicionan normalmente el nombre de la pagina, el logo, algun otro
distintivo y un contador, entre otros.
Para la creacion del encabezado de la pagina en el documento html "index.html" seccionaras el cuerpo de la pagina
con una capa (los div son tambien llamados capas), recuerda tambien que todo lo visible en una pagina va en el
contenedor body del archivo HTML (en este caso el index).
Manos a la obra: En el archivo index, en el contenedor body y antes del <div id="menu"> crea otra capa (div),
con el nombre encabezado. debe de quedar de la siguiente forma:
<body>
<div="encabezado">
</div>
<div="menu">
</div>
</body>
</html>
Y ahora en la hoja de estilo le asignamos los atributos que queramos a la seccion (div) que sera el encabezado de la pagina. Aunque por el momento dejaras los que yo te indico puedes modificar al gusto y ver que sucede en su presentacion, esta es una buena forma para que te familiarices con las funciones de cada uno.
body {text-align:center; background-color:#D0FFFF}
#encabezado {border:black 1px solid; height:100px; width:800px;
margin:2px; background-color:black;}
#menu {border:black 1px solid; height:300px; width:800px;}
Ya viste que se agregaron nuevos atributos. El width determina el ancho del elemento para este
caso 800 px (800 pixeles); el margin se separa de los elementos que le redea (deja un margen), en este caso le diste 2px;
el background-color le asigna el color de fondo al elemento de acuerdo a las indicaciones debiste darle black (negro);
y por ultimo agregamos el atributo text-align, este atributo permite ubicar al elemento en una parte especifica dentro de su
contenedor, de acuerdo a las indicaciones debiste asignar valor center (centro).
Lo nuevo en esta leccion es la aparicion de algunos de los atributos mas usados en las etiquetas, estas adiciones empiezan
a darle forma y estructura a lo que sera en poco tiempo el index de tu sitio web.
Ya tienes el contenedor encabezado y un contenedor menu, a continuacion agregaremos otro div que llamaremos detalle, este
sera la seccion mas grande y contendra la informacion detallada del tema especifico.
| Anterior | Siguiente |
| Carpetas y Archivos | Menus |
