T06 — Referências e recursos incorporados do HTML

Resumo Conciso

Por que o HTML mantém recursos em ficheiros separados?

• Evita transferências de dados desnecessárias (o navegador reutiliza imagens já descarregadas)
• Facilita a personalização de conteúdo multimédia conforme as características do cliente (tamanho de ecrã, velocidade de ligação)

Imagens (<img>)

<img src="logo.png" alt="Logótipo da empresa"><img src="../logo.png" alt="Logótipo"><img src="/images/logo.png" alt="Logótipo"><img src="https://cdn.example.com/logo.png" alt="Logótipo"><img src="logo.png" alt="Logótipo" width="300" height="100">

Caminhos:

Formatos de imagem

SVG vs Bitmap:

• SVG: informações gráficas em coordenadas numéricas, dimensionável sem distorção
• Bitmap: armazena cor de cada pixel, geralmente compactado (JPEG, PNG, GIF)

Cuidados com width/height:

• Usar apenas para evitar quebras de layout durante carregamento
• Redimensionar pode causar distorções (excepto SVG)
• Imagens grandes reduzidas consomem mais banda

Áudio e vídeo

<audio controls src="/media/recording.mp3">  <p>Não é possível reproduzir <em>recording.mp3</em></p></audio><video controls src="/media/video.mp4">  <p>Não é possível reproduzir <em>video.mp4</em></p></video>

• src: localização do ficheiro ou URL de transmissão ao vivo
• controls: exibe controles de reprodução (sem ele, sem controlo)
• Conteúdo entre tags serve como alternativa para navegadores que não suportam

Conteúdo genérico — <iframe>

<iframe name="viewer" src="gallery.html">  <p>Navegador não suportado</p></iframe>

• name: permite referenciar o iframe para carregar conteúdo via links
• src: documento HTML a incorporar
• Atributos opcionais: width, height

Hiperlinks (<a>)

<a href="contact.html">Informações de contacto</a><a href="contact.html"><img src="contact.png" alt="Contacto"></a><a href="mailto:[email protected]">Enviar email</a><a href="tel:+123456789">Ligar</a><a href="contact.html" target="_blank">Abrir em nova janela</a>

Valores de target:

Links para dentro do iframe:

<a href="gallery.html" target="viewer">Abrir galeria</a><iframe name="viewer" width="800" height="600"></iframe>

Âncoras de URL (fragmentos)

<!-- Na URL -->https://en.wikipedia.org/wiki/Internet#History<!-- No HTML - referência interna --><a href="#History">História</a><!-- Elemento correspondente --><span id="History">História</span>

• O fragmento é a string após # na URL
• O navegador rola até o elemento com id correspondente
• O fragmento não é enviado ao servidor

Regras do atributo id:

• Não deve conter espaços em branco
• Deve ser único no documento

🧭 Exercícios Guiados (resolvidos)

Exercício Guiado 1 — Caminho absoluto de uma imagem

Enunciado: O documento HTML em http://www.lpi.org/articles/linux/index.html tem uma <img> com src="../logo.png". Qual o caminho absoluto?

Solução passo a passo:

1. A URL do HTML é http://www.lpi.org/articles/linux/index.html
2. O ../ sobe um nível: de linux/ para articles/
3. O caminho resultante é: http://www.lpi.org/articles/logo.png

Exercício Guiado 2 — Importância do atributo alt

Enunciado: Cite duas razões pelas quais o atributo alt é importante.

Solução passo a passo:

1. Modo texto: Navegadores em modo texto mostram o texto alt quando a imagem não é exibida
2. Acessibilidade: Leitores de ecrã usam o atributo alt para descrever a imagem a utilizadores com deficiência visual

Exercício Guiado 3 — Formato de imagem ideal

Enunciado: Que formato oferece boa qualidade e tamanho pequeno para fotografias com sombras e muitas cores?

Solução passo a passo:

1. O formato JPEG é o recomendado para fotografias
2. O algoritmo de compactação JPEG produz bons resultados com sombras e fundos desfocados
3. Para imagens com cores sólidas, PNG é mais apropriado

Exercício Guiado 4 — Incorporar vídeo nativo

Enunciado: Qual tag permite incorporar vídeo sem provedores terceiros?

Solução passo a passo:

1. A tag <video> incorpora ficheiros de vídeo diretamente
2. Suporta o atributo src para o ficheiro ou URL de transmissão
3. O atributo controls exibe os controles de reprodução

🔬 Exercícios Exploratórios (prática no terminal)

1. Enunciado: Imagine um hiperlink <a href="pic1.jpeg">First picture</a> e um <iframe name="gallery"></iframe>. Como modificar o link para carregar a imagem dentro do iframe?

   <a href="pic1.jpeg" target="gallery">First picture</a>   <iframe name="gallery"></iframe>

1. Enunciado: O que acontece quando se clica num hiperlink dentro de um iframe com target="_self"?

1. Enunciado: A âncora de URL para a segunda seção da sua página não funciona. Qual é a causa provável?

1. Enunciado: Crie uma página HTML que inclua uma imagem com caminho relativo, uma com caminho absoluto a partir da raiz do servidor e uma com URL completa. Inclua sempre o atributo alt.

   <!DOCTYPE html>   <html>     <head>       <title>Exemplo de Imagens</title>     </head>     <body>       <h1>Exemplo de caminhos de imagem</h1>       <p>Imagem com caminho relativo (mesmo directório):</p>       <img src="logo.png" alt="Logótipo da empresa">       <p>Imagem com caminho absoluto a partir da raiz do servidor:</p>       <img src="/images/foto.jpg" alt="Fotografia do projeto">       <p>Imagem com URL completa (externa):</p>       <img src="https://cdn.example.com/banner.png" alt="Banner promocional">     </body>   </html>