Construção de um Site Completo com HTML
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 de forma independente ou seguir o guia abaixo, onde forneceremos instruções passo a passo e códigos relacionados a cada etapa.
Guia Passo a Passo
1. Planejamento da estrutura do site
Nosso site será composto por várias seções principais:
- Cabeçalho: Esta seção exibirá de forma destacada o nome do proprietário do portfólio e facilitará a navegação pelo site;
- Sobre: Aqui, os visitantes encontrarão informações relevantes sobre o proprietário do site, fornecendo detalhes sobre sua formação e experiência;
- Portfólio: Esta seção apresentará diversos projetos, cada um com imagens, títulos, descrições e as tecnologias utilizadas;
- Contato: Será incorporado um formulário para coletar informações dos visitantes;
- Rodapé: O rodapé será a seção final, apresentando informações de direitos autorais e links para perfis em redes sociais, telefone e endereço de e-mail.
2. Estruture o conteúdo com HTML semântico
Vamos criar um novo arquivo index.html e configurar a estrutura básica do documento HTML.
index.html
3. Seção de cabeçalho
Vamos construir o header com o nome do proprietário do site e links de navegação.
index.html
4. Seção Sobre
Seção dedicada à breve introdução e informações sobre o proprietário.
index.html
5. Seção de portfólio
Na seção de portfólio, o foco está nos projetos com descrições e imagens.
index.html
6. Seção de contato
Construção do formulário de contato para comunicação com o proprietário.
index.html
7. Seção de rodapé
Por fim, adicionar informações de direitos autorais e links para redes sociais.
index.html
Bônus
Vamos aprimorar a aparência do nosso site não apenas para os mecanismos de busca, mas também para os usuários. Podemos alcançar 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 estilos que permite especificar a apresentação e a estilização 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.
index.html
index.css
Tutorial em Vídeo
Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show me the basic HTML structure for the index.html file?
What should I include in each section of the website?
Can you explain how to use semantic HTML for this project?
Awesome!
Completion rate improved to 3.13Construção de um Site Completo com HTML
Deslize para mostrar o menu
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 de forma independente ou seguir o guia abaixo, onde forneceremos instruções passo a passo e códigos relacionados a cada etapa.
Guia Passo a Passo
1. Planejamento da estrutura do site
Nosso site será composto por várias seções principais:
- Cabeçalho: Esta seção exibirá de forma destacada o nome do proprietário do portfólio e facilitará a navegação pelo site;
- Sobre: Aqui, os visitantes encontrarão informações relevantes sobre o proprietário do site, fornecendo detalhes sobre sua formação e experiência;
- Portfólio: Esta seção apresentará diversos projetos, cada um com imagens, títulos, descrições e as tecnologias utilizadas;
- Contato: Será incorporado um formulário para coletar informações dos visitantes;
- Rodapé: O rodapé será a seção final, apresentando informações de direitos autorais e links para perfis em redes sociais, telefone e endereço de e-mail.
2. Estruture o conteúdo com HTML semântico
Vamos criar um novo arquivo index.html e configurar a estrutura básica do documento HTML.
index.html
3. Seção de cabeçalho
Vamos construir o header com o nome do proprietário do site e links de navegação.
index.html
4. Seção Sobre
Seção dedicada à breve introdução e informações sobre o proprietário.
index.html
5. Seção de portfólio
Na seção de portfólio, o foco está nos projetos com descrições e imagens.
index.html
6. Seção de contato
Construção do formulário de contato para comunicação com o proprietário.
index.html
7. Seção de rodapé
Por fim, adicionar informações de direitos autorais e links para redes sociais.
index.html
Bônus
Vamos aprimorar a aparência do nosso site não apenas para os mecanismos de busca, mas também para os usuários. Podemos alcançar 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 estilos que permite especificar a apresentação e a estilização 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.
index.html
index.css
Tutorial em Vídeo
Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia
Obrigado pelo seu feedback!
