Como criar links internos, externos, verticais e de email em HTML?

Artigo técnico explicando como criar links internos, externos, verticais e de email em páginas HTML. O uso da tag e dos atributos href e target, bem como a formatação de links.

Home » Tecnologia

A linguagem HTML é a principal para uso na web e com ela é possível criar páginas que possibilitam a inclusão de textos, imagens, tabelas, áudios, vídeos e outros elementos. Todos os sites precisam ter HTML como base, sendo possível o uso de outras tecnologias que fazem funções complementares.

Dentre os recursos da linguagem HTML, a possibilidade de navegar de uma página para outra, bem como conectar com outros recursos é uma das mais importantes, se não, a mais importante. Assim, o uso do link é sem dúvida nenhuma um capítulo a parte.

Link é sem dúvida o principal elemento da web, é a partir dele que estabelecemos ligações entre páginas em nosso site e para outros sites, sem link a web não faria nenhum sentido.

Para criar links usamos a tag <a>. Como atributos desta tag usamos:

  • href - indica o destino do link, ou seja, quando o usuário clicar qual página será aberta.
  • target - indica o alvo, ou seja, qual janela será aberta a página do link. O valor _blank é usado para que a página seja aberta em uma nova janela. outros valores possível para este atributo são: parent, top e self, no entanto este valores só fazem sentido quando uma página for construída com frames, recurso este que não recomendamos, pois encontra-se em desuso.

Há portanto vários tipos de links, podendo ser interno, externo, vertical ou de email.

Links internos

Links internos são aqueles que apontam para uma página dentro do próprio site. São exemplos de links internos os páginas produtos, empresa, serviços, contato, localização, etc.

  • <a href="produtos.html">Página de produtos</a>
  • <a href="servicos.html">Página de serviços</a>

Links externos

Links externos são aqueles que apontam para fora do próprio site. Quando criamos um link para outros sites estamos criando links externos. Tecnicamente links internos e externos são iguais, mudando apenas o destino dos mesmos.

No caso de links externos é importante usarmos o atributo target="_blank" que indica que a página será aberta em uma nova janela.

É importante observar que ao fazermos um link externo, usamos o endereço completo da página destino. Isto é necessário pois caso informássemos apenas www.uol.com.br, por exemplo, ele iria tentar abrir o site do UOL dentro do nosso próprio site, portanto o https:// indica ao link para fazer uma busca externa.

Links verticais

Links verticais são usados para apontarmos para uma região de uma página, podendo ser a própria página que contém o link. Imagine que você escreveu um artigo bem extenso e para facilitar a leitura você criou um índice colocando links neste índice. Quando um usuário clicar num link do índice ele será deslocado para o local do texto onde contém o texto, mas não mudou de página.

  • <a href="#capitulo1">Capítulo 1</a>
  • <a href="#capitulo2">Capítulo 2</a>

Observe que no atributo href não colocamos nenhum endereço de página, mas sim um termo que chamamos de âncora, ou seja, estamos apontando o nosso link para uma âncora chamada capitulo1 e capitulo2, respectivamente.

Neste caso precisamos criar as âncoras também. Para isto insira o código abaixo no local onde inicia o primeiro e segundo capítulo, respectivamente.

  • <a name="capitulo1">
  • <a name="capitulo2">

Links de email

Links de email são aqueles que apontam para um endereço de email. Em muitos sites quando acessamos a página de contato encontramos um formulário, em outros temos o link que ao clicarmos abrirá o nosso programa de email.

O único inconveniente dos links de email é que caso o usuário não tenha um programa padrão de envio de emails, como o outlook, não irá funcionar.

Veja uma página com todos os exemplos acima:

<!DOCTYPE HTML>

<html LANG="EN">

<head>

      <title>Links</title>

      <link href="estilo_links.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

      <h2>Exemplos de links internos</h2>

      <p><a href="produtos.html">Página de produtos</a></p>

      <p><a href="servicos.html">Página de serviços</a></p>

      <h2>Exemplos de links externos</h2>

      <p><a href="https://www.uol.com.br">Uol</a></p>

      <p><a target="_blank" href="https://www.terra.com.br">Terra</a></p>

      <h2>Exemplos de links verticais</h2>

      <p><a href="#capitulo1">Capítulo 1</a></p>

      <p><a href="#capitulo2">Capítulo 2</a></p>

      <h2>Exemplos de email</h2>

      <p><a href="Email">mailto:[email protected]">Email 1</a></p>

      <p><a href="Email">mailto:[email protected]">Email 2</a></p>

</body>

</html>

Para criar menus de navegação, além de links é importante usar também listas. Veja o post Listas ordenadas, não ordenadas e de definição.

Formatação de links

Todo link em HTML ficará na cor azul e sublinhado, este é o comportamento padrão dos links. Para mudar a formatação do link precisamos recorrer ao CSS, para isto crie um arquivo com o nome estilo_links.css e salve na mesma pasta que o exemplo acima. Abaixo o código do arquivo estilo_links.css

body {

      font-family: Arial, Verdana, Tahoma, Sans-Serif;

      font-size: 12px;

}

h2 {

      font-size: 14px;

      color: #4C4C4C;

}

a {

      text-decoration: none;

      color: #666666;

}

a:hover {

      text-decoration: underline;

      color: #666666;

}

a:visited {

      text-decoration: none;

      color: #FF6600;

}

Analisando o código acima:

text-decoration: Esta propriedade é usada para informar a decoração do link. Os valores possíveis são:

  • none - sem decoração
  • underline - link sublinhado (padrão)
  • overline: link com uma sobrelinha
  • line-through: link com uma linha em cima do texto
  • blink: faz o texto piscar  (não funciona em todos os browsers)

As demais propriedades já são conhecidas nossas né? Porém, porque o seletor a foi formatado três vezes?

O seletor a que define o link tem vários comportamentos e estes podem ser formatados separadamente.

a:link - é o comportamento padrão do link

a:hover - é o comportamento que indica como ficará o link ao passar o mouse sobre ele

a:visited - como o link vai ficar depois que for visitado

COMPARTILHE: Facebook Twitter WhatsApp




VEJA TAMBÉM:

 
QUER FAZER UMA FACULDADE GRATUITA? ESCOLHA UMA OPÇÃO:
© 2021 - Utilidade Pública: Tecnologia, Educação e Cidadania.
Este site usa cookies e ao continuar navegando, você concorda com a política de privacidade.