Tu mini-curso completo. Vas a aprender desde lo más básico hasta armar tu propia página personal. Hay teoría, práctica, ejercicios con soluciones y un proyecto final. Todo a tu ritmo. 🌱
HTML es el esqueleto de las páginas web. Cada vez que abrís Instagram, YouTube o cualquier sitio, hay HTML detrás organizando todo: los textos, las imágenes, los botones.
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Pero olvidate del nombre — pensá en HTML como las etiquetas que le ponés a las cosas para decirle al navegador qué es cada cosa.
Define qué hay en la página y dónde va cada cosa.
Le da color, forma y estilo (eso lo aprendés después).
Vos escribís un archivo de texto que termina en .html. Ese archivo lo abre un navegador (Chrome, Firefox, Safari) y lo "traduce" en lo que vos ves en pantalla.
Una etiqueta es una palabra entre < >. La mayoría vienen en pareja: una de apertura y una de cierre.
<p>Hola, soy un párrafo</p> ↑ apertura ↑ cierre (con barra /)
Lo de adentro es el contenido. Lo de afuera (las etiquetas) le dice al navegador qué tipo de cosa es.
Los atributos son información extra que le ponés a una etiqueta. Van adentro de la etiqueta de apertura.
<a href="https://google.com">Ir a Google</a> ↑ atributo ↑ valor del atributo
En este ejemplo:
a es la etiqueta (un link)href es el atributo (le dice "el link va a tal lado")"https://google.com" es el valor del atributo" ".
Mirá esta etiqueta: <img src="foto.jpg">
¿Cuál es la etiqueta? ¿Cuál es el atributo? ¿Cuál es el valor?
Etiqueta: img
Atributo: src (significa "source", de dónde viene la imagen)
Valor: "foto.jpg"
Toda página HTML tiene una estructura básica obligatoria. Es la "plantilla" que se repite siempre. Mirá:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi página</title> </head> <body> <h1>Hola mundo</h1> <p>Mi primera página 🌟</p> </body> </html>
Decidí si cada elemento va en <head> o en <body>:
1. body (es contenido visible)
2. head (es info de la pestaña)
3. body (es contenido visible)
4. head (es info técnica del documento)
HTML tiene 6 niveles de títulos. <h1> es el más grande e importante. <h6> es el más chiquito.
<h1>Título principal de la página</h1> <h2>Subtítulo de sección</h2> <h3>Subtítulo más chico</h3> <h4>Y así hasta...</h4> <h5>...el h5...</h5> <h6>...y h6 (el más chico)</h6>
<h1> por página. Es como el título del libro: hay uno solo.
Para texto normal usás <p>. Y dentro de un párrafo, hay etiquetas para destacar palabras:
<p>Esto es un párrafo normal.</p> <p>Acá una palabra en <strong>negrita</strong> y otra en <em>cursiva</em>.</p> <p>Y si quiero un salto de línea<br> en el medio del párrafo, uso br.</p>
Armá en HTML un bloque que tenga: un h1 con tu nombre, un h2 que diga "Sobre mí", y un párrafo donde la palabra más importante esté en negrita y otra en cursiva.
<h1>Mia Benjardino</h1> <h2>Sobre mí</h2> <p>Estoy aprendiendo <strong>programación</strong> en Digital House y me gusta <em>mucho</em>.</p>
La etiqueta <a> crea un link (también llamado "hipervínculo" o "anchor"). El atributo más importante es href, que dice a dónde lleva el link.
// Link a una página externa <a href="https://google.com">Ir a Google</a> // Link que abre en una pestaña nueva <a href="https://google.com" target="_blank"> Google en pestaña nueva </a> // Link a un email <a href="mailto:[email protected]">Mandame un mail</a>
Para mostrar imágenes usás <img>. Esta etiqueta es especial: NO se cierra (no lleva </img>).
<img src="foto.jpg" alt="Mi gatito"> // También se puede poner ancho y alto <img src="foto.jpg" alt="Mi gatito" width="300"> // O una imagen de internet <img src="https://sitio.com/foto.jpg" alt="Descripción">
| Atributo | Para qué sirve |
|---|---|
src | La ruta o URL de la imagen (obligatorio) |
alt | Texto alternativo si no carga la imagen (importante para accesibilidad) |
width | Ancho en píxeles |
height | Alto en píxeles |
alt es importantísimo. Lo leen los lectores de pantalla para personas ciegas, y aparece si la imagen no carga. ¡Siempre ponelo!
Armá en HTML: un h2 que diga "Mis lugares favoritos", un párrafo con un link a Google Maps, y una imagen (puede ser cualquiera de internet).
<h2>Mis lugares favoritos</h2>
<p>Buscalos en
<a href="https://maps.google.com" target="_blank">
Google Maps
</a>
</p>
<img src="https://picsum.photos/300/200"
alt="Foto de un lugar lindo"
width="300">
Hay dos tipos de listas en HTML:
Lista con viñetas (puntitos). El orden no importa.
Lista numerada (1, 2, 3...). El orden importa.
Las dos usan <li> (list item) para cada elemento de la lista.
<ul> <li>Manzana</li> <li>Banana</li> <li>Frutilla</li> </ul>
<ol> <li>Levantarse</li> <li>Desayunar</li> <li>Estudiar HTML</li> </ol>
<ul> <li>Frutas <ul> <li>Manzana</li> <li>Pera</li> </ul> </li> <li>Verduras</li> </ul>
Armá una lista numerada con 4 cosas que querés hacer este mes.
<h2>Mis objetivos del mes</h2> <ol> <li>Terminar el curso de HTML</li> <li>Salir con amigas</li> <li>Empezar a hacer ejercicio</li> <li>Leer un libro</li> </ol>
Las tablas se usan para mostrar datos organizados en filas y columnas (como una tabla de Excel).
<table> <tr> ← tr = table row (fila) <th>Nombre</th> ← th = encabezado <th>Edad</th> </tr> <tr> <td>Mia</td> ← td = celda normal <td>20</td> </tr> <tr> <td>Sofi</td> <td>22</td> </tr> </table>
<tr> es una fila, y adentro van las celdas (<th> o <td>). Una tabla con 3 columnas tiene 3 celdas por fila.
Los formularios son súper importantes. Sirven para que el usuario te mande datos: nombre, email, mensajes, etc. Todo formulario va dentro de la etiqueta <form>.
<form> <label for="nombre">Tu nombre:</label> <input type="text" id="nombre" name="nombre"> <label for="email">Tu email:</label> <input type="email" id="email" name="email"> <label for="mensaje">Mensaje:</label> <textarea id="mensaje" name="mensaje"></textarea> <button type="submit">Enviar</button> </form>
El atributo type del input es lo que cambia qué hace cada campo:
| type | Para qué sirve |
|---|---|
text | Texto normal (nombres, palabras...) |
email | Email (verifica que tenga @) |
password | Contraseña (oculta los caracteres con •••) |
number | Solo números |
date | Selector de fecha |
checkbox | Casilla para tildar |
radio | Botón para elegir UNA opción entre varias |
submit | Botón que envía el formulario |
El <label> es el textito que dice "Tu nombre:". Se conecta con su input usando for="mismo-id-del-input". Eso ayuda a la accesibilidad.
<textarea> es como un input pero para texto largo (varios renglones).
<select name="pais"> <option value="ar">Argentina</option> <option value="uy">Uruguay</option> <option value="cl">Chile</option> </select>
type: qué tipo de input esname: el nombre que se manda al servidorid: identificador único (lo conecta con el label)placeholder: texto gris de ejemplorequired: hace que el campo sea obligatorioArmá un formulario que pida: nombre (texto), email, contraseña, fecha de nacimiento, y un botón de "Registrarme".
<form> <label for="n">Nombre:</label> <input type="text" id="n" name="nombre" required> <label for="e">Email:</label> <input type="email" id="e" name="email" required> <label for="p">Contraseña:</label> <input type="password" id="p" name="pass" required> <label for="f">Nacimiento:</label> <input type="date" id="f" name="fecha"> <button type="submit">Registrarme</button> </form>
Un <div> es un contenedor. Una caja invisible que agrupa otros elementos. Sirve para organizar la página y aplicarle estilos a un grupo de cosas a la vez.
<div> <h2>Una sección</h2> <p>Texto adentro de la sección.</p> </div>
Un <span> es lo mismo que un div pero más chico: se usa para envolver un pedacito de texto dentro de un párrafo, no para agrupar elementos enteros.
<p>Mi color favorito es <span>violeta</span>.</p>
Bloque grande. Ocupa todo el ancho. Para secciones, columnas, tarjetas...
Bloque chiquito. En línea con el texto. Para palabras o frases sueltas.
Antes se usaban divs para todo. Pero HTML5 trajo etiquetas que ya tienen significado. Funcionan igual que un div, pero le dicen al navegador (y a Google) qué es cada parte.
<body> <header> <h1>Mi Blog</h1> <nav> <a href="#">Inicio</a> <a href="#">Sobre mí</a> </nav> </header> <main> <article> <h2>Mi primer post</h2> <p>Contenido del post...</p> </article> </main> <footer> <p>© 2026 Mia</p> </footer> </body>
Acá tenés un editor para experimentar. Escribí HTML del lado izquierdo y mirá el resultado a la derecha. Animate a romper cosas — así se aprende.
<img> (probá con esta URL: https://picsum.photos/300/200)Probá lo que aprendiste. Sin presión, sin nota. Es para vos.
1. ¿Para qué sirve la etiqueta <h1>?
2. Si abrís <p>, ¿qué tenés que hacer después?
3. ¿Dónde va todo el contenido visible?
4. ¿Qué atributo se usa para indicar a dónde lleva un link?
5. ¿Cuál es la diferencia entre <ul> y <ol>?
6. ¿Qué etiqueta NO necesita cierre?
7. ¿Para qué sirve el atributo "alt" en una imagen?
8. ¿Cuál es la mejor forma de marcar el menú de navegación?
Ahora que aprendiste todo, vas a armar una página web sobre vos. Es tu proyecto final del curso.
Tu página personal debe incluir todo esto:
mi-pagina.html.Si te trabás en algún paso, acá tenés un ejemplo completo del proyecto final terminado para que te guíes (¡pero primero intentá hacerlo vos!).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mia Benjardino</title>
</head>
<body>
<header>
<h1>Mia Benjardino</h1>
<nav>
<a href="#sobre-mi">Sobre mí</a> |
<a href="#hobbies">Hobbies</a> |
<a href="#contacto">Contacto</a>
</nav>
</header>
<main>
<section id="sobre-mi">
<h2>Sobre mí</h2>
<img src="https://picsum.photos/300/200"
alt="Foto mía">
<p>Hola, soy <strong>Mia</strong> y estoy
aprendiendo <em>programación</em> en
Digital House.</p>
</section>
<section id="hobbies">
<h2>Mis hobbies</h2>
<ul>
<li>Escuchar música</li>
<li>Salir con amigas</li>
<li>Aprender a programar</li>
</ul>
</section>
<section>
<h2>Mis películas favoritas</h2>
<table border="1">
<tr>
<th>Película</th>
<th>Año</th>
</tr>
<tr>
<td>La La Land</td>
<td>2016</td>
</tr>
<tr>
<td>Inception</td>
<td>2010</td>
</tr>
<tr>
<td>El Padrino</td>
<td>1972</td>
</tr>
</table>
</section>
<section id="contacto">
<h2>Contacto</h2>
<p>Seguime en
<a href="https://instagram.com"
target="_blank">Instagram</a>
</p>
<form>
<label for="n">Nombre:</label>
<input type="text" id="n" name="nombre">
<label for="e">Email:</label>
<input type="email" id="e" name="email">
<label for="m">Mensaje:</label>
<textarea id="m" name="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Mia Benjardino</p>
</footer>
</body>
</html>