Links HTML

neste tutorial você vai aprender como criar links para outras páginas em HTML.

criando Links no HTML

um link ou hiperligação é uma conexão de um recurso web para outro. Os Links permitem que os usuários se movam sem problemas de uma página para outra, em qualquer servidor em qualquer lugar do mundo.

uma ligação tem duas extremidades, chamadas âncoras. O link começa na âncora de origem e aponta para a âncora de destino, que pode ser qualquer recurso web, por exemplo, uma imagem, um clipe de áudio ou vídeo, um arquivo PDF, um documento HTML ou um elemento dentro do próprio documento, e assim por diante.

por padrão, as ligações aparecerão como segue na maioria dos navegadores:

• um link não visitado é sublinhado e azul.
• uma ligação visitada está sublinhada e púrpura.
• uma ligação activa está sublinhada e vermelha.

no entanto, pode sobrepor isto usando o CSS. Saiba mais sobre styling links.

HTML Link Syntax

Links are specified in HTML using the <a> tag.

uma ligação ou hiperligação pode ser uma palavra, um grupo de palavras ou imagem.

Qualquer coisa entre a abertura <a> marca e o fechamento </a> marca torna-se parte do link que o usuário vê e clica em um navegador. Aqui estão alguns exemplos dos links:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

o atributo href especifica o alvo da ligação. Seu valor pode ser uma URL absoluta ou relativa.

uma URL absoluta é a URL que inclui todas as partes do formato URL, tais como protocolo, nome da máquina, e Caminho do documento, por exemplo, https://www.google.com/, https://www.example.com/form.php, etc. Enquanto, os URLs relativos são caminhos relativos de páginas, por exemplo, contact.html, images/smiley.png, e assim por diante. Um URL relativo nunca inclui o prefixo http:// ou https://.

definir as metas para ligações

o atributo target diz ao navegador onde abrir o documento ligado. Existem quatro alvos definidos, e cada nome de alvo começa com um carácter sublinhado(_) :

• _blank — Abre o documento associado numa janela ou página Nova.
• _parent — Abre o documento ligado na janela-mãe.
• _self — Abre o documento ligado na mesma janela ou página que o documento de origem. Este é o padrão, portanto não é necessário especificar explicitamente este valor.
• _top — Abre o documento ligado na janela completa do navegador.

Experimente o seguinte exemplo para compreender como o alvo da ligação funciona basicamente:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

criando âncoras de Favoritos

Você também pode criar âncoras de favoritos para permitir que os usuários saltem para uma seção específica de uma página web. Os favoritos são especialmente úteis se você tiver uma página web muito longa.

criar favoritos é um processo em duas etapas: primeiro, adicione o id atributo no elemento onde você deseja ir, em seguida, utilizar-se de que id o valor do atributo precedido pelo sinal de cerquilha (#) como o valor de a atributo da <a> etiqueta, conforme mostrado no exemplo a seguir:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

criando Links para Download

você também pode criar o link para download de arquivos exatamente da mesma forma que colocar links de texto. Basta apontar o URL de destino para o arquivo que você deseja estar disponível para download.

no exemplo seguinte nós criamos os links de download para arquivos ZIP, PDF e JPG.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>