Summary  
This chapter covers structuring an HTML document with semantic elements—such as header, nav, section, form, and footer—to organize content into clear, navigable sections.  

General domain of usage  
Personal portfolio websites

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.

### 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**: breve introducción sobre el propietario;
- **Portafolio**: proyectos con imágenes, títulos y descripciones breves;
- **Contacto**: formulario para que los visitantes se comuniquen;
- **Pie de página**: derechos de autor y enlaces de contacto/redes sociales.

### 2. Estructuración de contenido con HTML semántico
Crear un nuevo archivo `index.html` y agregar la estructura básica de HTML con `<!DOCTYPE html>`, `<html>`, `<head>` y `<body>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgPC9ib2R5Pgo8L2h0bWw+

### 3. Sección de encabezado
Agregar un `<header>` con el nombre del propietario y un `<nav>` que contenga enlaces que dirijan a las secciones Acerca de, Portafolio y Contacto.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+SnVsaWEgQm90c2ZvcmQ8L2gxPgogICAgICA8bmF2PgogICAgICAgIDx1bD4KICAgICAgICAgIDxsaT48YSBocmVmPSIjYWJvdXQiPkFib3V0PC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3BvcnRmb2xpbyI+UG9ydGZvbGlvPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2NvbnRhY3QiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgICA8L3VsPgogICAgICA8L25hdj4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

### 4. Sección Acerca de
Crear un `<section id="about">` con un encabezado y un breve párrafo que describa al propietario.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDxoMj5BYm91dCBNZTwvaDI+CiAgICAgIDxwPgogICAgICAgIFdlbGNvbWUgdG8gbXkgcG9ydGZvbGlvIHdlYnNpdGUuIEknbSBhIHdlYiBkZXZlbG9wZXIgd2l0aCBhIHBhc3Npb24gZm9yCiAgICAgICAgY3JlYXRpbmcgYW1hemluZyB3ZWJzaXRlcy4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

### 5. Sección de Portafolio

Agregar una `<section id="portfolio">` que liste proyectos con imágenes, títulos y descripciones breves.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9InBvcnRmb2xpbyI+CiAgICAgIDxoMj5Qb3J0Zm9saW88L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPgogICAgICAgICAgPGltZwogICAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvMzkyZjI0YWMtMDEyNi00YzM0LWEyOGEtZjJmMjZkMTIxOTZiL3NlY3Rpb24tNS90ZWNodHJhY2sucG5nIgogICAgICAgICAgICB3aWR0aD0iMTAwIgogICAgICAgICAgICBhbHQ9IlRlY2hUcmVrIEFwcCIKICAgICAgICAgIC8+CiAgICAgICAgICA8aDM+VGVjaFRyZWsgQXBwPC9oMz4KICAgICAgICAgIDxwPkV4cGxvcmUgVGVjaCBUcmVuZHM8L3A+CiAgICAgICAgPC9saT4KICAgICAgICA8bGk+CiAgICAgICAgICA8aW1nCiAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zOTJmMjRhYy0wMTI2LTRjMzQtYTI4YS1mMmYyNmQxMjE5NmIvc2VjdGlvbi01L2Vjb2NyYWZ0LnBuZyIKICAgICAgICAgICAgd2lkdGg9IjEwMCIKICAgICAgICAgICAgYWx0PSJFY29DcmFmdCBXZWJzaXRlIgogICAgICAgICAgLz4KICAgICAgICAgIDxoMz5FY29DcmFmdCBXZWJzaXRlPC9oMz4KICAgICAgICAgIDxwPlByb21vdGUgU3VzdGFpbmFibGUgTGl2aW5nPC9wPgogICAgICAgIDwvbGk+CiAgICAgICAgPCEtLSBBZGQgbW9yZSBwcm9qZWN0IGVudHJpZXMgYXMgbmVlZGVkIC0tPgogICAgICA8L3VsPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

### 6. Sección de Contacto
Crear una `<section id="contact">` con un formulario de contacto sencillo que recopile nombre, correo electrónico y mensaje.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9InBvcnRmb2xpbyI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9ImNvbnRhY3QiPgogICAgICA8aDI+Q29udGFjdCBNZTwvaDI+CiAgICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICAgIDxsYWJlbCBmb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIHJlcXVpcmVkIC8+CiAgICAgICAgPGxhYmVsIGZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiByZXF1aXJlZCAvPgogICAgICAgIDxsYWJlbCBmb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIHJlcXVpcmVkIC8+CiAgICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlNlbmQ8L2J1dHRvbj4KICAgICAgPC9mb3JtPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

### 7. Sección de pie de página
Finaliza la página con un `<footer>` que incluya el texto de derechos de autor y enlaces a redes sociales, teléfono y correo electrónico.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9InBvcnRmb2xpbyI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9ImNvbnRhY3QiPgogICAgICA8IS0tIC4uLiAtLT4KICAgIDwvc2VjdGlvbj4KICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNeSBQb3J0Zm9saW8uIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vd3d3LmxpbmtlZGluLmNvbS8iPkxpbmtlZEluPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS8iPkdpdEh1YjwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJ0ZWw6KzQ0MjAzODg1MTgwMSI+KzQ0IDIwIDM4ODUgMTgwMTwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJtYWlsdG86anVsaWExODhAbWFpbC5jb20iPmp1bGlhMTg4QG1haWwuY29tPC9hPjwvbGk+CiAgICAgICAgPCEtLSBBZGQgbW9yZSBzb2NpYWwgbWVkaWEgbGlua3MgYXMgbmVlZGVkIC0tPgogICAgICA8L3VsPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

### Extra
Para hacer que la página sea más atractiva visualmente, se puede vincular un archivo CSS y aplicar estilos al HTML. CSS controla los colores, el espaciado, las fuentes y la disposición, ayudando a que la misma estructura luzca mucho más profesional.

Por ahora, simplemente compara cómo se ve la página solo con HTML y cómo cambia una vez que se aplican estilos CSS básicos.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICAgIDwhLS0gTGluayB0byB0aGUgZXh0ZXJuYWwgQ1NTIGZpbGUgLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+SnVsaWEgQm90c2ZvcmQ8L2gxPgogICAgICA8bmF2PgogICAgICAgIDx1bD4KICAgICAgICAgIDxsaT48YSBocmVmPSIjYWJvdXQiPkFib3V0PC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3BvcnRmb2xpbyI+UG9ydGZvbGlvPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2NvbnRhY3QiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgICA8L3VsPgogICAgICA8L25hdj4KICAgIDwvaGVhZGVyPgogICAgPHNlY3Rpb24gaWQ9ImFib3V0Ij4KICAgICAgPGgyPkFib3V0IE1lPC9oMj4KICAgICAgPHA+CiAgICAgICAgV2VsY29tZSB0byBteSBwb3J0Zm9saW8gd2Vic2l0ZS4gSSdtIGEgd2ViIGRldmVsb3BlciB3aXRoIGEgcGFzc2lvbiBmb3IKICAgICAgICBjcmVhdGluZyBhbWF6aW5nIHdlYnNpdGVzLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgICA8c2VjdGlvbiBpZD0icG9ydGZvbGlvIj4KICAgICAgPGgyPlBvcnRmb2xpbzwvaDI+CiAgICAgIDx1bD4KICAgICAgICA8bGk+CiAgICAgICAgICA8aW1nCiAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zOTJmMjRhYy0wMTI2LTRjMzQtYTI4YS1mMmYyNmQxMjE5NmIvc2VjdGlvbi01L3RlY2h0cmFjay5wbmciCiAgICAgICAgICAgIHdpZHRoPSIxMDAiCiAgICAgICAgICAgIGFsdD0iVGVjaFRyZWsgQXBwIgogICAgICAgICAgLz4KICAgICAgICAgIDxoMz5UZWNoVHJlayBBcHA8L2gzPgogICAgICAgICAgPHA+RXhwbG9yZSBUZWNoIFRyZW5kczwvcD4KICAgICAgICA8L2xpPgogICAgICAgIDxsaT4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzM5MmYyNGFjLTAxMjYtNGMzNC1hMjhhLWYyZjI2ZDEyMTk2Yi9zZWN0aW9uLTUvZWNvY3JhZnQucG5nIgogICAgICAgICAgICB3aWR0aD0iMTAwIgogICAgICAgICAgICBhbHQ9IkVjb0NyYWZ0IFdlYnNpdGUiCiAgICAgICAgICAvPgogICAgICAgICAgPGgzPkVjb0NyYWZ0IFdlYnNpdGU8L2gzPgogICAgICAgICAgPHA+UHJvbW90ZSBTdXN0YWluYWJsZSBMaXZpbmc8L3A+CiAgICAgICAgPC9saT4KICAgICAgPC91bD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGlkPSJjb250YWN0Ij4KICAgICAgPGgyPkNvbnRhY3QgTWU8L2gyPgogICAgICA8Zm9ybSBvbnN1Ym1pdD0icmV0dXJuIGZhbHNlIj4KICAgICAgICA8bGFiZWwgZm9yPSJuYW1lIj5OYW1lOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lIiBuYW1lPSJuYW1lIiByZXF1aXJlZCAvPgogICAgICAgIDxsYWJlbCBmb3I9ImVtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9ImVtYWlsIiBuYW1lPSJlbWFpbCIgcmVxdWlyZWQgLz4KICAgICAgICA8bGFiZWwgZm9yPSJtZXNzYWdlIj5NZXNzYWdlOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJtZXNzYWdlIiBuYW1lPSJtZXNzYWdlIiByZXF1aXJlZCAvPgogICAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TZW5kPC9idXR0b24+CiAgICAgIDwvZm9ybT4KICAgIDwvc2VjdGlvbj4KICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNeSBQb3J0Zm9saW8uIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vd3d3LmxpbmtlZGluLmNvbS8iPkxpbmtlZEluPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS8iPkdpdEh1YjwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJ0ZWw6KzQ0MjAzODg1MTgwMSI+KzQ0IDIwIDM4ODUgMTgwMTwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJtYWlsdG86anVsaWExODhAbWFpbC5jb20iPmp1bGlhMTg4QG1haWwuY29tPC9hPjwvbGk+CiAgICAgIDwvdWw+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogCiAgWW91IGRvbid0IG5lZWQgdG8gdW5kZXJzdGFuZCB3aGF0IGlzIHdyaXR0ZW4gaGVyZSwgCiAgYXMgaXQgaXMgQ1NTIHRoYXQgd2FzIG5vdCBjb3ZlcmVkIGluIHRoaXMgY291cnNlLiAKKi8KCi8qIC0tLS0tLS0tLS0tLS0tLS0tLSBCYXNlIFN0eWxlcyAtLS0tLS0tLS0tLS0tLS0tLS0gKi8KLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gUmVzZXQgLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi8KKiB7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gQmFzZSAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICBjb2xvcjogIzMzMzsKICBsaW5lLWhlaWdodDogMS42OwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKc2VjdGlvbiB7CiAgbWF4LXdpZHRoOiA4MDBweDsKICBtYXJnaW46IDUwcHggYXV0bzsKICBwYWRkaW5nOiAwIDIwcHg7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tIEhlYWRlciAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwpoZWFkZXIgewogIGJhY2tncm91bmQ6IHdoaXRlOwogIHBhZGRpbmc6IDI1cHggMDsKICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2RkZDsKfQoKaGVhZGVyIGgxIHsKICBmb250LXNpemU6IDIuMnJlbTsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgpuYXYgdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBnYXA6IDMwcHg7Cn0KCm5hdiBhIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgY29sb3I6ICMzMzM7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgdHJhbnNpdGlvbjogY29sb3IgMC4yczsKfQoKbmF2IGE6aG92ZXIgewogIGNvbG9yOiAjMDA3N2NjOwp9CgovKiAtLS0tLS0tLS0tLS0tLS0tLS0tLSBIZWFkaW5ncyAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwpzZWN0aW9uIGgyIHsKICBmb250LXNpemU6IDJyZW07CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKICBjb2xvcjogIzIyMjsKfQoKLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gQWJvdXQgLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi8KI2Fib3V0IHAgewogIGZvbnQtc2l6ZTogMS4xcmVtOwogIG1heC13aWR0aDogNjUwcHg7CiAgbWFyZ2luOiAwIGF1dG87CiAgY29sb3I6ICM1NTU7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tIFBvcnRmb2xpbyAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwojcG9ydGZvbGlvIHVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIGRpc3BsYXk6IGdyaWQ7CiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maXQsIG1pbm1heCgyNjBweCwgMWZyKSk7CiAgZ2FwOiAyNXB4OwogIG1hcmdpbi10b3A6IDMwcHg7CiAgcGFkZGluZzogMDsKICBqdXN0aWZ5LWl0ZW1zOiBjZW50ZXI7Cn0KCiNwb3J0Zm9saW8gbGkgewogIGJhY2tncm91bmQ6IHdoaXRlOwogIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAyMHB4OwogIHdpZHRoOiAxMDAlOwogIG1heC13aWR0aDogMzAwcHg7CiAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjJzOwp9CgojcG9ydGZvbGlvIGxpOmhvdmVyIHsKICBib3gtc2hhZG93OiAwIDRweCAxNHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKI3BvcnRmb2xpbyBpbWcgewogIHdpZHRoOiAxMDAlOwogIG1heC13aWR0aDogMTgwcHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKI3BvcnRmb2xpbyBoMyB7CiAgZm9udC1zaXplOiAxLjJyZW07CiAgbWFyZ2luLWJvdHRvbTogNXB4Owp9CgojcG9ydGZvbGlvIHAgewogIGNvbG9yOiAjNTU1Owp9CgovKiAtLS0tLS0tLS0tLS0tLS0tLS0tLSBDb250YWN0IEZvcm0gLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi8KZm9ybSB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgYm9yZGVyOiAxcHggc29saWQgI2RkZDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDI1cHg7CiAgbWF4LXdpZHRoOiA0NTBweDsKICBtYXJnaW46IDMwcHggYXV0byAwOwogIHRleHQtYWxpZ246IGxlZnQ7Cn0KCmxhYmVsIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDE1cHggMCA1cHg7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7Cn0KCmlucHV0IHsKICB3aWR0aDogMTAwJTsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNiYmI7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKYnV0dG9uIHsKICBtYXJnaW4tdG9wOiAyMHB4OwogIHBhZGRpbmc6IDEycHggMjBweDsKICBiYWNrZ3JvdW5kOiAjMDA3N2NjOwogIGNvbG9yOiB3aGl0ZTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGN1cnNvcjogcG9pbnRlcjsKICB3aWR0aDogMTAwJTsKICBmb250LXNpemU6IDFyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZDogIzAwNWZhMzsKfQoKLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gRm9vdGVyIC0tLS0tLS0tLS0tLS0tLS0tLS0tICovCmZvb3RlciB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgcGFkZGluZzogMjVweCAwOwogIGJvcmRlci10b3A6IDFweCBzb2xpZCAjZGRkOwogIG1hcmdpbi10b3A6IDUwcHg7Cn0KCmZvb3RlciB1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGdhcDogMjVweDsKICBtYXJnaW4tdG9wOiAxNXB4Owp9Cgpmb290ZXIgYSB7CiAgY29sb3I6ICMwMDc3Y2M7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9Cgpmb290ZXIgYTpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0=

Aquí tienes el enlace al <u>sitio web completo</u> que se construyó en este capítulo: <a href="https://olreyplay.github.io/html-essentials_build-entire-website/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Sitio web de Julia</a>

#### Lo que has construido
Has creado una página web completa utilizando HTML con estructura, contenido y elementos básicos.

#### Lo que falta
Tu página funciona, pero se ve muy básica.
HTML define la estructura, no el diseño.

#### Próximos pasos
Para estilizar tu página, necesitas **CSS** para agregar colores, diseño y acabado visual.

Construya páginas web estructuradas utilizando HTML. Cree contenido de texto, enlaces, listas, imágenes, tablas y formularios, y organice todo con elementos semánticos en una página completa.

Construcción de un Sitio Web Completo con HTML

Guía paso a paso

1. Planificación de la estructura del sitio web

2. Estructuración de contenido con HTML semántico

3. Sección de encabezado

4. Sección Acerca de

5. Sección de Portafolio

6. Sección de Contacto

7. Sección de pie de página

Extra

Lo que has construido

Lo que falta

Próximos pasos