Como criar links internos, externos, verticais e de email em HTML? A linguagem HTML é a principal para uso na web e com ela é possível criar páginas..
Como criar links internos, externos, verticais e de email em HTML?
 |
| Como criar links internos, externos, verticais e de email em HTML? |
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.
<a href="https://www.canticosccb.top">Canticos CCB</a>
No caso de links externos é importante usarmos o atributo target="_blank" que indica que a página será aberta em uma nova janela.
<a target="_blank" href="https://www.canticosccb.top">Canticos CCB</a>
É 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.
<a href="Email">mailto:email@site.com.br">Email 1</a>
<a href="Email">mailto:seu_email@provedor.com.br">Email 2</a>
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.canticosccb.top">1</a></p>
<p><a target="_blank" href="https://www.canticosccb.top">2</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>
Como criar links internos, externos, verticais e de email em HTML?
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
COMENTARIOS