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:

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
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 parafotografia. Existem duas razes para isto: primeiro, imagens GIF so constituidas por 256 cores, e imagensJPEG 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

Lio 9: Imagens - HTML.net http://pt-br.html.net/tutorials/html/lesson9.php

1 de 5 04/02/2014 16:37

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 emvrios 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 deedio 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:

Clique com o boto direito do mouse na imagem da Internet.1.

No menu que aparece escolha a opo "Salvar imagem como...".2.

Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".3.

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:

Exemplo 3:

Lio 9: Imagens - HTML.net http://pt-br.html.net/tutorials/html/lesson9.php

2 de 5 04/02/2014 16:37

Segundo, imagens podem ser links:

Exemplo 4:

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:

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:

Ser renderizado no navegador assim:

Lio 9: Imagens - HTML.net http://pt-br.html.net/tutorials/html/lesson9.php

3 de 5 04/02/2014 16:37

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:

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:

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 devediminuir o tamanho das imagens com o uso dos atributos width e height. Se voc precisa diminuir aimagem 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

Lio 9: Imagens - HTML.net http://pt-br.html.net/tutorials/html/lesson9.php

4 de 5 04/02/2014 16:37

>

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 9: Imagens - HTML.net http://pt-br.html.net/tutorials/html/lesson9.php

5 de 5 04/02/2014 16:37