Curso HTML MÓDULO 7

📖 Curso de HTML para Principiantes

Módulo 7: Proyecto final

🎯 Objetivo

Construir una página web sencilla que reúna títulos, párrafos, enlaces, imágenes, listas, tablas, formularios y etiquetas semánticas.

1. Estructura inicial

Creamos un archivo proyecto.html con la base semántica:

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi página personal</title>
</head>
<body>
  <header>
    <h1>Mi página personal</h1>
    <nav>
      <ul>
        <li><a href="#sobre">Sobre mí</a></li>
        <li><a href="#proyectos">Proyectos</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Aquí irá el contenido -->
  </main>

  <footer>
    <p>&copy; 2025 Mi nombre</p>
  </footer>
</body>
</html>

2. Sección “Sobre mí”

html

<section id="sobre">
  <h2>Sobre mí</h2>
  <p>Hola, me llamo Ana y estoy aprendiendo HTML.</p>
  <img src="foto.jpg" alt="Foto de perfil" width="200">
</section>

3. Sección “Proyectos”

Incluimos listas y tablas:

html

<section id="proyectos">
  <h2>Mis proyectos</h2>
  <ul>
    <li>Blog personal</li>
    <li>Galería de fotos</li>
    <li>Pequeña tienda online</li>
  </ul>

  <h3>Horario de trabajo</h3>
  <table border="1">
    <tr>
      <th>Día</th>
      <th>Actividad</th>
    </tr>
    <tr>
      <td>Lunes</td>
      <td>Escribir artículos</td>
    </tr>
    <tr>
      <td>Martes</td>
      <td>Diseñar páginas</td>
    </tr>
  </table>
</section>

4. Sección “Contacto”

Creamos un formulario básico:

html

<section id="contacto">
  <h2>Contacto</h2>
  <form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required><br><br>

    <label for="correo">Correo:</label>
    <input type="email" id="correo" name="correo" placeholder="ejemplo@correo.com" required><br><br>

    <label for="mensaje">Mensaje:</label><br>
    <textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea><br><br>

    <input type="submit" value="Enviar">
  </form>
</section>

5. Ejercicio práctico

👉 Completa tu proyecto.html con:

Un <header> con título y menú de navegación.
Una sección “Sobre mí” con texto e imagen.
Una sección “Proyectos” con lista y tabla.
Una sección “Contacto” con formulario.
Un <footer> con tu nombre y año.
Comentarios que documenten cada sección.

6. Conceptos clave del módulo

El proyecto final integra todos los módulos anteriores.
La estructura semántica facilita la lectura y el SEO.
El resultado es una página personal básica, lista para ampliarse con CSS y JavaScript.

📌 Mini-reto final: Añade un segundo artículo dentro de <main> con un título y párrafo sobre tu meta de aprendizaje futuro (por ejemplo, “Aprender CSS” o “Crear una aplicación web”).

HTML	MÓDULOS
Curso HTML	FELICIDADES. HAS TERMINADO EL CURSO HTML
PÁGINA ANTERIOR	TRUCOS HTML

📖 Conclusión del curso de HTML para principiantes

Has llegado al final de este recorrido por los fundamentos de HTML. A lo largo de los módulos aprendiste a:

Crear la estructura básica de una página web.
Usar títulos, párrafos y comentarios para organizar contenido.
Insertar enlaces e imágenes que conectan y enriquecen tu sitio.
Construir listas y tablas para mostrar información ordenada.
Diseñar formularios que permiten la interacción con los usuarios.
Aplicar etiquetas semánticas y buenas prácticas para mejorar accesibilidad y SEO.
Integrar todo en un proyecto final que reúne cada concepto en una página completa.

🎯 Reflexión final

HTML es el primer paso en el camino del desarrollo web. Aunque por sí solo define la estructura, combinado con CSS (para estilos) y JavaScript (para interactividad) se convierte en la base de cualquier sitio moderno.

Lo más importante es que ahora tienes la confianza para crear y experimentar: cada etiqueta que uses es una pieza de construcción que te acerca a páginas más profesionales y creativas.

🚀 Próximos pasos recomendados

Aprender CSS para dar estilo y diseño a tus páginas.
Explorar JavaScript para añadir interactividad.
Practicar con pequeños proyectos: un blog personal, una galería de imágenes, o un portafolio.
Validar siempre tu código y aplicar buenas prácticas de accesibilidad.

📌 Mensaje final: Este curso te ha dado las herramientas para empezar. El resto depende de tu curiosidad y constancia. Cada línea de código que escribas será un paso más hacia convertir tus ideas en páginas reales que otros podrán ver y disfrutar.