Neste artigo, você aprenderá como criar links para outras páginas HTML.
Criar links HTML
Um link ou hiperlink é uma conexão de um recurso da Web para outro. Os links permitem que os usuários passem facilmente de uma página para outra em qualquer servidor em qualquer lugar do mundo.
Um link tem duas extremidades, chamadas âncoras. Um link começa em uma âncora de origem e aponta para uma âncora de destino, que pode ser qualquer recurso da Web, como uma imagem, um clipe de áudio ou vídeo, um arquivo PDF, um documento HTML ou um elemento dentro do próprio documento etc.
Por padrão, os links aparecem da seguinte forma na maioria dos navegadores:
- Os links não visitados estão sublinhados e azuis.
- Os links visitados estão sublinhados e roxos.
- Os links ativos são sublinhados e vermelhos.
No entanto, você pode substituí-lo por CSS.
Sintaxe do link HTML
Os links são especificados em HTML usando a tag <a>.
Um link ou hiperlink pode ser uma palavra, um grupo de palavras ou uma imagem.
<a href="url">Texto do link</a>Qualquer coisa entre a tag de abertura <a> e a tag de fechamento </a> torna-se parte do link que o usuário vê e clica no navegador. Seguem alguns exemplos de links:
<a href="https://www.google.com/">Pesquisa do Google</a>
<a href="https://programadoresdepre.com.br/">Programadores Deprê</a>
<a href="images/kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>O atributo href especifica o destino do link. Seu valor pode ser um URL absoluto ou relativo.
Um URL absoluto é um URL que contém todas as partes de um formato de URL, como protocolo, nome do host e caminho do documento, como https://www.google.com/, https://www.example.com/form.php, etc.
Um URL relativo é um caminho relativo para uma página, como contact.html, images/smiley.png e assim por diante. URLs relativos nunca contêm o prefixo http:// ou https:
Definir alvo do link
O atributo target informa ao navegador onde abrir o documento vinculado. Quatro destinos são definidos e cada nome de destino começa com um caractere sublinhado (_):
_blank– Abra o documento vinculado em uma nova janela ou guia._parent— abre o documento vinculado na janela pai._self– Abra o documento vinculado na mesma janela ou guia do documento de origem. Este é o valor padrão, portanto, não há necessidade de especificar esse valor explicitamente._top– Abre o documento vinculado em uma janela completa do navegador.
Experimente os exemplos a seguir para entender como funciona a segmentação por link:
<a href="/about-us.php" target="_top">Sobre nós</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Céu Nublado">
</a>Dica: Se sua página estiver em um iframe, você poderá usar target=”_top” no link para sair do iframe e exibir a página de login em uma janela completa do navegador.
Criar âncoras de favoritos
Você também pode criar âncoras de favoritos para permitir que os usuários saltem para partes específicas de uma página da web. Os marcadores são especialmente úteis se suas páginas da web forem longas.
A criação de marcadores é um processo de duas etapas: primeiro adicione o atributo id no elemento para onde você deseja pular, depois use esse valor id de atributo precedido pelo sinal de jogo da velha ou cerquilha (#) como o valor do atributo href da tag <a>, conforme mostrado no exemplo a seguir:
<a href="#sectionA">Ir para a Seção A</a>
<h2 id="sectionA">Seção A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>Criar link de download
Você também pode criar links de download de arquivos exatamente da mesma forma que coloca links de texto. Basta apontar o URL de destino para o arquivo que você deseja disponibilizar para download.
No exemplo abaixo, criamos links para download de arquivos ZIP, PDF e JPG.
<a href="downloads/test.zip">Baixar arquivo Zip</a>
<a href="downloads/masters.pdf">Baixe o arquivo PDF</a>
<a href="downloads/sample.jpg">Baixar arquivo de imagem</a>OBS: quando você clica em um link para um arquivo PDF ou de imagem, o arquivo não é baixado diretamente no disco rígido. Ele apenas abrirá o arquivo no seu navegador da web. Além disso, você pode salvá-lo permanentemente ou baixá-lo em seu disco rígido.
Leia também: HTML: guia sobre parágrafos
