📚Módulo 2

🎯 Objetivos da Aula

●     Aprender a inserir imagens no HTML de forma correta e acessível.

●     Entender como trabalhar com formatos, tamanhos e caminhos de arquivo.

●     Inserir vídeos locales e via plataformas externas (YouTube, Vimeo etc.).

●     Incorporar outras mídias (áudio, mapas, PDFs, entre outros).

🖼️ Trabalhando com Imagens em HTML

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

📘 Estrutura da Tag <img>

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

Atributo                                                                        Função

src           →               Especifica o caminho do arquivo (pode ser local ou URL externa).

alt                        →                            Fornece um texto alternativo, essencial para acessibilidade e SEO.

💡 Exemplo:

<img src="imagens/logo-curso.png" alt="Logotipo do Curso HTML do Zero ao Avançado">

📂 Caminhos Relativos e Absolutos

Existem duas formas de indicar onde o arquivo está:

Tipo                                              Exemplo                                                      Descrição

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.

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

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

<img src="imagens/html-logo.png" alt="Logo HTML" title="HTML: Linguagem de marcação de hipertexto">

🚨 Boas Práticas:

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.

🎬 Inserindo Vídeos em HTML

O HTML5 introduziu a tag <video>, que permite exibir vídeos diretamente no navegador — sem plugins externos.

🧩 Estrutura básica:

<video src="videos/aula.mp4" width="640" height="360" controls></video>

Atributo                                                   Função

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>

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

💡 Exemplo (YouTube):

<iframe width="560" height="315"

  src="https://www.youtube.com/embed/3JluqTojuME"

  title="Vídeo Tutorial HTML"

  frameborder="0"

  allowfullscreen>

</iframe>

🔖 Dica:

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

🎧 Trabalhando com Áudios

Assim como os vídeos, o HTML5 permite incorporar áudios nativamente, com a tag <audio>.

💡 Exemplo:

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

Atributo                         Descrição

controls    →     Mostra os controles de reprodução

autoplay    →     Inicia automaticamente

loop        →     Repete indefinidamente

muted       →     Começa sem som

🗺️ 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 →  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 — em muitos casos, é melhor disponibilizar o link para download.

✍️ Exercício Prático 4

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

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:

/imagens

/videos

/audios

/documentos

Isso ajuda na estrutura e manutenção do projeto.

📘 Conclusão da Aula

Agora você aprendeu:

●     A inserir imagens corretamente com alt, title e tamanhos;

●     A reproduzir vídeos locais e incorporar vídeos externos;

●     A adicionar áudio e outras mídias à sua página;

●     Boas práticas que garantem acessibilidade e compatibilidade.

💬 Próxima aula:

Na Aula 5, aprenderemos tudo sobre links e navegação — conectando páginas internas e externas, criando menus e âncoras internas para uma navegação profissional.

🎯 Objetivos da Aula

●     Entender o funcionamento dos links no HTML (<a>);

●     Criar links internos e externos;

●     Criar links que abrem novas abas ou seções específicas;

●     Montar uma navegação básica entre páginas de um site;

Aprender boas práticas de acessibilidade e usabilidade com hiperlinks. 

🌐 O que é um link (hiperlink)?

Um link (ou hiperlink) é um elemento que conecta um documento ou parte de um documento a outro.
Quando clicamos em um link, o navegador carrega o recurso de destino — que pode ser uma página web, um arquivo, uma imagem ou até uma parte da mesma página.

A tag responsável pelos links é a <a>, que vem de “anchor” (âncora).

🧩 Estrutura básica da tag <a>

<a href="URL" target="_self">Texto clicável</a>

Atributo                                                  Função

href              →                   Define o destino do link (página, arquivo ou URL externa).

target          →                   Define onde o link será aberto (na mesma aba, nova aba, etc.).

💡 Exemplo prático:

<a href="https://www.w3.org">Visite o site da W3C</a>

🔎 Resultado: Visite o site da W3C

🔗 Tipos de Links

Os links podem ser internos (para páginas dentro do mesmo site) ou externos (para outros sites).

🌍 Links Externos

São os links que apontam para outros sites ou domínios.

<a href="https://developer.mozilla.org/" target="_blank">MDN Web Docs</a>

Atributos úteis:

●     target="_blank"    →    abre o link em uma nova aba;

●     rel="noopener noreferrer"     →     boa prática de segurança ao abrir nova aba (evita acesso indevido ao window.opener).

💡 Exemplo completo:

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">

  Documentação oficial do HTML

</a>

🏠 Links Internos

Conectam páginas do mesmo projeto ou domínio.

💡 Exemplo:

<a href="contato.html">Ir para a página de Contato</a>

🔎 Dica:  

Garanta que o arquivo contato.html esteja na mesma pasta ou ajuste o caminho relativo:

●     href="pasta/contato.html" → dentro de uma subpasta

●     href="../index.html" → retorna uma pasta acima

🔁 Links Entre Sessões da Mesma Página (Âncoras Internas)

Você pode criar links que levam a partes específicas de uma mesma página.
  Para isso, usamos IDs nos elementos e referências com # nos links.

💡 Exemplo prático:

<h2 id="inicio">Início da Página</h2>

<p>Conteúdo introdutório...</p>

<a href="#inicio">Voltar para o início</a>

✅ Quando o usuário clicar no link, o navegador rolará automaticamente até o elemento com o id="inicio".

🧭 Links para Arquivos e Downloads

Além de páginas, você também pode usar links para baixar documentos, imagens, PDFs e outros arquivos.

💡 Exemplo:

<a href="documentos/manual.pdf" download>Baixar Manual do Curso (PDF)</a>

Atributo download → indica ao navegador que o destino deve ser baixado em vez de aberto.

✉️ Link de E-mail (mailto:)

É possível criar links que abrem o programa de e-mails do usuário, já com o destinatário preenchido.

💡 Exemplo:

<a href="mailto:contato@meusite.com">Envie um e-mail para nós</a>

Você também pode inserir assunto e corpo automaticamente:

<a href="mailto:contato@meusite.com?subject=Dúvida&body=Olá! Tenho uma dúvida sobre o curso.">

  Envie-nos uma mensagem

</a>

📞 Link para Telefone (tel:)

Em sites móveis, esse formato permite iniciar chamadas diretamente.

💡 Exemplo:

<a href="tel:+5511999999999">Ligar para Atendimento</a>

🧱 2. Estruturando um Menu de Navegação

Menus de navegação ajudam o usuário a se deslocar entre páginas e seções.
  No HTML, normalmente são criados combinando <nav>, <ul> e <a>.

💡 Exemplo — menu básico:

<nav>

  <ul>

<li><a href="index.html">Início</a></li>

<li><a href="sobre.html">Sobre</a></li>

<li><a href="servicos.html">Serviços</a></li>

<li><a href="contato.html">Contato</a></li>

  </ul>

</nav>

🔎 Isso cria um menu horizontal simples (que depois pode ser estilizado via CSS).

💬 Boas práticas:

●     Sempre agrupe os links de navegação dentro da tag <nav>;

●     Dê nomes descritivos ao texto dos links (nunca apenas “Clique aqui”);

●     Prefira rotas curtas e claras, como sobre.html em vez de pagina_sobre_nos.html.

🧠 3. Atributos Avançados da Tag <a>

Atributo                                            Descrição

title                               →        Texto que aparece ao passar o mouse sobre o link.

target="_self"         →           Abre o link na mesma aba (padrão).

target="_blank"      →          Abre em nova aba.

rel="nofollow"        →          Informa aos mecanismos de busca para não seguir o link (usado em links                                                          patrocinados).

download                 →          Indica que o destino deve ser baixado.

💡 Exemplo completo:

<a href="arquivos/guia.pdf" title="Baixar guia completo"

   download target="_blank" rel="noopener noreferrer"> Baixar o Guia em PDF</a>

🧩 Boas Práticas de Usabilidade

1.    Clareza  →  o texto do link deve indicar com precisão o destino.

2.    Coerência visual  →  mantenha o mesmo estilo para links semelhantes.

3.    Feedback  →  destaque links ao passar o mouse (CSS: a:hover).

4.    Acessibilidade  →  evite links genéricos (“clique aqui”), prefira textos significativos.

5.    Teste sempre  →  certifique-se de que todos os links funcionam corretamente e não quebram rotas.

💻 Exercício Prático 5

Crie um arquivo chamado links.html e faça o seguinte:

1.    Adicione um título <h1>: Explorando Links e Navegação

2.    Crie um parágrafo com um link externo (que abre em nova aba).

3.    Crie uma âncora interna dentro da mesma página (por exemplo, “Ir para o topo”).

4.    Adicione um link de e-mail e um link telefônico.

5.    Monte um menu de navegação simples com três páginas:

○     Início

○     Cursos

○     Contato

💡 Desafio Extra:

  Implemente um botão de “Voltar ao topo” que leve o usuário de volta ao cabeçalho com href="#topo".

💬 Conclusão da Aula

Hoje você aprendeu:

●     Como criar e personalizar links e âncoras;

●     A diferença entre links internos, externos e de e-mail/telefone;

●     A montar um menu de navegação funcional;

●     A importância da semântica e da acessibilidade nos hiperlinks.

💻 Próxima aula:

 Na Aula 6, vamos explorar Formulários em HTML — aprenderemos a criar campos de texto, botões, seletores e toda a base para captar dados de usuários. 

🎯 Objetivos da Aula

●     Entender a estrutura dos formulários em HTML;

●     Aprender os principais tipos de campos (input, select, textarea etc.);

●     Usar atributos para validação e acessibilidade;

●     Aprender a enviar dados e preparar formulários para integração com o back-end;

●     Criar um formulário completo e funcional. 

🧩 1. Estrutura básica de um formulário

Todo formulário em HTML é delimitado pela tag <form>, que contém todos os campos e botões.
  Ela é a “embalagem” que envia os dados inseridos pelo usuário para um servidor ou arquivo de destino.

Atributo                                                 Função

action          →       Define para onde os dados serão enviados (página ou script).

method       →       Define o método de envio: get ou post.

💬 Dica:

●     Use method="get" para testes e buscas (dados aparecem na URL).

●     Use method="post" para envio de dados confidenciais (cadastros, logins, etc.).

🧱 O elemento <input>

A tag <input> é a mais versátil do HTML, pois serve para diversos tipos de entrada de dados.
  Seu comportamento muda conforme o valor do atributo type.

💬 Rotulando Campos com <label>

A tag <label> associa um texto descritivo ao campo correspondente.
  Isso melhora significativamente a acessibilidade e a experiência do usuário.

💡 Exemplo:

<label for="email">Digite seu e-mail:</label>

<input type="email" id="email" name="email">

O atributo for do <label> deve sempre coincidir com o id do <input> vinculado.

🧠 Campos de Seleção (<select> e <option>).

Usados para criar menus suspensos (dropdown menus).

💡 Exemplo:

<label for="curso">Escolha um curso:</label>

<select id="curso" name="curso">

  <option value="html">HTML</option>

  <option value="css">CSS</option>

  <option value="js">JavaScript</option>

  <option value="php">PHP</option>

</select>

A tag <option> define cada item de escolha.
Você pode adicionar o atributo selected em um item para deixá-lo marcado por padrão.

📺 Campos de Seleção: checkbox e radio.

Checkbox — múltiplas escolhas

<p>Selecione suas linguagens favoritas:</p>

<input type="checkbox" id="html" name="linguagens" value="HTML">

<label for="html">HTML</label>

<input type="checkbox" id="css" name="linguagens" value="CSS">

<label for="css">CSS</label>

<input type="checkbox" id="js" name="linguagens" value="JS">

<label for="js">JavaScript</label>

O usuário pode marcar várias opções ao mesmo tempo.

📺 Radio — escolha única

<p>Escolha seu gênero:</p>

<input type="radio" id="masc" name="genero" value="M">

<label for="masc">Masculino</label>

<input type="radio" id="fem" name="genero" value="F">

<label for="fem">Feminino</label>

🔎Observe que todos têm o mesmo atributo name — isso agrupa os botões, permitindo escolher apenas um.

💡 Botões (<button>)

Embora <input type="submit"> já funcione, a tag <button> permite personalizar o conteúdo interno (como ícones ou imagens).

💡 Exemplo:

<button type="submit">Enviar Formulário</button>

<button type="reset">Limpar Campos</button>

Você pode também incluir ícones SVG ou texto formatado dentro de <button>.

🔒 Validação de Campos e Atributos Importantes

O HTML5 oferece validações automáticas, que podem ser ativadas com atributos simples:

Atributo                                                  Função

required                     →                  Torna o campo obrigatório

placeholder              →                  Mostra um texto de ajuda dentro do campo

maxlength                →                  Limita o número máximo de caracteres

min / max                 →                  Limita valores numéricos ou de data

pattern                      →                   Define uma expressão regular para validação personalizada

readonly                   →                   Impede a edição do campo

disabled                    →                   Desabilita o campo (não será enviado)

autocomplete          →                  Sugere valores anteriores digitados

💡 Exemplo completo:

<input

  type="text"

  id="usuario"

  name="usuario"

  placeholder="Digite seu nome de usuário"

  required

  maxlength="20">

🧠 Boas práticas para formulários

1.    Sempre use <label> para identificar cada campo.

2.    Adicione placeholder, required e mensagens claras ao usuário.

3.    Teste a usabilidade do formulário em dispositivos móveis.

4.    Agrupe campos relacionados com <fieldset> e <legend> para organização.

5.    Use método POST sempre que enviar dados sensíveis.

💻 Exercício Prático 6

Crie um arquivo chamado formulario.html contendo:

1.    Campos para nome, e-mail, senha, seleção de curso e mensagem.

2.    Inclusão de checkboxes para marcar interesses (HTML, CSS, JavaScript).

3.    Um botão de envio e um botão de limpeza.

4.    Campos obrigatórios usando o atributo required.

5.    Um fieldset com legend descrevendo o grupo de informações pessoais.

✅ Desafio Extra:

 Adicione uma validação simples usando pattern (por exemplo, apenas letras no nome, formato de e-mail correto etc.). 

💬 Conclusão da Aula

Hoje você aprendeu:

●     A criar e estruturar formulários complexos;

●     A usar vários tipos de campos e botões;

●     A aplicar atributos de validação e acessibilidade;

●     Como os formulários funcionam como ponto de integração com o back-end.

💬 Próximo Módulo:

 Na Aula 7, entraremos no mundo da estrutura semântica e organização avançada do HTML — aprenderemos a usar tags como <header>, <main>, <section> e <footer> para criar páginas organizadas e profissionais.