Gestão das imagens em HTML

Como exibir imagens numa página web?

Algumas imagens num site Web podem torná-lo mais atractivo e mais convivial. Não obstante, é importante não exagerar, porque as imagens podem implicar um tempo de carregamento bastante longo e podem em certos casos prejudicar a legibilidade.

A baliza IMG da linguagem HTML permite inserir imagens numa página HTML. A imagem pode estar situada no mesmo servidor que a página na qual é inserida mas igualmente num outro servidor especificando a sua URL completa.

Só os seguintes formatos de imagens são aceites em standard nas especificações do W3C:

As imagens JPEG (.JPG) : as imagens que têm um grande número de cores serão bem comprimidas, o que quer dizer que ocuparão menos espaço, por conseguinte necessitarão um tempo de carregamento menor)
As imagens PNG : A sua dimensão é fraca no caso de imagens com poucas cores ou com toms uniformes. Este formato permite, além disso, ter imagens entrelaçadas (que se afixam progressivamente) com uma profundidade de cores de 24 bits e imagens nas quais se define uma cor como transparente.
As imagens GIF : Possuem as mesmas vantagens que as imagens PNG,mas o formato GIF está limitado a 256 cores no máximo e este formato não é totalmente livre.

Como exibir imagens numa página web?

Os principais atributos da marca IMG são os seguintes :

SRC : Indica o lugar da imagem (é obrigatório)
ALIGN : Especifica o alinhamento da imagem em relação ao texto adjacente. Pode ter os valores: TOP, MIDDLE, e BOTTOM (em cima, ao meio e debaixo)
ALT : Permite afixar um texto alternativo quando a imagem não se afixa.
TITLE : Permite afixar uma bolha informativa aquando passa pela imagem imagem com o cursor.
WIDTH : Permite especificar a amplitude da imagem.
HEIGHT : Permite especificar a altura da imagem.

Assim, para inserir uma imagem, será necessário introduzir uma baliza do tipo:

<IMG SRC="url_de_l_image" 
 ALT="Texto que substitui a imagem" 
 TITLE="Texto a afixar">

Atributo	Valor	Resultado	Efeito Visual
ALIGN	bottom center left middle top right	Alinhamento da imagem.
ALT		Texto alternativo no caso de a imagem não aparecer.
BORDER	Número inteiro	Números pixéis da cercadura. A cor da cercadura pode ser definida pelo atributo LINK ou TEXT da baliza <BODY>. Por defeito, o atributo BORDER vale 1, o que cria um pequeno quadro em redor da imagem. Para evitar isto, lembre-se de o definir como igual a 0.
HEIGHT	Número inteiro	Altura da imagem (em pixéis ou %). Quando este atributo precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma afixação de pior qualidade.
HSPACE	Número inteiro	Números pixéis de ajustamento entre a imagem e o texto adjacente (horizontalmente).	Texto
LONGDESC		URL da descrição da imagem.
LOWSRC	URL	Imagem alternativa (geralmente mais pequena) mostrada durante o tempo que a verdadeira imagem levar a ser carregada pelo navegador.
NAME		Permite definir um nome para a imagem. Este atributo é útil nomeadamente para a gestão das imagens em JavaScript.
SRC	URL	URL da imagem
TITLE		Texto alternativo no caso de a imagem não aparecer.
USEMAP		URL ou nome da âncora que define a imagem recativa.
VSPACE		Números pixéis de ajustamento entre a imagem e o texto (verticalmente).	Ensaio de texto
WIDTH	Número inteiro	Amplitude da imagem (em pixéis ou %). Quando este atributo precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma afixação de pior qualidade.

Texto envolvendo uma imagem

As imagens inserem-se no texto como um carácter, assim parece impossível mostrar-se texto ao longo de uma imagem.

Existem com efeito várias maneiras de o fazer. Vamos ver duas :

A primeira consiste em criar um quadro com uma linha e duas colunas, nas quais se põe a imagem e o texto.
A segunda (menos precisao) consiste em alinhar a imagem à esquerda ou à direita com o atributo ALIGN e seguidamente introduzir o seu texto. Para parar este envolvimento, basta usar o atributo CLEAR.

As imagens reactivas (“imagens MAP”)

É possível criar zonas clicáveis mesmo dentro de uma imagem graças ao atributo USEMAP, utilizado conjuntamente com a baliza MAP.
O atributo USEMAP da baliza <IMG> aponta para uma baliza <MAP> que contém a descrição do corte da imagem em zonas clicáveis.

A baliza <MAP> tem um atributo NAME que define o seu nome (NAME= " nome ") e contém as zonas clicáveis declaradas graças a balizas AREA.

Baliza	Atributo	Valor	Efeito Visual
MAP	NAME
AREA	SHAPE	RECT CIRCLE POLY	Rectângulo (as suas coordenadas são: “abcissa sup esquerdo, ordenado sup esquerdo,abcissa inf direito, ordenada inf direito ") Círculo (as suas coordenadas são : “abcissa centro, ordenada centro, raio”) Polígono (as suas coordenadas são: “a sequência das coordenadas separadas por vírgulas ")
	HREF	URL	Relação para o URL
	COORDS	"XX,XX,XX,XX"	Contem as côordenadas da zona cliquable, separadas por vírgulas.

Eis abaixo um exemplo de imagem reactiva :

<IMG SRC="images/image.gif" 
 WIDTH=150 
 HEIGHT=70 
 USEMAP="#Map"> 
<MAP NAME="Map"> 
 <AREA SHAPE="rect" 
     HREF="debut.html" 
     COORDS="0,0,48,28"> 

 <AREA SHAPE="circle" 
     HREF="precedent.html" 
     COORDS="50,30,10"> 

 <AREA SHAPE="poly" 
     HREF="suivant.html" 
     COORDS="60,50,80,30,100,40,50,100"> 
</MAP>

Última modificação do dia Segunda 3 de Agosto de 2009 às 20:52:33.

Anterior Relações hipertextos

Próximo Fundo

Melhores respostas por « Gestão das imagens em HTML » em :

As marcas HTML Ver HTML, uma linguagem de marcação O HTML não é uma linguagem de programação. Trata-se de uma linguagem que permite descrever a fomatação da página e a forma de um conteúdo redigido em texto simples. Uma página HTML é assim um...

Estrutura de um documento HTML Ver Noção de documento HTML Uma página HTML é um simples ficheiro que contém texto formatado com balizas HTML. Por convenção, a extensão dada ao ficheiro é .htm ou .html, mas uma página web pode potencialmente ter qualquer extensão. Uma...

Introdução ao HTML Ver Apresentação do HTML O HTML (“HyperText Mark-Up Language”) é uma linguagem dita “de marcação” (de “estruturação” ou “balizagem”) cujo papel é formalizar a escrita de um documento com balizas (ou marcas) de formatação. As balizas permitem...

[Gravura] Gravar uma imagem disco (ISO,NRG,…] Ver1 – Definição da imagem ISO 2 - Recomendação 3 –Como proceder ? 3.1 - Nero 3.2 - K3B 3.3 - BurnAtOnce 3.4 - BurnCDCC 3.5 - CDBurner XP Pro 3.6 - Deepburner 3.7 - Easy Media Creator 3.8 - Infrarecorder 4 -...

[PHP] FAZER UPLOAD DE ARQUIVOS VerO PHP possibilita o gerenciamento de arquivos enviados (upload) graças ao formulário HTML. Formulário de envio de arquivos Configurção do PHP para fazer upload Recuperação do arquivo com PHP Formulário de envio de arquivos A primeira...

Fazer uma newsletter VerFazer uma newsletter Uma newsletter é um boletim informativo, enviado por e-mail aos assinantes, periodicamente. Composta de texto, ilustratções, links para o seu site, seu conteúdo pode ser uma seleção de produtos, uma notícia sobre a sua...

Salvar documentos PDF (Resolvido) Ver

Gravar VCD usando nero 6 Ver

Não consigo abrir mensagens de arquivo pps Ver

Download Delvic Image Converter VerTodas as imagens áudio e vídeo serão convertidas para serem acessiveis à você: - conversão de JPG, ICNS, TGA, BMP. Os fromatos vão do mais complexo SGI ao mais básico GIF. O programa gratuito Delvic transformará uma imagem JPEG para ICNS...

Download Google Chrome Frame VerGoogle Chrome Frame é um plug in para Internet Explorer que tem como objetivo aproveitar ao máximo HTML 5 e JavaScript usando o coração do Google Chrome , o navegador Web do Goolgle . Se você quiser desfrutar da velocidade de navegação que o Google...

Download All to Tiff Converter 3000 TRIAL Ver

Parágrafos em HTML VerParágrafos A linguagem HTML considera os parágrafos como blocos de texto. Os navegadores repartem o melhor possível o seu conteúdo na janela a menos que um atributo NOWRAP ou NOBR seja especificado explicitamente. Dentro de um parágrafo,...

Níveis de títulos em HTML VerNíveis de título A linguagem HTML define 6 níveis de título (em inglês heading), para definir uma estruturação hierárquica dos parágrafos num texto: : Baliza Efeito VisualH1

Listas e enumerações em HTML VerAs listas Uma lista é um parágrafo estruturado que contém uma sequência de artigos. A linguagem HTML define três tipos de listas: A lista ordenada; A lista não ordenada; A lista de definição. A lista não ordenada ...