HTML para principiantes
HTML es el punto de partida de cualquier página web. Empieza aquí si nunca has escrito una línea de código.
Lección 1 — Qué es HTML y estructura básica
HTML (HyperText Markup Language) no es un lenguaje de programación como tal: es un lenguaje de marcado. Su trabajo es decirle al navegador qué es cada cosa dentro de una página — esto es un título, esto es un párrafo, esto es una imagen — para que sepa cómo mostrarlo.
Cada pieza de HTML se llama etiqueta (tag). La mayoría van por parejas: una etiqueta de apertura, el contenido, y una etiqueta de cierre con una barra /:
<p>Esto es un párrafo.</p>Toda página HTML necesita un mínimo de estructura para funcionar correctamente en cualquier navegador. Estas son las piezas obligatorias:
<!DOCTYPE html>— le dice al navegador que es una página HTML moderna. Siempre va en la primera línea.<html>— envuelve toda la página.<head>— información que no se ve directamente (el título de la pestaña, la codificación de caracteres, etc.).<body>— todo lo que sí se ve: textos, imágenes, botones...
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página HTML.</p>
</body>
</html><h1> es un título principal (hay hasta <h6>, de mayor a menor importancia) y <p> es un párrafo de texto normal. Con estas cinco etiquetas — html, head, title, body y p — ya tienes una página real y válida.
index.html y ábrelo haciendo doble clic. Se abrirá en tu navegador mostrando "¡Hola, mundo!" — acabas de crear tu primera página web.
Lección 2 — Textos, enlaces e imágenes
Con <h1> y <p> ya puedes escribir texto, pero un texto real necesita énfasis, saltos de línea y separación entre bloques. Estas etiquetas se usan dentro de un párrafo o alrededor de una palabra suelta:
<strong>— texto importante, el navegador lo pone en negrita.<em>— texto con énfasis, el navegador lo pone en cursiva.<br>— un salto de línea dentro del mismo párrafo. No tiene etiqueta de cierre.<hr>— una línea horizontal para separar secciones. Tampoco se cierra.
<p>Este envío es <strong>gratuito</strong> y llega <em>en 24 horas</em>.<br>
Consulta las condiciones abajo.</p>
<hr>Para enlazar a otra página se usa <a> (de anchor), con el destino en el atributo href. Todo lo que pongas entre la apertura y el cierre se convierte en el texto clicable:
<a href="https://egv.es">Visita EGV Host</a>
<a href="https://egv.es" target="_blank" rel="noopener noreferrer">
Ábrelo en una pestaña nueva
</a>
<a href="contacto.html">Página de contacto</a>Un href puede apuntar a otra web (URL completa, como el primer ejemplo) o a otro archivo dentro de tu propio proyecto (ruta relativa, como el tercero). Si el enlace sale a otra web y quieres que se abra en pestaña nueva, añade target="_blank" junto con rel="noopener noreferrer" — ese segundo atributo es una medida de seguridad que evita que la página nueva pueda manipular la tuya.
Para insertar una imagen se usa <img>, que tampoco tiene etiqueta de cierre porque no envuelve contenido. Necesita como mínimo dos atributos:
src— la ruta o URL del archivo de imagen.alt— un texto alternativo que describe la imagen. Se lee en voz alta a personas con lectores de pantalla y se muestra si la imagen no llega a cargar. Nunca lo dejes vacío si la imagen aporta información.
<img src="logo.png" alt="Logotipo de EGV Host">index.html de la lección 1 un enlace a una página que conozcas usando <a>, y una imagen cualquiera guardada en la misma carpeta usando <img>. Si la ruta de src está bien escrita, verás la imagen aparecer directamente al recargar el navegador.
Lección 3 — Listas y tablas
Cuando el contenido son varios elementos relacionados, HTML tiene dos tipos de lista. Cuál usar depende de si el orden importa:
<ul>— lista sin orden (unordered list), se muestra con viñetas. Úsala cuando el orden de los elementos no cambia el significado.<ol>— lista ordenada (ordered list), el navegador numera cada elemento automáticamente. Úsala cuando la secuencia sí importa: pasos, un ranking...
En ambos casos, cada elemento va dentro de una etiqueta <li> (list item).
<p>Lo que incluye el plan Starter:</p>
<ul>
<li>5 GB de espacio</li>
<li>1 dominio incluido</li>
<li>Certificado SSL gratuito</li>
</ul>
<p>Cómo contratar:</p>
<ol>
<li>Elige un plan</li>
<li>Regístrate con tu email</li>
<li>Confirma el pago</li>
</ol>Para datos que se organizan en filas y columnas —precios, horarios, comparativas— se usa una tabla, con <table> como contenedor. Dentro, cada fila es un <tr> (table row) y cada celda es un <td> (table data), salvo la fila de cabecera, donde las celdas son <th> (table header) — el navegador las resalta en negrita automáticamente.
<table>
<tr>
<th>Plan</th>
<th>Precio</th>
</tr>
<tr>
<td>Starter</td>
<td>2,95€/mes</td>
</tr>
<tr>
<td>Pro</td>
<td>7,95€/mes</td>
</tr>
</table>Sin CSS, una tabla se ve con líneas finas y espaciado mínimo — el aspecto real (bordes, color de fondo en la cabecera, separación entre celdas) se controla igual que cualquier otro elemento: con selectores CSS sobre table, th y td, algo que verás en la ruta de CSS.
index.html una lista <ul> con tres cosas que te gustaría aprender, y debajo una tabla de dos columnas y dos filas con cualquier dato que se te ocurra. Recarga el navegador y comprueba que las viñetas y las celdas aparecen donde esperabas.
Lección 4 — Formularios básicos
Un formulario es cómo una página recoge datos de quien la visita: un nombre, un email, un mensaje. Todo formulario empieza con la etiqueta <form>, que envuelve los campos y define dos cosas: a dónde se envían los datos (action) y cómo se envían (method).
action="procesar.php"— la página o script que va a recibir los datos cuando se envíe el formulario.method="POST"— los datos viajan "dentro" de la petición, sin aparecer en la URL. Es lo que se usa casi siempre en formularios reales (login, contacto, pagos).method="GET"existe también, pero mete los datos en la URL — solo tiene sentido para cosas como un buscador.
<form action="procesar.php" method="POST">
...campos aquí...
</form>Dentro del formulario, cada campo suelto se escribe con <input> (no se cierra, como <img>), y el atributo type decide qué tipo de dato pide. Los más comunes:
type="text"— una línea de texto normal.type="email"— comotext, pero el navegador comprueba que tenga forma de email antes de dejar enviar.type="password"— oculta lo que se escribe con puntos o asteriscos.type="number"— solo acepta números, con flechas para subir/bajar.type="checkbox"— una casilla que se marca o no (sí/no).type="radio"— botón de opción; varios con el mismonameforman un grupo del que solo se puede elegir uno.
Cada campo necesita una <label> que explique qué es. Se conectan con dos atributos que deben coincidir: for en la etiqueta y id en el input. No es decoración — al hacer clic en la etiqueta, el foco salta directo al campo, y los lectores de pantalla lo necesitan para anunciar qué campo es cada cosa.
<label for="nombre">Tu nombre</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Tu email</label>
<input type="email" id="email" name="email" required>name es el atributo que identifica el dato cuando llega al servidor (sin name, ese campo no se envía). required le dice al navegador que no deje enviar el formulario si ese campo está vacío — validación básica, gratis, sin escribir una línea de JavaScript.
Para texto más largo que una línea se usa <textarea> (sí lleva cierre), y para elegir entre varias opciones fijas, <select> con un <option> por cada una. El botón que envía todo es <button type="submit">.
<form action="procesar.php" method="POST">
<label for="nombre">Tu nombre</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Tu email</label>
<input type="email" id="email" name="email" required>
<label for="plan">Plan que te interesa</label>
<select id="plan" name="plan">
<option value="starter">Starter</option>
<option value="pro">Pro</option>
</select>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="4"></textarea>
<button type="submit">Enviar</button>
</form>contacto.html con este formulario completo. Ábrelo en el navegador, deja el email vacío y pulsa "Enviar" — verás al propio navegador bloquear el envío y señalar el campo obligatorio, sin que hayas escrito ninguna validación a mano.