HTML Básico – Links

Nesse tutorial vamos falar sobre um dos recursos mais importantes para se construir uma estrutura de um site na internet: os Links.

Um hiperlink – ou simplesmente link – é um vínculo criado entre elementos ou páginas da web.

Portanto, eles vão permitir que você chegue a outras páginas, em qualquer outro lugar da internet, depois de um clique.

Os links têm também o que chamamos de âncoras, com duas extremidades: de um lado tem a origem e do outro tem o destino para onde o link aponta.

O destino pode ser uma página ou qualquer outro recurso, como por exmplo, imagens, vídeos, áudio, documentos, ou até um elemento ou parte do próprio documento HTML.

Por padrão, os navegadores tentam estabelecer a cor de estilo desses links da seguinte forma:

• Link azul não visitado
• Link roxo que foi visitado
• Link ativo é vermelho
• Link quebrado aparece riscado

Novamente, essas cores podem ser trabalhadas no CSS.

Sintaxe de um Link

Lembra que falamos sobre sintaxe, certo? Então, vejamos como são especificados os links usando a tag <a>.

Você pode linkar vários recursos como palavras, grupo de palavras ou até uma imagem.

Aqui está um trecho de exemplo:

<a href="URL">Texto do Link</a>

Qualquer coisa entre as tags <a>de abertura e </a> fechamento se torna parte do link, como no exemplo a seguir:

<a href="https://google.com">Google</a>
<a href="caminho/para/imagens/nome.jpg">
    <img src="images/nome.jpg" alt="Descrição">
</a>

O atributo href é usado para especificar o destino do link e seu valor pode ser o que chamamos de caminho ou URL absoluto ou relativo.

Calma, vou explicar melhor!

Um URL absoluto é um que contenha todas as partes da URL, como o protocolo, domínio/host, caminho do documento.

Por exemplo: https://google.com ou https://asllanmaciel.com.br/contato/indexhtml.

De forma diferente, um caminho relativo nunca contém os protocolos/prefixos http ou https, por exemplo, algo como contato/index.html ou imagens/nome.jpg.

O que isso geralmente quer dizer é que, se o recurso está fora do site, em outro domínio ou servidor, precisamos usar o caminho absoluto. Se for interno, no mesmo site, domínio ou servidor, basta usar o relativo.

Alvos para Links (Target)

Outra coisa que podemos definir nas tags de links, são os atributos de destino target que têm a função de informar ao navegador onde abrir o recurso vinculado.

Desse modo, podemos usar um dos quatro destinos disponíveis usando seu nomes que são precedidos de underline _nome.

Aqui estão eles:

• . _blank – Para abrir o documento em uma nova janela ou guia;
• . _parent – Para abrir o destino na janela pai;
• . _self – Para abrir o recurso na mesma janela de origem. Este é o valor padrão para os links, portanto, não precisa ser especificado quando for o caso;
• . _top – Abre o documento na janela inteira;

Aqui estão esses atributos em ação:

<a href="/contato.html" target="_top">Contato</a>
<a href="https://google.com" target="_blank">Google</a>
<a href="imagens/carro-novo.jpg" target="_parent">
    <img src="images/thumb/carro-novo.jpg" alt="Carro Novo">
</a>

Dica: Os destinos _top e _parent geralmente são usados juntos com o elmento <iframe> que vamos ver nas próximas aulas.

Links Âncoras de Marcadores

Você pode criar links do tipo âncoras que permitem que pulemos para determinadas seções ou partes de uma página web.

Isso é muito útil especialmente em páginas muito longas, ou naqueles site do tipo One Page.

Para criar essas âncoras é muito simples:

Primeiro, você precisa criar um elemento ou seção que deve conter um atributo id que é o marcador, o identificador da seção.

O segundo passo é linkar usando a tag a mas que no valor do atributo href deverá conter o sinal de cerquilha (#) seguido do valor do atributo id, como a seguir:

<a href="#secaoX">Pular para a Seção X</a> 
<h1>Título Principal</h1>
...conteúdo
...conteúdo
<h2 id="secaoX">Seção X</h2>
<p>Aqui vai o conteúdo da seção...</p>

Dica: Isso pode ser usado na mesma página ou pode também linkar para uma determinada parte de uma outra página de destino, desde que se use no link #IDdoElemento.

Links de Download

Dependendo do destino do link, pode ser feito um download de arquivo, por exemplo, para ZIP, DOC, XLS, etc.

Poderia então ser assim:

<a href="downloads/arquivo.zip">Baixar ZIP</a>
<a href="downloads/arquivo.doc">Baixar DOC</a>

Alguns arquivos como PDF, JPG e outros que podem ser renderizados pelo seu navegador, são exibidos na tela, mas você pode salvá-los no dispositivo também.

Navegação

<< HTML Básico – ParágrafosHTML Básico – Formatação de Texto >>