Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Como criar um Link em HTML: A tag < a >

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.

Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

Curso de Webmaster (criação de sites HTML) online com certificado


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.

6 comentários:

Anônimo disse...

Aqui no meu apareceu um link sublinhado, diferente do seu. Por quê?

FL3 Tecnologia disse...

Olá, não se preocupe com isso neste momento.
Para ele apareceu porque o sistema dele (Blogger) atribui um CSS fazendo com que mude a cor...
Se apareceu azul sublinhado é porque está certo...

Unknown disse...

sou novo site e estou acompanhando as aulas , aonde eu vou fazer os exercicios


Carlos Kombo disse...

Aula excelente!
vaaaleu!!

Unknown disse...

Olá, pretendo unir várias células e não sei como fazê-lo. Agradeço o apoio.

Mini Buggy disse...

Boa dica

Tutoriais de HTML e CSS