HTML - Links de texto

Uma página da web pode conter vários links que levam você diretamente a outras páginas e até mesmo a partes específicas de uma determinada página. Esses links são conhecidos como hiperlinks.

Os hiperlinks permitem que os visitantes naveguem entre os sites clicando em palavras, frases e imagens. Assim, você pode criar hiperlinks usando textos ou imagens disponíveis em uma página da web.

Note- Recomendo que você faça um breve tutorial sobre como compreender URL

Vinculando documentos

Um link é especificado usando a tag HTML <a>. Esta tag é chamadaanchor tage qualquer coisa entre a tag de abertura <a> e a tag de fechamento </a> torna-se parte do link e o usuário pode clicar nessa parte para acessar o documento vinculado. A seguir está a sintaxe simples para usar a tag <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

Exemplo

Vamos tentar seguir o exemplo com links http://www.tutorialspoint.com em sua página -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

Isso produzirá o seguinte resultado, onde você pode clicar no link gerado para acessar a página inicial do Tutorials Point (neste exemplo).

O Atributo alvo

Nós usamos targetatributo em nosso exemplo anterior. Este atributo é usado para especificar o local onde o documento vinculado é aberto. A seguir estão as opções possíveis -

Sr. Não	Opção e descrição
1	_blank Abre o documento vinculado em uma nova janela ou guia.
2	_self Abre o documento vinculado no mesmo quadro.
3	_parent Abre o documento vinculado no quadro pai.
4	_top Abre o documento vinculado em todo o corpo da janela.
5	targetframe Abre o documento vinculado em um targetframe nomeado .

Exemplo

Tente o exemplo a seguir para entender a diferença básica em algumas opções fornecidas para o atributo de destino.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

Isso produzirá o seguinte resultado, onde você pode clicar em links diferentes para entender a diferença entre as várias opções fornecidas para o atributo de destino.

Uso do caminho de base

Quando você vincula documentos HTML relacionados ao mesmo site, não é necessário fornecer um URL completo para cada link. Você pode se livrar dele se usar<base>tag no cabeçalho do documento HTML. Esta tag é usada para fornecer um caminho base para todos os links. Portanto, seu navegador concatenará o caminho relativo dado a esse caminho base e criará uma URL completa.

Exemplo

O exemplo a seguir usa a tag <base> para especificar a URL base e, posteriormente, podemos usar o caminho relativo para todos os links em vez de fornecer a URL completa para cada link.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

Isso produzirá o seguinte resultado, onde você pode clicar no link gerado HTML Tutorial para chegar ao tutorial de HTML.

Agora o URL fornecido <a href = "/html/index.htm" está sendo considerado como <ahref = "http://www.tutorialspoint.com/html/index.htm"

Vinculando a uma seção da página

Você pode criar um link para uma seção específica de uma determinada página da web usando nameatributo. Este é um processo de duas etapas.

Note- O atributo name tornou-se obsoleto em HTML5. Não use este atributo. Use o atributo id e title .

Primeiro, crie um link para o lugar onde deseja chegar em uma página da web e nomeie-o usando a tag <a ...> da seguinte maneira -

<h1>HTML Text Links <a name = "top"></a></h1>

A segunda etapa é criar um hiperlink para vincular o documento e local onde você deseja chegar -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Isso produzirá o seguinte link, onde você pode clicar no link gerado Go to the Top para chegar ao topo do tutorial HTML Text Link.

Go to the Top

Definir cores de link

Você pode definir as cores de seus links, links ativos e links visitados usando link, alink e vlink atributos da tag <body>.

Exemplo

Salve o seguinte em test.htm e abra-o em qualquer navegador da web para ver como link, alink e vlink atributos funcionam.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

Isso produzirá o seguinte resultado. Basta verificar a cor do link antes de clicar nele, a seguir verifique a cor ao ativá-lo e quando o link for visitado.

Links para download

Você pode criar um link de texto para fazer o download de seus arquivos PDF, DOC ou ZIP. Isso é muito simples; você só precisa fornecer o URL completo do arquivo para download da seguinte forma -

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

Isso produzirá o link a seguir e será usado para baixar um arquivo.

Caixa de diálogo de download de arquivo

Às vezes, é desejável que você dê uma opção em que o usuário clique em um link e a caixa "Download de arquivo" seja exibida para o usuário em vez de exibir o conteúdo real. Isso é muito fácil e pode ser obtido usando um cabeçalho HTTP em sua resposta HTTP.

Por exemplo, se você quiser fazer um Filename arquivo baixável de um determinado link, sua sintaxe será a seguinte.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Note- Para obter mais detalhes sobre os programas PERL CGI, consulte o tutorial PERL e CGI .

↰ Previous page Next page ↱