Até agora, a definição da sua imagem deve ser mais ou menos assim:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
No entanto, alguns atributos podem (e devem) ser atribuídos ao elemento img. Primeiramente, há o atributo alt. O texto definido aqui será exibido pelo navegador se a imagem - por qualquer motivo - não puder ser carregada.
Infelizmente, há frequentes mal-entendidos quando se trata do atributo alt. O atributo alt serve exclusivamente para casos em que a imagem não é exibida. Alguns navegadores, no entanto, exibem o valor do atributo alt em uma janela pop-up ao passar o mouse sobre a imagem.
Esse comportamento é incorreto. Na verdade, para tais dicas, o atributo title deve ser utilizado. Uma definição apropriada seria a seguinte:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="O logo do PSD-Tutorials.de" />
Neste caso, o valor de title sobrescreve o de alt.
Indicação de tamanho
Atualmente, muitos elementos em HTML são estilizados através de CSS, no entanto, a definição de tamanhos não está incluída. Altura e largura são definidas inalteradas através dos atributos width e height. Aqui está outro exemplo:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="O logo do PSD-Tutorials.de" width="200" height="150" />
Se nenhuma unidade de medida for especificada em width ou height, os números são interpretados como valores em pixels pelo navegador. No exemplo anterior, a imagem tem 200 pixels de largura e 150 pixels de altura. Também é possível especificar em porcentagem.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="O logo do PSD-Tutorials.de" width="20%" height="15%" />
As porcentagens se referem ao espaço disponível para exibição. Quando nenhum tamanho é especificado, os navegadores exibem as imagens em seu tamanho original.
Imagens e parágrafos de texto
Se você inserir imagens em combinação com texto corrido, tome cuidado.
<p><img src="logo.png" alt="" width="180" height="150" /> Este texto será exibido ao lado da imagem.</p>
O elemento img é um elemento em linha. Portanto, as imagens podem ser inseridas diretamente no texto. Se a imagem for mais alta que a altura da linha, o texto será alinhado dentro da linha pelo navegador. O alinhamento padrão é na parte inferior da imagem.
Nas versões mais antigas do HTML, era possível influenciar o alinhamento por meio do atributo align. Por favor, não o utilize mais, pois foi removido do padrão do HTML5. Em vez disso, utilize as possibilidades oferecidas pelo CSS. Isso permite, por exemplo, que o texto flua ao redor da imagem.
Descrição longa
O HTML oferece a opção de adicionar uma descrição detalhada a uma imagem. Isso é útil quando uma imagem realmente precisa de explicações adicionais. Você pode armazenar as informações adicionais em locais diferentes e referenciar-los.
As informações adicionais podem estar em diferentes locais.
<img src="bild1.png" alt="Diagrama 1" title="Diagrama 1" longdesc="#diagramm" />
Neste caso, é pressuposto que haja uma seção na página com a ID diagramm.
O método mais comum é armazenar as informações em um arquivo externo.
<img src="bild1.png" alt="Diagrama 1" longdesc="diagramm1.htm" />
No entanto, há problemas quanto ao suporte dos navegadores. Além disso, parece que este atributo deixa os fabricantes de navegador com a questão de como implementá-lo de forma simples.
Por exemplo, a implementação no Firefox não é realmente elegante e autoexplicativa. Se uma imagem possui o atributo longdesc, os visitantes normais do site não o reconhecem de imediato. Eles precisam clicar com o botão direito do mouse na imagem.
No menu de contexto, em seguida, a opção Mostrar descrição é exibida. Ao clicar nela, as informações adicionais especificadas em longdesc são exibidas. Como mencionado, isso funciona assim no Firefox, porém certamente não é elegante.
O Opera resolveu de forma bastante semelhante. Ao clicar com o botão direito do mouse na imagem neste navegador, é exibida a entrada Descrição Longa.
Isso então leva às informações adicionais indicadas.
O WC3 sugere adicionalmente fornecer a descrição longa na forma de um URL de dados.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EUma%20letra%20"A"%20azul%20com%20espaçamento%20para%20tocar%20um%20número%20"3"%20azul,%20seguido%20por%20uma%20sombra%20preta%20de%20uma%20letra%20"C" branca, tudo em um fundo%20branco%3C/body%3E%3C/html%3E" />
Se você ainda não tem experiência com esses URLs de dados, você encontrará informações detalhadas em http://de.wikipedia.org/wiki/Data-URL.
Definindo Descrições de Imagens
Até o momento, não havia possibilidades em HTML para definir legendas de imagens e agrupamentos de imagens. Este aspecto mudou com o HTML5. Aqui foram introduzidos os novos elementos figure e figcaption.
Antecipando: figure não é exclusivamente destinado ao uso em conjunto com gráficos. Na verdade, o elemento pode ser usado para todos os elementos que complementam um documento. Isso pode incluir, além de imagens, por exemplo, gráficos, exemplos de código e vídeos.
Além do figure, há também o figcaption. Através dele, conteúdos que não são legíveis para determinados grupos de usuários podem ser fornecidos com uma descrição alternativa.
Aqui está um exemplo de uso dos dois elementos figure e figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Este é o nosso novo logotipo.</figcaption> </figure>
Uma olhada no resultado no navegador apresenta o seguinte resultado:
Como os navegadores lidam com esses dois elementos, fica a critério deles. No entanto, é claro que você pode influenciar a aparência novamente usando CSS.
Dentro de um elemento figure, você pode inserir quantas imagens ou outros elementos desejar. No entanto, um elemento figure só pode conter um elemento figcaption. Novamente, aqui está um exemplo:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Este é o nosso novo logotipo.</figcaption> </figure>
Dessa forma, você também pode inserir várias imagens em um elemento figure.
Especialmente com relação à estrutura lógica de páginas da web ou conteúdos, há numerosas inovações em HTML5. Você aprenderá a conhecê-las detalhadamente ao longo desta série.
