Codex - Html / Imagens
< Links | Índice | Tabelas >
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:
<img src="URL" alt="algum_texto"/>
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:
<img src="bote.gif" alt="Grande bote" />
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.