Joomla! Amazônia – Seu site de tutorial e curso de Joomla

Você está aqui: Html Guia Prático de HTML - Atualizado 9. Ligações de Hipertexto ("Links")

9. Ligações de Hipertexto ("Links")

Guia Prático de HTML – Prof . Tiago Daniel de Souza
http: / /www. tiagosouza. com

Essa é uma das seções mais importantes desta apostila, pois afinal estamos falando de hiper texto. Queremos que uma página HTML possa fazer referência a outras páginas html ou para qualquer outro tipo de arquivo que se encontre em outros lugares da web. No jargão da internet, você quer ligar ( l ink) parte da sua página com outras
.
Isso é feito de modo muito simples com o elemento a, como segue:

<a href="ht tp: / /www.midiaindependente.org">CMI Brasil</a>

Como você deve ter percebido, o atribudo href (Hiper text Reference / Referência de Hiper texto) indica o endereço da página que você quer "linkar" ( ligar) ao seu documento. No exemplo acima, o texto CMI Brasil aparece como uma referência para o l ink. Se você clicar sobre esse texto, seu navegador automaticamente tentará abrir a página http:/ /www.midiaindependente.org

Os endereços são escritos na forma de URL (Uniform Resource Locators) , que é uma maneira que inventaram para se especificar o caminho até se chegar num arquivo que esteja nalgum local da internet.

O formato da URL é:

protocolo://nome-do-computador/pastas/arquivo

O protocolo indica como o navegador irá buscar o arquivo. Nome do computador é aquele endereço do tipo www.ninguem.com.br e as pastas são os diretórios dentro desse computador onde estão os arquivos. Uma URL de um artigo do site da CMI Brasil é, por exemplo, http://www.midiaindependente.org/pt/blue/2004/09/290669.shtml, onde http:// é o protocolo, pt, blue, 2004 e 09 são pastas (uma fica dentro da outra) e 290669.shtml é o nome do arquivo.

http:/ /
    \   -- -
www.midiaindependente.org
             \ --- pt
                     \-- blue
                             \-- - 2004
                                        \- -- 09
                                                \- -- 290669.shtml

Lembre-se também que quando você acessa o endereço http:/ /www.ninguem.com.br , por exemplo, está na verdade vendo o arquivo http:/ /www.ninguem.com.br / index.html. Os arquivos do tipo index.html sempre são procurados pelo navegador quando você solicita apenas o nome do site ou uma pasta de um computador.

Em html, existem três formas possíveis de se fazer links: os links internos, os links locais (ou relativos) e os links externos.

9.1 - Links internos

Links internos são aqueles que ligam uma seção de uma página com uma outra seção da mesma página. Por exemplo, se eu quiser fazer uma referência para a seção Hipertexto dessa nossa apostila, basta que eu primeiro defina um nome para a seção Hipertexto e então adicione um link pra ela. Isso é feito da seguinte forma:

1 - Vou até o início da seção Hiper texto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção:

<a name="Hiper texto">Hiper texto</a>

2 - Adiciono o link pra essa seção com o seguinte código

<a href="#Hiper texto">Vá para a seção hiper texto</a>

O atributo name serve apenas para dar um nome para uma posição de uma página html . O valor de name pode ser qualquer um (nesse caso eu coloquei "Hiper texto" ).

Quando você fizer uma referência a um link interno utilizando o atributo href , você precisa necessar iamente adicionar o caractere # (jogo da velha) antes do nome da sua seção - no nosso caso, #Hipertexto - pois do contrário seu navegador tentará abri-lo como um link local .

9.2 - Links locais ou relativos

Links locais são aqueles que referenciam um arquivo que esteja no mesmo computador que a sua página. Links locais não contém o http:// no início do endereço. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo links.html que está na mesma pasta do meu documento, não preciso digital o endereço completo, mas apenas:

<a href=" links.html ">Acesseos links !</a>

Esse tipo de argumento para o href também é chamado de links relativos. bSe você quiser linkar uma página que esteja do diretório (pasta) superior da sua página, use dois pontos e uma barra antes do nome do arquivo:

<a href=" . . / links .html ">Acesse os links !</a>

A vantagem de você usar links relativos é que você pode mover todo o seu site para um novo endereço na internet e não precisar reeditar todos os links que apontam para páginas do seu próprio site.

9.3 - Links externos

Links externos são aqueles que podem apontar para qualquer arquivo disponível na internet, como por exemplo:

<a href="http:/ /pt.wikipedia.org">Acesse a Wikipedia!</a>

Os links externos precisam necessariamente conter o prefixo http:// e o endereço completo do arquivo.

9.4 - Alvo (target)

Um atributo interessante para o elemento <a href> é o target, que permite que o link seja aberto numa outra janela do seu navegador.

<a href="http: / /pt .wikipedia.org" target="_blank">Acesse a Wikipedia!</a>

O argumento do atributo target é o nome da janela do navegador que abrirá o link. Se você quiser que o link seja aberto numa nova janela, simplesmente escolha qualquer nome como argumento.

9.5 – Elementos para fazer ligações

ELEMENTO  
DESCRIÇÃO
<a>
 Define uma âncora ou uma ligação de hiper texto