Links HTML

Neste artigo, veremos mais de perto como os links HTML funcionam e como você pode usá-los para criar uma experiência de usuário perfeita em seu site.

Os links HTML , também conhecidos como hiperlinks, são um dos blocos de construção mais fundamentais da World Wide Web. Eles permitem que os usuários naveguem de uma página da Web para outra clicando em um texto específico ou em uma imagem.

Um link faz parte de uma página da Web e os links podem ser encontrados em quase todos os sites. Ao clicar nos links, os usuários podem navegar entre as páginas.

Um link é definido pela tag HTML <a> . Qualquer elemento entre a tag <a> inicial e a tag </a> final torna-se parte do link, que pode ser clicado por um usuário para acessar o documento vinculado.

Aqui está um exemplo básico de uso de uma tag <a> . Um link é definido pela tag HTML <a> .

Qualquer elemento entre a tag <a> inicial e a tag </a> final torna-se parte do link, que pode ser clicado por um usuário para acessar o documento vinculado. Aqui está um exemplo básico de uso de uma tag <a>.

Índice-

Links HTML são hiperlinks.

Um link pode levar você a outro documento clicando nele.

Uma pequena mão aparecerá quando a seta do mouse for movida sobre um link.

É essencial observar que um link não deve ser texto. Não importa se o link é uma imagem ou outro elemento HTML!

Em HTML, a tag <a> define um hiperlink.

A sintaxe para ele é a seguinte:

< a href =" url " > Texto do link < /a >

href, que indica o destino do link, é o atributo mais importante do elemento a> .

Os leitores podem ver o texto do link.

O leitor será direcionado para o endereço URL especificado clicando no texto do link.

Neste exemplo, criaremos um link para Mrexamples.com da seguinte forma:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><a href="https://mrexamples.com/">Visit Mrexamples.com now !!</a><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  • Links sublinhados e azuis não foram visitados

  • Links sublinhados e roxos foram visitados

  • Links sublinhados e vermelhos estão ativos

Para obter uma visão diferente de seus links, você pode estilizá-los com CSS.

Quando um link é clicado, a página vinculada é aberta na janela atual do navegador. Isso pode ser alterado especificando outro destino de link.

A vinculação a um documento é especificada pelo atributo de destino.

Um dos seguintes valores pode ser atribuído ao atributo de destino:

  • _self- padrão. Isso abre o documento na mesma janela/guia em que foi clicado

  • _blank– Exibe o documento em uma nova janela ou guia

  • _parent– Abre o documento em seu quadro pai

  • _top– Expande o documento para preencher toda a janela

Use target=”_blank” se quiser que o documento vinculado apareça em uma nova janela ou guia do navegador:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<a href="https://mrexamples.com/" target="_blank"> Visit Mr Examples </a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

URLs absolutos vs. URLs relativos

Como você pode ver, ambos os exemplos usam URLs absolutos (endereços web completos).

Um link local (que aponta para uma página dentro do mesmo site) é especificado com uma URL relativa (em vez de absoluta).

A parte “https://www” é a seguinte:

Use target=”_blank” no URL para abrir o documento vinculado em uma nova janela ou guia:

Example: 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p> <a href="https://mrexample.com/">MRX</a> </p>
<p> <a href="https://www.google.com/">Google search engine</a> </p><h2>Relative URLs</h2>
<p> <a href="html_image.php">HTML Images</a> </p>
<p> <a href="/css/default.php">CSS Examples</a> </p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Use uma imagem como um link em HTML

Para usar uma imagem como link, basta colocar a tag <img> dentro da tag <a> :

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<a href="default.php">
<img src="https://mrexamples.com/wp-content/uploads/html_images/smiley.gif" alt="HTML example and tutorial" style="width:48px; height:48px;">
</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como vincular um endereço de e-mail

Crie um link usando mailto: no atributo href para que os usuários possam enviar um e-mail abrindo seu programa de e-mail.

Use target=”_blank” para abrir o documento vinculado em uma nova guia ou janela.

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<a href="mailto:[email protected]">Send email</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como Vincular Títulos

Os elementos podem ser descritos com mais detalhes por seus atributos de título.

Normalmente, quando o mouse passa sobre um elemento, o texto da dica de ferramenta exibe as informações.

Use target=”_blank” para abrir o documento vinculado em uma nova janela ou guia do navegador:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<a href="https://mrexamples.com/html/" title="Open MrExamples HTML section">Visit our HTML Examples and Tutorial</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Adicionando um link a um botão

Você deve usar o código JavaScript para tornar os botões HTML vinculáveis.

Quando um botão é clicado, o JavaScript permite que você especifique o que acontecerá.

Use target=”_blank” para abrir o documento vinculado em uma nova janela ou guia do navegador:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<button onclick="document.location='default.php'">HTML Tutorial and example</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dica: confira nosso Tutorial de JavaScript para obter mais informações.

Usando HTML _top

Um atributo target=\”_top\” indica que a página vinculada ou a resposta do formulário será aberta no quadro superior.

Há uma guia completa do navegador e uma janela no quadro superior.

Example: 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe width="260" height="80" style="border:2px solid #000000; padding:20px; 0 0 20px" srcdoc="<a target='_top' href='https://mrexamples.com/html/'>Mr Examples </a>">
</iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Mais sobre URLs relativos e URLs absolutos

Ao criar um link para uma página da Web, inclua o URL completo.

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<a href="https://mrexamples.com/html/default.php">HTML example & tutorial</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Link para uma página da web no site atual localizado na pasta html.

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<a href="/html/default.php">HTML Examples</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O link para uma página da Web existe na mesma pasta que a página atual:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<a href="/html/default.php">HTML Examples</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Resumo do artigo

  • Os elementos de link são definidos usando o elemento <a> .

  • Os endereços de link podem ser definidos usando o atributo href .

  • Use o targetatributo para definir onde abrir o documento vinculado.

  • Use o <img>elemento (dentro de <a>) para vincular imagens.

  • Crie um link que abra o programa de e-mail do usuário usando o esquema mailto: dentro do atributo href.

Marcação Visão geral
<a> Define um hiperlink

Confira nossa referência de tags HTML para obter uma lista completa de tags HTML disponíveis.

A seguir estão os usos diários de links HTML:

1.Navegação: Links HTML são comumente usados ​​para criar hiperlinks entre diferentes páginas de um site, permitindo que os usuários naveguem facilmente entre as páginas.

2. Mapeamento de imagens: links HTML podem ser usados ​​para criar mapas de imagens, que permitem aos usuários clicar em diferentes partes de uma imagem para acessar diferentes páginas ou seções de um site.

3. Endereços de e-mail: links HTML podem ser usados ​​para criar links de e-mail que abrem o cliente de e-mail padrão do usuário e criam um novo e-mail endereçado a um destinatário específico.

4. Downloads de arquivos: links HTML podem ser usados ​​para criar links de download que permitem aos usuários baixar arquivos como PDFs, imagens ou outros documentos.

5. Mídia social: links HTML podem ser usados ​​para criar links para perfis de mídia social ou botões de compartilhamento que permitem aos usuários compartilhar o conteúdo do site em suas próprias páginas de mídia social.

Solicitamos que você deixe uma reação abaixo para apreciar nossos esforços ou sugerir melhorias para este site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.