HTML

É possível colocar variados formatos de imagens nos documentos HTML, embora, por questão de eficiência e tamanho, os formatos mais comuns são o JPEG, o GIF e o PNG.

Sintaxe:

<img src=”[url da imagem]”

ALIGN=“[center/left/rigth/top/middle/bottom/absmiddle/texttop/baseline/absbottom]”

WIDTH=”[largura]” HEIGHT=”[altura]”

VSPACE=”[Espaçamento vertical]”

HSPACE=”[Espaçamento Horizontal]”

BORDER=”[Borda]”

ALT=”[texto alternativo]

LOWSRC=”[url de baixa qualidade]”

A tag <IMG> e o atributo SRC

A inserção de imagens num documento faz-se com o elemento <img>.

Este elemento tem conteúdo vazio, o que significa que ele apenas possui atributos e não tem a tag de fecho. O atributo SRC (que é uma abreviatura de “source,” ou origem) indica o nome e o local em que pode ser encontrado o ficheiro que contém a imagem.

Exemplos:

<img src=”imagem.jpg”> -apresenta uma imagem de nome imagem.jpg que se encontra no mesmo directório da página.

<img src=”/imagem.gif> -apresenta uma imagem de nome imagem.gif que se encontra no directório raiz do host.

<img src=”…/imagem.jpg” > - apresenta uma imagem de nome imagem.jpg que se encontra no directório um nível abaixo do directório da página.

<img src=”http://proflilianaferreira.wix.com/html/magens/imagem.jpg”> -apresenta uma imagem de nome imagem.jpg que se encontra no site.

O atributo ALT

O atributo ALT usa-se para definir “Texto alternativo” à imagem. Este texto será mostrado em vez da imagem no caso de o browser não conseguir apresentá-la, e usaq-se da seguinte forma:

Exemplo: <img src=”image.gif” alt=”Escola Profissional Gustave Eiffel”>

O atributo “alt” deve conter uma descrição daquilo que a imagem contém para que seja possível compreender o seu conteúdo mesmo sem a ver. A utilização do atributo “alt” é recomendada porque melhora a acessibilidade das páginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têm deficiências visuais. Nesses casos sem o atributo “alt” o conteúdo das imagens seria sempre um mistério.

O atributo ALIGN - Alinhamento da imagem

É possível mudar o alinhamento utilizando o atributo ALIGN=dentro da tag <IMG>.

Exemplo: <IMG SRC=imagem.gif ALIGN=TOP>

Tipos de alinhamento:

ALIGN=LEFT faz a imagem “flutuar” à esquerda, enquanto o texto circunda a imagem pela direita.
ALIGN=RIGHT faz a imagem “flutuar” à direita, enquanto o texto circunda a imagem à esquerda.
ALIGN=TOP alinha o topo da imagem com o topo do elemento mais alto da linha, que pode ser uma outra imagem.
ALIGN=TEXTTOP alinha o topo da imagem com o topo do texto.
ALIGN=MIDDLE alinha a base do texto com o centro da imagem.
ALIGN=BOTTOM alinha a imagem com a base dos outros elementos da linha.
ALIGN=BASELINE E ALIGN=ABSBOTTOM alinham a imagem com a base dos outros.
ALIGN=ABSMIDDLE alinha o centro do texto com o centro da imagem.

O atributo BORDER - Contorno

O atributo é BORDER. O valor da borda é expresso em pixels.

Exemplo: <IMG SRC=imagens/imagem.gif BORDER=2>

O atributo VSPACE Margens

É possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e em baixo da imagem, o atributo e VSPACE. Se o problema for espaço dos lados da imagem usa-se o atributo HSPACE para definir as margens horizontais.

Cada um destes atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da imagem (em cima e em baixo | à direita e à esquerda).

o atributo LOWSRC Baixa resolução

A inclusão da imagem de baixa resolução é conseguida com a colocação do atributo LOWSRC que indica o ficheiro que será carregado primeiro.

No exemplo acima, o arquivo altaresco.gif é a imagem definitiva, de alta resolução. O arquivo baixares.gif é a imagem de baixa resolução que será carregada antes.

O atributo CLEAR Controlar a quebra de linha

Quando aplicamos atributos de alinhamento na imagem, o texto fica colocado ao lado da imagem. Quando é necessário quebrar o texto e o próximo paragrafo se apresente após a imagem, então utiliza-se o atributo clear, na tag BR.

Sintaxe: <BR CLEAR=”[left/right/all]”

Exemplo:

<p align=”left”><imgsrc=”../imagens/imagem.jpg”width=”96”height=”142”align=”left”> “texto que aparece alinhado com a imagem”

<BR CLEAR=left> “texto que aparece no proximo paragrafo depois da imagem alinhada com o texto anterior".

...