EDUCAÇÃO / TECNOLOGIA / UTILIDADE PÚBLICA

Links internos, externos, verticais e de email

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.

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 http:// 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="http://www.uol.com.br">Uol</a></p>

<p><a target="_blank" href="http://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@site.com.br">Email 1</a></p>

<p><a href="Email">mailto:seu_email@provedor.com.br">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

 

Veja também

Comentários

Luiz.estou começando o meu blog e gostaria de colocar meus tutorias nele.Como faço para colocar uma lista com links para os tutorias,sendo q eles devem aparecer na mesma página,parece simples só q não estou conseguindo. Te agradeço se puder me ajudar!! Madalena // João Pessoa
gostaria de saber o que realmente faz um email funcionar, o que está pro trás do emal. Gostaria muito de saber Gina Carvalho // Luanda
Oi Luis, estou começando agora com o meu blog, e gostaria de saber mais sobre o link externo, queria mesmo é aprender como fazer de uma imagem comum em link externo, meu blog é de Downloads de Games, e consegui na internet uma imagem como se fosse um botão para a pessoa clicar e baixar o game, mas eu mesmo testei, e abre o site do servidor de download em cima do meu site, eu gostaria de saber como fazer com que assim que a pessoa clique, abre uma nova janela ou aba no seu navegador, deixando a do meu blog aberto, Muito Obrigado pela atenção e ficarei grato pela resposta! =D Diego // Betim
Diego. Adicione o atributo: target="_blank" Com isso, quando o usu´rio clicar será aberto em nova janela. luis.blog.br // Limeira/SP
Como fica um link externo com uma imagem? Eu não entendo nada sobre esse códigos ai, mas como ficaria um link externo com uma imagem? Tipo, assim que assim que a pessoa clicar na imagem, abri automaticamente uma nova aba no navagador da pessoa. Tenho como me ensinar? Vlw! Gabriel // São Paulo
Parabéns pelo seu blog, muito bem explicado, muita clareza nas definições de hardware e software. Fiquei satisfeita, será de grande proveito na minha área de estudos. As definições de links me foram muito úteis. Maria Célia // Piratini
Parabens pelo seu blog é super enteressante cá pesquisei varis coisas ao meu favor e não só que continyuas tem temas super enteressantes, q continues a ajudarnos em prol do bem da sociedade brigadão. hfdf estanislau de sousa // Uige-Angola
© 2008-2017 | LUIS.BLOG.BR | Política de Privacidade | Em Jesus Cristo eu confio