Creación de un Sitio Web Completo con HTML
Ya hemos cubierto los conceptos fundamentales de HTML y estamos listos para construir un sitio web de portafolio de una sola página desde cero.
Puedes intentar crearlo por tu cuenta o seguir esta guía paso a paso con el código para cada parte.
Guía paso a paso
1. Planificación de la estructura del sitio web
Nuestra página de portafolio incluirá:
- Encabezado: título del sitio y enlaces de navegación;
- Acerca de: una breve introducción sobre el propietario;
- Portafolio: proyectos con imágenes, títulos y breves descripciones;
- Contacto: un formulario para que los visitantes puedan comunicarse;
- Pie de página: derechos de autor y enlaces de contacto/redes sociales.
2. Estructurar el contenido con HTML semántico
Crea un nuevo archivo index.html y agrega la estructura básica de HTML con <!DOCTYPE html>, <html>, <head> y <body>.
index.html
3. Sección de encabezado
Agrega un <header> con el nombre del propietario y un <nav> que contenga enlaces que lleven a las secciones Acerca de, Portafolio y Contacto.
index.html
4. Sección Acerca de
Crear una <section id="about"> con un encabezado y un breve párrafo que describa al propietario.
index.html
5. Sección de Portafolio
Agregar una <section id="portfolio"> que liste proyectos con imágenes, títulos y descripciones breves.
index.html
6. Sección de Contacto
Crear una <section id="contact"> con un formulario de contacto sencillo que recopile nombre, correo electrónico y mensaje.
index.html
7. Sección de pie de página
Finalizar la página con un <footer> que incluya texto de derechos de autor y enlaces a redes sociales, teléfono y correo electrónico.
index.html
Extra
Para hacer que la página sea más atractiva visualmente, podemos conectar un archivo CSS y estilizar nuestro HTML. CSS controla los colores, el espaciado, las fuentes y el diseño, ayudando a que la misma estructura luzca mucho más pulida.
Por ahora, simplemente compara cómo se ve la página con HTML puro y cómo cambia una vez que se aplican estilos CSS básicos.
index.html
index.css
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
Genial!
Completion tasa mejorada a 2.86
Creación de un Sitio Web Completo con HTML
Desliza para mostrar el menú
Ya hemos cubierto los conceptos fundamentales de HTML y estamos listos para construir un sitio web de portafolio de una sola página desde cero.
Puedes intentar crearlo por tu cuenta o seguir esta guía paso a paso con el código para cada parte.
Guía paso a paso
1. Planificación de la estructura del sitio web
Nuestra página de portafolio incluirá:
- Encabezado: título del sitio y enlaces de navegación;
- Acerca de: una breve introducción sobre el propietario;
- Portafolio: proyectos con imágenes, títulos y breves descripciones;
- Contacto: un formulario para que los visitantes puedan comunicarse;
- Pie de página: derechos de autor y enlaces de contacto/redes sociales.
2. Estructurar el contenido con HTML semántico
Crea un nuevo archivo index.html y agrega la estructura básica de HTML con <!DOCTYPE html>, <html>, <head> y <body>.
index.html
3. Sección de encabezado
Agrega un <header> con el nombre del propietario y un <nav> que contenga enlaces que lleven a las secciones Acerca de, Portafolio y Contacto.
index.html
4. Sección Acerca de
Crear una <section id="about"> con un encabezado y un breve párrafo que describa al propietario.
index.html
5. Sección de Portafolio
Agregar una <section id="portfolio"> que liste proyectos con imágenes, títulos y descripciones breves.
index.html
6. Sección de Contacto
Crear una <section id="contact"> con un formulario de contacto sencillo que recopile nombre, correo electrónico y mensaje.
index.html
7. Sección de pie de página
Finalizar la página con un <footer> que incluya texto de derechos de autor y enlaces a redes sociales, teléfono y correo electrónico.
index.html
Extra
Para hacer que la página sea más atractiva visualmente, podemos conectar un archivo CSS y estilizar nuestro HTML. CSS controla los colores, el espaciado, las fuentes y el diseño, ayudando a que la misma estructura luzca mucho más pulida.
Por ahora, simplemente compara cómo se ve la página con HTML puro y cómo cambia una vez que se aplican estilos CSS básicos.
index.html
index.css
Aquí tienes el enlace al sitio web completo que se construyó en este capítulo: Sitio web de Julia
¡Gracias por tus comentarios!