Links e Navegação 🌴 TRILHA HTML 🟠 Etapa 05

Academy Code Christ 0

 Seja muito bem-vindo à Academy Code Christ!

Como-criar-links-e-âncoras-no-HTML

🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🟠 Etapa 05 

O que você vai aprender nesta aula?


Nesta etapa, você vai aprender o que são links (hiperlinks), como funciona a navegação entre páginas e como criar uma estrutura básica utilizando HTML. 

Além disso, vamos explorar a famosa tag <a> (âncora), responsável por transformar textos e elementos em links clicáveis, permitindo a interação do usuário com o seu site. 

Caso queira se aprofundar mais, temos outros conteúdos sobre HTML que vão te ajudar a evoluir ainda mais:  


🌐 O que é um link (hiperlink)? 

Um link (ou hiperlink) é um elemento que conecta um documento ou parte de um documento a outro. 

Quando clicamos em um link, o navegador carrega o recurso de destino, que pode ser uma página web, um arquivo, uma imagem ou até uma parte da mesma página. 

A tag responsável pelos links é a <a>, que vem de “anchor” (âncora). 

🧩 Estrutura básica da tag <a> 

<a href="URL" target="_self">Texto clicável</a> 

href → Define o destino do link (página, arquivo ou URL externa).

target → Define onde o link será aberto (na mesma aba, nova aba, etc.). 

💡 Exemplo prático:

<a href="https://www.w3.org">Visite o site da W3C</a>

🔎 Veja como fica noVScode

 🔎 Veja como fica o resultado no Live Server


 

🔗 Tipos de Links

Os links podem ser internos (para páginas dentro do mesmo site) ou externos (para outros sites).

🌍 Links Externos

São os links que apontam para outros sites ou domínios.

<a href="https://developer.mozilla.org/" target="_blank">MDN Web Docs</a> 

target="_blank" →   abre o link em uma nova aba;

rel="noopener noreferrer" →  boa prática de segurança ao abrir nova aba 
(evita acesso indevido ao window.opener). 


💡 Exemplo completo:

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
Documentação oficial do HTML
</a>

🔎 Veja como fica no VScode

🔎 Veja como fica o resultado no Live Server 


 

🏠 Links Internos

Conectam páginas do mesmo projeto ou domínio.

💡 Exemplo:

<a href="https://www.academycodechrist.com.br/2026/03/como-os-textos-sao-estruturados-em-html.html">Ir para a página Academy Code Christ</a>


🔎 Veja como fica no VScode

 🔎 Veja como fica o resultado no Live Server


 🔎 Dica: 

Garanta que o arquivo contato.html esteja na mesma pasta ou ajuste o caminho relativo:

●     href="pasta/contato.html" → dentro de uma subpasta  

     ●     href="../index.html" → retorna uma pasta acima


🔁 Links Entre Sessões da Mesma Página (Âncoras Internas)

Você pode criar links que levam a partes específicas de uma mesma página.
  Para isso, usamos IDs nos elementos e referências com # nos links.


💡 Exemplo prático:


<h2 id="inicio">Início da Página</h2>
<p>Conteúdo introdutório...</p>
<a href="#inicio">Voltar para o início</a>


🔎 Veja como fica no VScode

  🔎 Veja como fica o resultado no Live Server

 

✅ Quando o usuário clicar no link, o navegador rolará automaticamente até o elemento com o id="inicio".


🧭 Links para Arquivos e Downloads

Além de páginas, você também pode usar links para baixar documentos, imagens, PDFs e outros arquivos.

💡 Exemplo:

<a href="documentos/manual.pdf" download>Baixar Manual do Curso (PDF)</a> 

O atributo download → indica ao navegador que o destino deve ser baixado em vez de aberto.

🔎 Veja como fica no VScode

🔎 Veja como fica o resultado no Live Server


🔎 Dica: 

Para que o link funcione corretamente, o arquivo não pode estar apenas no seu computador. Ele precisa estar hospedado em um servidor ou dentro do próprio site. 

O navegador só consegue acessar arquivos que estejam disponíveis na internet. Por isso, no atributo href, usamos caminhos como:

<a href="documentos/manual.pdf"> 

Esse caminho indica que o arquivo está dentro da estrutura do site.


🧠 Atributos Avançados da Tag <a> e descrição. 


title → Texto que aparece ao passar o mouse sobre o link.

target="_self" → Abre o link na mesma aba (padrão).

target="_blank" →  Abre em nova aba.

rel="nofollow"  →  Informa aos mecanismos de busca para não seguir o link (usado em links patrocinados).

download → Indica que o destino deve ser baixado. 


💡 Exemplo completo:

<a href="arquivos/guia.pdf" title="Baixar guia completo" download target="_blank" rel="noopener noreferrer"> Baixar o Guia em PDF</a>

🔎 Veja como fica no VScode

 🔎 Veja como fica o resultado no Live Server


 

✉️ Link de E-mail 

É possível criar links que abrem o programa de e-mails do usuário, já com o destinatário preenchido.


💡 Exemplo:

<a href="mailto:[email protected]">Envie um e-mail para nós</a>

🔎 Veja como fica no VScode

 🔎 Veja como fica o resultado no Live Server


Você também pode inserir assunto e corpo automaticamente:

<a href="mailto:[email protected]?subject=Dúvida&body=Olá! Tenho uma dúvida sobre o curso.">
Envie-nos uma mensagem
</a>


📞 Link para Telefone (tel:)

Em sites móveis, esse formato permite iniciar chamadas diretamente.

💡 Exemplo:

<a href="tel:+5511999999999">Ligar para Atendimento</a>

🔎 Veja como fica no VScode

 🔎 Veja como fica o resultado no Live Server


🔎 Dica 

Para criar um link que inicia uma ligação, usamos o protocolo tel:: 

<a href="tel:+5511999999999">Ligar para Atendimento</a> 

Já para redirecionar o usuário para o WhatsApp, utilizamos links específicos da plataforma: 

<a href="https://wa.me/5511999999999">Falar no WhatsApp</a> 

Ou para grupos: 

<a href="https://chat.whatsapp.com/SEU-LINK">Entrar no grupo</a>

 🔎 Veja como fica no VScode

 🔎 Veja como fica o resultado no Live Server

 ⚠️Atenção: 

📞 O protocolo tel: → apenas telefone

💬 Para WhatsApp → usar link wa.me ou chat.whatsapp.com

❌ Não misturar os dois


🧱 Estruturando um Menu de Navegação

Menus de navegação ajudam o usuário a se deslocar entre páginas e seções.
No HTML, normalmente são criados combinando <nav>, <ul> e <a>.

💡 Exemplo: Menu básico:


<nav>
    <ul>
        <li><a href="index.html">Início</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="servicos.html">Serviços</a></li>
        <li><a href="contato.html">Contato</a></li>
     </ul>
</nav>

 Isso cria um menu horizontal simples (que depois pode ser estilizado via CSS).

🔎 Veja como fica no VScode

 🔎 Veja como fica o resultado no Live Server

 

💬 Boas práticas:

●     Sempre agrupe os links de navegação dentro da tag <nav>;

●     Dê nomes descritivos ao texto dos links (nunca apenas “Clique aqui”);

     ●     Prefira rotas curtas e claras, como sobre.html em vez  de pagina_sobre_nos.html.

 

💻 Exemplo Prático de Navegação Completa

Crie um conjunto de páginas em um mesmo diretório:

/projeto_html

   ├── index.html

   ├── sobre.html

   ├── contato.html

 

index.html


<!DOCTYPE html>
<html lang="pt-BR">
<head>
        <meta charset="UTF-8">
        <title>Página Inicial</title>
</head>
<body>

 <nav>
    <a href="index.html">Início</a> |
    <a href="sobre.html">Sobre</a> |
    <a href="contato.html">Contato</a>
</nav>


<h1>Bem-vindo ao Blog Academy Code Christ</h1>
<p>Aprenda do zero até o avançado! Programação.</p>

</body>
</html>


🔎 Veja como fica no VScode

🔎 Veja como fica o resultado no Live Server



As páginas sobre.html e contato.html podem ter o mesmo menu, mantendo a navegação consistente.



📘 Para um melhor Aprendizado           🎯 Pratique com exercícios, desafios e projetos

 

🧩 Boas Práticas de Usabilidade

1.    Clareza  →  o texto do link deve indicar com precisão o destino.

2.    Coerência visual  →  mantenha o mesmo estilo para links semelhantes.

3.    Feedback  →  destaque links ao passar o mouse (CSS: a:hover).

4.    Acessibilidade  →  evite links genéricos (“clique aqui”), prefira textos significativos.

    5.    Teste sempre  →  certifique-se de que todos os links funcionam corretamente e não  quebram rotas.


💬 Conclusão 

Hoje você aprendeu:

●     Como criar e personalizar links e âncoras;

●     A diferença entre links internos, externos e de e-mail/telefone;

●     A montar um menu de navegação funcional;

●     A importância da semântica e da acessibilidade nos hiperlinks.


📚 Continue aprendendo HTML:

Siga para a próxima etapa e continue avançando na sua jornada pelo desenvolvimento web!

🟠 Etapa 02 👉 Textos, Parágrafos e Quebras de Linha

🟠 Etapa 03 👉 Listas 

🟠 Etapa 04 👉 Imagens, Vídeos e Mídias Incorporadas

🟠 Etapa 05 👉 Você está nessa Aula

🟠 Etapa 06 👉 Formulários e Interatividade

🟠 Etapa 07 👉 Estrutura Semântica 

🟠 Etapa 08 👉 Tabelas e Organização de Dados

🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)

🟠 Etapa 10 👉 CSS Moderno: Layout no HTML



Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 


Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem