Essa é uma das seções mais importantes desta apostila, pois afinal estamos falando de hipertexto. 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 (link) parte da sua página com outras.

Isso é feito de modo muito simples com o elemento a, como segue:

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

Como você deve ter percebido, o atribudo href (Hiper text Reference/Referência de Hipertexto) 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 link. 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 em algum 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.

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.

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.1. Vou até o início da seção Hipertexto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção:

<a name="Hipertexto">Hipertexto</a>

1.2. Adiciono o link pra essa seção com o seguinte código:

<a href="#Hipertexto">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 "Hipertexto").

Quando você fizer uma referência a um link interno utilizando o atributo href, você precisa necessariamente 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.

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 digitar o endereço completo, mas apenas:

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

Esse tipo de argumento para o href também é chamado de links relativos. Se 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.

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.

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.