Os links são encontrados em quase todas as páginas da web. Os links permitem que os usuários cliquem para ir de uma página para outra ou que um documento seja acessado.
O que são os links HTML?
Desde a origem da internet, o que torna a web o que ela é hoje é justamente a possibilidade de vincular um documento a qualquer outro documento ou recurso. Essa função é chamada de hiperlink ou link. Mas afinal de contas, o que são os links HTML?
O link HTML, nada mais é que uma função do HTML que permite a navegação entre páginas e/ou elementos, como textos e imagens. Um link precisa sempre apontar para uma URL (endereço) existente em seu site ou fora dele. Caso contrário, você poderá obter uma mensagem de erro 404 Not Found (Página não encontrada).
Os links são encontrados, praticamente, em todas as páginas da web e estão presentes desde a primeira versão, criada por Tim Berners-Lee. Essa é a maior diferença entre SGML e sua substituta, criada por Tim, HTML.
Sintaxe do link
A tag que define um hiperlink é a tag <a>, ou seja, tudo que estiver entre a tag <a> poderá ser clicado e irá levar o usuário para outra página ou documento. Mas como podemos dizer para qual página ou documento o link deve apontar? Através do atributo “href”. Esse é o atributo mais importante da tag <a>, ele indica o destino do link.
Exemplo:
<a href="https://www.google.com/"> Google </a>
O que o usuário irá visualizar é o texto que está entre a tag <a>, no caso, Google. Quando ele clicar no texto do link, será enviado para o endereço URL especificado no parâmetro href.
Por padrão, os links aparecem da seguinte forma em todos os navegadores:
- Um link não visitado fica sublinhado e na cor azul;
- Um link visitado aparece sublinhado e na cor roxo;
- Um link ativo aparece sublinhado e em vermelho.
OBS: Os links podem, é claro, ser estilizados com CSS, para ter outra aparência diferente da padrão.
Onde o link será aberto?
O atributo de destino, target, especifica onde abrir a URL. Veja os valores para o atributo target e um exemplo de como usá-lo:
- _self – Valor padrão. Abre URL na mesma página ou guia em que foi clicado;
- _blank – Abre a URL em uma nova janela ou guia;
- _parent – Abre a URL no mesmo frame do link, supondo que você tenha um frame em sua página;
- _top – Abre a URL no frame superior ao frame do link. Também supondo que você tenha um frame na página ou até um frame dentro de outro frame.
Exemplo:
<a href="https://www.google.com/" target="_blank"> Google </a>
URLs absolutos vs. URLs relativos
Ambos os exemplos acima estão usando um URL absoluto (um endereço da web completo) no atributo href.
Um link local (um link para uma página no mesmo site) é especificado com um URL relativo (sem a parte “https://www”). Veja alguns exemplos:
<h2>URLs Absolutas</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>URLs Relativas</h2>
<p><a href="tutorial.html">Tutorial HTML</a></p>
<p><a href="/css/tutorial.html">Tutorial CSS</a></p>
O atributo “title”
O atributo “title” permite escrever um texto que aparecerá apenas quando passarmos o mouse por cima do link. Portanto, é um atributo importante que nos permite mostrar informações úteis sobre o link, como o tipo de conteúdo que a página contém ou avisos.
Veja um exemplo de como podemos utilizar esse atributo.
<p>
<a href="/css/tutorial.html" title="Aprenda tudo sobre a linguagem de estilização CSS">
Tutorial CSS
</a>
</p>
Marcadores de links (âncoras)
Marcadores ou âncoras, são usados para navegar para um ponto específico da página, muito utilizados em One pages ou Landing Pages onde só temos uma página com muitas informações, mas nada impede de serem usadas em sites mais complexos e cheios de páginas.
Para criação de uma âncora, primeiro você deve criar um elemento e dá uma identificação para ele através do atributo “id”.
<h2 id="ANCORAS">Tudo sobre âncoras HTML</h2>
Em seguida, adicione um link para esse elemento, mas no atributo href você deve usar o (#).
<a href="#ANCORAS">Âncoras</a>
Se você estiver em uma página e sua âncora estiver em outra, ainda assim esse recurso pode ser usado. Para isso, basta escrever a URL da seguinte forma.
<a href="pagina_de_destino.html#ANCORAS">Âncoras</a>
Já ficou claro que o a tag <a> permite sua utilização de diversas formas. Uma das formas mais exploradas atualmente é a de links em blocos. Ou seja: uma vez que o elemento <a> não possui nenhum impedimento com a inserção de blocos dentro dele, podemos inserir um link numa imagem, por exemplo, ou até mesmo uma <div> ou uma seção inteira de um site. Essa última não é muito recomendada, pois acaba por confundir o usuário, mas sim, é possível.
Exemplo:
<a href="html_tutorial.html">
<img src="smiley.gif" alt="HTML tutorial">
</a>
Exemplo usando uma <div>:
<a href="html_tutorial.html">
<div>
<img src="smiley.gif" alt="HTML tutorial">
</div>
</a>
Dica! Através do JavaScript você pode usar até mesmo um botão como link:
<button onclick="document.location='pagina-de-destino.html'">
HTML Tutorial
</button>
Desde a primeira versão até os dias atuais, a tag <a> evoluiu bastante, suprindo novas necessidades e se adaptando às novas tecnologias e aplicações. Podemos dizer que essa tag estará sempre evoluindo pois a cada dia surgem novas maneiras de “linkar” conteúdo e novos aplicativos que podem ser “linkados”. Por exemplo, podemos criar um link diretamente para o aplicativo de e-mail do computador, tablet ou celular. Para isso use a diretriz “mailto” dentro do atributo href. Veja como:
<a href="mailto:rogerio@clickartweb.com.br">Enviar e-mail</a>
Se você estiver acessando de um smartphone e usar a diretriz “tel” o link irá chamar o aplicativo de ligação no seu telefone.
<a href="tel:5561987654321">Fazer ligação</a>
Pensando na importância dos links, os desenvolvedores de aplicativos tem criados APIS para facilitar a aberturas de seus APPs. Então se você deseja criar um botão em sua página que ao clicar, o usuário seja direcionado para um aplicativo de mensagem, whatsapp por exemplo, você pode usar o link da API para isso, se você tiver whatsapp desktop ou tiver app whatsapp instalado em seu smartphone, ele será aberto no seu número, veja no exemplo abaixo que você pode inclusive abrir o APP com uma mensagem pré-definida.
<a href="https://api.whatsapp.com/send?phone=5500000000000&text=Ol%C3%A1,%20acessei%20seu%20WhatsLink">Enviar whatsapp</a>
Pratique tudo que você aprendeu
Nós vamos falar mais sobre caminhos de arquivos HTML nas próximas aulas, para você saber como navegar entre as pastas e arquivos do seu site, mas com essa leitura você adquiriu tudo que há para saber sobre links e suas possibilidades.
Faça testes com seus códigos, utilizando links externos, internos e âncoras. Siga as sugestões abaixo e certamente estará apto a utilizar as funcionalidades do link HTML em qualquer situação.
- Comece fazendo o básico, aplicando link a algumas partes do texto;
- Estilize o elemento link, tente deixá-lo com diversos estilos diferentes usando CSS, inline, com a tag
<style>ou externo, tanto faz; - Crie um link que tenha o formato de um botão, com cores de fundo, e cor de fonte diferente da padrão;
- Criem uma lista
<ul>e para cada<li>inclua um link, como um menu; - Façam um menu que levem a determinada parte do site;
- Utilize links dentro de imagens;
- Experimente utilizar link dentro de uma div completa, estilize e brinque com essa div, aproveite para treinar seu CSS.
