O que é HTML e como a Web funciona. 🌴 TRILHA HTML 🟠 Etapa 01

 Seja muito bem-vindo à Academy Code Christ!     

🌍 Academy Code Christ está disponível em vários idiomas.

Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 

e aprender no seu idioma.

📚 Continue sua jornada de aprendizado

A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  

📋 Menus correspondentes:

👉 Acesse Aqui o Menu Completo do Curso de 🟠 HTML!

👉 Acesse aqui o menu completo do Curso de 🎨 CSS!

👉Acesse aqui o menu completo do Curso de 🚀 JavaScript!

👉 Acesse aqui o menu completo do Curso de 🐍 Python!

👉 Acesse aqui o menu completo do Curso de ⚙️ C Sharp!

👉 Acesse aqui o menu completo do Curso de 🐘 PHP!

💻 Pratique o que você aprende

👉 Acesse o Code Editor Mr Digitals e comece a praticar 

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.

🟠 Etapa 04 

O que você vai aprender nesta aula?

Nessa Etapa 04, você vai aprender como inserir corretamente esses recursos no HTML, seguindo boas práticas. 

Vamos começar entendendo como trabalhar com imagens, um dos elementos mais utilizados no desenvolvimento web, e explorar a tag <img>.

🖼️  Imagens no HTML

Na construção de páginas web modernas, não basta apresentar apenas texto. É fundamental saber integrar. Imagens, vídeos, áudios e outros elementos, como mapas e documentos, ajudam a comunicar melhor as informações e tornam o conteúdo muito mais envolvente para o usuário.

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">

 

As imagens ajudam a tornar as páginas mais atrativas e informativas. Para inseri-las, usamos a tag <img>, que é uma tag vazia (não tem fechamento). Veja a estrutura da Tag <img>

<img src="caminho/da/imagem.jpg" alt="Descrição da imagem">


🧠 Lembre-se: 

Sempre use alt! É essencial para SEO e para inclusão de pessoas que usam leitores de tela.

o alt → Apenas fornece o texto alternativo para o SEO, ele não aparece na página.

🔎 Veja como fica no VScode

🔎 Veja o resultado como fica no Live Server

🎨 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).

💬 Sempre que possível, prefira caminhos relativos, para facilitar a portabilidade do projeto.

⚙️ Largura e Altura (width / height)

Você pode ajustar o tamanho da imagem diretamente na tag (em pixels) ou via CSS. Exemplo:

<img src="imagens/banner.jpg" alt="Banner do site" width="400" height="200">

⚠️ lembre-se: 

 alt → O título da imagem para SEO

width= largura, que foi de "400" 

height= Altura, que foi de "200"

🔎 Veja como fica no VScode

💡 Dica importante:

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.

5. 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">

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

🎥 Vídeos em HTML

A tag <video> é semelhante ao áudio.Permite exibir vídeos locais ou hospedados externamente.

Estrutura básica:

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


width, height → Define o tamanho do player.

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

🔎 Veja o resultado como fica no Live Server

📺 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: 

<iframe src="" frameborder="0"></iframe>


💡 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:  

frameborder = Que é a borda do quadro.

allowfullscreen = Que é o comando de permitir tela cheia.

frameborder="0" = Que é frequentemente utilizado para remover a borda padrão do navegador e fazer o conteúdo ser incorporado.

🔎 veja como fica no VScode

Ob: Deixei as tags afastadas para melhor aprendizado

🔎Veja o resultado como fica no Live Server

🔖 Dica:

Você pode pegar esse código diretamente no botão "Compartilhar → Incorporar" de qualquer vídeo no YouTube. Exemplo:

🔊 Á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).

type= → É o tipo.

"audio/mpeg"= → Define corretamente o formato MP3 para o navegador.

"audio/ogg"= → É um contêiner livre de direitos autorais.

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 completo:

<audio controls>

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

🔎 Veja como fica no VScode

🔎 Veja o resultado como fica no Live Server

🎧 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>

🔎 Veja como fica no VScode

🔎 Veja como fica o resultado no Live Server

📄 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. Use este método apenas quando for relevante manter o usuário na página. Porque em muitos casos, é melhor disponibilizar o link para download.

⚠️Atenção: 

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>&copy; 2026 - Curso HTML do Zero ao Avançado</p>

  </footer>

</body>

</html>

 

📘 Para um melhor Aprendizado   🎯 Pratique com exercícios, desafios e projetos

✍️ Exercício: 

Crie um arquivo chamado midias.html com o seguinte conteúdo:

1. Um cabeçalho <h1> com o título: Trabalhando com Mídias no HTML

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.

💡 Dica de prática: 

Organize seus arquivos em pastas separadas: Isso ajuda na estrutura e manutenção do projeto.

/imagens

/videos

/audios

/documentos

📚 Continue aprendendo HTML:

Siga para a próxima etapa e continue avançando na sua jornada pelo desenvolvimento web!

🟠 Etapa 01 👉 O que é HTML e como a Web funciona

🟠 Etapa 02 👉 Textos, Parágrafos e Quebras de Linha

🟠 Etapa 03 👉 Listas 

🟠 Etapa 04 👉 Você está nessa Aula

🟠 Etapa 05 👉 Links e Navegação no HTML

🟠 Etapa 06 👉 Formulários e Interatividade

🟠 Etapa 07 👉 Estrutura Semântica 

🟠 Etapa 08 👉 Tabelas e Organização de Dados

🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)

🟠 Etapa 10 👉 CSS Moderno: Layout no HTML

Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.

Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 

sem enrolação. 

Você pode apoiar o projeto se quiser 

com um café. 

☕ Pix: [email protected]