Aula 39 - Prática HTML

Objetivo da Aula

Nesta aula prática vamos aplicar os conceitos aprendidos sobre HTML5, criando uma página estruturada utilizando elementos semânticos, textos, imagens, links e organização de conteúdo.

📌 O objetivo é transformar conhecimento teórico em uma página HTML funcional.

Projeto da Aula

Vamos criar uma página de apresentação de um curso de tecnologia.

Elemento	Utilização
Header	Cabeçalho do site
Nav	Menu de navegação
Main	Conteúdo principal
Section	Organização dos conteúdos
Footer	Rodapé

Etapa 1 - Criando a Estrutura HTML



<!doctype html>

<html lang="pt-BR">



<head>


<title>

Meu Curso

</title>


</head>



<body>



Conteúdo da página



</body>



</html>

Etapa 2 - Criando o Cabeçalho



<header>



<h1>

Curso Desenvolvimento Web

</h1>



<p>

Aprenda HTML5 e CSS3

</p>



</header>

Etapa 3 - Criando Menu



<nav>



<a href="#">

Início

</a>



<a href="#">

Cursos

</a>



<a href="#">

Contato

</a>



</nav>

Etapa 4 - Criando Conteúdo Principal



<main>



<section>



<h2>

Sobre o Curso

</h2>



<p>

Aprenda desenvolvimento web

utilizando tecnologias modernas.

</p>



</section>



</main>

Etapa 5 - Inserindo Imagem

O elemento imagem utiliza a tag <img>.



<img 

src="imagem.jpg"

alt="Imagem do curso">

⚠️ O atributo alt é importante para acessibilidade e SEO.

Etapa 6 - Criando Lista



<h2>

Conteúdos

</h2>



<ul>



<li>

HTML

</li>



<li>

CSS

</li>



<li>

JavaScript

</li>



</ul>

Etapa 7 - Criando Links



<a href="https://www.google.com">


Acessar Google


</a>

Etapa 8 - Criando Rodapé



<footer>



<p>

© 2026 Curso Web

</p>



</footer>

Projeto Completo



<header>

Curso Web

</header>



<nav>

Menu

</nav>



<main>



<section>

Conteúdo

</section>



</main>



<footer>

Direitos autorais

</footer>

Desafio Prático

Desenvolva uma página pessoal utilizando HTML5.

Criar um cabeçalho.
Adicionar menu.
Criar uma apresentação.
Adicionar uma imagem.
Criar uma lista de habilidades.
Criar um rodapé.

Checklist da Atividade

Item	Status
Estrutura HTML criada	⬜
Tags semânticas utilizadas	⬜
Imagem adicionada	⬜
Links funcionando	⬜

Resultado Esperado

Ao final da atividade o aluno deverá conseguir criar uma página HTML5 estruturada utilizando boas práticas.

💻 Prática HTML - Construção de uma Página Web