Bloque 1: Primeros pasos

¿Qué es HTML y cómo funciona internet?

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el idioma con el que se construye todas las páginas web del mundo: define la estructura y el significado del contenido (títulos, párrafos, imágenes, enlaces…).

1.1 · Un poco de historia

HTML fue creado por Tim Berners-Lee en 1991 en el CERN, junto con la propia World Wide Web. Desde entonces ha evolucionado hasta HTML5, el estándar actual, mantenido por el consorcio WHATWG. Lo mejor: todo lo que aprendiste hace 15 años sigue funcionando; la web nunca rompe lo antiguo.

1.2 · El viaje de una página web

Cuando escribes www.google.com en el navegador ocurre esto en menos de un segundo:

1. DNS: el navegador pregunta a un «agenda telefónica» de internet qué dirección IP corresponde a ese dominio.
2. Petición HTTP: tu navegador (el cliente) pide la página al servidor donde está alojada.
3. Respuesta: el servidor envía de vuelta un archivo HTML (junto con CSS, JavaScript e imágenes).
4. Renderizado: el navegador lee el HTML, construye el DOM, aplica los estilos y pinta la página en pantalla.

1.3 · Tu caja de herramientas

Necesitas muy poco para empezar, y todo es gratuito:

• Un editor de código: recomendamos Visual Studio Code (o Sublime Text, Notepad++…). Nada de Word: introduce caracteres invisibles que rompen el HTML.
• Un navegador moderno: Chrome, Firefox o Edge. Todos incluyen las DevTools (tecla F12) para inspeccionar cualquier web.
• Una carpeta de trabajo: crea por ejemplo mi-web/ en el escritorio. Ahí vivirán todos tus archivos.

Estructura de un documento HTML

Todo documento HTML respeta este esqueleto. Grábalo en la memoria: lo escribirás miles de veces.

<!DOCTYPE html>
<html lang="es">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
  </head>

  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
  </body>

</html>

2.1 · Anatomía de una etiqueta

Una etiqueta puede tener etiqueta de apertura, contenido, etiqueta de cierre y opcionalmente atributos:

• Atributos globales útiles: id (identificador único), class (grupo de estilos), title (tooltip al pasar el ratón).
• Etiquetas vacías: algunas no tienen cierre ni contenido porque no envuelven nada: <br>, <hr>, <img>, <meta>.
• Comentarios: notas invisibles para humanos: <!-- esto no se muestra -->.

2.2 · Anidación correcta

Las etiquetas se anidan como muñecas rusas: la última en abrirse es la primera en cerrarse.

<p>Texto con <strong>negrita</p></strong>

<p>Texto con <strong>negrita</strong></p>

Encabezados, párrafos, énfasis y listas

3.1 · Los seis niveles de encabezado

De <h1> (el más importante) a <h6>. Son la columna vertebral semántica de la página: los buscadores y lectores de pantalla los usan para navegar.

3.2 · Párrafos y saltos

<p>Este es un párrafo normal. El navegador ignora los
saltos de línea extra y los espacios repetidos.</p>

<p>Poema con salto forzado:<br>
verde que te quiero verde.</p>

<hr> <!-- separador temático entre secciones -->

3.3 · Énfasis con significado

3.4 · Las tres familias de listas

<ul>
  <li>Manzanas</li>
  <li>Pan</li>
  <li>Café</li>
</ul>

<ol>
  <li>Precalienta el horno</li>
  <li>Mezcla los ingredientes</li>
  <li>Hornea 30 min</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado web</dd>
  <dt>CSS</dt>
  <dd>Lenguaje de estilos</dd>
</dl>

Las listas pueden anidarse (una lista dentro de un <li>) y las ordenadas aceptan atributos: start="5" (empieza en 5), reversed (cuenta atrás), type="A|a|I|i|1".

Enlaces, imágenes y rutas

4.1 · Enlaces: la «hyper» parte del hipertexto

<!-- externo, abre en pestaña nueva -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a>

<!-- interno, salta a una sección con id -->
<a href="#contacto">Ir al contacto</a>

<!-- otros protocolos útiles -->
<a href="mailto:hola@tecnicoweb.es">Escríbenos</a>
<a href="tel:+34900000000">Llámanos</a>

4.2 · Imágenes

<figure>
  <img src="imagenes/gato.jpg"
       alt="Gato naranja durmiendo sobre un teclado"
       width="600" height="400"
       loading="lazy">
  <figcaption>Mi supervisor de código</figcaption>
</figure>

• alt es obligatorio: describe la imagen para personas ciegas y cuando el archivo falla. Si la imagen es decorativa: alt="".
• width y height reservan el espacio y evitan «saltos» al cargar.
• loading="lazy" retrasa la carga de imágenes fuera de pantalla.

4.3 · Rutas relativas vs absolutas

Imagina esta estructura de carpetas:

mi-web/
├── index.html
├── sobre-mi.html
├── imagenes/
│   ├── logo.png
│   └── fotos/
│       └── vacaciones.jpg
└── paginas/
    └── contacto.html

• ./ = esta misma carpeta (opcional), ../ = sube un nivel.
• Absoluta: empieza por https:// — apunta fuera de tu proyecto.
• Usa siempre minúsculas y sin espacios en nombres de archivos: mi-foto.jpg, nunca Mi Foto.JPG.