< a >, Link em HTML - O que é, para que serve e como usar

Embora seja simples e bem básica, essa aula sobre links é provavelmente a mais importante em nosso curso de HTML, pois toda a internet se baseia no conceito de links, de tão importantes e essenciais ao HTML que eles são.


O que é um link em linguagem HTML

Link, em inglês, significa ligação, elo ou conexão.
E é isso que os links fazem em HTML, eles conectam uma página da internet até outra, eles levam o usuário de um local a outro.
Um link pode ser um uma página HTML, uma imagem, um e-mail, um endereço de FTP etc.

Os links são, portanto, um endereço, uma referência de um 'local' para outro.

Para que serve um link

Com certeza já entrou em algum site de notícia, deu uma olhada e clicou naquilo que mais te interessa.
Esse local onde você clicou é um link, que pode estar em forma de texto (geralmente sublinhado) ou uma imagem.
Quando posicionamos o mouse em cima de link, a seta do mouse geralmente vira uma 'mãozinha', o que sinaliza ao usuário leigo que aquilo é um link.

Você usa um link quando procura algo no google, e clica no resultado desejado.
Quando abre seu e-mail, e clica em "Caixa de Entrada", está usando um link.
Também quando clica em 'curtir' no Facebook, está usando um link também.
Enfim, poderíamos criar um site somente para falar sobre o uso e importância dos links, mas com certeza você já deve ter certeza disso.

Portanto, durante todo nosso curso de HTML, vamos falar dos links, tags que envolvem links, atributos e várias outras coisas que envolvem links.

A tag âncora <a> </a> - Como criar um link em HTML

Sim, para criar um link vamos usar mais uma tag, chamada anchor tag: <a>
Porém, você não verá seu uso sozinha, sem atributos.
Como dissemos previamente, o uso dos links são inúmeros, bem como a quantidade de atributos dessa tag.
Por hora, nesse artigo de HTML, vamos aprender a maneira mais simples e usar de criar um link, com o atributo href.
A sintaxe é:

<a href="URL do site"> Texto visível </a>

Ou seja, se você estudou os outros tutoriais de nosso curso, não verá nenhum problema sobre o uso dessa tag.
Vamos criar o código de um link para o HTML Progressivo, o código seria:
<a href="http://www.htmlprogressivo.net/"> HTML Progressivo </a>

E o que veríamos, na prática, seria: HTML Progressivo

É bem comum o seguinte código HTML para um link:
<a href="http://www.htmlprogressivo.net/"> clique aqui </a>

O resultado seria:
E isso é bem comum em textos do tipo: "Se quiser acessar um curso de HTML gratuito e online, clique aqui."
Ou seja, não importa o que você escreve entre as tags <a> </a>, é apenas a parte visível ao usuário.

Exemplo de código HTML:
Vamos criar um site baseado nos conhecimentos ensinados até o momento, em nossa apostila online de HTML.
Nessa página, vamos descrever nosso curso de HTML, com vários links, vamos usar as meta tags keyword e description, <html>, <body>, título e, claro, as tags âncora de lin <a>:
<!DOCTYPE html>
 
<html>
 <head>
      <meta name="description" content="Curso de HTML, CSS, SEO e Monetização! Online completo e gratuito">
      <meta name="keywords" content="HTML, CSS, SEO, Monetização, Curso, Apostila, Online, Grátis">
      <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title>
 </head>
 
 <body> 
Conheça o site <a href="http://www.htmlprogressivo.net/">HTML Progressivo</a>, um site que oferece um curso de HTML totalmente gratuito e online. <p>
 
No site HTML Progressivo, você não aprende somente a criar sites, mas também sobre <a href="http://www.htmlprogressivo.net/p/seo-trabalhando-com-o-google.html">SEO</a> e <a href="http://www.htmlprogressivo.net/p/monetizacao-de-sites_12.html">Monetização</a>.
 </body>
</html>
Salvem o arquivo com a extensão .html e cliquem no arquivo, para ver os sites que criou.
O resultado visto será o seguinte:
Conheça o site HTML Progressivo, um site que oferece um curso de HTML totalmente gratuito e online.

No site HTML Progressivo, você não aprende somente a criar sites, mas também sobre SEO e Monetização.


Exercício sobre links em HTML:
Crie uma página completa, com as tags <html>, <head> e <body>, bem como as meta tags description e keywords, título e com 3 links.
No texto de seu site, descreve estes 3 links, e use-os como foi mostrado no exemplo passado.
Use a tag <br> para pular de linha, ou <p> para pular para o próximo parágrafo.

Nenhum comentário: