Construyendo Todo el Sitio Web

Hemos cubierto todos los temas esenciales de HTML y ahora estamos listos para construir un sitio web completo desde cero. Vamos a crear un sitio web de portafolio de una sola página para mostrar tus proyectos y habilidades.

Puedes trabajar en ello de forma independiente o seguir la guía a continuación, donde te proporcionaremos instrucciones paso a paso y código relacionado con cada paso.

Guía paso a paso

1. Plan de estructura del sitio web

Nuestro sitio web constará de varias secciones clave:

1. Encabezado: Esta sección mostrará de manera prominente el nombre del propietario del portafolio y facilitará la navegación por todo el sitio web;
2. Acerca de: Aquí, los visitantes encontrarán información relevante sobre el propietario del sitio web, proporcionando información sobre su experiencia y antecedentes;
3. Portafolio: Esta sección mostrará varios proyectos, cada uno con imágenes del proyecto, títulos, descripciones y las tecnologías utilizadas;
4. Contacto: Incorporaremos un formulario para recopilar información de los visitantes;
5. Pie de página: El pie de página será la sección de cierre, presentando información de derechos de autor y enlaces a perfiles de redes sociales, contacto telefónico y dirección de correo electrónico.

2. Estructurar contenido con HTML semántico

Vamos a crear un nuevo archivo index.html y configurar la estructura básica del documento HTML.

3. Sección de encabezado

Vamos a construir el header con el nombre del propietario del sitio web y enlaces de navegación.

4. Sección de Acerca de

Sección dedicada a la breve introducción e información sobre el propietario.

5. Sección de Portafolio

En la sección de portafolio nos enfocamos en los proyectos con descripciones e imágenes.

6. Sección de Contacto

Construyamos el formulario de contacto para comunicarnos con el propietario.

7. Sección de pie de página

Finalmente, agreguemos información de copyright y enlaces a redes sociales.

Bonus

Mejoremos la apariencia de nuestro sitio web no solo para los motores de búsqueda, sino también para los usuarios. Podemos lograr esto con la ayuda de CSS, que significa Hojas de Estilo en Cascada. Aunque no cubrimos CSS en este curso, es un aspecto importante del diseño web.

CSS es un lenguaje de hojas de estilo que nos permite especificar la presentación y el estilo de un documento escrito en un lenguaje de marcado como HTML. Puede ser el siguiente paso después de aprender HTML — más sobre esto en el próximo capítulo. Por ahora, observemos cómo CSS mejora HTML.

Tutorial en Video

Aquí está el enlace al sitio web completo que se construyó en este capítulo: Julia's Website