{"id":400,"date":"2020-06-30T15:21:00","date_gmt":"2020-06-30T18:21:00","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=400"},"modified":"2022-12-09T08:38:54","modified_gmt":"2022-12-09T11:38:54","slug":"links-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/links-html\/","title":{"rendered":"Links HTML"},"content":{"rendered":"

Os links s\u00e3o encontrados em quase todas as p\u00e1ginas da web. Os links permitem que os usu\u00e1rios cliquem no caminho de uma p\u00e1gina para outra.<\/p>\n

Links HTML – Hiperlinks<\/p>\n

Links HTML s\u00e3o hiperlinks.<\/p>\n

Voc\u00ea pode clicar em um link e pular para outro documento.<\/p>\n

Quando voc\u00ea move o mouse sobre um link, a seta do mouse se transforma em uma pequena m\u00e3o.<\/p>\n

Nota: Um link n\u00e3o precisa ser texto. Um link pode ser uma imagem ou qualquer outro elemento HTML!<\/p><\/blockquote>\n

Links HTML – Sintaxe<\/strong><\/p>\n

A <a><\/code>tag HTML define um hiperlink. Possui a seguinte sintaxe:<\/p>\n

<a href=\"url\">link text<\/a><\/code><\/p>\n

 <\/p>\n

O atributo mais importante do <a><\/code> elemento \u00e9 o href atributo, que indica o destino do link.<\/p>\n

O texto do link \u00e9 a parte que ficar\u00e1 vis\u00edvel para o leitor.<\/p>\n

Ao clicar no texto do link, o leitor ser\u00e1 enviado para o endere\u00e7o URL especificado.<\/p>\n

Exemplo<\/strong>
\nEste exemplo mostra como criar um link para W3Schools.com:<\/p>\n

<a href=\"https:\/\/www.joemaster.com.br\/\">Visite Joemaster!<\/a><\/code><\/p>\n

<a href=\"https:\/\/www.joemaster.com.br\/\">Visite Joemaster!<\/a><\/pre>\n


<\/center>\n
Por padr\u00e3o, os links aparecer\u00e3o da seguinte forma em todos os navegadores:<\/strong><\/p>\n
Um link n\u00e3o visitado est\u00e1 sublinhado e azul
\nUm link visitado est\u00e1 sublinhado e roxo
\nUm link ativo est\u00e1 sublinhado e vermelho<\/p>\n
Dica: \u00e9 claro que os links podem ser estilizados com CSS, para obter outra apar\u00eancia!<\/span><\/p>\n
Links HTML – O atributo de destino<\/strong>
\nPor padr\u00e3o, a p\u00e1gina vinculada ser\u00e1 exibida na janela atual do navegador. Para alterar isso, voc\u00ea deve especificar outro destino para o link.<\/p>\n
O target atributo especifica onde abrir o documento vinculado.<\/p>\n
O target atributo pode ter um dos seguintes valores:<\/p>\n
_self<\/code>– Padr\u00e3o. Abre o documento na mesma janela \/ guia em que foi clicado
\n_blank<\/code> – Abre o documento em uma nova janela ou guia
\n_parent<\/code> – Abre o documento no quadro pai
\n_top<\/code> – Abre o documento no corpo inteiro da janela
\nExemplo
\nUse target = “_ blank<\/code>” para abrir o documento vinculado em uma nova janela ou guia do navegador:<\/p>\n
<a href=\"https:\/\/www.joemaster.com.br\/\" target=\"_blank\">Visit o site !<\/a><\/code><\/p>\n
<a href=\"https:\/\/www.joemaster.com.br\/\" target=\"_blank\">\r\nVisit o site !\r\n<\/a><\/pre>\n


<\/center>\n
URLs absolutos vs. URLs relativos
\nOs dois exemplos acima est\u00e3o usando um URL absoluto (um endere\u00e7o da Web completo) no hrefatributo<\/p>\n
Um link local (um link para uma p\u00e1gina no mesmo site) \u00e9 especificado com um URL relativo (sem a parte “https: \/\/ www”):<\/p>\n
 <\/p>\n
Absolute URLs<\/strong><\/p>\n
p><a href=”https:\/\/www.joemaster.com.br\/”>joemaster<\/a><\/p>
\n<p><a href=”https:\/\/www.google.com.br\/”>Google<\/a><\/p><\/p>\n
Relative URLs<\/strong>
\n<p><a href=”imagens.html”>HTML Images<\/a><\/p><\/p>\n
Links HTML – Use uma imagem como um link<\/strong>
\nPara usar uma imagem como um link, basta colocar a <img><\/code> tag dentro da <a><\/code>tag:<\/p>\n
<a href=\"https:\/\/www.joemaster.com.br\">\r\n<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;\">\r\n<\/a><\/pre>\n


<\/center>\n
Link para um endere\u00e7o de email<\/strong><\/p>\n
Use mailto:dentro do href atributo para criar um link que abra o programa de email do usu\u00e1rio (para permitir que ele envie um novo email):<\/p>\n
Exemplo<\/strong>
\n<a href=\"mailto:contato@example.com\">Enviar email<\/a><\/code><\/p>\n
Bot\u00e3o como um link<\/strong>
\nPara usar um bot\u00e3o HTML como um link, voc\u00ea precisa adicionar um c\u00f3digo JavaScript.<\/p>\n
O JavaScript permite especificar o que acontece em determinados eventos, como o clique de um bot\u00e3o:<\/p>\n
Exemplo<\/p>\n
<button onclick=\"document.location='http:\/\/www.joemaster.com.br'\">\r\nHTML Tutorial\r\n<\/button><\/pre>\n


<\/center>\n
 <\/p>\n
T\u00edtulos de Link<\/strong><\/p>\n
O title atributo especifica informa\u00e7\u00f5es extras sobre um elemento. As informa\u00e7\u00f5es costumam ser mostradas como um texto de dica de ferramenta quando o mouse se move sobre o elemento.<\/p>\n
Exemplo
\n<a href=\"https:\/\/www.joemaster.com.br\" title=\"meu site\">Visite meu site<\/a><\/code><\/p>\n
<a href=\"https:\/\/www.joemaster.com.br\" title=\"meu site\">\r\nVisite meu site\r\n\r\n<\/a><\/pre>\n
Cores nos links, veja um exemplo abaixo baixe e mude<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\na:link, a:visited {\r\n  background-color: #f44336;\r\n  color: white;\r\n  padding: 15px 25px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n}\r\n\r\na:hover, a:active {\r\n  background-color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Link Bot\u00e3o<\/h2>\r\n<p>Um link bot\u00e3o<\/p>\r\n<a href=\"#\" target=\"_blank\">Este link<\/a>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Marcadores html<\/p>\n
Os marcadores podem ser \u00fateis se uma p\u00e1gina da web for muito longa.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<p><a href=\"#C4\">Ir para 4<\/a><\/p>\r\n<p><a href=\"#C10\">Ir para o 10<\/a><\/p>\r\n\r\n<h2> 1<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 2<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 3<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2 id=\"C4\"> 4<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 5<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 6<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 7<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 8<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 9<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2 id=\"C10\"> 10<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 11<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 12<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 13<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 14<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 15<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 16<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 17<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 18<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 19<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 20<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 21<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 22<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<h2> 23<\/h2>\r\n<p>This chapter explains ba bla bla<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Resumo do cap\u00edtulo<\/strong>
\nUse o <a><\/code>elemento para definir um link
\nUse o href atributo para definir o endere\u00e7o do link
\nUse o target atributo para definir onde abrir o documento vinculado
\nUse o <img><\/code>elemento (interno <a><\/code>) para usar uma imagem como um link
\nUse o mailto:esquema dentro do href atributo para criar um link que abra o programa de email do usu\u00e1rio<\/p>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n