Links em HTML

Links são "atalhos", ou seja, são botões em forma de texto ou imagem que contém o endereço para outras páginas Web e também para outros documentos, possibilitando aos usuários acessá-las com apenas um click.

Criando um link:

A tag que tem a função de criar links é a tag <a>. Para informar o endereço do link ao navegador Web vamos utilizar o comando href.
Exemplo:
<a href="Seu link aqui">Seu texto aqui!</a>
Agora veremos como ficaria isso em um documento HTML:
<!DOCTYPE html>
<html>
           <head>
                     <title>Links em HTML</title>
           </head>
           <body>
                     <a href="http://www.maikbasso.com.br/">Ir ao site do Maik Basso</a>
           </body>
</html>

Manipulando links:

1- Abrindo o link em uma nova aba:
Para abrir um link em uma nova aba vamos utilizar o comando target com o valor igual a _blank (abre o link em uma nova aba do navegador).
Exemplo:
<a target="_blank" href="http://www.maikbasso.com.br/">Abre o site em uma nova aba.</a>
2- Links para e-mails:
Além de criar links para outras páginas, você também pode criar um link para um e-mail, que quando acionado abre imediatamente o seu serviço de gerenciamento de e-mails padrão (no meu caso o Outlook).
Para criar um link para um e-mail, apenas coloque como valor do comando href o prefixo mailto (em português, e-mail para), seguido de dois pontos (:), mais o endereço de email.
Exemplo:
<a href="mailto:maik@maikbasso.com.br">Envie um e-mail para o Maik</a>
3- Título em links:
Assim como em imagens, também podemos usar o comando title em links. Esse comando exibe um texto, pré-definido como seu valor, no exato instante que o usuário deixar o mouse alguns segundos sobre o link.
Exemplo:
<a title="Meu link!" href="http://www.maikbasso.com.br/">Visite o site Maik Basso</a>
4- Links entre páginas de um mesmo site:
Para criar links entre páginas de um mesmo site, não é comum usar-se o link completo de uma página ou arquivo, mas sim o seu nome, e sua respectiva localização nos diretórios (pastas) de um site.
Vamos supor que você tenha duas páginas HTML em uma mesma pasta, uma com o nome de pagina1.html, e outra com o nome de pagina2.html.
Link para páginas no mesmo diretório:
Para criar um link para páginas que estão no mesmo diretório, basta indicar no comando href o nome da página a qual o link se refere.
Observe abaixo um exemplo de um link que está na página um, apontando para a página dois.
Exemplo:
<a href="pagina2.html">Vá até a página dois</a>
Link para páginas em diretórios diferentes:
Agora vamos criar uma nova pasta em seu site, chamada de subpasta, e colocar a pagina2.html dentro desta pasta.
Nesta situação, para criar um link na página um que aponte para a página dois, você deve além de indicar o nome do arquivo, indicar também o nome da pasta seguido de uma barra (/).
Exemplo:
<a href="subpasta/pagina2.html">Vá até a página dois</a>
Já neste caso, se quisermos criar um link na página dois que aponte para a página um, devemos colocar um prefixo na URL(endereço), que indique ao navegador para voltar uma pasta, porque a página um está fora da subpasta. O prefixo é ../ (um diretório acima).
Exemplo:
<a href="../pagina1.html">Vá até a página um</a>
OBS.: Para voltar mais de uma pasta, apenas repita o prefixo no mesmo número de pastas que deseja voltar (EX.: ../../).
5- Links internos (âncoras):
Vamos supor que temos uma página que tenha um texto muito grande, com vários capítulos. Você poderá criar um índice com links que levam o usuário até os capítulos específicos.
Para que isso seja possível, além de criar um link você precisa colocar uma referência aos capítulos, para isso usa-se o comando id. É importante observar que o valor do comando não pode conter acentos, espaços e também não pode iniciar com números.
Você pode utilizar o comando id com diversas tags HTML, mas para esse exemplo escolhi a tag <h1>, cuja mesma expliquei na postagem “Formatando textos com HTML”.
Após ter colocado uma referência ao capítulo ou parte do texto ao qual deseja apontar uma âncora, você deve colocar no comando href um cerquilha (#), seguido do valor atribuído anteriormente ao comando id.
Exemplo:
<h1 id="capitulo1">Âncoras em HTML</h1>
<a href="#capitulo1">Vá até o capítulo um</a>
6- Linkando imagens:
Além de linkar textos, você também pode linkar imagens, e qualquer outra tag ou elemento HTML.
Exemplo:
<a href="http://www.maikbasso.com.br/"><img src="minha_imagem.png"/></a>
Uma imagem linkada é conhecida na internet popularmente como banner.



Postagens relacionadas:

21 comentários:

Anônimo disse...

muito bom

Lara Amaral disse...

vlw pelo post, muito bom mesmo

Anônimo disse...

Queria saber como eu faço para, quando eu clicar num link específico com outro navegador, abrir somente esse link no internet explorer?

Maik Basso disse...

Desconheço esse método, até porque o IE é um navegador muito desatualizado.

Felipe Alves disse...

Amigo, consigo colocar para abrir um link junto com publicidades ex. adsense, boo-box...
quando clicar nos banner de publicidade, alem de abrir a pagina do anunciante, abre outra de minha escolha.

Maik Basso disse...

É possível, mas para fazer isso deve-se usar javascript.

Anônimo disse...

muito legal
me ajudo muito

Unknown disse...

Parabens e obrigado pela ajuda!!!

Anônimo disse...

amigo, preciso de ajuda. Quero chamar um arquivo HTML dentro de outro HTML. Mas quero fazer isso automaticamente, sem clicar em nada, tendeu? sem usar esse href=. É tipo assim: tenho um mercado com 1000 itens e meu site tem 10 páginas HTMLs, só que os 10 precisam chamar a mesma tabela de 1000 itens. Não posso ficar copiando a tabela pra dentro de cada HTML, porque se um item muda daqui a 2 semanas, tenho que entrar nos 10 e mudar tudo de novo, tendeu o drama? Preciso de uma tabela (arquivo HTML) único, onde essas 10 páginas chamariam esse mesmo arquivo e rodaria com os links e tudo! Consegui me explicar? É tipo um < script > que chama um java.js, só que quero que chame um HTML... por favor me ajude!

Maik Basso disse...

Acho que entendi, você já pensou em usar um iframe? Ou senão um sistema gerencial com banco de dados aí o processo seria bem menos trabalhoso não?.

Sidney Reis disse...

PARABÉNS, MUITO DIDÁTICO!

Anônimo disse...

Obrigado por Compartilhar esse conhecimento, parabéns.

Anônimo disse...

Muito Bom.

Jean disse...

obrigado

GORDINHO RINDO disse...

parabéns bela explicação vou aprender alguma coisa aqui até que enfim rsrs

Unknown disse...

09/11/2017

Muito bom cara, acabou de me inicar com sucesso a programação. que venham mais codigos para minha

TESTE disse...

Obrigado, ajudou muito!

fl.felipelopes288 disse...

Exatamente o que eu estava procurando! Muito bom e muito explicativo. Valeu pela ajuda.

Unknown disse...

parabéns pela ótima explicação.

Unknown disse...

e quando é mais de uma pagina ?? como faço pra juntar elas ??
para que nao fique separadas

oi disse...

Obrigado meu amigo!

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.