Aula 1 - Adicionar Menu de Navegação
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bicicletaria Pedal Forte</title>
<link rel='stylesheet' href='css/estilo.css'>
</head>
<body>
<header>
<img src='img/bicicletaria.jpeg'
alt='Uma bicicleta posiciona a frente de um quadro de uma montanha'
title='Bicicletaria Pedal Forte' width='100%'>
<h1 class='titulo'>Bicicletaria Pedal Forte</h1>
<p id='destaque' ><i>Mais de 20 anos pedalando com você!</i></p>
<hr>
</header>
<main>
<h2 class='titulo'>Serviços</h2>
<p id='destaque'>Oferecemos manutenção completa para sua bicicleta:</p>
<ul>
<li>Troca de peças</li>
<li>Ajuste de marchas</li>
<li>Revisão geral</li>
</ul>
<hr>
<h2 class='titulo'>Produtos</h2>
<p>Temos uma linha variada de bicicletas e acessórios:</p>
<p>
<b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
<b>Acessórios:</b> Capacetes, Luvas, Luzes
</p>
<hr>
</main>
<footer>
<h2 class='titulo'>Contato</h2>
<p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>
Email: contato@pedalforte.com.br
</p>
<hr>
<p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
</footer>
</body>
</html>Vamos adicionar uma tag semântica que representa um menu de navegação, é a tag <nav> e dentro dela vamos adicionar uma lista não ordenada utilizando as tags <ul> e <li>.
Nosso menu terá 3 opções: Produtos, Serviços e Contato:
<body>
<nav>
<ul>
<li>Produto</li>
<li>Serviço</li>
<li>Contato</li>
</ul>
</nav>
<header>
....
</header>
...
</body>
Quando falamos sobre o CSS externo utilizamos uma tag <link> para conectar o nosso código HTML ao CSS. Agora precisamos novamente criar um link para acessarmos a páginas novas que ainda serão criadas, porém a tag para isso é <a>.
A tag <a> vem da palavra âncora (anchor tag) e cria uma hiperligação (hiperlink) permitindo que o usuário navegue entre páginas ou seções dentro da mesma páginas.
O hiperlink é a base fundamental para o desenvolvimento da web.
Vamos adicionar nossas âncoras já definindo quais páginas queremos acessar:
<body>
<nav>
<ul>
<li><a href='produtos.html'>Produto</a></li>
<li><a href='servicos.html'>Serviço</a></li>
<li><a href='contato.html' >Contato</a></li>
</ul>
</nav>
<header>
....
</header>
...
</body>Dentro da tag <a> adicionamos o atributo href='' que é a hiper referência da nossa navegação e antes de fecharmos a tag <a> colocamos um texto, que será exibido no nosso menu, onde o usuário deve clicar para navegar entre as páginas.
Temos nosso menu e agora precisamos:
- Programar o estilo que queremos e
- Criar as páginas para a navegação
