Os links são encontrados em quase todas as páginas da web. Os links permitem que os usuários cliquem no caminho de uma página para outra.
Links HTML – Hiperlinks
Links HTML são hiperlinks.
Você pode clicar em um link e pular para outro documento.
Quando você move o mouse sobre um link, a seta do mouse se transforma em uma pequena mão.
Nota: Um link não precisa ser texto. Um link pode ser uma imagem ou qualquer outro elemento HTML!
Links HTML – Sintaxe
A <a>tag HTML define um hiperlink. Possui a seguinte sintaxe:
<a href="url">link text</a>
O atributo mais importante do <a> elemento é o href atributo, que indica o destino do link.
O texto do link é a parte que ficará visível para o leitor.
Ao clicar no texto do link, o leitor será enviado para o endereço URL especificado.
Exemplo
Este exemplo mostra como criar um link para W3Schools.com:
<a href="https://www.joemaster.com.br/">Visite Joemaster!</a>
<a href="https://www.joemaster.com.br/">Visite Joemaster!</a>
Por padrão, os links aparecerão da seguinte forma em todos os navegadores:
Um link não visitado está sublinhado e azul
Um link visitado está sublinhado e roxo
Um link ativo está sublinhado e vermelho
Dica: é claro que os links podem ser estilizados com CSS, para obter outra aparência!
Links HTML – O atributo de destino
Por padrão, a página vinculada será exibida na janela atual do navegador. Para alterar isso, você deve especificar outro destino para o link.
O target atributo especifica onde abrir o documento vinculado.
O target atributo pode ter um dos seguintes valores:
_self– Padrão. Abre o documento na mesma janela / guia em que foi clicado
_blank – Abre o documento em uma nova janela ou guia
_parent – Abre o documento no quadro pai
_top – Abre o documento no corpo inteiro da janela
Exemplo
Use target = “_ blank” para abrir o documento vinculado em uma nova janela ou guia do navegador:
<a href="https://www.joemaster.com.br/" target="_blank">Visit o site !</a>
<a href="https://www.joemaster.com.br/" target="_blank"> Visit o site ! </a>
URLs absolutos vs. URLs relativos
Os dois exemplos acima estão usando um URL absoluto (um endereço da Web completo) no hrefatributo
Um link local (um link para uma página no mesmo site) é especificado com um URL relativo (sem a parte “https: // www”):
Absolute URLs
p><a href=”https://www.joemaster.com.br/”>joemaster</a></p>
<p><a href=”https://www.google.com.br/”>Google</a></p>
Relative URLs
<p><a href=”imagens.html”>HTML Images</a></p>
Links HTML – Use uma imagem como um link
Para usar uma imagem como um link, basta colocar a <img> tag dentro da <a>tag:
<a href="https://www.joemaster.com.br"> <img src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
Link para um endereço de email
Use mailto:dentro do href atributo para criar um link que abra o programa de email do usuário (para permitir que ele envie um novo email):
Exemplo
<a href="mailto:contato@example.com">Enviar email</a>
Botão como um link
Para usar um botão HTML como um link, você precisa adicionar um código JavaScript.
O JavaScript permite especificar o que acontece em determinados eventos, como o clique de um botão:
Exemplo
<button onclick="document.location='http://www.joemaster.com.br'"> HTML Tutorial </button>
Títulos de Link
O title atributo especifica informações extras sobre um elemento. As informações costumam ser mostradas como um texto de dica de ferramenta quando o mouse se move sobre o elemento.
Exemplo
<a href="https://www.joemaster.com.br" title="meu site">Visite meu site</a>
<a href="https://www.joemaster.com.br" title="meu site"> Visite meu site </a>
Cores nos links, veja um exemplo abaixo baixe e mude
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Botão</h2>
<p>Um link botão</p>
<a href="#" target="_blank">Este link</a>
</body>
</html>
Marcadores html
Os marcadores podem ser úteis se uma página da web for muito longa.
<!DOCTYPE html> <html> <body> <p><a href="#C4">Ir para 4</a></p> <p><a href="#C10">Ir para o 10</a></p> <h2> 1</h2> <p>This chapter explains ba bla bla</p> <h2> 2</h2> <p>This chapter explains ba bla bla</p> <h2> 3</h2> <p>This chapter explains ba bla bla</p> <h2 id="C4"> 4</h2> <p>This chapter explains ba bla bla</p> <h2> 5</h2> <p>This chapter explains ba bla bla</p> <h2> 6</h2> <p>This chapter explains ba bla bla</p> <h2> 7</h2> <p>This chapter explains ba bla bla</p> <h2> 8</h2> <p>This chapter explains ba bla bla</p> <h2> 9</h2> <p>This chapter explains ba bla bla</p> <h2 id="C10"> 10</h2> <p>This chapter explains ba bla bla</p> <h2> 11</h2> <p>This chapter explains ba bla bla</p> <h2> 12</h2> <p>This chapter explains ba bla bla</p> <h2> 13</h2> <p>This chapter explains ba bla bla</p> <h2> 14</h2> <p>This chapter explains ba bla bla</p> <h2> 15</h2> <p>This chapter explains ba bla bla</p> <h2> 16</h2> <p>This chapter explains ba bla bla</p> <h2> 17</h2> <p>This chapter explains ba bla bla</p> <h2> 18</h2> <p>This chapter explains ba bla bla</p> <h2> 19</h2> <p>This chapter explains ba bla bla</p> <h2> 20</h2> <p>This chapter explains ba bla bla</p> <h2> 21</h2> <p>This chapter explains ba bla bla</p> <h2> 22</h2> <p>This chapter explains ba bla bla</p> <h2> 23</h2> <p>This chapter explains ba bla bla</p> </body> </html>
Resumo do capítulo
Use o <a>elemento para definir um link
Use o href atributo para definir o endereço do link
Use o target atributo para definir onde abrir o documento vinculado
Use o <img>elemento (interno <a>) para usar uma imagem como um link
Use o mailto:esquema dentro do href atributo para criar um link que abra o programa de email do usuário
<< Anterior Estilos HTML – CSS
Deixe um comentário