// Módulo 01 — Fundamentos Web

<HTML/>
El Lenguaje
que Construyó
la Web

De Tim Berners-Lee en 1991 a HTML5 hoy — entiende el cimiento de todo lo que ves en internet.

AP
Instructor
Alexander Patiño Londoño
Scroll
01 — Definición

¿Qué es
HTML?

HTML significa HyperText Markup Language — Lenguaje de Marcado de Hipertexto. Es el lenguaje estándar que utilizamos para crear y estructurar el contenido de las páginas web.

No es un lenguaje de programación: no tiene variables, ni bucles, ni lógica. Es un lenguaje de marcado que utiliza etiquetas para describir el significado y la estructura del contenido.

HyperText → texto que contiene enlaces a otros textos o recursos

Markup → anotar o "marcar" el contenido con etiquetas que describen qué es cada parte

Language → un sistema con reglas y sintaxis definida

El navegador (Chrome, Firefox, Safari) lee el HTML y lo interpreta visualmente, mostrando al usuario el contenido ya formateado, sin que vea el código fuente.

HTML trabaja junto a CSS (estilo visual) y JavaScript (comportamiento interactivo) para construir la experiencia web completa.

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi Primera Página</title>
  </head>
  <body>
    <!-- Contenido visible -->
    <h1>¡Hola Mundo!</h1>
    <p>Este es mi primer párrafo.</p>
    <a href="#">Un enlace</a>
  </body>
</html>
02 — Historia

Origen &
Evolución

Desde un documento científico en el CERN hasta el estándar mundial que sustenta miles de millones de páginas. Esta es la historia de HTML.

1989 — 1991
El nacimiento: Tim Berners-Lee

En el laboratorio CERN de Ginebra, el científico británico Tim Berners-Lee propuso un sistema de gestión de información. En 1991 publicó el primer documento HTML con apenas 18 etiquetas. Quería que los investigadores compartieran documentos fácilmente a través de una red.

1993
HTML 1.0 y el primer navegador gráfico

Mosaic, el primer navegador que podía mostrar imágenes dentro del texto, fue lanzado por Marc Andreessen. HTML comenzó a incluir la etiqueta <img>. La web pasó de texto a multimedia.

1995
HTML 2.0 — La primera estandarización

El IETF publicó HTML 2.0, la primera especificación formal. Se incorporaron formularios (<form>, <input>) permitiendo por primera vez la interacción del usuario con las páginas web.

1997 — 1999
HTML 3.2 y 4.0 — El W3C toma el control

El W3C (World Wide Web Consortium) fundado por Berners-Lee asumió la estandarización. HTML 4.01 separó la presentación visual del contenido semántico, promoviendo el uso de CSS para los estilos.

2000 — 2007
XHTML — El intento más estricto

El W3C apostó por XHTML, una versión de HTML con las reglas estrictas del XML. Requería cerrar todas las etiquetas, usar minúsculas y citar todos los atributos. La rigidez fue su perdición.

2004 — 2014
HTML5 — La revolución moderna

El WHATWG (formado por Apple, Mozilla y Opera) comenzó a trabajar en HTML5 fuera del W3C. En 2014 fue adoptado oficialmente. Trajo <video>, <audio>, <canvas>, APIs de geolocalización, almacenamiento local y etiquetas semánticas.

2019 — Hoy
HTML Living Standard

WHATWG y W3C acordaron mantener una única especificación viva: el "Living Standard". HTML ya no tiene versiones numeradas fijas, se actualiza continuamente. Es el estándar que todos los navegadores modernos implementan hoy.

03 — Versiones

Las Versiones
de HTML

Cada versión incorporó nuevas etiquetas y capacidades, respondiendo a las necesidades de una web en constante evolución.

Origen
1.0
1991 — 1993

18 etiquetas básicas. Solo texto con hipervínculos. Creado por Tim Berners-Lee para compartir documentos científicos.

Estándar IETF
2.0
1995

Primera especificación oficial. Incluyó formularios y permitió la interactividad básica del usuario.

W3C
3.2
1997

Añadió tablas, applets Java y elementos de presentación visual. El W3C asume la estandarización.

Separación CSS
4.01
1999

Impulsó la separación entre contenido y presentación. Tres variantes: Strict, Transitional y Frameset.

XML Strict
XHTML
2000 — 2007

HTML reformulado como XML. Más estricto pero difícil de adoptar. Eventualmente reemplazado por HTML5.

Actual
HTML5
2014 — Hoy

Semántica, multimedia nativa (video, audio), APIs web potentes, Canvas para gráficos, y el estándar "living" que continúa evolucionando.

04 — Etiquetas

Etiquetas
Esenciales de HTML

Las etiquetas son los bloques de construcción del HTML. Cada etiqueta tiene un propósito semántico — le dice al navegador qué tipo de contenido es, no cómo se ve.

🔬 Anatomía de una etiqueta HTML
<p class="intro">Mi párrafo</p>
Etiqueta
apertura
Nombre
de la etiqueta
Atributo
Valor del
atributo
Contenido
Etiqueta
cierre
✅ La mayoría tienen apertura <tag> y cierre </tag>
✅ Algunas son autocerrables (vacías): <img>, <br>, <meta>, <input>
✅ Se pueden anidar: una etiqueta puede contener otras etiquetas
⚠️ Siempre en minúsculas. El orden de cierre importa: el último en abrir, el primero en cerrar
📑
Encabezados — Jerarquía de títulos
HTML tiene 6 niveles de encabezado. <h1> es el más importante (solo uno por página). Los motores de búsqueda los usan para entender la estructura del contenido.
<h1>Título Principal</h1>
<h2>Subtítulo de sección</h2>
<h3>Sub-subtítulo</h3>
<h4>Nivel 4</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>
Vista en navegador

Título Principal

Subtítulo de sección

Sub-subtítulo

Nivel 4

Nivel 5
Nivel 6
📝
Texto y formato en línea
Etiquetas que dan significado semántico al texto: <strong> indica importancia (negrita), <em> indica énfasis (cursiva). Nunca uses estas etiquetas solo por el estilo visual.
<p>Un párrafo normal de texto.</p>

<p>Texto con <strong>importancia</strong> aquí.</p>

<p>Texto con <em>énfasis</em> así.</p>

<p>Línea uno.<br>Línea dos.</p>

<hr> <!-- línea divisoria -->
Vista en navegador

Un párrafo normal de texto.

Texto con importancia aquí.

Texto con énfasis así.

Línea uno.
Línea dos.

📋
Listas — ordenadas y desordenadas
<ul> (unordered list) para ítems sin orden específico. <ol> (ordered list) para secuencias numeradas. Cada ítem siempre va en <li>. Las listas se pueden anidar.
<!-- Lista desordenada (puntos) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Lista ordenada (números) -->
<ol>
  <li>Instalar VS Code</li>
  <li>Crear archivo .html</li>
  <li>Abrir en navegador</li>
</ol>
Vista en navegador
  • HTML
  • CSS
  • JavaScript
  1. Instalar VS Code
  2. Crear archivo .html
  3. Abrir en navegador
🔗
Enlaces e Imágenes
El enlace <a> (anchor) es la esencia del "HyperText". La imagen <img> es autocerrable y siempre requiere el atributo alt para accesibilidad.
<!-- Enlace externo -->
<a href="https://google.com"
   target="_blank">
  Ir a Google
</a>

<!-- Enlace interno (ancla) -->
<a href="#contacto">Contacto</a>

<!-- Enlace de email -->
<a href="mailto:[email protected]">
  Escríbenos
</a>

<!-- Imagen -->
<img
  src="foto.jpg"
  alt="Descripción de la imagen"
  width="300"
  height="200">
Vista en navegador

Ir a Google (abre pestaña nueva)

Contacto (ancla interna)

Escríbenos (abre email)

[ imagen: foto.jpg ]
300 × 200 px
href="#seccion" Ancla interna — salta a un elemento con ese id en la misma página
href="pagina.html" Enlace a otra página del mismo sitio (ruta relativa)
href="https://..." Enlace a un sitio externo (ruta absoluta)
target="_blank" Abre el enlace en una pestaña nueva del navegador
📅
Próximas clases — estos temas se verán más adelante
📬 Formularios — <form> <input> <textarea> <button> 📦 Contenedores — <div> <span> 📊 Tablas — <table> <tr> <td> <th> 🎬 Multimedia — <video> <audio> <iframe> 🎨 CSS — estilos, colores, tipografía y layout
05 — Estructura

Anatomía de un
Documento HTML

Todo archivo HTML bien formado sigue una estructura base. Cada parte tiene un propósito específico.

<!-- 1. Declaración DOCTYPE -->
<!DOCTYPE html>

<!-- 2. Elemento raíz -->
<html lang="es">

  <!-- 3. Cabecera (no visible) -->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
         content="width=device-width">
    <title>Título de la Página</title>
  </head>

  <!-- 4. Cuerpo (contenido visible) -->
  <body>

    <header>
      <h1>Encabezado Principal</h1>
    </header>

    <main>
      <p>Contenido principal...</p>
    </main>

    <footer>
      <p>© 2025 Mi Sitio</p>
    </footer>

  </body>
</html>
<!DOCTYPE>

Declaración de tipo

No es una etiqueta HTML. Le indica al navegador que el documento usa HTML5. Siempre va en la primera línea.

<html>

Elemento raíz

Contiene todo el documento. El atributo lang especifica el idioma para navegadores y lectores de pantalla.

<head>

Cabecera del documento

Información sobre la página: codificación, título (pestaña del navegador), metadatos, enlaces a CSS. El usuario no lo ve directamente.

<meta charset>

Codificación de caracteres

charset="UTF-8" le dice al navegador qué sistema usar para interpretar el texto. Sin esto, las tildes (á, é) y la ñ se verían como caracteres extraños (�).

<meta viewport>

Viewport — Control del área visible

width=device-width adapta el ancho al dispositivo. initial-scale=1.0 evita el zoom automático en móviles.

<title>

Título

Aparece en la pestaña del navegador y en los resultados de búsqueda. Importante para SEO.

<body>

Cuerpo del documento

Todo lo que el usuario ve en el navegador: textos, imágenes, videos, formularios, enlaces, etc.

<header> <main> <footer>

Etiquetas semánticas HTML5

Describen el propósito de cada sección. Mejoran la accesibilidad y el SEO frente al uso genérico de <div>.

📱

Zoom in: ¿Qué hace exactamente el <meta name="viewport">?

Esta línea pequeña tiene un impacto enorme. Sin ella, tu página se verá rota en cualquier celular.

El problema que resuelve

Cuando los primeros smartphones llegaron al mercado, los sitios web estaban diseñados solo para pantallas de escritorio de ~960px de ancho. Los teléfonos resolvieron esto de manera ingeniosa pero torpe: fingían tener 980px de ancho, renderizaban toda la página en miniatura y luego la mostraban al usuario muy pequeña, obligándolo a hacer zoom para leer.

El viewport meta tag le da control al desarrollador sobre ese comportamiento.

❌ Sin viewport
<!-- No hay meta viewport -->

El navegador móvil asume 980px de ancho. La página aparece reducida al 30% de su tamaño. El texto es ilegible sin hacer zoom.

✅ Con viewport
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">

El navegador usa el ancho real del dispositivo (ej. 390px en iPhone). La página se muestra a tamaño natural y es legible de inmediato.

Anatomía del atributo content

El valor del atributo content acepta varias propiedades separadas por comas:

width=device-width
Establece el ancho del viewport igual al ancho físico de la pantalla del dispositivo. En un iPhone 14 esto serían 390px; en un Galaxy S23, 360px. Sin esta propiedad el navegador usaría 980px en todos los casos.
initial-scale=1.0
Controla el nivel de zoom inicial cuando se carga la página. El valor 1.0 significa "sin zoom" (100%). Un valor de 2.0 cargaría la página al 200% de zoom. Siempre se usa 1.0 para que la página se vea normal al entrar.
maximum-scale=1.0 ⚠ No recomendado
Deshabilita el zoom del usuario. Aunque algunas apps lo usan, es una mala práctica de accesibilidad: las personas con baja visión necesitan poder hacer zoom.
💡
Analogía: Imagina que tu página web es un cartel de 1 metro de ancho. Sin viewport, el celular lo reduce a una foto miniatura de ese cartel. Con width=device-width recortas el cartel al ancho de tu pantalla, mostrando solo esa porción a tamaño real.
// REGLA DE ORO

Incluye siempre <meta name="viewport" content="width=device-width, initial-scale=1.0"> en el <head> de todos tus documentos HTML. Es la primera línea de defensa para que tu sitio se vea bien en móviles, sin necesitar CSS.

06 — Entorno Local

XAMPP, WAMP
& LAMP

Antes de publicar un sitio en internet necesitas un servidor local en tu computador para probar tu trabajo. Estas tres herramientas hacen exactamente eso.

¿Por qué necesito un servidor local? Los archivos HTML simples los puedes abrir directo en el navegador, pero en cuanto uses PHP, bases de datos, formularios reales o rutas dinámicas, el navegador solo no es suficiente. Un servidor local simula en tu máquina el mismo entorno que tendría un hosting real en internet.
X
XAMPP
🪟 Windows  ·  🍎 macOS  ·  🐧 Linux

La opción más popular y recomendada para aprendices. X (cross-platform = multiplataforma), Apache, MariaDB, PHP y Perl. Funciona igual en Windows, macOS y Linux. Instala todo en un solo paquete con un panel de control visual para iniciar y detener servicios.

Apache MariaDB PHP Perl Multiplataforma
⬇ Descargar XAMPP apachefriends.org
W
WAMP
🪟 Solo Windows

Windows + Apache + MySQL + PHP. Diseñado exclusivamente para Windows. Ofrece un ícono en la bandeja del sistema para gestionar los servicios y permite cambiar fácilmente entre versiones de PHP. Muy usada en ambientes de desarrollo Windows corporativos.

Apache MySQL PHP Solo Windows
⬇ Descargar WampServer wampserver.com
L
LAMP
🐧 Solo Linux

Linux + Apache + MySQL + PHP. A diferencia de XAMPP y WAMP, LAMP no es un instalador: es la combinación de herramientas que se instalan directamente vía terminal en distribuciones Linux (Ubuntu, Debian). Es el estándar real de producción en servidores web del mundo.

Linux Apache MySQL PHP Terminal
📖 Ver guía de instalación ubuntu.com/docs
Comparativa rápida
Característica XAMPP WAMP LAMP
Sistema operativoWin / Mac / LinuxSolo WindowsSolo Linux
InstalaciónInstalador gráficoInstalador gráficoTerminal (apt/yum)
Panel de control✅ Sí✅ Sí❌ Terminal
Recomendado paraPrincipiantesUsuarios WindowsProducción / Linux
Incluye phpMyAdmin✅ Sí✅ SíInstalación manual

Estructura de carpetas
básica de un sitio web

Así debe organizarse un proyecto web desde el primer día. Una buena estructura facilita el trabajo en equipo, el mantenimiento y el crecimiento del sitio.

📁 mi-proyecto/ ← Carpeta raíz del proyecto
│
├── 📄 index.html ← Página principal (HOME)
├── 📄 about.html ← Página "Acerca de"
├── 📄 contact.html ← Página de contacto
│
├── 📁 css/ ← Todos los estilos
│   ├── 📄 style.css ← Estilos globales
│   └── 📄 responsive.css
│
├── 📁 js/ ← Scripts JavaScript
│   └── 📄 main.js
│
├── 📁 img/ ← Imágenes del sitio
│   ├── 🖼 logo.png
│   └── 🖼 banner.jpg
│
└── 📁 fonts/ ← Tipografías locales
🏠

index.html — La puerta de entrada

Cuando el servidor recibe una visita sin especificar archivo (ej. www.misitio.com), automáticamente busca y sirve index.html. Siempre debe existir este archivo en la raíz del proyecto. Es una convención universal de todos los servidores web.

📂

Separar por tipo de recurso

Nunca mezcles HTML, CSS, imágenes y scripts en la misma carpeta. La organización por tipo (css/, js/, img/) hace el proyecto mantenible. Con el tiempo añadirás carpetas como php/, data/ o components/.

✍️

Convención de nombres

Usa siempre minúsculas, sin espacios (usa guión medio -) y sin tildes ni ñ. Los servidores Linux distinguen mayúsculas (Foto.jpg ≠ foto.jpg). Un archivo llamado Mi Foto.JPG puede funcionar en Windows pero romper en producción.

📍 ¿Dónde guardar el proyecto según tu entorno?
XAMPP C:\xampp\htdocs\mi-proyecto\ → Acceder en localhost/mi-proyecto
WAMP C:\wamp64\www\mi-proyecto\ → Acceder en localhost/mi-proyecto
LAMP /var/www/html/mi-proyecto/ → Acceder en localhost/mi-proyecto
Solo HTML Cualquier carpeta del sistema → Abrir index.html directamente en el navegador
07 — Nomenclatura y Estructura

Cómo nombrar
carpetas y archivos

Un nombre de archivo mal puesto puede hacer que tu página deje de funcionar al publicarla. Estas reglas no son opcionales: son el estándar profesional que todo desarrollador debe dominar desde el primer día.

💥

El problema real

Windows no diferencia mayúsculas de minúsculas (Foto.jpg = foto.jpg). Pero Linux, que es el 96% de los servidores web del mundo, SÍ diferencia. Un archivo que abre perfectamente en tu computador con Windows puede dar error 404 al publicarlo en producción.

🚫

Los espacios rompen las URLs

Un espacio en un nombre de archivo se convierte en %20 en la URL. Mi Foto.jpg se vuelve Mi%20Foto.jpg. Además puede causar errores al referenciar el archivo en HTML o CSS. Los espacios en nombres de archivos web están prohibidos por convención.

🔍

Impacto en SEO

Los motores de búsqueda como Google leen las URLs. Un archivo llamado servicios-desarrollo-web.html es mucho más descriptivo y posiciona mejor que pagina2.html o PaginaServiciosWeb.html.

Reglas de nomenclatura

Las 5 reglas que nunca debes romper

01

Siempre en minúsculas

Todo nombre de archivo y carpeta debe estar en minúsculas, sin excepción. Esto garantiza compatibilidad entre Windows, macOS y servidores Linux.

✗ IncorrectoMiPagina.htmlFotos/StyleSheet.css
✓ Correctomi-pagina.htmlfotos/stylesheet.css
02

Usa guión medio en lugar de espacios

El guión medio - es el separador estándar para nombres compuestos en la web. Google lo reconoce como separador de palabras, lo que es bueno para el SEO. El guión bajo _ se usa en algunos contextos como Python, pero en URLs el guión medio es preferido.

✗ Incorrectomis fotos.htmlsobre mi.htmlcontacto empresa.css
✓ Correctomis-fotos.htmlsobre-mi.htmlcontacto-empresa.css
03

Sin tildes, ñ ni caracteres especiales

Los caracteres especiales como á é í ó ú ñ ü ¿ ¡ @ # $ % & ( ) pueden causar errores de codificación en servidores o navegadores que no soporten UTF-8 en las URLs. Escribe siempre usando solo letras del alfabeto inglés básico.

✗ Incorrectoinformación.htmlniños.jpgdiseño/
✓ Correctoinformacion.htmlninos.jpgdiseno/
04

Nombres descriptivos y cortos

El nombre debe describir el contenido del archivo en 2–4 palabras. Ni tan genérico (pagina1.html) que no diga nada, ni tan largo (pagina-de-servicios-de-desarrollo-web-de-la-empresa.html) que sea difícil de manejar. El nombre ideal es claro, conciso y único dentro del proyecto.

✗ Incorrectopagina2.htmlimg1.jpgnuevo.css
✓ Correctoservicios.htmllogo-empresa.jpgestilos.css
05

La página principal siempre se llama index.html

Esta es una convención que todos los servidores web (Apache, Nginx, IIS) conocen: cuando alguien visita www.misitio.com sin especificar un archivo, el servidor busca automáticamente index.html (o index.php) en esa carpeta. Si no existe, el servidor puede mostrar un error o el listado de archivos.

Regla extendida: Cada subcarpeta que tenga su propia página también debe tener su index.html. Así misitio.com/blog/ cargará blog/index.html automáticamente.
Estructura de carpetas

Estructura general recomendada

Aquí verás tres niveles de complejidad. Todo proyecto empieza en el nivel básico y crece según sus necesidades.

Nivel 1
Proyecto básico
HTML + imágenes. Para ejercicios y primeras páginas.
📁 mi-sitio/
├── 📄 index.html ← página principal
├── 📄 about.html
└── 📁 img/
   ├── 🖼 logo.png
   └── 🖼 banner.jpg
Nivel 2
Proyecto intermedio
HTML + CSS + JS. Para sitios de varias páginas.
📁 mi-sitio/
├── 📄 index.html
├── 📄 servicios.html
├── 📄 contacto.html
├── 📁 css/
   ├── 📄 estilos.css
   └── 📄 responsive.css
├── 📁 js/
   └── 📄 main.js
└── 📁 img/
   ├── 🖼 logo.svg
   ├── 📁 iconos/
   └── 📁 galeria/
Nivel 3
Proyecto completo
Sitio profesional con PHP, tipografías y assets organizados.
📁 mi-sitio/
├── 📄 index.html
├── 📁 pages/ ← páginas internas
   ├── 📄 sobre-nosotros.html
   └── 📄 contacto.html
├── 📁 assets/ ← todos los recursos
   ├── 📁 css/
   ├── 📁 js/
   ├── 📁 img/
   └── 📁 fonts/
├── 📁 includes/ ← fragmentos PHP
   ├── 📄 header.php
   └── 📄 footer.php
└── 📄 README.md ← documentación

Extensiones de archivo más usadas en la web

Extensión Tipo de archivo Para qué se usa Ejemplo
.htmlDocumento HTMLPáginas web, contenido estructuradocontacto.html
.cssHoja de estilosDiseño visual y layoutestilos.css
.jsJavaScriptInteractividad y comportamientomain.js
.jpg / .jpegImagenFotos, imágenes con gradientesfoto-perfil.jpg
.pngImagenLogos, imágenes con transparencialogo.png
.svgImagen vectorialÍconos, logos escalables sin pérdidaicono-menu.svg
.webpImagen modernaImágenes optimizadas para web (más rápidas)banner.webp
.phpScript PHPPáginas dinámicas con lógica de servidorprocesar-form.php
.mdMarkdownDocumentación, README de proyectosREADME.md
.jsonJSONDatos estructurados, configuracionesconfig.json
.ttf / .woff2TipografíaFuentes web localesroboto.woff2
.icoÍconoFavicon del navegador (pestaña)favicon.ico
📌 Cheatsheet — Nomenclatura correcta de un vistazo
✅ Haz esto
index.html sobre-mi.html galeria-fotos/ logo-empresa.svg estilos-base.css banner-principal.webp script-slider.js
✗ Nunca hagas esto
Index.HTML Sobre Mi.html Galería Fotos/ Logo-Empresa.SVG Estilos Base.CSS Bañer Principal.webp Script Slider.JS
⚠ Por qué importa
Sin mayúsculas → Linux ≠ Windows Sin espacios → rompe URLs Sin tildes → error en servidor Extensión minúscula → estándar web Guión medio → legible y SEO Sin ñ/ü → encoding seguro Descriptivo → mantenible
08 — Práctica

Ejercicio
Práctico

Aplica exactamente lo que acabas de aprender. Este ejercicio usa únicamente las etiquetas explicadas en esta página.

🏷️ Etiquetas permitidas en este ejercicio
<!DOCTYPE> <html> <head> <meta> <title> <body> <header> <main> <footer> <section> <nav> <h1> → <h3> <p> <a> <img> <!-- -->
🏠

Mi Primera Página de Presentación

Nivel: Principiante · Solo etiquetas vistas · Tiempo: 20 – 30 minutos

🎯 Objetivo

Construir desde cero una página web de presentación personal usando únicamente la estructura base y las etiquetas semánticas explicadas en esta página. El resultado no tendrá estilos (eso viene con CSS), pero debe estar semánticamente correcto y bien estructurado.

📋 Instrucciones paso a paso

  • 1 Crea un archivo nuevo llamado presentacion.html en tu escritorio o carpeta de proyectos.
  • 2 Escribe (no copies) la estructura base completa: <!DOCTYPE html>, <html lang="es">, <head> con las dos <meta> y el <title>, y el <body>.
  • 3 Dentro del <body> crea las tres grandes zonas semánticas: <header>, <main> y <footer>.
  • 4 Completa cada zona con el contenido solicitado en los requisitos de abajo.
  • 5 Guarda el archivo, ábrelo en el navegador y verifica que todo el texto sea visible y los enlaces funcionen.
  • 6 Comparte tu resultado con el instructor o el grupo.

✅ Qué debe tener tu página

<head> — Cabecera
  • Meta charset="UTF-8"
  • Meta viewport correcto
  • Title con tu nombre: "Presentación de ..."
  • Al menos un comentario explicando qué es el head
<header> — Encabezado
  • <h1> con tu nombre completo
  • <p> con tu rol: "Aprendiz de desarrollo web"
  • <nav> con 3 enlaces <a href="#..."> que apunten a las secciones del <main>
<main> — Contenido
  • Sección "Sobre mí" con <h2> y un <p> de presentación
  • Sección "Mi foto" con <h2> e <img> (usa src con una URL pública y el atributo alt)
  • Sección "Contacto" con <h2> y un <p> con un <a href="mailto:...">
<footer> + Buenas prácticas
  • <p> con &copy; y tu nombre
  • Usar IDs en las <section> para que los enlaces del <nav> funcionen
  • Comentarios en el código marcando cada sección
  • Indentación correcta en todo el documento

🚫 Restricciones

En este ejercicio no se deben usar etiquetas que aún no hemos visto: <ul>, <ol>, <li>, <form>, <input>, <table>, ni ningún atributo style="". El objetivo es dominar la estructura semántica antes de agregar complejidad.

📐 Criterios de evaluación

El instructor revisará: (1) que la estructura base esté completa y correcta, (2) que los tres niveles semánticos (header, main, footer) estén presentes, (3) que las tres <section> tengan ID y los enlaces del nav las apunten correctamente, (4) que la imagen tenga atributo alt, y (5) que el código esté comentado e indentado.

<!-- ════ ESTRUCTURA BASE ════ -->
<!DOCTYPE html>
<html lang="es">

<!-- Cabecera: información sobre la página (no visible) -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Presentación de Ana García</title>
</head>

<!-- Cuerpo: todo lo que el usuario ve en el navegador -->
<body>

  <!-- ── ENCABEZADO DE LA PÁGINA ── -->
  <header>
    <h1>Ana García</h1>
    <p>Aprendiz de Desarrollo Web</p>
    <!-- Navegación: enlaces internos hacia las secciones -->
    <nav>
      <a href="#sobre-mi">Sobre mí</a>
      <a href="#mi-foto">Mi foto</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>

  <!-- ── CONTENIDO PRINCIPAL ── -->
  <main>

    <!-- Sección 1: Presentación personal -->
    <section id="sobre-mi">
      <h2>Sobre mí</h2>
      <p>Hola, soy Ana García. Estudio desarrollo web y me apasiona crear experiencias digitales. Actualmente estoy aprendiendo HTML, el lenguaje base de la web.</p>
    </section>

    <!-- Sección 2: Imagen de perfil -->
    <section id="mi-foto">
      <h2>Mi foto</h2>
      <img
        src="https://via.placeholder.com/150"
        alt="Foto de perfil de Ana García"
        width="150">
      <p>Esta sería mi foto de perfil.</p>
    </section>

    <!-- Sección 3: Datos de contacto -->
    <section id="contacto">
      <h2>Contacto</h2>
      <h3>Escríbeme</h3>
      <p>Puedes contactarme en: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>

  </main>

  <!-- ── PIE DE PÁGINA ── -->
  <footer>
    <p>&copy; 2025 Ana García — Aprendiz Web</p>
  </footer>

</body>
</html>