Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Construindo Todo o Site | HTML Avançado
Essenciais de HTML

bookConstruindo 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.

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>

3. Seção de Cabeçalho

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

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

4. Seção Sobre

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

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
</body>
</html>

5. Seção de Portfólio

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

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"

6. Seção de Contato

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

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"

7. Seção de Rodapé

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

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"

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.

html

index

css

index

js

index

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>

Tutorial em Vídeo

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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 4
We use cookies to make your experience better!
some-alt