Neste laboratório, os participantes aprenderão como criar hiperlinks e navegação usando as tags HTML A, com foco na construção de uma estrutura abrangente de página web e na implementação de várias técnicas de ligação. O laboratório guia os alunos através da configuração de uma página HTML básica, da criação de links de navegação de página para página, da implementação de links de contato, do desenvolvimento de marcadores de documento e da exploração do comportamento dos links com atributos target.
Os participantes começarão estabelecendo uma estrutura fundamental de documento HTML5, e então aprimorarão progressivamente suas habilidades adicionando diferentes tipos de hiperlinks, incluindo navegação interna na página, links de contato por e-mail e telefone, e referências entre páginas. Ao final do laboratório, os alunos terão uma sólida compreensão de como usar as tags de âncora (anchor tags) de forma eficaz para criar páginas web interativas e bem estruturadas.
Configurar a Estrutura Básica da Página HTML
Nesta etapa, você aprenderá como criar uma estrutura básica de página HTML que serve como base para adicionar hiperlinks e navegação. HTML (HyperText Markup Language) é a linguagem de marcação padrão para criar páginas web.
Primeiro, abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado index.html clicando com o botão direito no explorador de arquivos e selecionando "New File" (Novo Arquivo).
Vamos criar um documento HTML5 simples com a estrutura essencial:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is a basic HTML page structure that we'll use to create hyperlinks.
</p>
</body>
</html>
Vamos detalhar os componentes-chave desta estrutura HTML:
<!DOCTYPE html> declara que este é um documento HTML5
<html> é o elemento raiz da página HTML
<head> contém informações meta sobre o documento
<meta charset="UTF-8"> especifica a codificação de caracteres
<meta name="viewport"> garante a renderização adequada em dispositivos móveis
<title> define o título da página exibido na aba do navegador
Exemplo de saída quando você abre este arquivo em um navegador:
Criar Links de Navegação entre Páginas
As tags <a> são usadas para criar hiperlinks em HTML. A sintaxe básica para criar um hiperlink é <a href="URL">Texto do Link</a>.
Nesta etapa, você aprenderá como criar links de navegação entre diferentes páginas usando as tags de âncora (<a>) HTML. Primeiro, vamos criar arquivos HTML adicionais para demonstrar a navegação de página para página.
Crie dois novos arquivos no diretório ~/project: about.html e contact.html.
Atualize o arquivo index.html para incluir links de navegação:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
<p>This is the home page with navigation links.</p>
</body>
</html>
Pontos-chave sobre a navegação de página para página:
O atributo <a href="..."> especifica a página de destino
Use caminhos de arquivo relativos ao criar links entre páginas no mesmo diretório
Cada página inclui um menu de navegação consistente
Exemplo de saída em um navegador web:
Implementar Links de Contato por Email e Telefone
Nesta etapa, você aprenderá como criar links clicáveis de email e número de telefone usando tags de âncora HTML. Abra o arquivo contact.html e atualize-o com tipos de links especiais.
Atualize o arquivo contact.html com o seguinte conteúdo:
O prefixo mailto: cria um link de email que abre o cliente de email padrão
O prefixo tel: cria um link de número de telefone que funciona em dispositivos móveis
Esses links facilitam o contato dos usuários com você com um único clique
Exemplo de saída em um navegador web:
Criar Marcadores de Documento em uma Única Página
Nesta etapa, você aprenderá como criar marcadores de página internos usando tags de âncora HTML. Crie um novo arquivo chamado long-document.html no diretório ~/project com o seguinte conteúdo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document with Bookmarks</title>
<style>
body {
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
section {
height: 500px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Table of Contents</h1>
<nav>
<a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>
This is the first section of our long document. Click the links above to
navigate quickly.
</p>
</section>
<section id="section2">
<h2>Section 2: Main Content</h2>
<p>This is the second section with more detailed information.</p>
</section>
<section id="section3">
<h2>Section 3: Conclusion</h2>
<p>This is the final section of the document.</p>
</section>
<a href="#" style="position: fixed; bottom: 20px; right: 20px;"
>Back to Top</a
>
</body>
</html>
Pontos-chave sobre marcadores de documento:
O bloco <style> adiciona CSS para estilizar o documento, incluindo a altura e as margens da seção. Não se preocupe com CSS por enquanto, abordaremos isso em laboratórios posteriores.
max-width: 600px; define a largura máxima do documento
margin: 0 auto; centraliza o documento horizontalmente
line-height: 1.6; define a altura da linha para melhor legibilidade
section { height: 500px; margin-bottom: 20px; } define a altura e a margem para cada seção
Use atributos id para criar destinos de marcador.
Crie links com href="#elementId" para pular para seções específicas.
O símbolo # seguido pelo id cria um link de página interno.
Adicione o long-document.html ao final do link de navegação, para que você possa visualizar o documento.
Exemplo de saída em um navegador web:
Usar Atributos Target para Comportamento de Links
Nesta etapa, você aprenderá sobre os atributos target de links HTML que controlam como os links abrem. Crie um novo arquivo chamado link-targets.html no diretório ~/project:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Link Target Attributes</title>
</head>
<body>
<h1>Link Target Demonstration</h1>
<h2>Default Link Behavior</h2>
<p>
<a href="https://www.example.com">Normal Link</a>
(Opens in the same window)
</p>
<h2>Target Attribute Examples</h2>
<p>
<a href="https://www.example.com" target="_blank">New Tab Link</a>
(Opens in a new tab)
</p>
<h2>Multiple Target Demonstrations</h2>
<p>
<a href="https://www.example.com" target="_self">Same Window</a> |
<a href="https://www.example.com" target="_blank">New Tab</a> |
<a href="https://www.example.com" target="_parent">Parent Frame</a> |
<a href="https://www.example.com" target="_top">Full Browser Window</a>
</p>
<h2>Named Window Target</h2>
<p>
<a href="https://www.example.com" target="myWindow"
>Open in Named Window</a
>
</p>
</body>
</html>
Pontos-chave sobre os atributos target de link:
_blank: Abre o link em uma nova aba ou janela
_self: Comportamento padrão, abre na mesma janela
_parent: Abre no frame pai
_top: Abre na janela completa do navegador
Alvos nomeados personalizados podem criar comportamentos específicos de janela
Copie a URL do servidor web e adicione /link-targets.html ao final da URL para visualizar a página (nova aba).
Exemplo de saída em um navegador web:
Resumo
Neste laboratório, os participantes aprenderam a criar páginas web HTML abrangentes e a implementar várias técnicas de hiperlink. O laboratório começou estabelecendo uma estrutura fundamental de página HTML5, demonstrando elementos essenciais como DOCTYPE, meta tags e organização básica de conteúdo. Os participantes exploraram a criação de links de navegação entre múltiplas páginas, utilizando tags de âncora HTML para conectar diferentes seções de um website.
O laboratório expandiu ainda mais as capacidades de hiperlink, introduzindo técnicas avançadas, como a implementação de links de contato por e-mail e telefone, a criação de marcadores de documento dentro de uma única página e a compreensão do comportamento dos links através de atributos target. Estes exercícios práticos proporcionaram experiência prática na construção de páginas web interativas e bem estruturadas, utilizando os mecanismos de ligação do HTML.
