Introdução aos Links
Os links são elementos fundamentais na navegação web, permitindo que os usuários se movam de uma página para outra ou para diferentes seções dentro da mesma página. Neste capítulo, vamos explorar como criar e utilizar links de maneira eficaz.
Para criar um hyperlink, utilizamos a tag <a></a> da seguinte forma:
<a href="URL do Site que deseja ir"> Nome do HyperLink</a>
Exemplo:
Google
Atributos da Tag <a>
Atributo Target
Esse atributo permite escolher onde a nova página abrirá:
- _blank: abre o link em uma nova janela em branco
- _self: abre o link na janela ou frame atual (padrão)
- _top: desfaz todos os frames e abre o destino no navegador completo
- _parent: similar ao uso do _top em uma referência à janela mãe
- nome-do-frame: caso esteja usando frames, indica o nome da janela a abrir
Exemplo:
<a href="URL do Site que deseja ir" target="_blank"> Nome do HyperLink</a>
Quando se trata de link externo, é recomendado que use sempre a função _blank para que abra uma nova guia no navegador do cliente e ele não saia da sua página.
Exemplo:
Google abrindo em outra janela
Por padrão, o link sempre abre por cima da janela atual. Então é importante lembrar de sempre usar essa função.
OBS.: Sempre que o link nos levar para um outro site, o que chamamos de link externo, devemos indicar a URL completa, incluindo o protocolo http:// ou https:// e o caminho que leve a uma página específica, se for necessário.
Atributo Rel
Esse atributo informa ao navegador se esse link é externo, interno ou na mesma página:
- next: indica que o link é para a próxima parte do documento atual
- prev: indica que o link é para a parte anterior do documento atual
- author: indica que é um link para o site do autor do artigo atual
- external: indica que é um link para outro site que não faz parte do site
Exemplo:
<a href="URL do Site que deseja ir" target="_blank" rel=" Função"> Nome do HyperLink</a>
A função rel auxilia o navegador a saber o próximo passo do usuário, gerando um processamento mais rápido e deixando o seu site mais ágil.
Atributo Download
Esse atributo indica que se trata de um link para download. Para isso, basta fazer o link diretamente para o arquivo que se deseja efetuar o download e adicionar o atributo download com o valor configurado para o nome do arquivo a ser baixado e o atributo type para indicar ao navegador que tipo de arquivo está sendo baixado.
Aqui vão alguns media types bem usados no nosso dia a dia:
- application/zip
- text/html
- text/css
- text/javascript
- video/mp4
- video/H264
- video/JPEG
- audio/aac
- audio/mpeg
- font/ttf
- image/jpeg
- image/png
Exemplo:
<a href="URL do Site que deseja ir" download="image/jpeg" target="_blank" rel="external"> Nome do HyperLink</a>
Links Internos
Não muito diferente da criação de hyperlinks externos, a tag para link interno também é a mesma. No entanto, criar links internos tem algumas facilidades, pois em vez de digitar a URL completa, basta apertar Ctrl + Espaço para encontrar o local da página de destino:
Exemplo:
<a href="CTRL + BARRA DE ESPAÇO"> Nome do HyperLink</a>
É importante ressaltar que o hyperlink sempre pega como referência a localização da página. Sendo assim, quando a página de destino estiver uma ou algumas pastas anteriores à pasta onde está localizada a página atual, será necessário digitar ../ para cada pasta que precisar voltar.
Exemplo:
Para voltar uma pasta:
<a href="../CTRL + BARRA DE ESPAÇO"> Nome do HyperLink</a>
Para voltar três pastas:
<a href="../../../CTRL + BARRA DE ESPAÇO"> Nome do HyperLink</a>
Curiosidade: Praticamente todos os servidores usam sistema operacional LINUX e esse comando ../ é do LINUX. Talvez seja interessante estudar um pouco de LINUX para ingressar na carreira.
Links para Contatos
Existem algumas funcionalidades extras que conseguimos adicionar aos links alterando ou adicionando alguns comandos em href.
Número de telefone: Para abrir o discador padrão no celular
Exemplo:
Número: +5521******
O comando:
<b>Número: </b> <a href="tel:+5521******"></a>
WhatsApp: Abre direto na conversa do WhatsApp
Exemplo:
WhatsApp: +55******
O comando:
<a href="whatsapp://+5521******"></a>
Instagram: Abre o Instagram direto no perfil do usuário
Exemplo:
@*******
O comando:
<a href="instagram://user?username=*******">@******</a>
E-mail: Abre o programa de envio de e-mail padrão, já na janela de envio.
Exemplo:
E-mail: ******@gmail.com
O comando:
<a href="mailto:******@gmail.com">******@gmail.com</a>
Links Dentro de Páginas
É possível criar links que levem para locais específicos da própria página. Para isso, é necessário utilizar identificadores id em cada section ou article do HTML ou até mesmo div em casos mais pontuais.
Quando se usa link para dentro de uma página, o navegador coloca o início da section no topo da página. Como geralmente a section ou article sempre vem seguida de um título, o título fica no topo do HTML.
É possível ainda criar link diretamente para um local específico dentro de uma outra página, mesmo que não seja a atual.
Veja alguns exemplos:
Link para outra página
Exemplo:
Link para head capitulo-07
O comando:
<a href="../capitulo-07/capitulo-07.html#head">Link para head capitulo-07</a>
Link para essa página
Exemplo:
Atributo Download
O comando:
<a href="#atributo-download">Atributo Download</a>