Capítulo 05: Portais Dimensionais (Links) 🌐🚪
Neste capítulo, vamos aprender a criar links que levam o usuário para outras páginas ou sites, usando o tema Portais Mágicos!
📖 A Tag de Link (<a>)
Para criar um link no HTML, usamos a tag <a> (de Anchor/Âncora). Ela precisa de um atributo muito importante chamado href (Hypertext Reference), que diz para onde o portal vai levar o usuário.
<a href="https://site.com">Clique aqui</a>
Se você quiser que o link abra em uma nova aba do navegador, adicione o atributo target="_blank".
📖 Exemplo Guiado: Abrindo Portais
Vamos criar links para sites famosos.
- Crie o arquivo
links.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Sala de Portais</title>
</head>
<body>
<h1>Para onde deseja ir?</h1>
<!-- Abre na mesma aba -->
<p>Ir para o <a href="https://www.google.com">Google</a></p>
<!-- Abre em uma nova aba -->
<p>Ir para o <a href="https://www.youtube.com" target="_blank">YouTube</a> (Nova Aba)</p>
</body>
</html>📊 Ilustração Visual: Anatomia do Link
graph TD A["<a"] --> B["href='url'"] B --> C[">Texto</a>"]
🛠️ Prática Obrigatória 1: Seu Portal Pessoal
Crie um arquivo chamado meu_portal.md (ou .html!). Crie um link para o seu site favorito ou rede social. Faça com que ele abra em uma nova aba!
🔑 Gabarito de Código
Prática 1: meu_portal.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Portal</title>
</head>
<body>
<h1>Visite meu Perfil</h1>
<p>Acesse meu <a href="https://github.com" target="_blank">GitHub</a>!</p>
</body>
</html>📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo X) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
- ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
- No Microsoft Teams:
- Copie o link do seu repositório.
- Cole na tarefa correspondente no Teams.
- Clique em Entregar.