Maquetar o estructurar una página Web
consiste en organizar su contenido para que cada elemento aparezca en el lugar
y con el formato que queramos.
El formato (los estilos) los dejamos
para CSS y la estructura la organizamos en HTML.
Lo habitual es crear una hoja denominada
“plantilla.html” con la estructura
deseada y otra con los estilos “plantilla.css”,
para que sirvan de base al desarrollo de todas las páginas posteriores.
HTML
Estructura.
¿Que
elementos básicos suele contener una página Web?.Generalmente, tienen:
Una cabecera
En la que aparecerá un logotipo
y un título o lema.
Un menú de navegación
Para acceder fácilmente a
cualquier página del sitio Web.
Un cuerpo principal
Donde aparecerá el contenido de
la página.
Un pie
En el que se colocarán
referencias del autor, copiright, etc.Opcionalmente podrán incluir:
Una zona de anuncios
Para avisos sobre temas
relacionados.
Una zona de enlaces
En la que se muestran Webs
recomendadas. etc, etc.La siguiente figura muestra un posible diseño.
La
zona denominada “Global” contiene a todas las divisiones y a su vez, está
contenida en el “body” de la página
Vamos
a ver como conseguimos esta estructura utilizando la etiqueta “div”
Código
HTML:
<body>
<div id="global">
<div id="cabecera">
Contenido de la cabecera.
</div>
<div id="navegacion">
Contenido de menú de navegación.
</div>
<div id="principal">
Contenido de la página.
</div>
<div class="anuncios1">
Contenido de la zona de anuncios 1, ya que podemos poner más.
</div>
<div id="pie">
Contenido del pie
</div>
</div>
</body>
Ten esto en cuenta. Si el bloque es
único para la página, lo que ocurre con: global, cabecera, navegación,
principal y pie, la etiqueta “div” va acompañada de la palabra clave “id”. En
caso contrario, deberá incorporar la palabra clave “class”. Esto lo veremos
cuando demos formato en CSS.
Por supuesto, dentro de cada bloque
podrás crear cuantas divisiones necesites utilizando de nuevo <div …>
</div> dentro del bloque correspondiente.
0 comentarios:
Publicar un comentario