🧑‍💻

COMO FUNCIONA

Você vai construir um site de verdade

Não fique apenas lendo sobre HTML. Durante este laboratório você verá o código, copiará cada parte para seu arquivo HTML e observará imediatamente o resultado.

A ideia é aprender fazendo.

📌 Regra do laboratório: leia a explicação, observe o código, copie o exemplo, teste no seu arquivo e somente depois clique em "Concluir etapa e avançar" .

SEU PROGRESSO

Construindo seu site

1 Estrutura

2 Títulos

3 Textos

4 Imagens

5 Listas

6 Links

7 Multimídia

8 Elementos

9 Semântica

10 Projeto

PRIMEIRO PASSO

Criando a estrutura HTML

Toda página começa com uma estrutura básica.

Antes de colocar textos, imagens ou vídeos, precisamos criar a estrutura principal do documento.

Digite ou copie este código para seu arquivo index.html.

index.html HTML

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Primeiro Site</title>

</head>

<body>

    <h1>Meu Primeiro Site</h1>

</body>

</html>

🌐 RESULTADO NO NAVEGADOR ● ONLINE

Meu Primeiro Site

💡 O navegador interpreta as tags HTML e transforma o código em elementos visuais.

<html> Define o documento HTML.

<head> Contém informações do documento.

<body> Contém o conteúdo visível.

HIERARQUIA

Títulos: h1 até h6

Criando títulos e subtítulos.

HTML possui seis níveis de títulos. O h1 representa o título mais importante.

titulos.html HTML

<h1>Título Principal</h1>

<h2>Subtítulo</h2>

<h3>Título nível 3</h3>

<h4>Título nível 4</h4>

<h5>Título nível 5</h5>

<h6>Título nível 6</h6>

🌐 RESULTADO

Título Principal

Subtítulo

Título nível 3

Título nível 4

Título nível 5

Título nível 6

📌 Utilize os títulos de acordo com a hierarquia do conteúdo.

CONTEÚDO

Textos e formatação

Trabalhando com parágrafos e destaque.

Agora vamos adicionar conteúdo ao nosso site.

Também vamos conhecer tags importantes para formatação semântica.

textos.html HTML

<p>
    Este é um parágrafo do meu site.
</p>

<p>
    Texto em <strong>negrito semântico</strong>.
</p>

<p>
    Texto em <em>itálico semântico</em>.
</p>

<p>
    Texto <mark>destacado</mark>.
</p>

<p>
    Texto <del>removido</del>.
</p>

<p>
    H<sub>2</sub>O
</p>

<p>
    x<sup>2</sup>
</p>

<hr>

🌐 RESULTADO

Este é um parágrafo do meu site.

Texto em negrito semântico.

Texto em itálico semântico.

Texto destacado.

Texto ~~removido~~.

H₂O

x²

🧠

Tags semânticas

<strong> e <em> informam significado ao conteúdo.

📝

Parágrafos

A tag <p> organiza blocos de texto.

MÍDIA

Inserindo imagens

Colocando imagens no site.

A tag <img> permite inserir imagens.

O atributo alt é importante para acessibilidade.

imagens.html HTML

<h2>Meu logotipo</h2>

<img src="imagens/logo.png" alt="Logotipo do site">

<br>

<img src="imagens/logo.png" alt="Logotipo do site" width="200" >

🌐 RESULTADO

🖼️ Sua imagem aparecerá aqui

📌 Sempre utilize o atributo alt para descrever a imagem.

ORGANIZAÇÃO

Criando listas

Organizando informações.

As listas são muito utilizadas em sites para organizar informações.

listas.html HTML

<h2>Lista Ordenada</h2>

<ol>

    <li>Acordar</li>

    <li>Tomar café</li>

    <li>Estudar HTML</li>

</ol>


<h2>Lista Não Ordenada</h2>

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

🌐 RESULTADO

Lista Ordenada

Acordar
Tomar café
Estudar HTML

Lista Não Ordenada

HTML
CSS
JavaScript

NAVEGAÇÃO

Criando links

Conectando páginas e sites.

A tag <a> cria hyperlinks.

links.html HTML

<h2>Link interno</h2>

<a href="pagina.html">
    Abrir outra página
</a>


<h2>Link externo</h2>

<a href="https://www.sp.senai.br/" target="_blank">
    Acessar SENAI
</a>


<h2>Download</h2>

<a href="arquivo.zip" download>
    Baixar arquivo
</a>

🌐 RESULTADO

🏠 Link interno 🌐 Site externo 📥 Download

MULTIMÍDIA

Áudio e vídeo

Adicionando conteúdo multimídia.

multimidia.html HTML

<h2>Áudio</h2>

<audio src="musica.mp3" controls></audio>


<h2>Vídeo</h2>

<video src="video.mp4" width="400" controls></video>

🌐 RESULTADO

🎵 Áudio

🎬 Vídeo

💡 Os arquivos precisam estar disponíveis no caminho informado no atributo src.

ELEMENTOS

Div, span e details

Criando organização dentro da página.

elementos.html HTML

<div>

    <h2>Área de conteúdo</h2>

    <p>
        Este conteúdo está dentro de uma div.
    </p>

</div>


<p>

    Este é um texto com
    <span>uma palavra destacada</span>.

</p>


<details>

    <summary>
        Clique para saber mais
    </summary>

    <p>
        Este conteúdo pode ser
        expandido pelo usuário.
    </p>

</details>

🌐 RESULTADO

Área de conteúdo

Este conteúdo está dentro de uma div.

Texto com uma palavra destacada .

Clique para saber mais

Este conteúdo pode ser expandido pelo usuário.

HTML SEMÂNTICO

Estrutura semântica

Organizando corretamente uma página.

Agora vamos utilizar elementos que representam claramente cada parte de uma página web.

semantica.html HTML

<header>

    <h1>Meu Site</h1>

</header>


<nav>

    <a href="#">Início</a>

    <a href="#">Sobre</a>

    <a href="#">Contato</a>

</nav>


<main>

    <section>

        <h2>Sobre o Site</h2>

        <p>
            Conteúdo principal.
        </p>

    </section>

</main>


<footer>

    &copy; 2026 - Meu Site

</footer>

🌐 RESULTADO

Meu Site

Sobre o Site

Conteúdo principal.

🚀 Esta estrutura é importante para acessibilidade, organização, manutenção e mecanismos de busca.

DESAFIO FINAL

🚀 Construa seu primeiro site

Agora é sua vez. Você deverá utilizar os conhecimentos aprendidos durante o laboratório para criar uma página completa.

01 Estrutura html, head e body

02 Conteúdo títulos e parágrafos

03 Imagens img e alt

04 Navegação links e páginas

05 Multimídia áudio e vídeo

06 Semântica header, main e footer

🎯 Objetivo: criar uma página sobre você, sua profissão, seu curso, um hobby ou um tema de sua escolha. Utilize pelo menos uma vez cada conceito estudado neste laboratório.

📚 O que você aprendeu

✅ Estrutura HTML

✅ Títulos

✅ Parágrafos

✅ Formatação

✅ Imagens

✅ Listas

✅ Links

✅ Áudio e vídeo

✅ Div e span

✅ Details

✅ HTML semântico

🚀 Projeto final

🎓

Laboratório concluído!

Você passou pelas principais etapas da criação de uma página HTML.

Agora você já pode começar a construir seus próprios sites.