Escola
AULAS
ACTIVIDADES

Cursinhos
HTML
JAVA

Imagens e hiperligações

Linhas Horizontais

A marca <hr> indica ao navegador para inserir uma linha horizontal a toda a largura da janela. O modo como a linha horizontal se apresenta é da responsabilidade do navegador. A marca <hr> implica uma mudança de linha, mas não é colocado espaço adicional antes ou depois da mesma. Para isso é necessário usar explicitamente um parágrafo (marca <p>). Dos atributos que podem ser usados com esta marca destacam-se size, width, noshade e align.
O atributo size permite seleccionar linhas mais largas ou mais estreitas que o tamanho usado por omissão pela maioria dos navegadores, normalmente 3 pixels.

Exemplo:
<hr size=12>

Habitualmente as linhas horizontais têm uma aparência 3D que pode eliminar-se com o atributo noshade.

Exemplo:
<hr noshade>

O atributo width permite definir o comprimento da linha horizontal em pixels ou em percentagem da largura da janela, qualquer que esta seja.

Exemplo:
<hr width=250>

Em geral é preferível usar o valor percentual, uma vez que a dimensão da janela é variável e controlada pelo navegador.
O atributo align pode ter os valores left, right ou center. O navegador usa este último, por omissão.

Imagens

É vulgar encontrar imagens nos documentos HTML. Usadas criteriosamente são um excelente meio de cativar a atenção dos leitores da informação e de dar aos documentos uma apresentação cuidada. Usadas em excesso, todavia, implicam quase sempre a lentidão excessiva de acesso ao documento, bem como, muitas vezes, alguma perda de significado.

Habitualmente as imagens para a Web apresentam um de dois formatos, Graphics Interchange Format (GIF) e Joint Photographic Experts Group (JPEG).
Ambos os formatos apresentam vantagens e desvantagens que devem ser ponderadas em cada caso.

O formato GIF

As principais características deste formato são a sua portabilidade, entre diferentes plataformas, a compressão, que permite reduzir substancialmente a dimensão do ficheiro imagem, a não alteração, via essa mesma compressão, da imagem original, e a facilidade com que estas imagens podem ser animadas. Permite ainda o chamado armazenamento entrelaçado (interlacing) e a transparência. A sua maior desvantagem é a limitação do número de cores, a 256, bem como alguma ineficiência na compressão.

O armazenamento entrelaçado permite que a imagem se materialize totalmente no ecrã apresentando uma definição que vai crescendo gradualmente. Sem esta capacidade, a imagem, ela própria, vai aparecendo gradualmente, de cima para baixo, até se completar.

A transparência permite, como o próprio nome indica, tornar transparente parte da imagem, permitindo fazer aparecer o que está por trás, geralmente o fundo da janela do navegador. O uso adequado desta facilidade permite, por exemplo, apresentar a imagem com um efeito degradé.

Para possibilitar estas funcionalidades existem programas apropriados para o tratamento da imagem, por exemplo o LViewPro e o WebImage, respectivamente para entrelaçamento e transparência.

É possível juntar num único ficheiro GIF uma sequência de imagens, criando uma animação. Várias possibilidades de controlo permitem a criação de animações razoavelmente elaboradas. É importante não esquecer que estes ficheiros são geralmente grandes e o tempo de acesso ao documento degrada-se rapidamente, em especial se se usam várias animações.

Alguns sítios úteis relativos a imagens animadas são:

O formato GIF é geralmente usado para ícones, pequenas imagens coloridas e desenhos.

O formato JPEG

O formato JPEG permite uma maior compressão do ficheiro imagem e uma maior paleta de cores (16.7 milhões). A compressão é particularmente eficiente, por exemplo um ficheiro GIF de 200Kb pode reduzir-se a cerca de 30Kb no formato JPEG. Há, no entanto, alguma perda de dados imagem, que pode, todavia, ser controlada com ferramentas apropriadas. Este formato é usado sobretudo para fotografias. Informações úteis sobre este formato podem encontrar-se em JPEG FAQ.

A marca IMG

A marca <img> permite que uma imagem seja referenciada e inserida num documento HTML (inline image). O objectivo é permitir que um objecto imagem seja incluido no documento e apresentado juntamente com o texto, em vez de ter uma ligação que transfere e apresenta o objecto imagem numa nova janela. Como se verá as imagens podem incluir-se numa ligação (marca <a>), o que permite que funcionem como "botões" de ligação a outros recursos.

A marca <img> têm diversos atributos. Seguem-se os mais comuns.

src="URL da imagem"

Este atributo é, em geral, obrigatório e especifica o endereço da imagem a apresentar. Este endereço é geralmente um endereço relativo à localização do documento onde a imagem é inserida.

alt="texto alternativo"

Este atributo deve ser sempre usado para que os navegadores que não permitem a visualização de imagens (por exemplo, quando esta opção está desactivada) possam apresentar texto explicativo sobre a mesma. Esta opção é ignorada quando a visualização de imagens está activa. Mesmo que a imagem seja irrelevante (o que, em princípio, não deve ocorrer), deve usar-se alt="". Aos botões gráficos, numa lista, pode, por exemplo associar-se alt="*".

align="bottom", "middle", "top", "left", "right"

Este atributo indica ao navegador como deve alinhar a imagem relativamente ao texto vizinho. O padrão HTML não define um alinhamento por omissão, de modo que é sempre conveniente indicar o mesmo. Geralmente, porém, quando não indicado, o alinhamento do bordo inferior da figura faz-se pela linha de texto, o que corresponde ao valor bottom do atributo.
O Navigator, da Netscape e o Internet Explorer, da Microsoft, permitem valores adicionais para este atributo, nomeadamente textop (só Navigator), absmiddle, center, baseline, e absbottom, que são semelhantes a top, middle e bottom mas dão um controlo vertical mais fino, no posicionamento da imagem.

Exemplos

Só é possível centrar uma imagem na janela do navegador se ela estiver separada do texto vizinho, por exemplo, por um parágrafo. Neste caso a marca <center> produz o efeito desejado. Pode também usar-se o atributo align da marca <p>, com o valor center.

width="nº de pixels" hight="nº de pixels"

Estes atributos permitem indicar ao navegador a largura e altura da imagem, em lugar de obrigar a que estes valores sejam obtidos a partir da informação contida no ficheiro imagem. O tempo de acesso ao documento é, portanto, menor. A imagem é, todavia, recuperada tal qual o original.

Estes atributos permitem algumas manipulações que podem melhorar o tempo de acesso. Veja-se o exemplo seguinte para desenhar uma barra, a toda a largura da janela, com altura 15 pixels, a partir da imagem de um único pixel, na cor desejada.

Exemplo:
<img src="one-pixel.gif" width="100%" height=15>

Note-se o valor do atributo em percentagem, em lugar de número absoluto de pixels.

Saliente-se que a utilização destes atributos implica que o navegador reserve sempre a área correspondente para a apresentação da imagem, mesmo que a opção de visualização das imagens esteja inactiva.

hspace="nº de pixels" vspace="nº de pixels"

Estes atributos permitem alargar o espaço de cada lado, bem como acima e abaixo da imagem, além dos habituais 2 pixels colocados por omissão.

border="nº de pixels"

Este atributo permite colocar à volta da imagem uma moldura com o número especificado de pixels.

Imagens animadas

Estas imagens, contidas num ficheiro GIF especial (GIF87a e GIF89a) são referenciadas e incluidas num ficheiro HTML exactamente como as imagens não animadas, usando-se a marca <img>.

Hiperligações, a marca <a>

A marca HTML <a> usa-se para criar ligações a outros documentos e para dar o nome a fragmentos de um mesmo documento.

Uma âncora é qualquer objecto que actua como ligação a um recurso destino (target). Pode ser, por exemplo, uma frase sublinhada num documento HTML.

A marca <a> usa-se geralmente com os atributos href e name, respectivamente para criar uma ligação a um recurso (que pode ser uma secção do documento actual) e para designar uma secção do próprio documento.

A marca <a> obriga à marca de fecho </a>. Entre estas marcas pode colocar-se texto, mudanças de linha, imagens e cabeçalhos. Se forem necessárias outras marcas de formatação, por exemplo a de negrito <b>, o padrão especifica que devem ser colocadas por fora de <a>...</a>.

O atributo HREF

O atributo href especifica o URL (absoluto ou relativo) do recurso a que se pretende fazer a ligação. O URL pode referir-se a outros serviços (protocolos) que não o http.

Exemplo:

A <a href="http://www.fe.up.pt/">FEUP</a> é a Faculdade de Engenharia da
<a href="http://www.up.pt/">Universidade do Porto</a>.

Neste exemplo o texto FEUP, bem como o texto Universidade do Porto, são ligações aos documentos index.html (nome geralmente usado por omissão) nos servidores www.fe.up.pt e www.up.pt, respectivamente. Estes textos apresentam-se numa cor e estilo distintos do texto vizinho, habitualmente a cor azul e o estilo sublinhado. Uma vez visitada a ligação, a cor do texto correspondente muda. O utilizador pode controlar este comportamento com os atributos link, vlink e alink da marca <body>.

Exemplo:

Neste exemplo, o texto A FEUP é uma ligação para o documento index.html do servidor www.fe.up.pt, assim como também o é a imagem do logo da FEUP, feup_logo.gif. Note-se que o ficheiro que contém esta imagem está no mesmo directório do documento index.html, a menos que a marca <base> contenha uma especificação distinta.

A marca <base> usa-se no cabeçalho de um documento HTML para indicar o URL relativamente ao qual se devem referir os URLs relativos desse documento. Esta marca pode ser bastante útil quando se altera a localização dos documentos na estrutura de directórios do servidor.

Muitos navegadores colocam uma moldura nas imagens que fazem parte de uma âncora. Pode alterar-se esse comportamento indicando o valor zero para o atributo border da marca <img>.

Exemplo:

O atributo NAME

O atributo name permite atribuir um nome a um determinado fragmento de um documento HTML de modo a que o mesmo possa posteriormente ser alvo de uma ligação. A âncora não se apresenta, neste caso, com nenhum estilo distintivo.

Exemplo:
<a name="atributo_name">O atributo NAME</a>

Com esta âncora posso ter no texto do mesmo documento, algo como:

Um dos atributos da marca <a> é o atributo <a href="#atributo_name">NAME</a>

Se quisesse referenciar este fragmento a partir de um documento distinto no mesmo directório, escreveria:

Um dos atributos da marca <a> é o atributo <a href="doc.html#atributo_name">NAME</a>

supondo que o documento que contém o dito fragmento tem o nome doc.html

O atributo TARGET

Este atributo permite especificar onde se visualiza o conteúdo de uma ligação. Por exemplo, se não queremos que essa visualização se faça na janela actual do navegador mas numa nova janela, usamos este atributo para nomear essa nova janela. Na realidade, o navegador abre uma nova janela sempre que especificamos como destino (target) da apresentação do conteúdo o nome de uma janela que não foi ainda atribuído.

Exemplo:
<a href="novidades.html" target="new">Novidades</a>
Ao seleccionar a âncora Novidades o navegador apresenta o conteúdo do documento novidades.html numa nova janela.

Especificação da relação entre documentos, os atributos REL e REV

Embora ainda pouco usados, os atributos REL e REV se-lo-ão, cada vez mais, à medida que aumenta a sofisticação dos documentos HTML e dos respectivos ambientes de desenvolvimento.

Os atributos REL e REV descrevem a relação entre o documento destino da ligação e o documento que contém a âncora, actuando um no sentido inverso do outro.

O atributo TITLE

Como o nome indica este atributo serve para atribuir um título ao objecto da ligação. O navegador pode usar este título ao apresentar o objecto.

Exemplo:

Este atributo é, todavia, ainda pouco usado e poucos navegadores o reconhecem.

Imagens externas ao documento

Por vezes há interesse em que, quando se selecciona uma ligação, apresente-se ela na forma de texto ou de uma pequena imagem (ícone), esta conduza a uma imagem apresentada num documento separado do actual. Diz-se então que a imagem é externa ao documento.

Exemplo:

Exemplo:

Imagens sensíveis ao rato (image maps)

As imagens sensíveis ao rato (image maps) podem criar-se usando o atributo ismap ou o atributo usemap da marca <img>. No primeiro caso trata-se de uma implementação do lado do servidor (server-side), no segundo de uma implementação do lado do cliente (cliente-side).

Quer sejam criadas por um ou por outro dos métodos, estas imagens são elementos graficamente activos, em que é possível seleccionar áreas da imagem, usando o rato, estando associada a cada uma delas a uma determinada acção, por exemplo, cada uma delas pode ser uma âncora.

O atributo ISMAP

Este atributo é ignorado pelo navegador se não estiver associado a uma marca <img> contida numa marca <a>.

Quando se usa este atributo, o atributo href da marca <a> contém o URL de uma aplicação no servidor ou de um ficheiro que faz o mapeamento entre regiões da imagem, identificadas pelas respectivas coordenadas, e uma determinada acção.

As coordenadas da posição do rato, são pares de pixels, contados a partir da margem superior esquerda da imagem, a que corresponde o par de coordenadas (0,0).

Exemplo:
Para declarar activa a imagem grelha.gif

Quando se efectua um clique do rato sobre a imagem grelha.gif o navegador envia ao servidor as coordenadas, em pixels, da posição do rato, por exemplo

/cgi-bin/imagemap/grelha?54,12

O ficheiro grelha é o fiheiro que cria o mapeamento coordenadas versus acção (URL do recurso destino).

O modo como o servidor relaciona as coordenadas com o documento destino não faz parte do padrão HTML e varia de servidor para servidor.

Habitualmente o servidor tem uma aplicação no directório cgi-bin, chamada imagemap, para tratar as imagens sensíveis ao rato. Em geral, esta aplicação usa um ficheiro de texto que especifica o mapeamento, em cada caso. No caso do exemplo trata-se do ficheiro de nome grelha..
Este ficheiro faz corresponder regiões da imagem a URLs. As linhas que começam por # são comentários. As restantes são do tipo:

método URL x1,y1 x2,y2 ...xn,yn

O significado e o número de coordenadas depende do método. Os métodos mais usuais são:

circle (circ)

Região circular. Coordenadas do centro e raio.

rectangle (rect)

Região rectangular. Coordenadas dos vértices superior esquerdo e inferior direito

polygon (poly)

Região poligonal. Coordenadas de cada vértice

default

Região não identificada. Não são dadas coordenadas

Para obter as coordenadas da imagem existem programas apropriados, por exemplo o Mapedit e o xv.

Exemplo:
#Ficheiro grelha
rect          http://www.fe.up.pt/cicawww     150,337,177,345
rect          http://www.fe.up.pt/deecwww     184,286,220,314
default      http://www.fe.up.pt

É possível ter regiões sobrepostas. O ficheiro de mapeamento é tratado sequencialmente pelo que, no caso de regiões sobrepostas, é a região que aparece primeiro que é considerada. Por esta mesma razão o default deve figurar em último lugar.

O NCSA Imagemap Tutorial contém mais informações sobre o atributo ISMAP.

O atributo USEMAP, as marcas MAP e AREA

O atributo usemap da marca <img>, em conjunto com as marcas MAP e AREA, permite criar uma imagem sensível ao rato (do lado do cliente). Neste caso é o navegador que associa as coordenadas da posição do rato às acções a levar a cabo.
Deste modo não há atrasos provocados pelo processamento das coordenadas da imagem no servidor e não se está dependente do próprio servidor (as aplicações imagemap podem ser diferentes).
Ao contrário do atributo ismap o atributo usemap não precisa de estar associado a uma marca <img> contida numa marca <a>. Este atributo pode usar-se simultaneamente com o atributo ismap, caso se queira garantir que a imagem é sensível ao rato mesmo quando se usam nagevadores que não reconhecem o atributo usemap (por exemplo versões mais antigas do netscape).

As marcas MAP e AREA

Entre <map> e </map> especifica-se, com a marca <area>, o mapeamento entre as coordenadas das regiões identificadas na imagem e os URLs associados.

O atributo name da marca <map> permite identificar o mapeamento por um nome, necessariamente único no documento, utilizado como valor do atributo usemap.

Exemplo:
<map name="grelha">

</map>

Tal como a marca <img> a marca <area> suporta o atributo alt para atribuir um nome às áreas identificadas da imagem.
Pode usar-se o atributo nohref caso não se queira associar uma acção a uma região identificada da imagem.
O atributo target e o atributo title podem também usar-se com a marca <area>.