IFRN

Diretoria Acadêmica de Gestão e Tecnologia da Informação

Disciplina de Design Web e Arquitetura da Informação

Hiperlinks

Os hiperlinks, ou simplesmente links, representam um dos recursos fundamentais da web: a capacidade de conectar documentos. Nesta aula iremos conhecer a tag a e aprender como utilizá-la para criar diversos tipos de links. Também veremos os conceitos de âncoras, caminhos relativos e caminhos absolutos. Estes últimos são particularmente importantes quando criamos links locais, ou seja, links para documentos do nosso próprio website.

Links Externos

Links externos são links para recursos (páginas web ou arquivos de qualquer tipo) que não pertencem ao nosso website. Estes recursos externos são referenciados através de uma URL (endereço da internet). Assim, para criar um link externo utilizanos a tag a em conjunto com o atributo href. Usamos este atributo para informar a URL do recurso desejado. Veja o exemplo a seguir que cria um link para o portal do IFRN. Repare que a área clicável do hiperlink fica restrita ao texto utilizado como conteúdo da tag a. 

    <a href="http://portal.ifrn.edu.br">IFRN</a>
Página com hiperlink para o portal do IFRN

Além de texto, também é possível utilizar imagens em conjunto com hiperlinks. Para tal, basta inserir uma tag img como conteúdo da tag a. 

    <a href="http://portal.ifrn.edu.br">
      <img src="logo_ifrn.png">
    </a>

Links Locais

Dizemos que um link é interno quanto ele faz referência a um recurso do seu próprio website. Neste caso, utilizamos um nome de arquivo no lugar de uma URL para indicar a página alvo do link. Vamos começar com um exemplo simples. Considere as duas páginas a seguir, ambas localizadas no mesmo diretório (pasta). 

    <!-- pagina1.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <a href="pagina2.html">Página 2</a>
    </body>
    </html>
          
    <!-- pagina2.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <a href="pagina1.html">Página 1</a>
    </body>
    </html>

Repare que no exemplo somente foi preciso utilizar o nome do arquivo da página alvo como valor do atributo href. No entanto, se as páginas se encontrarem em pastas distintas, teremos que utilizar o nome do arquivo precedido de seu caminho. Para verificar na prática vamos modificar nosso exemplo da seguinte forma. Na pasta atual dos arquivos pagina1.html e pagina2.html, crie uma pasta chamada sub e mova pagina2.html para esta nova pasta. Em seguida, recarregue pagina1.html, acesse o link e veja que este ficou quebrado (a página não é encontrada).

Agora, atualize pagina1.html da maneira a seguir e confira o resultado das modificações. 

    <!-- pagina1.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <a href="sub/pagina2.html">Página 2</a>
    </body>
    </html>

Verifique que em pagina2.html o link está quebrado pois pagina1.html não está no mesmo diretório que pagina2.html. Analisando de forma mais precisa, verificamos que pagina2.html está na pasta sub enquanto que pagina1.html está em uma pasta acima. Neste caso, no link de pagina2.html temos que preceder o nome do arquivo alvo com ../ para indicar que o arquivo alvo está em uma pasta acima da qual pagina2.html se encontra. Verifique como pagina2.html deve ser modificada: 

    <!-- pagina2.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <a href="../pagina1.html">Página 1</a>
    </body>
    </html>

ATENÇÃO: não utilize caminhos absolutos, ou seja, caminhos que indicam a localização exata do arquivo no disco rígido como C:\aluno\documentos\site\pagina1.html. Links com caminhos absolutos somente funcionam no próprio computador em que as páginas foram criadas. Os caminhos de arquivos utilizados no exemplo são chamados de caminhos relativos, pois são sempre baseados na localização da própria página do hiperlink. Caminhos relativos garantem que os links do seu website funcionarão corretamente em qualquer computador.

Exercícios

1) Crie um pequeno site contendo três páginas descritas a seguir:

  • index.html: deve conter um cabeçalho com uma mensagem de boas vindas e com links para as outras duas páginas do site.
  • fotos.html: deve conter um cabeçalho, duas ou mais imagens e um link que permita ao usuário voltar para index.html. Cada imagem deve possuir um link com uma página da internet relacionada à imagem.
  • contato.html: deve conter um cabeçalho e um link que permita ao usuário voltar para index.html.

Referências