[Link] Soares Tacuchaba BTH.
Sistemas Iinformaticos 2025
ESTRUCTURA DE UNA WEB
HTML - CSS
CONCEPTOS BÁSICOS
HTML
(HyperText Markup Language) es un lenguaje para describir el contenido de los
documentos de la web. Utiliza una sintaxis especial que contiene marcadores (conocidos
como "etiquetas") que son instrucciones para dar formato a las diferentes partes de una
página web.
CSS
Es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos
del documento, como tamaño, color, fondo, bordes, etc…
ESTRUCTURA DEL CUERPO
La estructura del cuerpo (el código entre las etiquetas <body>) genera la parte visible del
documento.
ORGANIZACIÓN DE LA PAGINA WEB
La Figura 1-1 representa un diseño común encontrado en la mayoría de los sitios webs
estos días.
Figura 1-1. Representación visual de un clásico diseño web.
Cabecera
Se encuentra el espacio donde usualmente se ubica el logo, título, subtítulos y una corta
descripción del sitio web o la página.
Barra de Navegación
Es donde se ofrece un menú o lista de enlaces con el propósito de facilitar la navegación a
través del sitio. Los usuarios son guiados desde esta barra hacia las diferentes páginas o
documentos, normalmente pertenecientes al mismo sitio web.
Información Principal – Barra Lateral
El contenido más relevante de una página web se encuentra, en casi todo diseño, ubicado
en su centro. Esta sección presenta información y enlaces valiosos. La mayoría de las veces
es dividida en varias filas y columnas. En el ejemplo de la Figura 1-1 se utilizaron solo dos
columnas: pero esta sección es extremadamente flexible y normalmente diseñadores la
adaptan acorde a sus necesidades insertando más columnas, dividiendo cada columna
entre bloques más pequeños o generando diferentes distribuciones y combinaciones. El
contenido presentado en esta parte del diseño es usualmente de alta prioridad.
En el diseño de ejemplo contiene:
Información Principal podría contener una lista de artículos, descripción de productos,
entradas de un blog o cualquier otra información importante.
Barra Lateral podría mostrar una lista de enlaces apuntando hacia cada uno se esos
ítems. En un blog, por ejemplo, esta última columna ofrecerá una lista de enlaces
apuntando a cada entrada del blog, información acerca del autor, etc…
Institucional
Se nombra de esta manera porque esta es el área en donde normalmente se muestra
información acerca del sitio web, el autor o la empresa, además de algunos enlaces con
respecto a reglas, términos y condiciones y toda información adicional que el desarrollador
considere importante compartir. La barra Institucional es un complemento de la
Cabecera y es parte de lo que se considera estos días la estructura esencial de una página
web.
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y
declarar cada una de sus partes. A partir de ahora se puede decir al navegador para qué
es cada sección:
ETIQUETAS DE ESTRUCTURA
Figura 1-2. Representación visual de un diseño utilizando elementos HTML5.
La Figura 1-2 muestra el diseño presentado anteriormente, pero esta vez con los
correspondientes elementos HTML5 para cada sección (incluyendo etiquetas de apertura
y cierre).
<header></header>
El elemento <header> no debe ser confundido con <head> usado antes para construir la
cabecera del documento. Del mismo modo que <head>, la intención de <header> es
proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a
<head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer
información acerca de todo el documento, <header> es usado solo para el cuerpo o
secciones específicas dentro del cuerpo:
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
</body>
<nav></nav>
Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra
es generada en HTML5 con el elemento o etiqueta <nav>:
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
</body>
Como se puede apreciar en el código anterior, el elemento <nav> se encuentra dentro de
las etiquetas <body> pero es ubicado después de la etiqueta de cierre de la cabecera
(</header>), no dentro de las etiquetas <header>. Esto es porque <nav> no es parte de
la cabecera sino una nueva sección.
<section></section>
La columna Información Principal contiene la información más relevante del documento
y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o
columnas). Debido a que el propósito de estas columnas es más general, el elemento en
HTML5 que especifica estas secciones se llama simplemente <section>:
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
</body>
Al igual que la Barra de Navegación, la columna Información Principal es una sección
aparte. Por este motivo, la sección para Información Principal va debajo de la etiqueta de
cierre </nav>.
<aside></aside>
Esta es una columna o sección que normalmente contiene datos relacionados con la
información principal pero que no son relevantes o igual de importantes. Como así también
una Barra Lateral puede contener una lista de enlaces. La información dentro de esta
barra está relacionada con la información principal pero no es relevante por sí misma.
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
</body>
<footer></footer>
Para finalizar la construcción de la plantilla o estructura elemental de la Web, lo único
que queda por hacer es cerrar el diseño para otorgarle un final al cuerpo del documento.
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
OTRAS ETIQUETAS
Como apoyo para tener una estructura bien definida y organizada se puede hacer uso de
otras etiquetas como ser:
<article>
El elemento <article> fue creado con la intención de contener unidades independientes
de contenido, por lo que puede incluir mensajes de foros, artículos de una revista digital,
entradas de blog, comentarios de usuarios, etc… Lo que hace es agrupar porciones de
información que están relacionadas entre sí independientemente de su naturaleza.
Las etiquetas <article> se encuentran ubicadas dentro del elemento <section>.
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
Representación visual de las etiquetas <article> que fueron incluidas
para contener información relevante de la página web.
Como una parte independiente del documento, el contenido de cada elemento <article>
tendrá su propia estructura. Para definir esta estructura, se aprovecha la versatilidad de
los elementos <header> y <footer>. Estos elementos son portables y pueden ser usados
no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro
documento:
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Título del mensaje uno</h1>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<h1>Titulo del mensaje dos</h1>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
Los dos mensajes insertados en el código anterior fueron construidos con el elemento
<article> y tienen una estructura específica. En la parte superior de esta estructura
incluimos las etiquetas <header> conteniendo el título definido con el elemento <h1>,
debajo se encuentra el contenido mismo del mensaje y sobre el final, luego del texto, vienen
las etiquetas <footer> especificando la cantidad de comentarios recibidos.
<figure> y <figcaption>
La etiqueta <figure> fue creada para ayudar a ser aún más específicos a la hora de
declarar el contenido del documento como ilustraciones, fotos, videos, etc… Normalmente
estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a
otra parte sin afectar o interrumpir el flujo del documento. Cuando se encuentra con esta
clase de información, las etiquetas <figure> pueden ser usadas para identificarla.
<article>
<header>
<h1>Título del mensaje uno</h1>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src=”[Link]”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
RESUMEN
En la especificación HTML5, HTML está a cargo de la estructura del documento y provee
un grupo completo de nuevos elementos para este propósito. La especificación también
incluye algunos elementos con la única tarea de proveer estilos. Esta es una lista de los
que consideramos más relevantes:
<header> Este elemento presenta información introductoria y puede ser aplicado en
diferentes secciones del documento. Tiene el propósito de contener la cabecera de una
sección pero también puede ser utilizado para agrupar índices, formularios de
búsqueda, logos, etc…
<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como
menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro
de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.
<section> Este elemento representa una sección general del documento. Es
usualmente utilizado para construir varios bloques de contenido (por ejemplo,
columnas) con el propósito de ordenar el contenido que comparte una característica
específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…
<aside> Este elemento representa contenido que está relacionado con el contenido
principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras
laterales, publicidad, etc…
<footer> Este elemento representa información adicional sobre su elemento padre. Por
ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información
adicional sobre el cuerpo del documento, como el pie normal de una página web.
Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro
del cuerpo, otorgando información adicional sobre estas secciones específicas.
<article> Este elemento representa una porción independiente de información
relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El
elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra
lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por
ejemplo.
<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene
múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
<figure> Este elemento representa una porción independiente de contenido (por
ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido
principal. Esta es información que puede ser removida sin afectar el fluido del resto del
contenido.
<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto
relacionado con el contenido de un elemento <figure>, como la descripción de una
imagen.
<mark> Este elemento resalta un texto que tiene relevancia en una situación en
particular o que ha sido mostrado en respuesta de la actividad del usuario.
<small> Este elemento representa contenido al margen, como letra pequeña (por
ejemplo, descargos, restricciones legales, declaración de derechos, etc…).
<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película,
poema, etc…).
<address> Este elemento encierra información de contacto para un elemento <article>
o el documento completo. Es recomendable que sea insertado dentro de un elemento
<footer>.
<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles
por los usuarios y el navegador. El valor para los usuarios es ubicado entre las
etiquetas mientras que el específico para programas y navegadores es incluido como el
valor del atributo datetime.