Lio 9: Imagens - HTML.

net

1 de 5

http://pt-br.html.net/tutorials/html/lesson9.php

Lio 9: Imagens
O que voc acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua
pgina?

Ops, isto soa como um desafio...

Talvez, mas muito fcil de fazer. Tudo o que voc precisa da nossa j conhecida tag:
Exemplo 1:

<img src="tim.jpg" alt="Tim Berners-Lee" />

Ser renderizado no navegador assim:

O que voc tem a fazer dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a
imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).
Notar que a tag imagem do tipo comando isolado, isto , uma s tag de abertuta e fechamento.
Semelhante a tag <br /> que no precisa de um texto inserido nela.
"tim.jpg" o nome do arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso do tipo de
imagem. Tal como a extenso ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o
arquivo uma imagem. So trs os tipos de imagens que voc pode inserir na sua pgina:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Em geral imagens GIF so melhores para grficos e desenhos e imagens JPEG so melhores para
fotografia. Existem duas razes para isto: primeiro, imagens GIF so constituidas por 256 cores, e imagens
JPEG por milhes de cores, segundo, imagens GIF so melhores otimizadas para imagens simples ao
passo que imagens JPEG so melhores otimizadas para imagens complexas. Quanto melhor a compresso
tanto menor o tamanho do arquivo e tanto mais rpido a pgina carregada no navegador. Como voc deve
saber por experincia prpria, pginas desnecessariamente "pesadas" para carregar so frustantes para o

04/02/2014 16:37

Lio 9: Imagens - HTML.net

2 de 5

http://pt-br.html.net/tutorials/html/lesson9.php

usurio.
Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG
tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG em
vrios aspectos melhor que os formatos JPEG e GIF: milhes de cores e efetiva compresso.

Onde consigo minhas imagens?

Para criar suas prprias imagens voc precisa de um programa de edio de imagens. Um programa de
edio de imagens a ferramenta essencial para criao de websites com grande impacto visual.
Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema
operacional. Assim, voc deve considerar a aquisio do Paint Shop Pro, do PhotoShop ou do Macromedia
Fireworks, que so os trs melhores editores de imagens atualmente existentes no mercado.
Contudo, como j dissemos, no h necessidade de comprar um programa caro para acompanhar este
tutorial. Por enquanto, voc poder fazer o download de um exelente editor de imagens chamado Irfan View
que freeware, isto , no custa nada.
Ou voc pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download
de imagens da Internet, cuidado para no violar direitos autorais de terceiros. A seguir mostro como fazer o
download de uma imagem existente na Internet:
1. Clique com o boto direito do mouse na imagem da Internet.
2. No menu que aparece escolha a opo "Salvar imagem como...".
3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".
Faa isto com a imagem abaixo e salve no seu computador no mesmo local onde est localizado seus
documentos HTML. (Notar que dever ser salvo o arquivo com formato PNG: logo.png):

Agora voc pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que voc criou
neste tutorial.

Isto tudo o que eu preciso saber sobre imagens?

Existem mais algumas coisinhas que voc precisa saber.
Primeiro, voc pode inserir imagens que esto localizadas em outros diretrios ou at mesmo em outros
websites:
Exemplo 2:

<img src="images/logo.png">

Exemplo 3:

<img src="http://www.html.net/logo.png">

04/02/2014 16:37

Lio 9: Imagens - HTML.net

3 de 5

http://pt-br.html.net/tutorials/html/lesson9.php

Segundo, imagens podem ser links:

Exemplo 4:

<a href="http://www.html.net">
<img src="logo.png"></a>

Ser renderizado no navegador assim: (clique na imagem):

Existem outros atributos que eu deva conhecer?

Voc sempre ter que usar o atributo src, que diz ao navegador onde a imagem est localizada. Alm dele
existem alguns outros atributos que podem ser bastante teis quando voc insere imagens em uma pgina.
O atributo alt usado para fornecer uma descrio textual alternativa da imagem caso por alguma razo a
imagem no seja renderizada para o usurio. Isto particularmente importante para usurios com restries
visuais ou quando a imagem carregada muito lentamente. Em conseqncia, sempre use o atributo alt:
Exemplo 5:

<img src="logo.gif" alt="logotipo do HTML.net">

Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando o usurio passa o
mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt a de fornecer uma
alternativa textual para imagem. O atributo alt no deve ser usado para criar mensagens pop-up uma vez
que os leitores de tela passaro uma mensagem que no descreve a imagem para os usurios com
restries visuais.
O atributo title pode ser usado para fornecer uma curta descrio da imagem:
Exemplo 6:

<img src="logo.gif" title="Aprenda HTML no site HTML.net">

Ser renderizado no navegador assim:

04/02/2014 16:37

Lio 9: Imagens - HTML.net

4 de 5

http://pt-br.html.net/tutorials/html/lesson9.php

Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa pop-up com o texto
"Aprenda HTML no site HTML.net" .
Dois outros atributos importantes so width e height:
Exemplo 7:

<img src="logo.png" width="141" height="32">

Ser renderizado no navegador assim:

Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem.
O valor adotado para medidas o pixel. Pixel a unidade de medida usada para medir a resoluo da tela.
(As resolues de tela mais comuns so de 800x600 e 1024x768 pixels). Ao contrrio de centmetros, pixel
uma inidade de medida relativa que depende da resoluo da tela. Usurios com grande resoluo de tela
tero 25 pixels em 1 centmetro de tela enquanto aqueles com baixa resoluo de tela tero os mesmos 25
pixels em 1,5 cm de tela.
Se no forem definidos os valores para width eheight, a imagem ser inserida com seu tamanho real. Com
width e height voc pode alterar o tamanho da imagem:
Exemplo 8:

<img src="logo.gif" width="32" height="32">

Ser renderizado no navegador assim:

Contudo, o tempo de descarga da imagem ser sempre aquele requerido como se ela tivesse suas
dimenses reais, mesmo que voc diminua seu tamanho com uso destes atributos. Assim, voc no deve
diminuir o tamanho das imagens com o uso dos atributos width e height. Se voc precisa diminuir a
imagem diminua suas dimenses reais em um editor de imagem para tornar suas pginas mais leves e mais
rpidas.
Dito isto, acrescentamos que sempre uma boa idia definir os atributos width e height para imagens, pois

04/02/2014 16:37

Lio 9: Imagens - HTML.net

5 de 5

http://pt-br.html.net/tutorials/html/lesson9.php

assim fazendo o navegador reservar o espao para descarga da imagem previamente. Isto acaba por
permitir ao navegador, saber com antecedncia (antes de descarregar as imagens) como ser o layout da
pgina.
Por enquanto isto tudo sobre o Tim Berners-Lee e sobre imagens.

<< Lio 8: Links

Lio 10: Tabelas >>

04/02/2014 16:37