​TIC ​​Liliana Ferreira

Ao criar links, é essencial compreender o caminho do ficheiro entre o documento do qual parte o link e o que está a ser vinculado.

Cada página da Web tem endereço único chamado Universal Resource Locator (URL).

 

Existem três tipos de caminhos de links:

1. Caminhos absolutos;

2. Caminhos relativos a documentos;

3. Caminhos relativos à raiz.

 

Caminhos absolutos – fornecem a URL completa do documento vinculado.

Por exemplo: http://prof.liliana.wix.com/html/imagens/imagem.jpg é um caminho absoluto. Deve ser utilizado um caminho absoluto para estabelecer um link a um documento noutro servidor.

 

Caminhos relativos a documentos – são os mais apropriados para os links locais na maioria dos sites da Web. Eles são particularmente úteis quando o documento actual e o vinculado estão na mesma pasta, e possivelmente permanecerão juntos.

O caminho relativo a documento também é utilizado para estabelecer um link a um documento noutra pasta especificando o caminho através da hierarquia de pastas, do documento actual ao vinculado. Na especificação desse caminho, não consta a parte da URL absoluta, que é a mesma para ambos os documentos. É fornecido apenas o segmento do caminho que é diferente.

• Para estabelecer um link a outro ficheiro na mesma pasta que o documento actual, basta indicar o nome do ficheiro.

• Para vincular a um ficheiro numa subpasta da pasta do documento actual, forneça o nome da subpasta, coloque uma barra inclinada para a direita e, em seguida o nome do ficheiro.

• Para vincular a um ficheiro numa pasta-mãe daquela onde está o documento actual, preceda o nome do arquivo por ../ (onde .. significa “um nível acima na hierarquia de pastas.”).

 

Caminhos relativos à raiz – fornecem o caminho da pasta raiz do site a um documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar num site grande da Web, que use vários servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se não estiver familiarizado com este tipo de caminho, pode ser melhor continuar a usar os caminhos relativos a documento.

Um caminho relativo à raiz inicia com uma barra inclinada para a direita, que representa a pasta raiz do site. Por exemplo: /escola/orgaos.html é um caminho relativo à raiz.

Podem ser criados diversos tipos de links num documento:

• Um link a outro documento ou ficheiro, como um ficheiro de imagem, filme, PDF ou som;

• Um link de ancora com nome, que salta para uma localização especifica num documento;

• Um link de correio electrónico, que cria uma nova mensagem com o endereço do destinatário já preenchido;

• Os links nulos e de script, que permitem anexar comportamentos a um objecto ou criar um link que execute código JavaScript.

 

 

A tag <A> e o atributo href

O elemento <a> serve para criar uma ligação (“link”) para outro documento. A ligação pode apontar para qualquer recurso disponível na Web: uma página escrita em HTML, uma imagem, um ficheiro de som, um filme, etc.

 

Sintaxe:

<a href=”url”> Texto a mostrar</a>

 

O atributo href (Hipertext REFerence) contem o endereço (URL) do recurso ao qual se faz a ligação. Aquilo que está dentro do elemento constitui o material visível sobre o qual se deve clicar para ligar ao recurso.

 

IMPORTANTE: todos os ficheiros referidos numa pagina, quer links a outras paginas, quer imagens, etc., devem ser escritos em minúsculas, pois a grande maioria dos servidores Web fazem a distinção entre maiúsculas e minúsculas.

 

 

Diversos tipos de links

• Uma imagem com um link: <a href=”contactos.htm”> <img src=”contactos.gif”></a>

• Um link a outro site: <a HREF=http://www.prof.liliana.ferreira.wix.com/html>Página das Aulas</a>

• Um link para download: <a HREF=”Exemplos.ZIP”>Faça o Download Aqui</a>

• Um link a outra pagina do mesmo site: <a HREF=”alunos.html”></a>

 

 

O atributo target

O atributo target permite-nos abrir a ligação numa janela ou moldura (“frame”) diferente daquela em que foi feito o clique.

Os valores padrão são:

_blank (uma nova janela)

_self (própria janela)

_top (na janela principal do browser, em casos de frames)

_parent (só para ligações que estão numa moldura, ou “frame”) a ligação abre-se no documento que contem a moldura (que terá sido criada através de um <frame> ou de um <iframe>)

 

Nome a especificar (nome da frame)

 

O atributo name

O atributo name usa-se para dar um nome único à âncora. Este nome serve para marcar o lugar em que a âncora se encontra e tornar possível saltar directamente para esse local a partir de outros documentos ou de outros pontos do mesmo documento sem que o utilizador tenha de se deslocar na página.

A criação de um link a uma ancora com nome é um processo em duas etapas:

1º - Crie uma ancora com nome

2º - Crie um link a essa ancora.

 

Sintaxe de uma âncora: < a name=”nome”>Texto a mostrar</a>

 

O atributo name dá um nome único ao local em que se encontra a âncora. Esse nome pode ser um texto à sua escolha e não deve ser repetido em nenhuma outra âncora que esteja no mesmo documento.

 

A linha seguinte define uma âncora com um nome:

<a name=”topo”>Voltar ao Menu</a>

 

Nota: uma âncora com atributo name não pode ter atributo href. Ela não é sensível a cliques, serve apenas para marcar um local do documento para o qual podem apontar outras ligações.

Só depois de darmos um nome a um local do documento (a partir do atributo name) podemos ligar directamente a ele.

<a href=”#topo”>Topo</a>

 

 

Cores dos links

A cor dos links é definida na tag <BODY>.

<BODY LINK=RED ALINK=BLUE VLINK=GREEN>

Onde:

• LINK determina a cor dos links não visitados

• ALINK determina a cor que os links devem ter quando clicados

• VLINK determina a cor dos links já visitados

 

 

Link de correio electrónico

Um link de correio electrónico abre uma nova janela de mensagem sempre que for clicado. Para que um link seja identificado como link de correio electrónico é necessário escrever antes do endereço electrónico a palavra mailto:

 

Exemplo para criar um link de correio electrónico:

<a href=mailto:moldura_cafe@hotmail.com>Contacto através de E-mail</a>