Guia prático de HTML - Imagens


Autor/fonte: Tiago Daniel de Souza
Tags: [ guia prático de html ]



Digg del.icio.us

Além de manipular texto, o HTML também serve para exibir imagens de uma maneira muito simples, usando para isso o elemento img:

<img src="emma.jpg" width="221" height="300">

O atributo src - source, fonte em inglês - dá o nome do arquivo da imagem e é o único atributo obrigatório para o elemento img. Os atributos para a largura (width) e a altura (height) não são necessários, mas serão muito úteis quando as pessoas estiverem navegando em seu site: quando seu navegador abre um arquivo HTML e encontrá o elemento img, ele usará o respectivo atributo src como o endereço onde está o arquivo de imagem a ser exibido. Em outras palavras, o elemento img apenas passa uma referência do arquivo de imagem ao navegador, ou seja, você não está colocando esse arquivo de imagem dentro do seu arquivo HTML, você está apenas colocando em seu arquivo HTML uma referência a esse arquivo de imagem. O navegador, por sua vez, começa a baixar essa imagem a partir desse endereço atributo enquanto termina de exibir o documento.

Dependendo do tipo de arquivo de imagem, ela só será exibido pelo navegador quando terminar de ser baixada. Se isso ocorrer e você não utilizou os atributos width e height no seu documento, o navegador só reservará espaço na tela do seu computador para a exibição da imagem quando ela estiver sido baixada, e duranter esse intervalo a formatação do seu documento pode ficar diferente. Para evi tar isso - somente por uma questão de estilo - recomendamos que você sempre use os atributos width e height, que informam ao navegador o tamanho da imagem, antes mesmo dele começar a baixá-la, e assim o espaço na tela do seu computador será apropriadamente reservado para ela.

1. Tamanho de exibição da imagem

Os atributos width e height merecem um pouco mais de atenção. Como vimos, são os atributos que determinam o tamanho que a imagem será exibida. Existem duas formas de se fazer isso, utilizando o tamanho em pixels (tamanho absoluto) e em valores relativos ao tamanho disponível da tela do computador, isto é, em porcentagem.

Um pixel é a menor unidade luminosa da tela do seu computador que os programas podem manipular, e isso depende muito da resolução da tela do seu computador. Um pixel é um quadradinho luminoso. Atualmente as telas de computador tem uma resolução de 800 pixels de comprimento e 600 de altura, às vezes pode ser de 1024 de comprimento e 768 na altura ou resoluções até maiores, de tal modo que nossos olhos já não conseguem distinguir entre pixels contíguos.

O tamanho das imagens computadorizadas também pode ser medido em pixels, que é o tamanho que a imagem vai ocupar na tela do seu computador quando ela for exibida. Para que você descubra qual é o tamanho da sua imagem, você terá que usar algum programa de edição de imagens ou então abri-la diretamente no seu navegador. Experimente ir no menu Arquivo e depois em Abrir, no seu nagevador, ou então digitar a localização da imagem diretamente na barra de endereços. Quando a imagem for exibida, clique sobre ela com o botão direito do seu mouse e em seguida vá em Propriedades. Uma janela com as informações da imagens - inclusive seu tamanho - deverá aparecer. De posse desses valores, basta colocar-los dentro da do img. No exemplo anterior, onde usamos o código width="221" height="300", a imagem foi exibida com 221 pixels de largura e 300 de altura, coincidentemente sendo seu tamanho original. Poderíamos ter escrito:

<img src="emma. jpg" width="22" height="30">

Ou seja, a imagem foi mostrada com um tamanho menor do que o original. Também poderíamos usar tamanhos maiores que original... que tal você experimentar algo como width="2210" height="3000"?! O segundo modo de determinar o tamanho de exibição das imagens no navegador consiste em utilizar porcentagem. Por exemplo:

<img src="emma.jpg" width="10%" height="10%">

Resultará numa imagem exibida com um décimo (10%) do espaço disponível da tela do computador.

Nos dois modos de determinar o tamanho - em pixels e em porcentagem - podemos escolher valores independentes para a altura e a largura, de tal forma que a imagem fique distorcida. Olha que engraçado:

<img src="emma.jpg" width="50" height="400"> 

2. Texto alternativo

Existem ainda outros atributos interessantes para a exibição de imagens. Você pode incluir uma descrição da imagem para que se, por qualquer razão, alguém não consiga ver a imagem ela possa ler uma descrição no espaço vazio. Essa descrição também aparecerá quando você passar o mouse por sobre a imagem.

Você pode adicionar uma pequena descrição desta maneira:

<img src="emma.jpg" width="221" height="300" alt="Emma Goldman!">

O atributo alt (texto alternativo) é utilizado para dar a pequena descrição, neste caso "Emma Goldman!".

3. Borda da imagem

Uma borda (contorno) da imagem pode ser adicionada com o atributo border:

<img src="emma.jpg" width="10%" height="10%" border="1">
<img src="emma.jpg" width="10%" height="10%" border="2">
<img src="emma.jpg" width="10%" height="10%" border="3">

O valor do atr ibuto border indicará o tamanho dessa moldura.

4. Alinhamento da imagem

É possível ainda colocar imagens e texto um do lado do outro, de diversas formas. Vamos supor a mais simples:

<img src="emma.jpg" width="3%" height="3%" border="1">O texto aparece ao lado da imagem.

Esse código pode funcionar muito bem, mas às vezes acontece do texto aparecer abaixo da imagem. Para fazer o posicionamento da imagens e do texto corretamente, basta utilizar o atributo align, que funciona de modo análogo ao do alinhamento de paragráfos:

<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">

O texto vai aparecer à esquerda da imagem (o atributo right faz que a imagem fique à direita da tela), mesmo tendo escrito após o código sobre a imagem. Enquanto o texto puder ficar ao lado da imagem, ele ficará. Quando ele não mais couber nesse espaço, ele começará a ser exibido abaixo da imagem, como você pode ver aqui.

Utilizar o alinhamento de imagens é a melhor maneira de garantir que ela aparecerá no local desejado.

5. Espaçamento da imagem

Notou como o texto do exemplo anterior saiu colado à imagem?! É possível definir um espaçamento entre a imagem e qualquer objeto (texto, imagem, tabelas) que esteja ao seu lado, acima ou abaixo, usando para isso os atributos vspace (espaçamento vertical) e hspace (espaçamento horizontal).

O valor desses atributos diz ao navegador qual será o espaço em pixels entre a imagem e qualquer objeto:

<img src="emma. jpg" width="3%" height="3%" border="1" align="left" hspace="5" border="1">

O texto vai aparecer à direita da imagem, a cinco pixels de distância dela. Deu pra notar a diferença?! Utilizando todos esses atributos para a exibição de imagens você obtém um texto bem diagramado e bonito de ser lido.

Nota: Ao utilizar imagens, lembre-se de que elas podem aumentar consideravelmente o tempo de carregamento para ver o conteúdo de suas páginas, por isso, use-as com cuidado.

6. Elementos relacionados com imagens

  • <img> - Insere uma imagem;
  • <map> - Define um mapeamento sobre a imagem ("image map");
  • <área> - Define uma área clicável sobre um mapa de imagem.


7. Fundos de página

Uma cor ou uma imagem de fundo bem escolhido podem melhorar o aspecto da página, mas uma má escolha é capaz de causar danos muito graves na legibilidade e no aspecto geral da página.

7.1. O atributo bgcolor do elemento <body>

O elemento <body> possui atributos que nos permitem especificar as cores do texto e a cor de fundo. Também podemos usar uma imagem como padrão de fundo.

O atributo bgcolor nos permite escolher a cor de fundo da página. O quadro seguinte mostra três formas de indicar a cor de fundo da página usando um código de cor hexadecimal, um código RGB e um nome de cor (veja mais à frente o tópico sobre cores).

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="blac k">

As linhas apresentadas mais acima usam formas diferentes (mas todas válidas) para dar a cor preta ao fundo da página.

Nota: a forma recomendada para formatar o texto e os fundos de página baseia-se em estilos CSS. A utilização do atributo bgcolor só se justifica se precisarmos de manter a compatibilidade com navegadores antigos que não supor tam CSS (veremos sobre CSS no fim da apostila).

7.2. O atributo background

O atributo background estabelece que o padrão de fundo da página será uma imagem. O valor deste atributo indica o local onde se encontra a imagem. Se as dimensões da imagem forem inferiores às dimensões da página, o navegador repetirá a imagem (como num chão de mosaicos ou em uma parede de azulejos), por forma a ocupar todo o fundo da página.

O exemplo abaixo mostrá bem como se faz isso:

<body background="imagem.jpg">
<body background="http://www.tiagosouza.com/imagem.jpg">

O valor do atributo background é uma URL (site) que define o local onde se encontra a imagem. Na primeira linha mais acima, demos uma URL relativa e na segunda demos uma URL absoluta.

Nota: a forma recomendada para formatar o texto e os fundos de página baseia-se em estilos CSS. A utilização deste atributo só se justifica se precisarmos de manter a compatibilidade com navegadores antigos que não suportam CSS (veremos sobre CSS no fim da apostila).

8. Dicas

Sempre que utilizar uma imagem de fundo na página, não se esqueça destes aspectos:

  • Certifique-se de que o tamanho da imagem (em KBytes) não é muito grande, pois em caso afirmativo, o tempo para carregar a página aumentaria consideravelmente;
  • Certifique-se de que a imagem de fundo combina bem com a cor do texto;
  • Certifique-se de que o fundo combina bem com as outras imagens da página;
  • Verifique se a repetição da imagem de fundo em mosaico resul ta em um padrão perfeito. Se você perceber algumas falhas aparentes, utilize outra imagem de fundo ou faça uma edição nesta atual;
  • Certifique-se de que a imagem não é incômoda e que não desvia a atenção do texto.


Os atributos bgcolor, background e text do elemento <body> foram reprovados nas recomendações mais recentes da W3C para a linguagem HTML (HTML 4 e XHTML). A forma recomendada para obter os mesmos resultados baseia-se na utilização de estilos CSS. A utilização destes atributos só se justifica se precisarmos de manter a compatibilidade com navegadores antigos que não suportam CSS.

São poucos os sites de qualidade que utilizam imagens de fundo, e aqueles que o fazem, usam fundos que não atrapalham a visualização do site.




Enviado por xKuRt em 19/01/2009 às 19:31


Itens relacionados

Guia prático de HTML - Elementos básicos da linguagem HTML
Guia prático de HTML - Entidades, acentuação e caracteres especiais
Guia prático de HTML - Listas de definições, ordenadas e não ordenadas
Guia prático de HTML - Modificando o corpo do documento
Guia prático de HTML - HTML avançado
Guia prático de HTML - Outras possibilidades
Guia prático de HTML - Sua primeira página em HTML
Guia prático de HTML - Elementos e atributos
Guia prático de HTML - Colocando seu site no ar
Guia prático de HTML - Dicas finais e conclusão

Listar todos itens relacionados

Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Segunda, 22 de Setembro de 2014




Top 5 membros

Últimos membros online

  • 1em 21/09 às 17:23
  • nobioem 18/09 às 22:31
  • xKuRtem 18/09 às 19:55

Últimos membros cadastrados



Capa do livro
Engenharia de Software - Uma Abordagem Profissional


Capa do livro
Introdução À Arquitetura E Design De Software


Capa do livro
Service Desk Corporativo - Solução com Base na ITIL® V3





Hostnet

IMD