No terceiro parágrafo do texto, citamos o centro de distribuição na cidade de Jacarezinho, no Paraná. Transforme esse texto em um link externo apontando para o mapa no Google Maps.
Use a tag <a> para criar link para o Google Maps:
<a href="https://maps.google.com.br/?q=Jacarezinho">
Jacarezinho, no Paraná
</a>
Teste a página no navegador e acesse o link.
Durante o curso, vamos criar várias páginas para o site da Mirror Fashion, como uma página inicial (chamada index.html).
Queremos, nessa página de Sobre que estamos fazendo, linkar para essa página. Por isso, vamos criá-la agora na pasta mirror-fashion com a estrutura básica e um parágrafo indicando em qual página o usuário está. Não se preocupe, ela será incrementada em breve.
Crie a página index.html:
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>Olá, sou o index.html!</h1>
</body>
</html>
Adicione um link interno na nossa sobre.html apontando para esta página que acabamos de criar. O terceiro parágrafo do texto possui referência a esta página mas ainda sem link. Crie link lá:
... Acesse <a href="index.html">nossa loja</a>...
Repare como apenas envolvemos o texto a ser linkado usando a tag <a>.
Veja o resultado.
Se reparar bem, ainda nesse terceiro parágrafo de texto, há referências textuais para as outras seções da nossa página, em particular para a História e os Diferenciais. Para facilitar a navegação do usuário, podemos transformar essas referências em âncoras para as respectivas seções no HTML.
Para isso, adicione um id em cada um dos subtítulos para identificá-los:
<h2 id="historia">História</h2>
...
<h2 id="diferenciais">Diferenciais</h2>
Agora que temos os ids dos subtítulos preenchidos, podemos criar uma âncora para eles:
... Conheça também nossa <a href="#historia">história</a> e
nossos <a href="#diferenciais">diferenciais</a>....
Veja o resultado em seu navegador.
Nenhum comentário:
Postar um comentário