Construindo um Site Completo com HTML
Deslize para mostrar o menu
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.
Guia Passo a Passo
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: breve introdução sobre o proprietário;
- Portfólio: projetos com imagens, títulos e descrições curtas;
- Contato: 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>.
index.html
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.
index.html
4. Seção Sobre
Criar um <section id="about"> com um título e um breve parágrafo descrevendo o proprietário.
index.html
5. Seção de Portfólio
Adicionar uma <section id="portfolio"> que lista projetos com imagens, títulos e descrições breves.
index.html
6. Seção de Contato
Criar uma <section id="contact"> com um formulário de contato simples que coleta nome, e-mail e mensagem.
index.html
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.
index.html
Bônus
Para tornar a página mais atraente visualmente, é possível conectar um arquivo CSS e estilizar o 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 após a aplicação de estilos CSS básicos.
index.html
index.css
Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia
O que você construiu
Você criou uma página web completa usando HTML com estrutura, conteúdo e elementos básicos.
O que está faltando
Sua página funciona, mas está com aparência muito simples. HTML define a estrutura, não o design.
Próximos passos
Para estilizar sua página, é necessário utilizar CSS para adicionar cores, layout e acabamento visual.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Construindo um Site Completo com HTML
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.
Guia Passo a Passo
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: breve introdução sobre o proprietário;
- Portfólio: projetos com imagens, títulos e descrições curtas;
- Contato: 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>.
index.html
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.
index.html
4. Seção Sobre
Criar um <section id="about"> com um título e um breve parágrafo descrevendo o proprietário.
index.html
5. Seção de Portfólio
Adicionar uma <section id="portfolio"> que lista projetos com imagens, títulos e descrições breves.
index.html
6. Seção de Contato
Criar uma <section id="contact"> com um formulário de contato simples que coleta nome, e-mail e mensagem.
index.html
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.
index.html
Bônus
Para tornar a página mais atraente visualmente, é possível conectar um arquivo CSS e estilizar o 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 após a aplicação de estilos CSS básicos.
index.html
index.css
Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia
O que você construiu
Você criou uma página web completa usando HTML com estrutura, conteúdo e elementos básicos.
O que está faltando
Sua página funciona, mas está com aparência muito simples. HTML define a estrutura, não o design.
Próximos passos
Para estilizar sua página, é necessário utilizar CSS para adicionar cores, layout e acabamento visual.
Obrigado pelo seu feedback!
