Proyecto final HTML: crear una página web completa desde cero

Proyecto final de HTML paso a paso: construí una página web completa con estructura semántica, navegación, imágenes, listas, tablas y formulario de contacto.


Ya vimos los fundamentos de HTML, las etiquetas esenciales, los formularios y la estructura semántica de una página. En este proyecto final vamos a integrar todo lo aprendido para construir una página web completa desde cero.

Importante: HTML no es un lenguaje de programación. En este proyecto vamos a utilizarlo para definir la estructura y el contenido de la página.

¿Qué vamos a construir?

Vamos a crear una página personal de presentación para un estudiante de programación.

La página tendrá:

  • encabezado;
  • menú de navegación;
  • sección de presentación;
  • lista de tecnologías;
  • proyectos;
  • tabla de cursos;
  • formulario de contacto;
  • contenido complementario;
  • pie de página.

¿Por qué la página todavía se verá simple?

En este proyecto vamos a trabajar únicamente con HTML, por lo que el navegador mostrará la estructura con sus estilos básicos.

Para controlar colores, tipografías, tamaños, márgenes, posiciones y el aspecto visual utilizamos CSS (Cascading Style Sheets), es decir, las hojas de estilo.

CSS será justamente el siguiente paso de nuestra ruta de aprendizaje. Primero construiremos correctamente la estructura con HTML y luego aprenderemos a darle diseño.

Importante: para que el navegador interprete el contenido como una página HTML, debemos guardar el archivo con extensión .html. Por ejemplo: index.html.

No alcanza con guardar el código como un archivo .txt. La extensión .html identifica al archivo como un documento HTML que puede ser abierto e interpretado por un navegador.

Podemos crear index.html con cualquier editor de texto, guardar los cambios y luego abrirlo con Chrome, Firefox, Edge u otro navegador.

Estructura de archivos

Para este proyecto podemos crear una carpeta como esta:

mi-portfolio/
|
|-- index.html
|
|-- imagenes/
    |-- perfil.jpg

El archivo principal será index.html.

Paso 1: estructura básica del documento

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi portfolio de programador</title>
</head>

<body>

</body>

</html>

Esta es la base sobre la que vamos a construir toda la página.

Paso 2: encabezado principal

<header>

    <h1>Juan Pérez</h1>

    <p>
        Estudiante de programación
        y desarrollo web
    </p>

</header>

El encabezado presenta al autor de la página.

Paso 3: navegación

<nav>

    <a href="#sobre-mi">Sobre mí</a>
    <a href="#tecnologias">Tecnologías</a>
    <a href="#proyectos">Proyectos</a>
    <a href="#cursos">Cursos</a>
    <a href="#contacto">Contacto</a>

</nav>

Cada enlace apunta a una sección identificada mediante un atributo id.

Paso 4: contenido principal

El contenido central de la página estará dentro de main.

<main>

    ...

</main>

Paso 5: sección Sobre mí

<section id="sobre-mi">

    <h2>Sobre mí</h2>

    <img
        src="imagenes/perfil.jpg"
        alt="Foto de perfil de Juan Pérez"
        width="200"
    >

    <p>
        Estoy aprendiendo programación
        y desarrollo web.
    </p>

    <p>
        Comencé estudiando lógica de programación
        y actualmente estoy aprendiendo HTML.
    </p>

</section>

La imagen incluye un atributo alt descriptivo, importante para accesibilidad.

Paso 6: tecnologías que estoy aprendiendo

<section id="tecnologias">

    <h2>Tecnologías que estoy aprendiendo</h2>

    <ul>
        <li>PSeInt</li>
        <li>Python</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

</section>

Utilizamos una lista porque el orden de las tecnologías no es esencial.

Paso 7: proyectos

Cada proyecto puede representarse mediante un elemento article, ya que tiene sentido como contenido independiente.

<section id="proyectos">

    <h2>Mis proyectos</h2>

    <article>

        <h3>Sistema de gestión de alumnos</h3>

        <p>
            Proyecto realizado en Python
            para practicar listas,
            funciones y búsqueda de datos.
        </p>

        <a href="#">Ver proyecto</a>

    </article>

    <article>

        <h3>Mi primera página web</h3>

        <p>
            Página creada utilizando
            HTML semántico.
        </p>

        <a href="#">Ver proyecto</a>

    </article>

</section>

Paso 8: tabla de cursos

<section id="cursos">

    <h2>Cursos y contenidos completados</h2>

    <table>

        <thead>

            <tr>
                <th>Curso</th>
                <th>Estado</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>PSeInt</td>
                <td>Completado</td>
            </tr>

            <tr>
                <td>Python</td>
                <td>Completado</td>
            </tr>

            <tr>
                <td>HTML</td>
                <td>En curso</td>
            </tr>

        </tbody>

    </table>

</section>

Paso 9: formulario de contacto

<section id="contacto">

    <h2>Contacto</h2>

    <form action="/contacto" method="post">

        <p>

            <label for="nombre">
                Nombre
            </label><br>

            <input
                type="text"
                id="nombre"
                name="nombre"
                required
            >

        </p>

        <p>

            <label for="email">
                Correo electrónico
            </label><br>

            <input
                type="email"
                id="email"
                name="email"
                required
            >

        </p>

        <p>

            <label for="motivo">
                Motivo
            </label><br>

            <select
                id="motivo"
                name="motivo"
                required
            >

                <option value="">
                    Seleccione una opción
                </option>

                <option value="consulta">
                    Consulta
                </option>

                <option value="proyecto">
                    Proyecto
                </option>

                <option value="otro">
                    Otro
                </option>

            </select>

        </p>

        <p>

            <label for="mensaje">
                Mensaje
            </label><br>

            <textarea
                id="mensaje"
                name="mensaje"
                rows="6"
                required
            ></textarea>

        </p>

        <button type="submit">
            Enviar
        </button>

    </form>

</section>

Recordatorio: este formulario todavía no guardará ni enviará realmente la información por sí solo. HTML define los campos y la forma en que deben enviarse, pero el procesamiento requiere lógica adicional. Más adelante veremos cómo trabajar con estos datos utilizando JavaScript y, posteriormente, un backend.

Paso 10: contenido complementario

Podemos agregar información secundaria utilizando aside.

<aside>

    <h2>Actualmente estudiando</h2>

    <p>
        Mi próximo objetivo es aprender
        CSS y comenzar a diseñar
        visualmente esta página.
    </p>

</aside>

Paso 11: pie de página

<footer>

    <p>
        Página creada como proyecto
        de aprendizaje de HTML.
    </p>

    <p>
        Aprendiendo en
        <a href="https://clubprogramador.com/">
            Club Programador
        </a>
    </p>

</footer>

Proyecto completo

Ahora podemos unir todas las partes en un único archivo.

<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi portfolio de programador</title>

</head>

<body>

    <header>

        <h1>Juan Pérez</h1>

        <p>
            Estudiante de programación
            y desarrollo web
        </p>

    </header>

    <nav>

        <a href="#sobre-mi">Sobre mí</a>
        <a href="#tecnologias">Tecnologías</a>
        <a href="#proyectos">Proyectos</a>
        <a href="#cursos">Cursos</a>
        <a href="#contacto">Contacto</a>

    </nav>

    <main>

        <section id="sobre-mi">

            <h2>Sobre mí</h2>

            <img
                src="imagenes/perfil.jpg"
                alt="Foto de perfil de Juan Pérez"
                width="200"
            >

            <p>
                Estoy aprendiendo programación
                y desarrollo web.
            </p>

            <p>
                Comencé estudiando lógica
                de programación y actualmente
                estoy aprendiendo HTML.
            </p>

        </section>

        <section id="tecnologias">

            <h2>
                Tecnologías que estoy aprendiendo
            </h2>

            <ul>
                <li>PSeInt</li>
                <li>Python</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>

        </section>

        <section id="proyectos">

            <h2>Mis proyectos</h2>

            <article>

                <h3>
                    Sistema de gestión de alumnos
                </h3>

                <p>
                    Proyecto realizado en Python
                    para practicar listas,
                    funciones y búsqueda de datos.
                </p>

                <a href="#">
                    Ver proyecto
                </a>

            </article>

            <article>

                <h3>
                    Mi primera página web
                </h3>

                <p>
                    Página creada utilizando
                    HTML semántico.
                </p>

                <a href="#">
                    Ver proyecto
                </a>

            </article>

        </section>

        <section id="cursos">

            <h2>
                Cursos y contenidos completados
            </h2>

            <table>

                <thead>

                    <tr>
                        <th>Curso</th>
                        <th>Estado</th>
                    </tr>

                </thead>

                <tbody>

                    <tr>
                        <td>PSeInt</td>
                        <td>Completado</td>
                    </tr>

                    <tr>
                        <td>Python</td>
                        <td>Completado</td>
                    </tr>

                    <tr>
                        <td>HTML</td>
                        <td>En curso</td>
                    </tr>

                </tbody>

            </table>

        </section>

        <section id="contacto">

            <h2>Contacto</h2>

            <form
                action="/contacto"
                method="post"
            >

                <p>

                    <label for="nombre">
                        Nombre
                    </label><br>

                    <input
                        type="text"
                        id="nombre"
                        name="nombre"
                        required
                    >

                </p>

                <p>

                    <label for="email">
                        Correo electrónico
                    </label><br>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        required
                    >

                </p>

                <p>

                    <label for="motivo">
                        Motivo
                    </label><br>

                    <select
                        id="motivo"
                        name="motivo"
                        required
                    >

                        <option value="">
                            Seleccione una opción
                        </option>

                        <option value="consulta">
                            Consulta
                        </option>

                        <option value="proyecto">
                            Proyecto
                        </option>

                        <option value="otro">
                            Otro
                        </option>

                    </select>

                </p>

                <p>

                    <label for="mensaje">
                        Mensaje
                    </label><br>

                    <textarea
                        id="mensaje"
                        name="mensaje"
                        rows="6"
                        required
                    ></textarea>

                </p>

                <button type="submit">
                    Enviar
                </button>

            </form>

        </section>

        <aside>

            <h2>Actualmente estudiando</h2>

            <p>
                Mi próximo objetivo es aprender
                CSS y comenzar a diseñar
                visualmente esta página.
            </p>

        </aside>

    </main>

    <footer>

        <p>
            Página creada como proyecto
            de aprendizaje de HTML.
        </p>

        <p>
            Aprendiendo en
            <a href="https://clubprogramador.com/">
                Club Programador
            </a>
        </p>

    </footer>

</body>

</html>

Qué conceptos utilizamos

En este proyecto aparecen prácticamente todos los conceptos principales de esta introducción a HTML:

  • estructura del documento;
  • head y body;
  • encabezados;
  • párrafos;
  • enlaces;
  • imágenes;
  • listas;
  • tablas;
  • formularios;
  • id y atributos;
  • HTML semántico;
  • accesibilidad básica;
  • navegación mediante anclas.

Ejercicio: personalizá el proyecto

Antes de continuar, probá modificar la página por tu cuenta.

Algunas ideas:

  • cambiar el nombre y la descripción;
  • agregar otra tecnología;
  • crear un tercer proyecto;
  • agregar otro curso a la tabla;
  • incorporar enlaces a redes profesionales;
  • agregar una nueva sección;
  • modificar el formulario de contacto;
  • crear una segunda página HTML y enlazarla desde el menú.

Errores comunes a revisar

  • olvidar cerrar etiquetas que requieren cierre;
  • repetir el mismo id;
  • usar encabezados sin respetar una jerarquía lógica;
  • olvidar el atributo alt en imágenes;
  • crear controles de formulario sin name;
  • utilizar elementos semánticos únicamente por su apariencia;
  • pensar que el formulario ya procesa los datos;
  • intentar resolver el diseño visual utilizando únicamente HTML.

HTML nos dio la estructura. Ahora necesitamos estilos

Con HTML ya podemos construir una página completa, organizada y semánticamente correcta.

Sin embargo, todavía no controlamos realmente su presentación.

Ahí entra CSS.

CSS significa Cascading Style Sheets —hojas de estilo en cascada— y se utiliza para definir cómo se ve una página HTML.

Con CSS podremos trabajar con:

  • colores;
  • tipografías;
  • tamaños;
  • márgenes y espacios;
  • bordes;
  • fondos;
  • alineación;
  • columnas;
  • diseños adaptables a celulares y computadoras;
  • y mucho más.

La idea que debemos recordar es:

HTML  -> estructura y contenido
CSS   -> estilos y presentacion
JavaScript -> comportamiento e interaccion

Seguí aprendiendo HTML

La guía anterior de esta serie es:

HTML semántico: header, nav, main, section, article, aside y footer

Con este proyecto cerramos la introducción a HTML. El próximo paso es:

Introducción a CSS: qué es, cómo funciona y cómo aplicar estilos a una página HTML →

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Descubre más desde Club Programador

Suscríbete y recibe las últimas entradas en tu correo electrónico.

2 opiniones en “Proyecto final HTML: crear una página web completa desde cero”

  1. Pingback: HTML semántico: header, nav, main, section y article
  2. Pingback: Introducción a CSS: qué es y cómo aplicar estilos a HTML

Deja un comentario

Descubre más desde Club Programador

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

Seguir leyendo