Construindo Todo o Site

Cobrimos todos os tópicos essenciais de HTML e agora estamos prontos para construir um site completo do zero. Vamos criar um site de portfólio de uma página para exibir seus projetos e habilidades.

Você pode trabalhar nele de forma independente ou seguir o guia abaixo, onde forneceremos instruções passo a passo e código relacionado a cada etapa.

Guia Passo a Passo

1. Plano de estrutura do site

Nosso site será composto por várias seções principais:

1. Cabeçalho: Esta seção exibirá de forma proeminente o nome do proprietário do portfólio e facilitará a navegação por todo o site;
2. Sobre: Aqui, os visitantes encontrarão informações relevantes sobre o proprietário do site, fornecendo insights sobre seu histórico e expertise;
3. Portfólio: Esta seção exibirá vários projetos, cada um com imagens, títulos, descrições e as tecnologias utilizadas;
4. Contato: Incorporaremos um formulário para coletar informações dos visitantes;
5. Rodapé: O rodapé será a seção de encerramento, apresentando informações de direitos autorais e links para perfis de redes sociais, contato telefônico e endereço de e-mail.

2. Estruturar conteúdo com HTML semântico

Vamos criar um novo arquivo index.html e configurar a estrutura básica do documento HTML.

3. Seção de Cabeçalho

Vamos construir o header com o nome do proprietário do site e links de navegação.

4. Seção Sobre

Seção dedicada à breve introdução e informações sobre o proprietário.

5. Seção de Portfólio

Na seção de portfólio, focamos nos projetos com descrições e imagens.

6. Seção de Contato

Vamos construir o formulário de contato para entrar em contato com o proprietário.

7. Seção de Rodapé

Finalmente, vamos adicionar informações de direitos autorais e links para redes sociais.

Bônus

Vamos melhorar a aparência do nosso site não apenas para os mecanismos de busca, mas também para os usuários. Podemos conseguir isso com a ajuda do CSS, que significa Cascading Style Sheets. Embora não tenhamos abordado CSS neste curso, é um aspecto importante do design de sites.

CSS é uma linguagem de folha de estilo que nos permite especificar a apresentação e o estilo de um documento escrito em uma linguagem de marcação como HTML. Pode ser o próximo passo após aprender HTML — mais sobre isso no próximo capítulo. Por enquanto, vamos observar como o CSS melhora o HTML.

Tutorial em Vídeo

Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia