Cómo funciona la web y tu primera página

Descubre qué pasa cuando escribes una dirección en el navegador y crea la base de tu sitio web.

Qué pasa cuando abres un sitio web

Cuando escribes algo como www.myschool.com en un navegador, esto es lo que ocurre:

El navegador envía un mensaje por internet a un servidor – el ordenador donde vive el sitio web: «¡Oye, envíame la página!»
El servidor responde y devuelve archivos – texto, imágenes, código.
El navegador dibuja la página en tu pantalla usando esos archivos.

Los archivos que envía el servidor están escritos en un lenguaje llamado HTML. Y eso es exactamente lo que vas a aprender. Por ahora tu sitio web no estará en un servidor – vivirá en tu propio ordenador, y lo subiremos a internet en la última lección.

Elige tu proyecto

Antes de escribir una sola línea, decide qué vas a construir. Trabajarás en uno de estos proyectos durante todo el nivel:

🏫 El sitio web de mi colegio – horario, menú del comedor, eventos, profesores
🙋 Mi sitio web personal – sobre mí, lo que me gusta, mis creaciones
🌍 Un diario de viajes – viajes, fotos, recuerdos
⚽ El sitio web de un club deportivo – equipo, partidos, entrenamientos

¿Ya lo tienes? Genial. Las tareas de cada lección cubren los cuatro proyectos – solo busca el tuyo.

Te lo muestro: el esqueleto con el que empieza toda página del planeta

Toda página web – desde la tuya hasta la de YouTube – empieza con el mismo esqueleto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Traduzcámoslo a lenguaje sencillo:

Código	Qué le dice al navegador
`<!doctype html>`	«¡Atención, empieza una página HTML!»
`<html lang="en">`	«Todo lo que hay dentro es una página, y está en inglés.»
`<head>` … `</head>`	«Aquí va información sobre la página.» Los visitantes no la ven.
`<meta charset="UTF-8">`	«Puede haber caracteres especiales, prepárate para ellos.»
`<title>` … `</title>`	El nombre de la página – se muestra en la pestaña del navegador.
`<body>` … `</body>`	«Todo lo que el visitante ve de verdad empieza aquí.» Todo tu contenido va aquí.

Fíjate en cómo funcionan las etiquetas: <h1> abre algo y </h1> (con la barra) lo cierra otra vez. Lo que hay entre ellas pertenece a esa etiqueta. Igual que los paréntesis.

Ahora tú 💪

Abre tu carpeta my-website (del Nivel Preparatorio) en VS Code y abre el archivo index.html que hay dentro. Borra lo que haya y escribe el esqueleto de la página del ejemplo de arriba.
Cambia el <title> y el <h1> para que encajen con tu proyecto, y añade un párrafo <p> debajo del título con una frase sobre qué es tu sitio web.
Guarda (Ctrl+S) y abre index.html en tu navegador (o actualiza la página con F5).

¿No estás seguro? Aquí tienes soluciones para cada proyecto:

🏫 Solución: El sitio web de mi colegio

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Solución: Mi sitio web personal

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Solución: Diario de viajes

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Solución: Sitio web del club deportivo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Compruébalo tú: La pestaña del navegador muestra el nombre de tu sitio web, y la página muestra tu título y tu frase. Si es así – ¡la primera piedra está puesta!

Lo que te llevas de esta lección

Un sitio web = archivos que un servidor envía a un navegador. El navegador dibuja una página a partir de ellos.
Toda página tiene el mismo esqueleto: <head> (información sobre la página) y <body> (contenido visible).
Las etiquetas se abren como <esto> y se cierran como </esto>.