Sendo assim, nestes primeiros capítulos nos limitaremos a explicar como inserir e alinhar devidamente em nossa página uma imagem já criada.
A etiqueta que utilizaremos para inserir uma imagem é <img> (image). Esta etiqueta não possui seu fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (source).
A sintaxe fica então da seguinte forma:
<img src="caminho para o arquivo">
Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo as mesmas, o único que muda é que, no lugar de uma página destino, o destino é um arquivo gráfico.
Além deste atributo, obviamente indispensável para a visualização da imagem, a etiqueta <img> nos propõe outra série de atributos de maior ou menor utilidade:
Atributo alt
Entre aspas deste atributo, colocaremos uma brevíssima descrição da imagem. Esta etiqueta não é indispensável, mas apresenta várias utilidades.
Primeiramente, durante o processo de carregamento da página, quando a imagem não tiver sido ainda carregada, o navegador mostrará esta descrição, com a qual o navegante poderá ter uma idéia do que se trata neste caso.
Isto não é tão trivial se temos em conta que alguns usuários navegam pela rede com uma opção do navegador que desativa a amostra de imagens, com o que tais pessoas poderão sempre saber de que se trata o gráfico e eventualmente mudar o modo com imagens para visualizar.
Além disso, determinadas aplicações para incapacitados ou para telefones vocais que não mostram imagens oferecem a possibilidade de lê-las, o que nunca é demais pensar nestes coletivos.
Em geral, podemos considerar como aconselhável o uso deste atributo salvo para imagens de pouca importância e absolutamente indispensável se a imagem em questão serve de link.
Atributos height e width
Definem a altura e largura respectivamente da imagem em pixels.
Todos os arquivos gráficos possuem umas dimensões de largura e altura. Estas dimensões podem ser obtidas a partir do próprio designer gráfico ou também, clicando com o botão direito sobre a imagem vista pelo navegador para logo escolher propriedades sobre o menu que se desdobra.
O fato de explicitar em nosso código as dimensões de nossas imagens ajuda ao navegador a confeccionar a página da forma que nós desejamos inclusive antes das imagens serem baixadas.
Assim, se as dimensões das imagens tiverem sido proporcionadas, durante o processo de carregamento, o navegador reservará o espaço correspondente a cada imagem criando uma planificação correta. O usuário poderá começar a ler tranqüilamente o texto sem que este se mova de um lado a outro cada vez que se carregue uma imagem.
Além desta utilidade, o alterar os valores destes atributos, é uma forma imediata de redimensionar nossa imagem. Este tipo de utilidade não é aconselhável visto que, se o que pretendemos é aumentar o tamanho, a perda da qualidade da imagem será muito sensível. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o necessário para a imagem que estamos mostrando, com o que aumentamos o tempo de descarregamento de nosso documento desnecessariamente.
É importante insistir neste ponto já que muitos estreantes têm o péssimo costume de criar gráficos pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho descomunal. Temos que pensar que o tamanho de uma imagem com umas dimensões da metade não se reduz à metade, e sim, que é aproximadamente 4 vezes inferior.
Atributo border
Define o tamanho em pixels do quadro que rodeia a imagem.
Dessa forma, podemos re-enquadrar nossa imagem se desejamos. É particularmente útil quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos que especificar border="0".
Atributos vspace e hspace
Serve para indicar o espaço livre, em pixels, que tem que ser colocado entre a imagem e outros elementos que a rodeiam, como texto, outras imagens, etc.
Atributo lowsrc
Com este atributo podemos indicar um arquivo de baixa resolução. Quando o navegador detecta que a imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resolução (que ocupa muito pouco e que se transfere muito rápido). Posteriormente, descarrega e mostra a imagem de resolução adequada (assinalada com o atributo src, que se supõe que ocupará mais e que será mais lenta de se transferir).
Está atributo está em desuso, mesmo supondo uma vantagem considerável para que o descarregamento inicial se realize mais rápido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real.
| Dica: Utilizar imagens como links Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos muito facilmente adivinhar o tipo de código necessário. <a href="arquivo.html"><img src="imagem.gif"></a> |
Exemplo prático
Será óbvio para os leitores, fazer agora uma página que contenha uma imagem várias vezes repetidas, mas com diferentes atributos.
- Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3 pixels.
- Em outra ocasião a imagem aparecerá sem borda, com sua mesma altura e com uma largura superior a original.
- Também mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior a original.
- Por último, mostraremos a imagem com uma altura e largura maiores que as originais, mas proporcionalmente igual que antes.
| Vamos utilizar esta imagem para fazer o exercício: |
 |
As dimensões originais da imagem são 28x21, o código fonte seria então da seguinte forma:
<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Esticada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">
0 comentários:
Postar um comentário