Html/

Imagens

As imagens são encontradas em muitos documentos HTML e podem servir como uma pista visual sobre seu conteúdo além de outros usos.

Imagens no HTML - A tag <img> e o atributo src

No HTML, imagens são definidas com a tag <img>.

A tag <img> é um elemento vazio, que só contém atributos e não possui uma tag de fechamento.

Para mostrar uma imagem em uma página, você precisa usar o atributo "src". "Src" significa "source" ou no português brasileiro, fonte. O valor do atributo src é a URL até a imagem que você quer mostrar.

Sintaxe para definir uma imagem:

A URL aponta para o local onde a imagem está armazenada. Uma imagem com o nome "bote.gif", em uma pasta "imagens" no servidor "www.codex.wiki.br" tem a URL:

http://www.codex.wiki.br/imagens/bote.gif.

O browser mostra a imagem onde a tag <img> ocorre no documento. Se você botar uma tag de imagem entre dois parágrafos, o browser mostra o primeiro parágrafo, a imagem e depois o último parágrafo.

Imagens HTML - O atributo Alt

O atributo alt especifica um texto alternativo para a imagem, caso a imagem não possa ser mostrada.

O valor do atributo alt é um texto definido pelo usuário:

O atributo alt dá uma informação alternativa, caso o usuário não possa vê-la (por uma conexão lenta, um erro no atributo src, ou se o usuário usa um leitor sem suporte para imagem).

Imagens HTML - Height e Width

Os atributos height e width são usados para especificar respectivamente a altura e largura de uma imagem.

O valor dos atributos são especificados em pixels por padrão: <img src="bote.jpg" alt="O bote" width="305" height="220" />

Dica: É boa prática preencher o valor destes dois atributos em uma tag de imagem. Se este atributos estiverem preenchidos, o espaço requerido para a imagem é reservada no carregamento do documento HTML. No entanto, sem esses atributos, o browser não sabe o tamanho da imagem. O efeito disso será de que o layout da página irá mudar durante o carregamento (enquanto a imagem carrega).

Notas básicas - Dicas úteis

Nota: Se um arquivo HTML contém 10 imagens - onze arquivos são necessários para mostrar a página. Carregar imagens toma tempo, por isso use imagens com cuidado.

Nota: Quando uma página é carregada, é o browser, naquele momento, que pega a imagem do servidor web e insere dentro a página.Tenha certeza de que as imagens estão no mesmo lugar em relação a página, ou então seus visitantes só irão ver um ícone informando que a imagem não foi achada.

Exemplos:

Tags de imagem HTML

Tag	Descrição
<img />	Define uma imagem
<map>	Define um mapa-de-imagem ou image-map
<area />	Define uma área clicável dentro de um image-map

< Links | Índice | Tabelas >