Módulo 2 — Trabalhando com Conteúdo do Curso HTML.
vamos aprender nesse módulo 2 as trabalhar com títulos, parágrafos, texto, listas, imagens, vídeos, links e outros tipos de conteúdo.
vamos dividir aqui mesmo em duas partes para não embaralhar, a primeira parte vamos trabalhar com títulos, parágrafos, texto. |
| 🌍 Este site está disponível em vários idiomas. Fique à vontade para usar o tradutor no topo da página e aprender no seu idioma. |
Se você está começando no desenvolvimento web, entender como os textos são estruturados em HTML é um passo essencial.
Nesta primeira parte desse módulo, você vai aprender a utilizar corretamente títulos, parágrafos, quebras de linha, citações e referências, compreendendo como cada tag contribui para a construção de um conteúdo bem estruturado e acessível.
🧩 Entendendo a Estrutura de Texto no HTML
O HTML utiliza tags semânticas para definir o papel de cada trecho de texto dentro de uma página. Isso significa que, além da apresentação visual, cada elemento carrega um significado específico, tornando o conteúdo mais organizado e compreensível.
Essas boas práticas são fundamentais para que ferramentas como mecanismos de busca consigam indexar corretamente seu site.
🏷️ Títulos (Headings)
As tags de títulos vão de <h1> até <h6> veja as tag e suas descrição e como usa-las.
<h1> → Título principal da página → Apenas 1 por página
<h2> → Subtítulo importante → Divisões principais
<h3> → Subtítulo secundário → Subseções
<h4> → Título menos relevante → Subseções internas
<h5> → Subnível de detalhamento → Detalhes ou notas
<h6> → Nível mais baixo → Observações ou apêndices
💡 Exemplo prático:
<h1>Introdução ao HTML</h1>
<p>O HTML é a base da web moderna e permite estruturar textos e imagens.</p>
<h2>Como funcionam as tags</h2>
<p>Cada tag define um papel específico dentro da página.</p>
<h3>Estrutura de hierarquia</h3><p>Usar os níveis corretamente é essencial para SEO e acessibilidade.</p>
💡 Boas práticas:
● Use apenas um <h1> por página, ele indica o tema principal do documento.
● Trabalhe com os outros níveis de forma hierárquica (como em tópicos de um livro).
● Nunca use <h3> antes de um <h2> mantenha a sequência lógica.
✏️ Parágrafos e Quebras de Linha
A principal tag de texto é <p>, usada para definir parágrafos. Dentro dela, podemos inserir frases, links, palavras em negrito, etc. Exemplo:
<p>O HTML foi criado para permitir a estruturação de documentos na web.</p>
<p>Cada parágrafo é representado pela tag <p> e termina automaticamente.</p>
Observe que, ao criar dois parágrafos, o navegador adiciona um pequeno espaçamento entre eles automaticamente.
🧾 Quebras de linha (<br>)
A tag <br> é usada quando você não quer iniciar um novo parágrafo, mas precisa forçar uma quebra de linha. Exemplo:
<p>Curso de HTML do Zero ao Avançado<br>Aprenda e pratique no seu ritmo!</p>
🔎 O Resultado no Live Server fica:
Curso de HTML do Zero ao Avançado
Aprenda e pratique no seu ritmo!
💡 Dica:
use <br> moderadamente. Para blocos longos de texto, prefira criar novos <p> isso mantém a semântica do conteúdo.
🧠 Formatação Básica de Texto Com o HTML5.
<strong> → Dá ênfase forte (negrito semântico)
A tag é → <strong>Importante!</strong>
<em> → Dá ênfase suave (itálico semântico)
A tag é → <em>Palavra destacada</em>
<b> → Texto em negrito (visual)
A tag é → <b>Texto em destaque</b>
<i> → Texto em itálico (visual)
A tag é → <i>Texto estilizado</i>
<u> → Sublinha o texto
A tag é → <u>Texto sublinhado</u>
<mark> → Marca o texto como um marcador
A tag é → <mark>Texto marcado</mark>
<small> → Define texto menor
A tag é → <small>Aviso legal</small>
<del> → Mostra texto removido (riscado)
A tag é → <del>Antigo preço</del>
<ins> → Mostra texto inserido (sublinhado suave)
A tag é → <ins>Novo conteúdo</ins>
💡 Observação: As tags em html é a linguagem de marcação de hipertexto.
 |
| Ob: Só que dessa forma todos ficarão lado a lado, na web. |
Para que fique um embaixo do outro e necessário acrescentar as tags de títulos que vão de <h1> até <h6>.
🧠 Lembre-se: <h1> → Título principal da página → Apenas 1 por página, por isso que no exemplo acima quando acaba o limite de tags eu repito de <h2> em diante.
⚡ Outro exemplo prático:
<p>O HTML <strong>estrutura</strong> um site, enquanto o <em>CSS</em> define o visual.</p>
<p><mark>Importante:</mark> Use tags semânticas para dar significado ao texto.</p>
 |
| Ob: Deixei as tags afastadas para melhor aprendizado. |
🕮 Citando, Destacando e Referenciando
Há também tags específicas para citações e referências: Veja as descrições das tags:
<blockquote> → Citação longa, com recuo
A tag é → <blockquote>Citação de um autor</blockquote>
<q> → Citação curta
A tag é → <q>Texto entre aspas</q>
<abbr> → Abreviação com explicação
A tag é → <abbr title="Cascading Style Sheets">CSS</abbr>
<cite> → Referência a obras ou autores
A tag é → <cite>HTML & CSS Design</cite>
<code> → Exibe código de programação
A tag é → <code><html></code>
<pre> → Mantém espaços e quebras de linha do texto original
A tag é → <pre>Linha 1\nLinha 2</pre>
Coloquei todos em <h3> só por didática.
💡 Outro exemplo completo:
<p>Segundo <cite>Tim Berners-Lee</cite>, criador da Web:</p>
<blockquote>
A Web é mais uma criação social do que técnica.
</blockquote>
<p>Para inserir código, usamos a tag <code><code></code>.</p>
Ob: Deixei as tags afastadas para melhor aprendizado.
🧩 Criando uma Página de Artigo
Vamos criar uma página simples com títulos, subtítulos e parágrafos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Artigo sobre HTML</title>
</head>
<body>
<h1>O Que é HTML?</h1>
<p>HTML significa <strong>HyperText Markup Language</strong> e é utilizado para estruturar o conteúdo de páginas na web.</p>
<h2>Tags e Estrutura</h2>
<p>Cada página é composta de elementos marcados por <em>tags</em>.</p>
<h3>Exemplo Básico</h3>
<pre>
<h1>Título da Página</h1>
<p>Este é um parágrafo.</p>
</pre>
</body>
</html>
💻 Exercício: Crie um arquivo chamado texto_basico.html com o seguinte conteúdo:
1. Um título principal (<h1>) apresentando o tema.
2. Um subtítulo (<h2>) contextualizando.
3. Três parágrafos sobre o tema (use <strong>, <em> e <mark> pelo menos uma vez).
4. Uma citação usando <blockquote> e uma explicação curta logo abaixo.
5. Exiba em <pre> e <code> um exemplo de tag HTML.
✅ Desafio Extra: Adicione um trecho com <abbr> explicando a sigla “HTML”.
Vamos agora para parte dois desse mesmo módulo como combinado lá encima.
 |
| 🌍 Este site está disponível em vários idiomas. Fique à vontade para usar o tradutor no topo da página e aprender no seu idioma. |
🖼️ Inserindo Imagens no HTML
A tag <img> é responsável por exibir imagens. Ela é autofechável (não precisa de uma tag de fechamento) e possui alguns atributos essenciais.
📜 Estrutura básica:
<img src="imagens/logo.png" alt="Logotipo da empresa">
Veja os atributo e funções
src → Caminho da imagem (URL ou arquivo local).
alt → Texto alternativo para descrição acessível (obrigatório).
width / height → Define dimensões da imagem (em pixels).
title → Exibe uma dica quando o mouse passa sobre a imagem.
Exemplo prático:
<img src="imagens/logo-curso.png" alt="Logotipo do Site Academy Code Christ">
<img src="caminho/da/imagem.jpg" alt="Descrição da imagem">
🧠 Lembre-se:
⚠️Atenção:
🎨 3. Formatos de Imagem e Quando Usar e Vantagem Desvantagem
.jpg/.jpeg → Fotos e imagens com gradientes → Leve, compatível → Perde qualidade em compressão
.png → Imagens com transparência → qualidade e transparência → Arquivos mais pesados
.gif → Pequenas animações → Movimento leve → Limitado a 256 cores
.svg → Ícones e gráficos vetoriais → Escala infinita e leve → Pouco usado para fotos
.webp → Geral (últimas gerações) → Melhor compressão e qualidade → Nem todos os
navegadores antigos suportam.
💬 Melhor prática:
Use SVG para ícones e logos, e WEBP para fotos otimizadas.
📂 Os caminhos Relativos e Absolutos
Existem duas formas de indicar onde o arquivo está:
Relativo → "imagens/foto.jpg" → Caminho dentro da estrutura do projeto local.
Absoluto →"https://example.com/imagens/foto.jpg" → Caminho externo absoluto (ex.hospedado na internet).
⚙️ Largura e Altura (width / height)
<img src="imagens/banner.jpg" alt="Banner do site" width="400" height="200">
⚠️Atenção:
width= largura, que foi de "400"
💡 Dica importante:
Evite distorcer a proporção entre largura e altura, isso pode deixar a imagem deformada. É mais comum e recomendado controlar o tamanho via CSS, como:
<img src="imagens/foto.jpg" alt="Foto de exemplo" style="width:50%;">
🧩 Usando o atributo title
O atributo title é opcional e exibe uma dica quando o usuário passa o mouse por cima da imagem. Exemplo:
<img src="imagens/html-logo.png" alt="Logo HTML" title="HTML: Linguagem de marcação de hipertexto">
1. Use sempre alt para descrever a imagem.
2. Otimize o tamanho do arquivo (para não deixar o site lento).
3. Utilize formatos adequados: .jpg, .png, .svg, .gif, .webp.
4. Dê nomes de arquivos descritivos — exemplo: banner-principal.jpg ao invés de img001.jpg.
🌄 4. Inserindo Figura com Legenda (<figure> e <figcaption>)
Essas tags ajudam a agrupar imagens e legendas de forma semântica.
💡 Exemplo prático:
<figure>
<img src="imagens/code.jpg" alt="Tela com código de desenvolvimento web">
<figcaption>Imagem ilustrativa de um desenvolvedor trabalhando em HTML</figcaption>
</figure>
<figure> → agrupa a imagem e a legenda.
<figcaption> → descreve o conteúdo visual.
🎥 Inserindo Vídeos em HTML
A tag <video> é semelhante ao áudio.
Permite exibir vídeos locais ou hospedados externamente.
📜 Estrutura básica:
<video src="midia/video.mp4" controls></video>
Vamos entender suas funções e atributos:
width, height → Define o tamanho do player.
controls → Mostra controles (play, pause, etc.).
poster → Define uma imagem de capa (thumbnail) antes de começar.
autoplay, loop, muted, preload → Funcionam da mesma forma que no <audio>.
💡 Exemplo avançado:
<video width="640" height="360" controls poster="imagens/thumb.jpg">
<source src="midia/aula.mp4" type="video/mp4">
<source src="midia/aula.webm" type="video/webm">
Seu navegador não suporta vídeos HTML5.
</video>
🔹 Use múltiplos formatos para garantir compatibilidade.
🔹 O atributo poster cria uma “thumbnail” até o vídeo começar.O HTML5 introduziu a tag <video>, que permite exibir vídeos diretamente no navegador sem plugins externos. Veja a estrutura básica:
<video src="videos/aula.mp4" width="640" height="360" controls></video>
Vamos entender suas funções e atributos:
src → Caminho do vídeo (local ou online).
controls → Exibe botões de controle (play, pause, volume etc.).
autoplay → Faz o vídeo iniciar automaticamente.
loop → Faz o vídeo reiniciar automaticamente após terminar.
muted → Inicia o vídeo sem som.
poster → Define uma imagem de capa antes de o vídeo iniciar.
💡 Exemplo completo:
<video width="500" controls poster="imagens/thumb.png">
<source src="videos/meu_video.mp4" type="video/mp4">
<source src="videos/meu_video.ogv" type="video/ogg">
Seu navegador não suporta vídeos.
</video>
🔎 Veja como fica no VScode
 |
| Ob: Deixei as tags afastadas para melhor aprendizado |
🔎 Explicação:
● Usamos várias fontes <source> para compatibilidade entre navegadores;
● A mensagem dentro do <video> aparece caso o navegador não suporte o recurso; O pôster exibe uma miniatura enquanto o vídeo não é iniciado.
📺 Incorporando vídeos de plataformas (YouTube e Vimeo)
Além de arquivos locais, é muito comum incorporar vídeos externos usando o elemento <iframe>. Quando você digitar no VScode ele vai abrir dessa forma:
💡 Exemplo (YouTube):
<iframe width="560" height="315"
src="https://www.youtube.com/embed/3JluqTojuME"
title="Vídeo Tutorial HTML"
frameborder="0"
allowfullscreen>
</iframe>
🧠 Lembre-se:
Vimos o que é o width= É a largura e height= Que é a Altura. Agora apareceu o:
 |
| Ob: Deixei as tags afastadas para melhor aprendizado |
🔖 Dica:
Você pode pegar esse código diretamente no botão "Compartilhar → Incorporar" de qualquer vídeo no YouTube. Exemplo:
🔊 Inserindo Áudios no HTML
A tag <audio> permite incluir sons e músicas diretamente nas páginas.
📜 Estrutura básica:
<audio src="midia/audio.mp3" controls></audio>
Vamos entender suas funções:
src → Caminho ou URL do arquivo de áudio.
controls → Exibe os controles de reprodução (play, pause, volume).
autoplay → Inicia automaticamente (uso cuidadoso — pode ser irritante).
loop → Recomeça automaticamente quando termina.
muted → Começa sem som.
preload → Define como o navegador carrega o áudio (auto, metadata, none).
source= → É a fonte ou a origem.
Dica: Sempre use <source> para oferecer vários formatos compatíveis.
Boa prática: nunca force autoplay em páginas públicas — é melhor permitir o clique do usuário.Assim como os vídeos, o HTML5 permite incorporar áudios nativamente, com a tag <audio> Exemplo:
<source src="audios/podcast_intro.mp3" type="audio/mpeg">
<source src="audios/podcast_intro.ogg" type="audio/ogg">
Seu navegador não suporta reprodução de áudio.
</audio>
Vamos entender suas funções:
controls → Mostra os controles de reprodução
autoplay → Inicia automaticamente
loop → Repete indefinidamente
🎧 Incorporando Áudios Externos (Spotify, SoundCloud, etc.)
Esses serviços fornecem códigos de incorporação semelhantes ao YouTube.
💡 Exemplo (Spotify):
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/track/xyz"
width="300" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media"></iframe>
💬 Sempre verifique as políticas de uso e direitos autorais antes de incorporar conteúdo externo.
🗺️ Incorporando Outras Mídias e Conteúdos Externos.
O HTML permite incorporar outros tipos de elementos, como mapas, documentos e widgets externos. Exemplo: → Mapa do Google.
<iframe
src="https://www.google.com/maps/embed?pb=URL_COMPLETA_GERADA_PELO_GOOGLE"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
📄 Exemplo do outros como: → PDF incorporado
<iframe src="documentos/manual.pdf" width="100%" height="600px"></iframe>
src= É o caminho do arquivo ou página que você quer exibir ou carregar.
⚠️Atenção:
⚙️ Acessibilidade em Multimídia
Para tornar sua página acessível, siga estas boas práticas:
1. Sempre use alt em imagens;
2. Evite autoplay;
3. Inclua legendas e transcrições quando usar áudio ou vídeo;
4. Descreva imagens complexas com <figcaption>;
5. Forneça alternativas textuais ou contextuais (por exemplo, um resumo de um vídeo em texto)
🧱 Exemplo Completo – Página Multimídia Profissional
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Multimídia no HTML</title>
</head>
<body>
<header>
<h1>Galeria Multimídia - Curso HTML</h1>
</header>
<main>
<section>
<h2>Imagem com Legenda</h2>
<figure>
<img src="imagens/html5_logo.png" alt="Logotipo do HTML5" width="200">
<figcaption>O HTML5 é a base da web moderna.</figcaption>
</figure>
</section>
<section>
<h2>Áudio de Exemplo</h2>
<audio controls preload="metadata">
<source src="midia/exemplo.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>
</section>
<section>
<h2>Vídeo Local</h2>
<video width="480" controls poster="imagens/thumb_html.jpg">
<source src="midia/html_intro.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>
</section>
<section>
<h2>Vídeo Externo (YouTube)</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/DLX62G4lc44"
title="Tutorial HTML no YouTube" frameborder="0"
allowfullscreen>
</iframe>
</section>
</main>
<footer>
<p>© 2024 - Curso HTML do Zero ao Avançado</p>
</footer>
</body>
</html>
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
2. Insira uma imagem local com alt e title;
3. Em seguida, adicione um vídeo local com controles e uma imagem pôster;
4. Incorpore um vídeo do YouTube com <iframe>;
5. Adicione um áudio (formato .mp3 ou .ogg) com controles;
6. (Desafio extra) Inclua um mapa incorporado ou um PDF.
/videos
/audios
/documentos
📚 Continue aprendendo vá para:
Módulo 3 — Estrutura Semântica e Organização Avançada do Curso HTML.
Eu poderia colocar este curso em plataformas como Kiwify ou Hotmart e cobrar pelo acesso. Mas escolhi fazer diferente.
Mas em vez de tentar provar que o meu trabalho é bom nas redes sociais, prefiro deixar que você tenha liberdade para estudar, praticar e tirar suas próprias conclusões.
Por isso, a proposta da Academy Code Christ é oferecer este conteúdo gratuitamente para quem deseja aprender programação e desenvolver novas habilidades.
Se o conteúdo foi útil para você, se ajudou nos seus estudos e você quiser contribuir sem obrigação, para que o projeto continue crescendo,
você pode apoiar a Academy Code Christ com um café. ☕
Pix: antropologiacrista@gmail.com
Comentários
Postar um comentário