Saltar al contenido

🧠 Ejercicio paso a paso: ¡Crea tu primera página web con HTML!


¡Hola, programador en formación! Hoy vamos a dar nuestros primeros pasos en el mundo del desarrollo web. Al final de este ejercicio, habrás creado tu primera página web en HTML desde cero. Sigue cada paso con atención y no dudes en experimentar. 🚀

📌 ¿Qué necesitas?

  • Un editor de texto (como Notepad++ o Visual Studio Code).
  • Un navegador web (como Chrome, Firefox o Edge).
  • ¡Ganas de aprender!

👣 Paso 1: Crea un archivo HTML

  1. Abre tu editor de texto favorito.
  2. Crea un nuevo archivo y guárdalo como mi_primera_pagina.html.

👣 Paso 2: Escribe la estructura básica

Copia y pega este código en tu archivo:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página</title>
</head>
<body>

    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera página web creada con HTML.</p>

</body>
</html>

💡 Guarda el archivo y ábrelo con tu navegador para ver el resultado.


👣 Paso 3: Añade subtítulos y texto

Debajo del párrafo, añade estos elementos:

<h2>Sobre mí</h2>
<p>Me llamo [tu nombre] y estoy aprendiendo HTML.</p>

<h3>Mis hobbies</h3>
<ul>
    <li>Leer</li>
    <li>Escuchar música</li>
    <li>Programar</li>
</ul>

👣 Paso 4: Agrega una línea divisoria y un salto de línea

Justo después de la lista, añade:

<hr>
<p>Esto es un nuevo párrafo.<br>¡Está separado con un salto de línea!</p>

👣 Paso 5: Muestra tus conocimientos

  1. Crea una sección usando <h2> con el título: Lo que he aprendido hoy.
  2. Dentro, haz una lista ordenada (<ol>) de las etiquetas HTML que ya sabes usar.

✅ Resultado final esperado

Tu página debería mostrar:

  • Un título grande.
  • Información personal.
  • Una lista de hobbies.
  • Una línea divisoria.
  • Texto con salto de línea.
  • Una lista ordenada con las etiquetas que has aprendido.

🧪 Reto adicional

¿Te animas a ir un paso más allá? Añade una imagen de internet usando la etiqueta <img> y un enlace a tu sitio favorito con <a>.


🗨️ Comentarios y dudas

Si tienes alguna duda o quieres compartir cómo quedó tu página, ¡déjalo en los comentarios!


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Tomas Gonzalez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

error: Content is protected !!

Descubre más desde Tomás González: Formador y Desarrollador Web

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo

Este sitio web utiliza cookies, si necesitas más información puedes visitar nuestra política de privacidad    Ver
Privacidad