Your first web page · Tu primera página web
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
Español
Bienvenido a la web
- Una página web se crea con HTML.
- El HTML es simplemente texto rodeado de etiquetas.
- Escribe HTML aquí y verás cómo aparece — no necesitas instalar nada.
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
Español
Cómo funciona esta página
- Escribe en el recuadro, luego presiona ▶ para ver tu página.
- Presiona ✓ Comprobar para ver si tu tarea está correcta.
- ¿Atascado? Presiona 💡 para obtener una pista. Presiona ↻ para empezar de nuevo.
- Lee cada paso, luego presiona Continuar.
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
Español
Las etiquetas envuelven tus palabras
- Una etiqueta es una palabra dentro de ángulos, como
<p>. - La mayoría de las etiquetas vienen en par: una de apertura
<p>y otra de cierre</p>. - Una etiqueta
<p>crea un párrafo — un bloque de texto.
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
Español
Más de un párrafo
- Coloca cada párrafo en su propio par de etiquetas
<p>. - El navegador los muestra uno tras otro, de arriba hacia abajo.
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
Español
Errores comunes
- Las etiquetas van entre ángulos; el texto que ves va entre ellas.
- La mayoría de las etiquetas vienen en pares, como
<p>...</p>.
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
Español
Ahora tú lo intentas
- Abajo hay dos pequeñas tareas. Escribe tu HTML y presiona ▶ para verlo.
- Presiona ✓ Comprobar cuando creas que está bien. Puedes intentarlo tantas veces como quieras.
Explore · Explorar
HTML is a tree of nodes · HTML es un árbol de nodos
Tags nest inside tags — the browser builds a tree (the DOM). · Las etiquetas se anidan dentro de otras etiquetas: el navegador construye un árbol (el DOM).
Write a paragraph that says Hello, world! — type your text between the <p> and · y </p> tags. · Escribe un párrafo que diga Hello, world! — escribe tu texto entre las etiquetas <p> y </p>.
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · Añade un segundo párrafo debajo del primero. Haz que diga I made this. (Usa un nuevo par de etiquetas <p> … </p>).