Crea tu sitio web con HTML
Introducción
Una vez completado el tema 1 sobre creación de páginas web simples con
HTML.
Ahora vamos a poner en práctica todo lo aprendido mediante la creación de un
sitio web completo.
Este proyecto te permitirá demostrar tu comprensión de la estructura del
lenguaje, las etiquetas más importantes y la organización semántica de un
documento HTML.
El objetivo es diseñar un sitio web compuesto por varias páginas enlazadas
entre sí.
Cada página debe estar correctamente estructurada, utilizar etiquetas
semánticas y mostrar contenido relevante.
El trabajo se realizará usando únicamente HTML (sin CSS ni JavaScript, aún).
Objetivo del ejercicio
Desarrollar un sitio web funcional, formado por varias páginas conectadas entre
sí, utilizando correctamente los elementos semánticos, de contenido,
enlaces, imágenes, listas, tablas y formularios.
Estructura general del sitio
Tu sitio web deberá tener al menos tres páginas enlazadas entre sí:
1. [Link] → Página principal de presentación del sitio.
2. [Link] → Página con texto, listas e imágenes.
3. [Link] → Página con formulario de contacto.
(Si lo deseas, puedes añadir una cuarta página, como “galerí[Link]” o
“[Link]”).
Todas las páginas deben compartir el mismo menú de navegación y una
estructura similar, siguiendo el mismo esquema general.
Estructura base obligatoria
Cada documento HTML debe incluir:
• La declaración de tipo: <!DOCTYPE html>
• Las etiquetas <html lang="es">, <head> y <body> correctamente
anidadas.
• En el <head>:
o <meta charset="utf-8">
o <meta name="description"> y <meta name="keywords">
o <title> con un título diferente en cada página.
o <link rel="icon"> para incluir un favicon.
• En el <body>:
o Estructura semántica completa: <header>, <nav>, <main>,
<section>, <article>, <aside>, y <footer>.
o Atributos id y class correctamente utilizados para identificar y
agrupar elementos.
o Comentarios HTML <!-- ... --> en al menos dos puntos del código.
Contenido mínimo por página
1. [Link] — Página principal
Debe ser una introducción al sitio.
Incluye al menos los siguientes elementos:
• <header> con el título principal (<h1>) y un subtítulo (<h2> o <p>).
• <nav> con enlaces a todas las páginas del sitio (usa rutas relativas).
• <main> con al menos dos secciones:
o Una con texto y párrafos estructurados con <p>.
o Otra con artículos <article> que incluyan subtítulos (<h3>), citas
(<blockquote>) o fragmentos destacados con <em> y <strong>.
• Una imagen (<img>) con los atributos src, alt y width, dentro de un
<figure> con <figcaption>.
• Un enlace interno (<a href="#top">Volver arriba</a>) y uno externo con
target="_blank".
• Un <footer> con <address>, año actual y símbolo de copyright ©.
2. [Link] — Página de contenidos
Presenta información más detallada mediante listas, tablas e imágenes.
Debe contener:
• Al menos un título (<h1>) y subtítulos (<h2>, <h3>).
• Una o más listas:
o Lista sin orden (<ul>) con varios elementos.
o Lista ordenada (<ol>) con numeración personalizada usando type
o start.
o Lista de definiciones (<dl>, <dt>, <dd>) con al menos tres pares
término–definición.
• Una tabla de datos:
o Encabezados con <th> y varias filas <tr>.
o Atributos colspan y/o rowspan.
o Título opcional con <caption>.
• Imágenes complementarias dentro de <figure> con sus pies <figcaption>.
• Texto con formato variado: <em>, <strong>, <i>, <u>, <mark>, <small>,
<cite>, <time> y <code> (usando este último para mostrar un pequeño
fragmento de código).
• Un <aside> con contenido adicional o informativo (por ejemplo, enlaces
relacionados o citas laterales).
3. [Link] — Página de formulario
Debe incluir un formulario de contacto funcional.
• Estructura básica:
<form name="contacto" method="get" action="[Link]">
• Campos obligatorios:
o Nombre (<input type="text">)
o Correo electrónico (<input type="email">)
o Teléfono (<input type="tel">)
o Asunto o motivo (<select> con varias opciones)
o Mensaje (<textarea>)
• Botones:
o Enviar (<button type="submit">Enviar</button>)
o Borrar (<button type="reset">Limpiar</button>)
• Incluir etiquetas <label for="..."> correctamente asociadas a cada campo.
• Añadir un enlace para volver al inicio de la página.
Navegación entre páginas
• Todos los documentos deben tener el mismo bloque <nav> con enlaces
relativos (href="[Link]").
• Añade un enlace externo a una web real con target="_blank".
• Incluye al menos un enlace interno que use un identificador (href="#id").
• Puedes incluir un enlace de tipo correo ([Link] o teléfono ([Link]
Uso de atributos globales
Demuestra el uso de algunos atributos globales en tu sitio:
• id → para identificar elementos únicos.
• class → para agrupar elementos con una función similar.
• translate="no" → para impedir la traducción de ciertos términos.
• contenteditable → en un párrafo o <span> editable por el usuario.
Criterios de evaluación
Se evaluará:
• Uso correcto y completo de todas las etiquetas HTML5 explicadas en el
tema.
• Organización semántica y coherente del documento.
• Inclusión y funcionamiento de:
o Estructura general (header, nav, main, section, article, aside,
footer).
o Enlaces, listas, tablas, imágenes y formulario.
• Funcionamiento correcto de la navegación interna y externa.
• Uso adecuado de atributos globales e identificación de elementos.
• Claridad, indentación y legibilidad del código.