Creación de un Sitio Web Completo con HTML
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 el 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:
- Encabezado: Esta sección mostrará de manera destacada el nombre del propietario del portafolio y facilitará la navegación por el sitio web;
- Acerca de: Aquí, los visitantes encontrarán información relevante sobre el propietario del sitio web, proporcionando detalles sobre su experiencia y conocimientos;
- Portafolio: Esta sección mostrará varios proyectos, cada uno con imágenes, títulos, descripciones y las tecnologías utilizadas;
- Contacto: Incorporaremos un formulario para recopilar información de los visitantes;
- Pie de página: El pie de página será la sección final, con 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 el contenido con HTML semántico
Cree un nuevo archivo index.html y configure la estructura básica del documento HTML.
index.html
3. Sección de encabezado
Construya el header con el nombre del propietario del sitio web y los enlaces de navegación.
index.html
4. Sección Acerca de
Sección dedicada a la breve introducción e información sobre el propietario.
index.html
5. Sección de portafolio
En la sección de portafolio nos centramos en los proyectos con descripciones e imágenes.
index.html
6. Sección de contacto
Construcción del formulario de contacto para comunicarse con el propietario.
index.html
7. Sección de pie de página
Por último, se añade la información de derechos de autor y enlaces a redes sociales.
index.html
Bonus
Mejora del aspecto de nuestro sitio web no solo para los motores de búsqueda, sino también para los usuarios. Esto se puede lograr con la ayuda de CSS, que significa Hojas de Estilo en Cascada. Aunque no se abordó CSS en este curso, es un aspecto importante del diseño web.
CSS es un lenguaje de hojas de estilo que 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.
index.html
index.css
Tutorial en video
Aquí tienes el enlace al sitio web completo que se construyó en este capítulo: Sitio web de Julia
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you show me the basic HTML structure for the index.html file?
What should I include in each section of the website?
Can you explain how to use semantic HTML for this project?
Awesome!
Completion rate improved to 3.13Creación de un Sitio Web Completo con HTML
Desliza para mostrar el menú
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 el 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:
- Encabezado: Esta sección mostrará de manera destacada el nombre del propietario del portafolio y facilitará la navegación por el sitio web;
- Acerca de: Aquí, los visitantes encontrarán información relevante sobre el propietario del sitio web, proporcionando detalles sobre su experiencia y conocimientos;
- Portafolio: Esta sección mostrará varios proyectos, cada uno con imágenes, títulos, descripciones y las tecnologías utilizadas;
- Contacto: Incorporaremos un formulario para recopilar información de los visitantes;
- Pie de página: El pie de página será la sección final, con 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 el contenido con HTML semántico
Cree un nuevo archivo index.html y configure la estructura básica del documento HTML.
index.html
3. Sección de encabezado
Construya el header con el nombre del propietario del sitio web y los enlaces de navegación.
index.html
4. Sección Acerca de
Sección dedicada a la breve introducción e información sobre el propietario.
index.html
5. Sección de portafolio
En la sección de portafolio nos centramos en los proyectos con descripciones e imágenes.
index.html
6. Sección de contacto
Construcción del formulario de contacto para comunicarse con el propietario.
index.html
7. Sección de pie de página
Por último, se añade la información de derechos de autor y enlaces a redes sociales.
index.html
Bonus
Mejora del aspecto de nuestro sitio web no solo para los motores de búsqueda, sino también para los usuarios. Esto se puede lograr con la ayuda de CSS, que significa Hojas de Estilo en Cascada. Aunque no se abordó CSS en este curso, es un aspecto importante del diseño web.
CSS es un lenguaje de hojas de estilo que 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.
index.html
index.css
Tutorial en video
Aquí tienes el enlace al sitio web completo que se construyó en este capítulo: Sitio web de Julia
¡Gracias por tus comentarios!
