Hyperlinks
Os links em HTML são denominados de hyperlinks, quando você clica em um link você é direcionado para outro documento; quando movemos o mouse sobre os links o cursor, do mouse, muda de uma “seta” para uma “mão”. Os links não precisam ser necessariamente texto, também podemos utilizar imagens e outros elementos. O elemento que representa um links são as tag “<a>…</a>”, para definir o alvo do link utilizamos o atributo “href“. Observem o exemplo a seguir:
<section class="exemplo">
<b>Exemplo 01</b>
<p>
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
</p>
</section>
Quando carregamos o código em um navegador ele reproduz algo semelhante à imagem abaixo, nela podemos observar que o texto do link, ou seja, “Visit our HTML tutorial”, foi estilizado na cor azul, indicando que o hyperlink ainda não foi visitado.
No exemplo anterior o destino do nosso link é o endereço, ou a URL, “http://www.w3schools.com/html/” e o texto que será apresentado para representar o link será “Visit our HTML tutorial” e ao clicar no texto do link seremos redirecionados ao endereço especificado.
Links Locais
Além de utilizar URL com o caminho absoluto para a página, ou um endereço web completo, podemos utilizar endereços locais. Que apontam para páginas hospedadas dentro do nosso próprio site, neste caso utilizamos as URL relativas, que são formadas sem o prefixo “http://endereco.do.site/”. Observem o exemplo abaixo:
<section class="exemplo">
<b>Exemplo 02</b>
<p>
<a href="catalogo_de_imagens.html">Catalogo de Images</a>
</p>
</section>
Quando carregamos o código do exemplo em um navegador obtermos algo semelhante à imagem abaixo:
No exemplo anterior o destino do nosso link é a página “catalogo_de_imagens.html” e o texto que será apresentado para representar o link será “Catalogo de Imagens” e ao selecionarmos no texto do link seremos redirecionados para uma página, que está hospedada dentro do nosso próprio site.
Atributo Target
O atributo Target especifica onde o link do documento deve ser aberto, ele aceita os seguintes valores: _blank que abre em um nova janela ou aba; _self, abre na mesma janela ou aba; _top, caso o documento seja aberto a partir de um link hospedado dentro de um frame, o documento será aberto fora do frame, ocupando toda a janela.
<section class="exemplo">
<b>Exemplo 03</b>
<p>
Clique
<a href="ajuda.html" target="_blank">aqui</a> para acessar a ajuda.
</p>
<p>
Acesse o
<a href="http://lrodrigo.sgs.lncc.br/wp" target="_self">site</a>
para baixar o
<a href="http://lrodrigo.sgs.lncc.br/wp/prog_web/" target="_top">material</a> do curso
</p>
</section>
O código anterior ao ser interpretado por um navegador gera algo semelhante ao apresentado na figura abaixo:
Ao clicar sobre o primeiro link, representado pelo texto “aqui”, somos direcionados para a página de ajuda, que será aberta em uma nova janela, ou aba. O segundo será aberto na mesma janela e ao clicar no terceiro link, caso a pagina atual tenha sido aberta em um frame, o link será aberto fora do frame, ocupando toda a área de do documento.
Usando uma imagem como link
Além de utilizar textos como link, também podemos utilizar imagens, o processo será o mesmo, a diferença é que será necessário envolver uma imagem com o elemento “a“. Observem o exemplo:
<section class="exemplo">
<b>Exemplo 04</b>
<p>
<a href="curso_de_html.html">
<img src="images/html5.gif" alt="HTML tutorial">
</a>
</p>
</section>
No exemplo anterior. a imagem, representada pela tag <img …>, foi inseria entre as tags <a> e </a>, com isto a imagem passa a funcionar como o elemento visual do hyperlink. Neste caso, quando a imagem for selecionada seremos redirecionado para a página “curso_de_html.html“, armazenada dentro do nosso site.
Ou seja, ao clicar sobre a imagem com o logo do HTML5, seremos redirecionados para a página “curso_de_html.html”
Criando Bookmarks
Nesta página temos cinco seções, que poderiam ter sido identificadas, utilizando o atributo “id“ como: hl1, hl2, hl3, hl4, hl5. Uma vez identificada cada uma das seções, podemos defini-las como sendo os alvos dos nossos links.
Para criar os links para estes pontos, da página, devemos utilizar o atributo “href“, seguido do símbolo “#” e do valor do atributo “id”. Observe, no exemplo abaixo, como poderíamos criar um menu, onde cada item apontaria para uma seção da página atual
<section class="exemplo">
<b>Exemplo 01</b>
<p>
<a href="#hl1">Hyperlinks</a><br>
<a href="#hl2">Links Locais</a><br>
<a href="#hl3">Atributo Target</a><br>
<a href="#hl4">Usando uma imagem como link</a><br>
<a href="#hl5">Criando Bookmarks</a><br>
</p>
</section>
Quando o código fosse carregado por um navegador seria gerada uma estrutura semelhante à apresentada na figura abaixo.
Na imagem anterior, podemos observar os cinco links, que apontam para cada uma das seções contidas nesta página; a esta estrutura damos o nome de “Bookmarks”. Estes links poderiam ser organizados em um menu localizado no topo da página de forma que facilitasse ao leitor alcançar rapidamente cada uma das seções.
