Tu primera página web

Crea tu primera página HTML desde cero y ábrela en el navegador.

No más teoría por el momento. En este capítulo vas a crear tu primera página web y verla funcionando en tu navegador. Sin instalar nada especial, sin frameworks, sin complicaciones.

¿Listo? Solo necesitas dos cosas:

Un editor de texto (puede ser el Bloc de notas de Windows, TextEdit en Mac, o cualquier editor que tengas)
Un navegador web (Chrome, Firefox, Edge… el que uses normalmente)

Eso es todo. Vamos a ello.

Crear tu carpeta y tu archivo

Crea una carpeta en tu escritorio (o donde prefieras) llamada mi-primera-web.
Abre tu editor de texto y crea un archivo nuevo.
Escribe este código en el archivo:
```
<h1>Hola mundo</h1>
```
Sí, solo eso. Una sola línea.
Guarda el archivo dentro de tu carpeta mi-primera-web con el nombre index.html.

Asegúrate de que el archivo se guarde con la extensión .html y no como .txt. Si usas el Bloc de notas en Windows, cambia el tipo de archivo a “Todos los archivos” al guardar y escribe el nombre completo: index.html.
Abre el archivo en tu navegador. Puedes hacer doble clic sobre el archivo index.html, o arrastrarlo directamente a la ventana de tu navegador.
Mira lo que aparece. Deberías ver un texto grande y en negrita que dice: Hola mundo.

Eso es una página web. En serio. Lo que acabas de hacer es exactamente lo mismo que hacen los desarrolladores profesionales: escribir código en un archivo y abrirlo en un navegador.

Pro tip

El nombre index.html es una convención. Los servidores web buscan un archivo llamado index.html como la página principal de un sitio. Por eso es buena práctica nombrar así tu archivo principal.

La estructura básica de HTML

Lo que escribiste funciona, pero le falta contexto. Es como escribir una carta sin sobre ni dirección: llega, pero no es lo correcto. Toda página HTML tiene una estructura básica que le dice al navegador cómo interpretar tu contenido.

Reemplaza el contenido de tu index.html con esto:

<!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>
</body>
</html>

Guarda el archivo y recarga la página en tu navegador. Visualmente se ve igual, pero ahora tu página está bien estructurada. Vamos a entender cada parte.

`<!DOCTYPE html>`

Le dice al navegador: “Este documento está escrito en HTML5” (la versión moderna de HTML). Siempre va en la primera línea.

`<html lang="es">`

Es la etiqueta raíz que envuelve todo el contenido de tu página. El atributo lang="es" le indica al navegador que el contenido está en español. Esto ayuda a los lectores de pantalla y a los motores de búsqueda.

`<head>` — La cabecera invisible

El <head> contiene información sobre la página, pero no se muestra en pantalla. Es como los datos que van en el sobre de una carta, no en la carta misma.

El <head> de HTML

Piensa en el <head> como los bastidores de un teatro: el público no lo ve, pero todo lo que pasa ahí hace que el espectáculo funcione. Contiene metadatos, enlaces a estilos y el título de la pestaña.

Dentro del <head> tenemos:

<meta charset="UTF-8"> — Le dice al navegador que use el conjunto de caracteres UTF-8, que soporta tildes, eñes y caracteres especiales. Sin esto, tus “á”, “ñ” y “¿” podrían verse como símbolos raros.
<meta name="viewport" ...> — Hace que tu página se vea bien en dispositivos móviles. Sin esta línea, tu página se vería diminuta en un teléfono.
<title> — El texto que aparece en la pestaña del navegador. Cámbialo y recarga la página para verlo.

`<body>` — El contenido visible

Todo lo que quieras que el usuario vea en la pantalla va dentro del <body>. Aquí es donde vive tu <h1>, tus párrafos, imágenes, enlaces y todo lo demás.

Agregar contenido

Una página con solo un “Hola mundo” está bien para empezar, pero vamos a hacerla más interesante. Vamos a ir agregando elementos paso a paso dentro del <body>.

Párrafos con `<p>`

Para escribir texto normal usamos la etiqueta <p> (de “paragraph”):

<body>
  <h1>Hola mundo</h1>
  <p>Esta es mi primera página web. La hice yo, desde cero.</p>
  <p>Estoy aprendiendo desarrollo web y esto es solo el comienzo.</p>
</body>

Cada <p> crea un párrafo separado con un espacio entre ellos.

Más niveles de encabezado

Ya conoces <h1>. HTML tiene seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante):

<body>
  <h1>Mi página web</h1>
  <p>Bienvenido a mi sitio.</p>

  <h2>Sobre mí</h2>
  <p>Soy una persona que está aprendiendo a programar.</p>

  <h3>Mis intereses</h3>
  <p>Me gusta la tecnología, los videojuegos y la música.</p>
</body>

Listas

HTML tiene dos tipos de listas:

Lista sin orden (con viñetas) usando <ul> y <li>:

<h2>Cosas que me gustan</h2>
<ul>
  <li>Programar</li>
  <li>Escuchar música</li>
  <li>Jugar videojuegos</li>
</ul>

Lista ordenada (con números) usando <ol> y <li>:

<h2>Mis lenguajes favoritos (en orden)</h2>
<ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>HTML (sí, ya cuenta como favorito)</li>
</ol>

Pro tip

<ul> viene de “unordered list” (lista sin orden) y <ol> de “ordered list” (lista ordenada). <li> viene de “list item” (elemento de lista). Los nombres en inglés ayudan a recordarlos.

Imágenes con `<img>`

Para agregar una imagen usamos la etiqueta <img>. Esta etiqueta es especial porque no tiene etiqueta de cierre:

<img src="https://picsum.photos/400/200" alt="Una imagen de ejemplo">

src — La ruta o URL de la imagen.
alt — Un texto alternativo que describe la imagen. Aparece si la imagen no carga y es fundamental para la accesibilidad.

Si tienes una imagen guardada en tu carpeta mi-primera-web (por ejemplo, foto.jpg), puedes usarla así:

<img src="foto.jpg" alt="Mi foto favorita">

Enlaces con `<a>`

Los enlaces son el corazón de la web. Para crear uno usamos la etiqueta <a> (de “anchor”, ancla en inglés):

<p>Visita <a href="https://developer.mozilla.org">MDN Web Docs</a> para aprender más.</p>

href — La URL a la que apunta el enlace.
El texto entre <a> y </a> es lo que el usuario ve y puede hacer clic.

Tu página con todo junto

Así debería verse tu index.html con todos los elementos que has aprendido:

<!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>Mi primera página web</h1>
  <p>Esta es mi primera página web. La hice yo, desde cero.</p>

  <h2>Sobre mí</h2>
  <p>Estoy aprendiendo desarrollo web y esto es solo el comienzo.</p>

  <h2>Cosas que me gustan</h2>
  <ul>
    <li>Programar</li>
    <li>Escuchar música</li>
    <li>Jugar videojuegos</li>
  </ul>

  <h2>Mis lenguajes favoritos</h2>
  <ol>
    <li>JavaScript</li>
    <li>Python</li>
    <li>HTML</li>
  </ol>

  <img src="https://picsum.photos/400/200" alt="Una imagen de ejemplo">

  <p>Visita <a href="https://developer.mozilla.org">MDN Web Docs</a> para aprender más.</p>
</body>
</html>

Guarda, recarga el navegador y observa el resultado. Ya tienes una página con encabezados, párrafos, listas, una imagen y un enlace. Nada mal para estar empezando.

Un toque de estilo

Tu página funciona perfectamente, pero se ve… un poco aburrida. Los colores por defecto del navegador no son los más emocionantes. Vamos a cambiar eso con CSS.

No vamos a profundizar en CSS todavía (eso viene más adelante), pero sí vamos a darle un pequeño toque de estilo a tu página para que veas lo que es posible.

Agrega una etiqueta <style> dentro del <head> de tu index.html:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página</title>
  <style>
    body {
      background-color: #1a1a2e;
      color: #e0e0e0;
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    h1 {
      color: #00d4ff;
      text-align: center;
    }

    h2 {
      color: #7b68ee;
    }

    a {
      color: #00d4ff;
    }

    img {
      max-width: 100%;
      border-radius: 8px;
    }
  </style>
</head>

Guarda y recarga. Tu página ahora tiene un fondo oscuro, texto claro, encabezados con color y un estilo mucho más moderno.

Vamos a entender qué hicimos:

background-color: #1a1a2e — Cambia el color de fondo del body a un azul oscuro.
color: #e0e0e0 — Cambia el color del texto a un gris claro.
font-family: Arial, sans-serif — Usa la fuente Arial (o cualquier fuente sans-serif disponible).
max-width: 700px y margin: 0 auto — Centra el contenido y lo limita a 700 píxeles de ancho para que no se extienda por toda la pantalla.
text-align: center — Centra el texto del <h1>.
border-radius: 8px — Redondea las esquinas de la imagen.

Experimenta. Cambia los colores, prueba valores diferentes, rompe cosas y arregla cosas. Así es como se aprende.

Ejercicio: Tu página de presentación

Es hora de practicar por tu cuenta. Vas a crear una segunda página: tu carta de presentación al mundo.

Crea un nuevo archivo llamado sobre-mi.html dentro de tu carpeta mi-primera-web.
Copia la estructura básica de HTML (el DOCTYPE, html, head y body) que ya aprendiste.
Agrega tu nombre como <h1> — por ejemplo: <h1>Ana García</h1>.
Escribe un párrafo sobre ti usando <p>. Puede ser algo tan simple como: “Hola, soy Ana y estoy aprendiendo desarrollo web.”
Agrega una lista de tus hobbies usando <ul> y <li>. Incluye al menos tres cosas que te gusten.
Dale estilo con CSS. Agrega una etiqueta <style> en el <head> y personaliza los colores a tu gusto. No copies los mismos colores del ejemplo anterior: elige los tuyos.
Bonus: agrega un enlace a tu página principal. Al final de sobre-mi.html, agrega:
```
<p><a href="index.html">Volver a la página principal</a></p>
```
Y en tu index.html, agrega un enlace a tu nueva página:
```
<p><a href="sobre-mi.html">Conoce más sobre mí</a></p>
```
Ahora tienes dos páginas conectadas entre sí. Eso, en esencia, es un sitio web.

Resumen

En este capítulo diste un gran paso. Esto es lo que aprendiste:

Crear un archivo HTML y abrirlo en el navegador para ver tu página web.
La estructura básica de HTML: <!DOCTYPE html>, <html>, <head> y <body>.
Etiquetas de contenido: encabezados (<h1> a <h6>), párrafos (<p>), listas (<ul>, <ol>, <li>), imágenes (<img>) y enlaces (<a>).
CSS básico dentro de una etiqueta <style>: cambiar colores, fuentes, centrar contenido y darle personalidad a tu página.
Conectar páginas entre sí con enlaces, creando la base de un sitio web.

Lo más importante de todo: ya creaste una página web real. No fue una simulación ni un tutorial que se ejecuta en la nube. Fue un archivo en tu computadora que abriste en tu navegador. Así empieza todo.

Siguiente capítulo¿Cómo se construye una web?Exploraremos los diferentes caminos del desarrollo web: frontend, backend y fullstack.

Tu primera página web

Tu primera página web

Crear tu carpeta y tu archivo

La estructura básica de HTML

<!DOCTYPE html>

<html lang="es">

<head> — La cabecera invisible

<body> — El contenido visible

Agregar contenido

Párrafos con <p>

Más niveles de encabezado

Listas

Imágenes con <img>

Enlaces con <a>

Tu página con todo junto

Un toque de estilo

Resumen

`<!DOCTYPE html>`

`<html lang="es">`

`<head>` — La cabecera invisible

`<body>` — El contenido visible

Párrafos con `<p>`

Imágenes con `<img>`

Enlaces con `<a>`