Summary  
This chapter demonstrates how to structure a web page using semantic HTML elements—such as header, nav, section, form, and footer—to create a clear and accessible document outline.

General domain of usage  
One-page portfolio websites

Agora que cobrimos os principais conceitos de HTML, estamos prontos para construir um site de portfólio de uma página do zero.

Você pode tentar construí-lo por conta própria ou seguir este guia passo a passo com código para cada parte.

### 1. Planejamento da Estrutura do Site
Nossa página de portfólio incluirá:
- **Cabeçalho**: título do site e links de navegação;
- **Sobre**: uma breve introdução sobre o proprietário;
- **Portfólio**: projetos com imagens, títulos e breves descrições;
- **Contato**: um formulário para visitantes entrarem em contato;
- **Rodapé**: direitos autorais e links de contato/redes sociais.

### 2. Estruture o conteúdo com HTML semântico
Crie um novo arquivo `index.html` e adicione a estrutura básica do HTML com `<!DOCTYPE html>`, `<html>`, `<head>` e `<body>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgPC9ib2R5Pgo8L2h0bWw+

### 3. Seção de cabeçalho
Adicione um `<header>` com o nome do proprietário e um `<nav>` contendo links que direcionam para as seções Sobre, Portfólio e Contato.

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

### 4. Seção Sobre
Criar uma `<section id="about">` com um título e um breve parágrafo descrevendo o proprietário.

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

### 5. Seção de Portfólio

Adicionar uma `<section id="portfolio">` que lista projetos com imagens, títulos e breves descrições.

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

### 6. Seção de Contato
Criar uma `<section id="contact">` com um formulário de contato simples que coleta nome, e-mail e mensagem.

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

### 7. Seção de Rodapé
Finalize a página com um `<footer>` que inclua texto de direitos autorais e links para redes sociais, telefone e e-mail.

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

### Bônus
Para tornar a página mais atraente visualmente, podemos conectar um arquivo CSS e estilizar nosso HTML. O CSS controla cores, espaçamento, fontes e layout, ajudando a mesma estrutura a parecer muito mais refinada.

Por enquanto, apenas compare como a página fica com HTML puro e como ela muda quando estilos CSS básicos são aplicados.

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=

Aqui está o link para <u>o site completo</u> que foi construído neste 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> Site da Julia</a>

Domine os fundamentos do HTML para criar conteúdos web bem estruturados e acessíveis. Aprenda a estruturar documentos utilizando tags, elementos e atributos. Trabalhe com confiança com textos, listas, imagens, áudio e vídeo para enriquecer páginas web. Crie tabelas para organizar dados e formulários para entrada e interação do usuário. Descubra o HTML semântico para aprimorar a acessibilidade e construa estruturas completas e funcionais de sites desde o início.

Obtenha uma introdução à web e ao HTML, incluindo a importância de tags, elementos e atributos. Conheça a estrutura básica de um documento HTML e um breve histórico da web.

Domine os conceitos essenciais da marcação HTML, com foco em formatação especial de texto e listas, compreendendo sua importância na estruturação do conteúdo em um documento HTML. Aprofunde-se nas particularidades da estrutura do documento HTML enquanto aprimora técnicas de marcação de texto.

Desbloqueie o potencial do conteúdo visual e auditivo no desenvolvimento web ao aprender a integrar de forma eficiente imagens, vídeos e elementos de áudio em documentos HTML. Explore as nuances da incorporação de diversos formatos de mídia.

Navegue pelas complexidades da apresentação de dados e interação do usuário com uma cobertura abrangente de tabelas e formulários em HTML, incluindo estruturas de tabelas, criação de formulários e elementos de entrada. Adquira proficiência na implementação de elementos de entrada de formulários e no uso de atributos para funcionalidade aprimorada.

Aprimore suas habilidades em HTML explorando elementos semânticos, permitindo a criação de conteúdo web bem estruturado e acessível. Inicie a construção do seu primeiro site, aplicando o conhecimento adquirido para concretizar suas ideias.

Construindo um Site Completo com HTML

Guia Passo a Passo

1. Planejamento da Estrutura do Site

2. Estruture o conteúdo com HTML semântico

3. Seção de cabeçalho

4. Seção Sobre

5. Seção de Portfólio

6. Seção de Contato

7. Seção de Rodapé

Bônus