Capítulo 7: Links e Rodapé

Links e Navegação na Web

Links (Hiperlinks): São conexões entre páginas da internet que permitem navegar de um lugar para outro com um simples clique. É como ter pontes que conectam diferentes lugares na web!

Nesta aula, vamos aprender a criar links para conectar nossa página com outras páginas da internet e também como criar um rodapé para nosso site.

Links Básicos

Conectar para outras páginas usando a tag <a> (âncora)

Abrir em Nova Aba

Usar target="_blank" para não sair da página atual

Links de Email

Criar links que abrem o programa de email com mailto:

Rodapé da Página

Adicionar informações importantes no final com <footer>

1. Criando Links - Tag <a> (âncora)

A tag <a> é chamada de "âncora" porque ela "ancora" ou conecta diferentes lugares na internet. É como um portão mágico que leva você para outros lugares!

Estrutura básica: <a href="endereço">Texto do link</a>

href = "referência" - onde o link vai levar

Texto do link = o que as pessoas vão ver e clicar

<h2>Explorando a Natureza do Nordeste</h2>

<p>Quer saber mais sobre a <a href="https://pt.wikipedia.org/wiki/Caatinga">Caatinga</a>?</p>

<p>Você também pode visitar a <a href="https://www.icmbio.gov.br/">página do ICMBio</a> 
para conhecer as unidades de conservação do Brasil.</p>

Explorando a Natureza do Nordeste

Quer saber mais sobre a Caatinga?

Você também pode visitar a página do ICMBio para conhecer as unidades de conservação do Brasil.

2. Abrindo Links em Nova Aba - target="_blank"

Às vezes queremos que o link abra em uma nova aba para que a pessoa não saia da nossa página. Para isso, usamos o atributo target="_blank".

Dica Importante: Usar target="_blank" é legal quando você quer que seus visitantes continuem na sua página depois de ver o link!

<p>Conheça os animais da Caatinga na 
<a href="https://pt.wikipedia.org/wiki/Fauna_da_Caatinga" target="_blank">
Wikipedia (abre em nova aba)</a>.</p>

<p>Veja lindas fotos da natureza no 
<a href="https://www.natgeo.com.br/" target="_blank">
National Geographic Brasil</a>!</p>
            

Conheça os animais da Caatinga na Wikipedia (abre em nova aba).

Veja lindas fotos da natureza no National Geographic Brasil!

3. Links de Email - mailto:

Podemos criar links que abrem o programa de email da pessoa para que ela possa nos mandar uma mensagem. Usamos mailto: antes do endereço de email.

<p>Tem dúvidas sobre a Caatinga? 
<a href="mailto:natureza@escola.com">Mande um email para nós!</a></p>

<p>Contato do professor: 
<a href="mailto:professor@escola.com">professor@escola.com</a></p>
            

Como fica na prática:

Tem dúvidas sobre a Caatinga? Mande um email para nós!

Contato do professor: professor@escola.com

4. Rodapé da Página - Tag <footer>

O rodapé é uma área especial que fica no final da página. Usamos para colocar informações como contatos, emails, direitos autorais ou links importantes.

<footer> - Cria uma área de rodapé no final da página

Onde colocar: Antes de fechar a tag </body>

<footer>
  <h3>Fale Conosco</h3>
  <p>Email para contato: 
    <a href="mailto:contato@escola.com">contato@escola.com</a>
  </p>
  <p>© 2025 - Escola de Natureza do Nordeste</p>
</footer>
            

Fale Conosco

Email para contato: contato@escola.com

🎯 Prepare-se para os Exercícios!

Agora você vai praticar:

Exercício 1: Criando links básicos sobre animais da Caatinga
Exercício 2: Links que abrem em nova aba e links de email
Exercício 3: Página completa com rodapé e contatos

Prática: Criando Links e Rodapé

Vamos praticar criando diferentes tipos de links e um rodapé profissional para nossa página sobre a natureza!

Aula Atual: Links Básicos
💡 Dica: Clique nos links do resultado para testá-los!
⚠️ Importante: As tags html e body não podem ser usadas nos exercícios abaixo.