032.3 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
032 Marcação de documentos HTML |
Objetivo: |
032.3 Referências e recursos incorporados do HTML |
Lição: |
1 de 1 |
Introdução
As páginas web modernas raramente são constituídas somente de texto. Elas incluem muitos outros tipos de conteúdo, como imagens, áudio, vídeo e até outros documentos HTML. Junto com o conteúdo externo, os documentos HTML podem conter links para outros documentos, o que torna a experiência de navegação na Internet muito mais simples.
Conteúdo incorporado
A troca de arquivos pela Internet é possível sem páginas web escritas em HTML. Nesse caso, por que o HTML é o formato de preferência para documentos web, e não o PDF ou qualquer outro formato de processamento de texto? Um motivo importante é que o HTML mantém seus recursos multimídia em arquivos separados. Em um ambiente como a Internet, onde as informações geralmente são redundantes e distribuídas em locais diferentes, é importante evitar transferências de dados desnecessárias. Na maioria das vezes, as novas versões de uma página web puxam as mesmas imagens e outros arquivos de suporte das versões anteriores, de modo que o navegador pode usar os arquivos reunidos anteriormente em vez de copiar tudo outra vez. Além disso, a separação dos arquivos facilita a personalização do conteúdo multimídia de acordo com as características do cliente, como localidade, tamanho da tela e velocidade de conexão.
Imagens
O tipo mais comum de conteúdo incorporado são as imagens que acompanham o texto. As imagens são salvas separadamente e referenciadas dentro do arquivo HTML com a tag <img>
:
<img src="logo.png">
A tag <img>
não requer uma tag de fechamento. A propriedade src
indica o local de origem do arquivo de imagem. Neste exemplo, o arquivo de imagem logo.png
deve estar localizado no mesmo diretório do arquivo HTML, caso contrário o navegador não poderá exibi-lo. A propriedade de localização de origem aceita caminhos relativos, de forma que a notação de ponto pode ser usada para indicar o caminho até a imagem:
<img src="../logo.png">
Os dois pontos indicam que a imagem está localizada dentro do diretório pai em relação ao diretório onde está o arquivo HTML. Se o nome do arquivo ../logo.png
for usado dentro de um arquivo HTML cuja URL é http://example.com/library/periodicals/index.html
, o navegador solicitará o arquivo de imagem no endereço http://example.com/library/logo.png
.
A notação de ponto também se aplica se o arquivo HTML não for um arquivo real no sistema de arquivos; o navegador HTML interpreta a URL como se fosse um caminho para um arquivo, mas é função do servidor HTTP decidir se esse caminho se refere a um arquivo ou a um conteúdo gerado dinamicamente. O domínio e o caminho correto são adicionados automaticamente a todas as solicitações ao servidor, caso o arquivo HTML venha de uma solicitação HTTP. Da mesma forma, o navegador abrirá a imagem adequada se o arquivo HTML vier diretamente do sistema de arquivos local.
Os locais de origem que começam com uma barra /
são tratados como caminhos absolutos. Os caminhos absolutos incluem informações completas sobre os locais da imagem e, portanto, funcionam independentemente da localização do documento HTML. Se o arquivo de imagem estiver localizado em outro servidor, o que será o caso quando uma rede de distribuição de conteúdo (Content Delivery Network ou CDN) for usada, o nome de domínio também deve ser incluído.
Note
|
As redes de distribuição de conteúdo são compostas por servidores distribuídos geograficamente que armazenam conteúdo estático para outros sites. Eles ajudam a melhorar o desempenho e a disponibilidade dos sites com um grande número de acessos. |
Se a imagem não puder ser carregada, o navegador HTML mostrará o texto fornecido no atributo alt
em vez da imagem. Por exemplo:
<img src="logo.png" alt="The Company logo">
O atributo alt
também é importante para a acessibilidade. Os navegadores em modo texto e os leitores de tela usam-no como uma descrição para a imagem correspondente.
Tipos de imagem
Os navegadores podem exibir todos os tipos mais populares de imagem, como JPEG, PNG, GIF e SVG. As dimensões das imagens são detectadas no momento em que elas são carregadas, mas também podem ser predefinidas com os atributos width
e height
(largura e altura):
<img src="logo.png" alt="The Company logo" width="300" height="100">
A única razão para incluir atributos de dimensão à tag <img>
é evitar quebrar o layout quando a imagem demorar muito para carregar ou quando não puder ser carregada. O uso dos atributos width
e height
para alterar as dimensões originais da imagem pode ter resultados indesejáveis:
-
As imagens serão distorcidas se o tamanho original for menor do que as novas dimensões ou se a proporção definida for diferente da original.
-
Ao se reduzir o tamanho de imagens grandes, é necessária uma maior largura de banda, o que resulta em tempos de carregamento mais longos.
O SVG é o único formato que não sofre com esses efeitos, porque todas as suas informações gráficas são armazenadas em coordenadas numéricas adequadas para o redimensionamento e suas dimensões não afetam o tamanho do arquivo (daí o nome Scalable Vector Graphics). Por exemplo, para desenhar um retângulo em SVG, são necessárias apenas a posição, as dimensões das arestas e as informações de cor. O valor específico de cada pixel será renderizado dinamicamente posteriormente. Na verdade, as imagens SVG são semelhantes aos arquivos HTML, no sentido de que seus elementos gráficos também são definidos por tags em um arquivo de texto. Os arquivos SVG destinam-se a representar desenhos com arestas bem definidas, como gráficos ou diagramas.
As imagens que não se enquadram nesses critérios devem ser armazenadas como bitmaps. Ao contrário dos formatos vetoriais de imagem, os bitmaps armazenam informações de cor de antemão para cada pixel da imagem. O armazenamento do valor cromático de cada pixel da imagem gera uma grande quantidade de dados e, por isso, os bitmaps geralmente são armazenados em formatos compactados, como JPEG, PNG ou GIF.
O formato JPEG é recomendado para fotografias, porque seu algoritmo de compactação produz bons resultados para as sombras e fundos desfocados. Para as imagens em que prevalecem as cores sólidas, o formato PNG é o mais apropriado. Portanto, o formato PNG deve ser escolhido quando for necessário converter uma imagem vetorial em bitmap.
O formato GIF oferece a qualidade de imagem mais baixa dentre todos os formatos de bitmap populares. No entanto, ele ainda é amplamente utilizado devido ao seu suporte para animações. De fato, muitos sites empregam arquivos GIF para exibir vídeos curtos, mas existem maneiras melhores de exibir conteúdo de vídeo.
Áudio e vídeo
Podemos adicionar conteúdos de áudio e vídeo a um documento HTML mais ou menos da mesma maneira que as imagens. Sem surpresa, a tag para adicionar áudio é <audio>
e a tag para adicionar vídeo é <video>
. Obviamente, os navegadores em modo texto não são capazes de reproduzir conteúdo multimídia, de forma que as tags <audio>
e <video>
empregam uma tag de fechamento para conter o texto usado como explicação para o elemento que não pôde ser mostrado. Por exemplo:
<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>
Se o navegador não suportar a tag <audio>
, a linha “Unable to play recording.mp3” será mostrada em seu lugar. O uso das tags de fechamento </audio>
ou </video>
permitem que a página web inclua conteúdos alternativos mais elaborados do que a simples linha de texto permitida pelo atributo alt
da tag <img>
.
O atributo src
das tags <audio>
e <video>
funcionam da mesma forma que em <img>
, mas ele também aceita URLs apontando para uma transmissão ao vivo. O navegador cuida de armazenar em buffer, decodificar e exibir o conteúdo conforme ele é recebido. O atributo controls
exibe os controles de reprodução. Sem ele, o visitante não poderá pausar, retroceder ou controlar a reprodução de qualquer outra maneira.
Conteúdo genérico
Um documento HTML pode ser aninhado em outro documento HTML, de forma semelhante à inserção de uma imagem em um documento HTML, mas usando a tag <iframe>
:
<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>
Os navegadores em modo texto mais simples não suportam a tag <iframe>
, exibindo em seu lugar o texto incluído. Como acontece com as tags de multimídia, o atributo src
define a localização de origem do documento aninhado. É possível incluir atributos width
e height
(largura e altura) para alterar as dimensões padrão do elemento iframe
.
O atributo name
permite fazer referência ao iframe e trocar o documento aninhado. Sem este atributo, o documento aninhado não pode ser trocado. Um elemento anchor
pode ser usado para carregar um documento de outro local dentro de um iframe em vez da janela atual do navegador.
Links
O elemento de página comumente chamado de link da web também é conhecido pelo termo técnico âncora (anchor), o que explica o uso da tag <a>
. A âncora leva a outro local, que pode ser qualquer endereço compatível com o navegador. A localização é indicada pelo atributo href
(hyperlink reference):
<a href="contact.html">Contact Information</a>
A localização pode ser informada como um caminho relativo ou absoluto, como acontece com o conteúdo incorporado de que falamos anteriormente. Somente o conteúdo de texto entre as tags (por exemplo, Contact Information
) fica visível para o visitante, geralmente na forma de um texto em azul sublinhado e clicável, mas o item que contém o link também pode ser qualquer outro conteúdo visível, como imagens:
<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>
Prefixos especiais podem ser adicionados ao caminho para informar ao navegador como abri-lo. Se a âncora apontar para um endereço de email, por exemplo, seu atributo href
deve incluir o prefixo mailto:
:
<a href="mailto:info@lpi.org">Contact by email</a>
O prefixo tel:
indica um número de telefone. Essa indicação é particularmente útil para visitantes que visualizam a página em dispositivos móveis:
<a href="tel:+123456789">Contact by phone</a>
Quando o link é clicado, o navegador abre o conteúdo do caminho com o aplicativo associado.
O uso mais comum das âncoras é carregar outros documentos da web. Por padrão, o navegador substitui o documento HTML atual pelo conteúdo do novo local. Esse comportamento pode ser modificado usando o atributo target
. O destino _blank
, por exemplo, diz ao navegador para abrir o local fornecido em uma nova janela ou nova guia do navegador, dependendo das preferências do visitante:
<a href="contact.html" target="_blank">Contact Information</a>
O destino _self
é o padrão quando o atributo target
não é fornecido. Ele faz com que o documento referenciado substitua o documento atual.
Outros tipos de destinos estão relacionados ao elemento <iframe>
. Para carregar um documento referenciado dentro de um elemento <iframe>
, o atributo target
deve apontar para o nome do elemento iframe:
<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>
<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>
O elemento iframe funciona como uma janela distinta do navegador e, portanto, quaisquer links carregados a partir do documento dentro do iframe substituirão apenas o conteúdo do quadro. Para mudar esse comportamento, os elementos âncora dentro do documento aninhado também podem usar o atributo target
. O destino _parent
, quando usado dentro de um documento aninhado, fará com que o local referenciado substitua o documento pai que contém a tag <iframe>
. Por exemplo, o documento gallery.html
incorporado pode conter uma âncora que carrega a si mesma e substitui o documento pai:
<p><a href="gallery.html" target="_parent">Open as parent document</a></p>
Os documentos HTML suportam vários níveis de aninhamento com a tag <iframe>
. O destino _top
, quando usado em uma âncora dentro de um documento aninhado, fará com que o local referenciado substitua o documento principal na janela do navegador, independentemente de ele ser o pai imediato do <iframe>
ou um ancestral mais distante.
Locais dentro de documentos
O endereço de um documento HTML pode conter opcionalmente um fragmento que pode ser usado para identificar um recurso dentro do documento. Este fragmento, também conhecido como âncora de URL, é uma string iniciada por uma cerquilha #
no final da URL. Por exemplo, a palavra History
é a âncora da URL
https://en.wikipedia.org/wiki/Internet#History
.
Quando a URL tem uma âncora, o navegador rola a página até o elemento correspondente no documento: ou seja, o elemento cujo atributo id
é idêntico à âncora da URL. No caso da URL de nosso exemplo, https://en.wikipedia.org/wiki/Internet#History
, o navegador irá diretamente para a seção “History”. Examinando o código HTML da página, descobrimos que o título da seção possui o atributo id
correspondente:
<span class="mw-headline" id="History">History</span>
As âncoras de URL podem ser usadas no atributo href
da tag <a>
, tanto para apontar para páginas externas quanto para para locais dentro da página atual. Neste último caso, basta usar apenas a cerquilha com o fragmento da URL, como em <a href="#History">History</a>
.
Warning
|
O atributo |
Existem maneiras de personalizar a forma como o navegador reage às âncoras de URL. É possível, por exemplo, escrever uma função JavaScript que escuta o evento da janela hashchange e dispara uma ação personalizada, como uma animação ou uma solicitação HTTP. Vale notar, porém, que o fragmento de URL nunca é enviado ao servidor com a URL e, portanto, não pode ser usado como um identificador pelo servidor HTTP.
Exercícios Guiados
-
O documento HTML localizado em
http://www.lpi.org/articles/linux/index.html
tem uma tag<img>
cujo atributosrc
aponta para../logo.png
. Qual o caminho absoluto completo até essa imagem? -
Cite duas razões pelas quais o atributo
alt
é importante nas tags<img>
. -
Que formato de imagem oferece uma boa qualidade de imagem e mantém o tamanho do arquivo pequeno quando usado com fotografias com partes desfocadas e muitas cores e tonalidades?
-
Em vez de usar um provedor terceirizado como o Youtube, qual tag HTML permite incorporar um arquivo de vídeo em um documento HTML usando apenas recursos HTML padrão?
Exercícios Exploratórios
-
Imagine um documento HTML com o hiperlink
<a href="pic1.jpeg">First picture</a>
e o elemento iframe<iframe name="gallery"></iframe>
. Como modificar a tag do hiperlink de forma que a imagem que ele aponta seja carregada dentro do elemento iframe dado quando o usuário clicar no link? -
O que acontecerá quando o visitante clicar em um hiperlink em um documento dentro de um iframe e o hiperlink tiver o atributo target definido como
_self
? -
Você percebe que a âncora de URL para a segunda seção de sua página HTML não está funcionando. Qual é a causa provável deste erro?
Resumo
Esta lição aborda a maneira de adicionar imagens e outros conteúdos multimídia usando as tags HTML adequadas. Além disso, mostramos as diferentes maneiras de usar hiperlinks para carregar outros documentos e apontar para locais específicos dentro de uma página. A lição demonstrou os seguintes conceitos e procedimentos:
-
A tag
<img>
e seus principais atributos:src
ealt
. -
Caminhos de URL relativos e absolutos.
-
Formatos de imagem populares para a web e suas características.
-
As tags de multimídia
<audio>
e<video>
. -
Como inserir documentos aninhados com a tag
<iframe>
. -
A tag de hiperlink
<a>
, seu atributohref
e os destinos especiais. -
Como usar fragmentos de URL, também conhecidos como âncoras.
Respostas aos Exercícios Guiados
-
O documento HTML localizado em
http://www.lpi.org/articles/linux/index.html
tem uma tag<img>
cujo atributosrc
aponta para../logo.png
. Qual o caminho absoluto completo até essa imagem?http://www.lpi.org/articles/logo.png
-
Cite duas razões pelas quais o atributo
alt
é importante nas tags<img>
.Os navegadores em modo texto poderão mostrar uma descrição da imagem ausente. Os leitores de tela usam o atributo
alt
para descrever a imagem. -
Que formato de imagem oferece uma boa qualidade de imagem e mantém o tamanho do arquivo pequeno quando usado com fotografias com partes desfocadas e muitas cores e tonalidades?
O formato JPEG.
-
Em vez de usar um provedor terceirizado como o Youtube, qual tag HTML permite incorporar um arquivo de vídeo em um documento HTML usando apenas recursos HTML padrão?
A tag
<video>
.
Respostas aos Exercícios Exploratórios
-
Imagine um documento HTML com o hiperlink
<a href="pic1.jpeg">First picture</a>
e o elemento iframe<iframe name="gallery"></iframe>
. Como modificar a tag do hiperlink de forma que a imagem que ele aponta seja carregada dentro do elemento iframe dado quando o usuário clicar no link?Usando o atributo
target
da taga
:<a href="pic1.jpeg" target="gallery">First picture</a>
. -
O que acontecerá quando o visitante clicar em um hiperlink em um documento dentro de um iframe e o hiperlink tiver o atributo target definido como
_self
?O documento será carregado dentro do mesmo iframe, o que é o comportamento padrão.
-
Você percebe que a âncora de URL para a segunda seção de sua página HTML não está funcionando. Qual é a causa provável deste erro?
O fragmento de URL após a cerquilha não corresponde ao atributo
id
do elemento correspondente à segunda seção, ou o atributoid
do elemento não está presente.