Diseño Web: Estructuras de Sitios y Fundamentos de HTML

Escrito el 28 de Mayo de 2025 en español con un tamaño de 4,56 KB

Introducción a las Estructuras Web y HTML

I. Estructuras de Sitios Web

En el diseño web, la organización del contenido es fundamental para la experiencia del usuario. Las estructuras básicas que podemos observar en cualquier sitio web son de los siguientes tipos:

1. Estructura en Árbol (Jerárquica)

En esta estructura, existe una página principal (la home page, en terminología inglesa) desde la que se puede acceder a otras páginas del sitio web. Las páginas se agrupan en niveles, de manera que para llegar desde el primero al último se deben atravesar los intermedios. Es una estructura muy jerarquizada y, si no se gestiona bien, puede ser difícil de navegar. Puede ser ideal para estructurar un sitio en grupos de páginas independientes. En cualquier caso, no conviene que el número de niveles sea excesivo, nunca más de tres.

2. Estructura Lineal (Listas)

No existe una página principal definida. Lo que se tiene es una especie de lista de páginas donde cada una tiene dos páginas vecinas: una a la izquierda y otra a la derecha (excepto las páginas de los extremos). Esta forma de organizar un sitio es muy parecida a un libro, donde cada página sería un capítulo. Se pasa del primer al último capítulo a través de los intermedios. Es una estructura muy adecuada para manuales o para procesos donde el usuario deba recorrer forzosamente una serie de páginas en un orden específico.

3. Estructura Mixta

Las páginas están jerarquizadas en niveles, pero dentro de cada nivel se organizan como listas. De esta forma, se pueden recorrer todas las páginas de un mismo nivel sin tener que salir de él.

4. Estructura en Red (Malla)

Desde cada página se puede ir a cualquier otra del sitio. Es una estructura en la que hay que cuidar mucho de no dejar enlaces abiertos o rotos, ya que la interconexión es muy alta.

II. Elección de la Estructura del Sitio Web

Lo normal es que nuestro sitio web sea una mezcla de las estructuras anteriores, adaptándose a las necesidades específicas del contenido y del usuario. En todo caso, es crucial seguir la siguiente regla: procurar que un visitante nunca tenga que hacer clic más de cuatro veces para llegar a las páginas deseadas.

III. El Documento HTML

El HTML, o Lenguaje de Marcas de Hipertexto, es un derivado de SGML (Standard Generalized Markup Language), un lenguaje utilizado para describir documentos.

¿Y esto qué significa? La estructura de las páginas web se describe en la propia página mediante una serie de etiquetas que le indican al navegador cómo debe mostrar el documento (la página web): cuándo debe cambiar de párrafo, cuándo debe mostrar el texto en negrita o en color, cuándo mostrar una imagen, cuándo un enlace a otro documento, etc. El HTML es el lenguaje que define qué etiquetas se pueden usar en una página y cómo se utilizan.

Estructura Básica de un Documento HTML

Una página HTML siempre debe empezar por la etiqueta <html> y terminar con </html>. Las etiquetas le indican al navegador cómo mostrar el contenido: en grande, con colores, centrado, el título de la página, etc.

Un documento HTML está compuesto por dos partes principales:

El encabezado (<head>): Situado entre las etiquetas <head> y </head>, contiene información que no aparece directamente en la página, como el título del documento (<title>) o las etiquetas utilizadas para la indexación del sitio (metadatos).
El cuerpo (<body>): Delimitado por las etiquetas <body> y </body>, contiene todo el contenido visible en pantalla.

Ejemplo de Estructura HTML

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <p>Este es un párrafo de ejemplo.</p>
    <p>Aquí va el contenido visible de la página.</p>
</body>
</html>

Nota: Este documento ha sido adaptado de materiales educativos del I.E.S. CARLOS HAYA, Aula de Informática (páginas 3 y 4).

Entradas relacionadas:

Etiquetas: