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
Can you show me the full HTML code for the portfolio website?
What are some tips for customizing the sections for my own portfolio?
How can I add more projects or sections to the website?
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!