Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 12

Criando Links com a Tag `<a>`

Recommended resources

Olá! Bem-vindo de volta ao nosso treinamento.

Na lição anterior, você materializou um conceito fundamental do Astro: transformou um arquivo (about.astro) em uma página real e acessível no seu site. Agora você tem duas páginas, a index.astro e a about.astro, mas elas funcionam como ilhas isoladas. Um visitante não tem como ir de uma para a outra.

Hoje, vamos construir a ponte entre essas ilhas. O objetivo desta micro-lição é adicionar um link de navegação entre duas páginas utilizando a tag <a>. Dominar isso é essencial para validar menus e links gerados por IA, garantindo que a estrutura de navegação do seu site esteja correta.

1. Hook (A Trava Mental)

  • Aprendiz: "Mestre, agora tenho duas ilhas: a página inicial e a página 'Sobre'. São belas, mas isoladas. Como construo uma ponte para que eu possa viajar entre elas sem ter que digitar a URL manualmente a cada vez?"

2. Deep Dive (A Solução)

  • Mestre: "Excelente pergunta. Usaremos a ferramenta mais antiga e poderosa da web: a tag de âncora, representada por <a>. Em Astro, para a alegria dos puristas e a simplicidade de todos, não há um componente de roteamento complexo. É puro e simples HTML."

A tag <a> cria um hyperlink. A sua parte mais importante é o atributo href (hypertext reference), que define o destino do link.

A regra de ouro é: o valor de href deve ser o caminho da URL que você vê no navegador, não o caminho do arquivo no seu computador.

  • Para linkar para src/pages/about.astro, você usa href="/about/".
  • Para linkar para src/pages/index.astro, você usa href="/".

A documentação do Astro explica isso de forma muito clara.

Páginas - Astro Docs

Esta seção da documentação oficial mostra como usar elementos <a> para linkar páginas, reforçando o uso do caminho da URL.

Leia a subseção 'Link entre páginas'. O ponto principal é entender a sintaxe e a lógica de usar o caminho da URL relativo ao domínio raiz (ex: /autores/sonali/) no atributo href.

3. O Fazer (Microlearning Prático)

Agora, vamos aplicar esse conhecimento. O tutorial oficial do Astro nos guiará para adicionar os links em ambas as páginas que você já criou.

Crie sua primeira página Astro | Docs

Vamos seguir as instruções do tutorial para adicionar os links de navegação. Você irá editar os arquivos index.astro e about.astro.

No seu projeto, abra os arquivos index.astro e about.astro. Siga as instruções da seção 'Adicione links de navegação' para copiar e colar o bloco de código com as duas tags <a> em ambos os arquivos. Após salvar, verifique no navegador se os links apareceram e se você consegue navegar entre as páginas 'Início' e 'Sobre'.

Para solidificar o que você acabou de fazer, veja este trecho de vídeo onde o processo é demonstrado. Ver outra pessoa executando a mesma tarefa ajuda a internalizar o conceito.

Astro Crash Course #1 - Layouts, Astro Components, Styles, & Pages

Neste vídeo do canal Jaydan Urwin, ele demonstra exatamente o que acabamos de fazer: criar uma nova página e adicionar uma tag <a> para linkar a ela.

Assista do timestamp 00:19:40 a 00:21:40. O foco é observar como um simples link com um href conecta as páginas, reforçando a simplicidade do roteamento no Astro.

Astro File-Based Routing and Navigation Links
Nesta imagem, você pode ver a conexão direta: os arquivos `index.astro` e `about.astro` na pasta `src/pages` (à esquerda) se transformam em uma barra de navegação funcional no navegador (à direita).

4. Checkpoint (Dica de IA)

  • Mestre: "Você construiu a ponte. Agora você tem o poder de inspecionar qualquer ponte que uma IA construa para você."

Este conhecimento prático é sua principal ferramenta de validação.

  • Seu Prompt para a IA:

    "Adicione um menu de navegação ao meu site Astro com links para a página Inicial (Home) e a página Sobre (About)."

  • Sua Verificação Rápida:
    1. A IA adicionou tags <a>? Sim.
    2. O href da Home aponta para /? Sim.
    3. O href da página Sobre aponta para /about (ou /about/)? Sim.
    4. O texto dentro da tag corresponde ao destino ("Início", "Sobre")? Sim.

Se todas as respostas forem "sim", o código está correto. Você acabou de validar a estrutura de navegação sem precisar escrever o código do zero.

Conclusão

Nesta lição, você conectou suas páginas, transformando um conjunto de arquivos isolados em um site navegável.

  • Key Takeaways:

    • A navegação em Astro é feita com a tag HTML padrão <a>.
    • O atributo href deve conter o caminho da URL (ex: /about/), não o caminho do arquivo.
    • Verificar o uso correto da tag <a> e do atributo href é o método para validar menus de navegação gerados por IA.

  • Próximo Passo: Você deve ter notado um problema: você copiou e colou o mesmo bloco de links em dois arquivos diferentes. Se tivéssemos 50 páginas, isso seria um pesadelo de manutenção. Na próxima lição, vamos resolver isso de forma elegante ao aprender sobre Layouts, a "caixa de pizza" que nos permite definir a estrutura (como o menu) uma única vez.