A definição de links em HTML é feita através do elemento a. Antes de mostrar como usá-lo, aqui estão algumas dicas gerais sobre os hiperlinks. Certifiquem-se sempre de escolher bons textos para os links. Com um simples voltar, normalmente ninguém é ajudado. (Uma vez que, se um visitante vem de uma página externa, ele geralmente não sabe o que significa voltar). Tente escolher textos descritivos para os links.
Os hiperlinks em HTML seguem sempre o mesmo princípio.
<a href="videos.html">Vídeos Atuais</a>
É atribuído ao elemento a o atributo href. Este href espera como valor o alvo do link. No exemplo anterior, foi feita referência ao arquivo videos.html. Este está localizado no mesmo diretório que o arquivo HTML no qual o hiperlink foi definido.
No caso da definição de hiperlinks, valem as mesmas regras apresentadas em relação à incorporação de imagens.
Vocês podem definir não apenas referências internas ao projeto. Da mesma forma, os hiperlinks também podem apontar para arquivos e domínios externos.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
O texto que está entre a abertura <a> e o fechamento </a> acaba sendo o texto do link. Por padrão, esse texto é exibido sublinhado pelos navegadores.
Especificar a Janela de Destino
Quando se clica em um link, o destino do link é aberto na janela atual do navegador. Normalmente isso está tudo bem. No entanto, pode ser o caso de ter definido um link para um domínio externo, por exemplo. Se um visitante clicar nesse link, o alvo deverá ser aberto em uma nova janela do navegador ou em uma nova aba. A vantagem dessa variante é que seu site permanece aberto em segundo plano.
No entanto, vocês não devem abrir cada link da página em uma janela externa, pois os visitantes podem ficar irritados rapidamente.
Através do atributo target do elemento a, é possível determinar a janela de destino na qual o respectivo alvo do link deve ser aberto. Nesse sentido, o HTML oferece inicialmente três valores padrão para target.
• _blank – O alvo do link é exibido em uma nova janela do navegador.
• _self – Abre o alvo do link na janela de navegador atual.
• _parent – Aqui é possível sair do frame. (Por favor, observe que frames não são suportados no HTML5. De qualquer forma, essa técnica não deve mais ser usada, pois há melhores alternativas hoje em dia. Quem quiser se aprofundar nos frames, encontrará informações, por exemplo, na página http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Também é usado em conexão com frames. Com ele, é possível abrir o alvo do link fora do conjunto de frames.
Aqui está um exemplo de como usar o atributo target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Neste caso, o alvo do link http://www.psd-tutorials.de seria aberto em uma nova janela/aba. Aliás, o mesmo efeito seria alcançado se, em vez do nome reservado _blank, fosse usado um nome fantasioso como halligalli. No entanto, ao usar o atributo target, eu realmente recomendaria um dos nomes reservados.
Determinar a Base do Link
Vocês podem definir uma base de link no head do arquivo HTML. Essa base de link garante que todos os alvos dos links sejam exibidos em uma determinada janela do navegador. Isso é interessante principalmente em relação aos frames.
No entanto, isso também é útil se vocês quiserem, por exemplo, que todos os links sejam sempre abertos em uma nova janela do navegador, usando o _blank. Imaginem uma lista de links. Seus alvos devem sempre abrir em uma nova janela, ficaria assim:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Vocês teriam que atribuir um atributo target a cada definição de a.
Como podem ver, isso não é muito eficiente. Será ainda menos eficaz se, daqui a alguns meses, decidirem não mais abrir os alvos dos links em uma nova janela. Então teriam que ajustar os atributos target de todos os links. Isso pode ser evitado através da base do alvo do link mencionada. Ela é definida pelo elemento base dentro de head. É atribuído ao elemento base o atributo target com o valor desejado. Aqui está um exemplo de como isso poderia ser feito:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Isso economiza muito trabalho de digitação.
Definindo âncoras
Como você pode criar links para outros arquivos, vocês já viram. Da mesma forma, também é possível definir âncoras dentro de um arquivo HTML. Depois, você pode criar referências para essas âncoras. Isso é útil, por exemplo, em páginas extensas. Assim, no início do documento, você pode definir um sumário, no qual os visitantes podem pular para as partes relevantes sem ter que rolar pela janela do navegador.
Âncoras são criadas com o elemento a. No entanto, as definições de âncoras são atribuídas ao atributo name, e não ao atributo href.
<a name="seitenanfang">Conteúdo</a> <a name="kapitel1">Conteúdo do Capítulo 1</a> <p>Aqui vem muito texto.</p> <a name="kapitel2">Conteúdo do Capítulo 2</a> <p>Aqui vem muito texto.</p>
Vocês podem escolher livremente os nomes das âncoras. Sugiro, no entanto, que os escolham o mais curtos possível, usem apenas minúsculas e evitem caracteres especiais.
Para fazer referência a uma âncora, vocês definem um hiperlink normal, como foi mostrado no início deste tutorial.
<a href="#seitenanfang">Para o início da página</a>
O atributo href recebe como valor o nome da âncora. É crucial, no entanto, que um sinal de cerquilha seja posto antes do nome da âncora.
Vocês também podem definir referências para âncoras através de arquivos diferentes. No exemplo a seguir, vamos supor que haja um arquivo news.htm, que está no mesmo diretório que o arquivo HTML principal. Dentro de news.htm, a âncora seitenanfang foi definida. Para fazer referência a essa âncora, vocês colocam um sinal de cerquilha após o nome do arquivo de destino (news.htm). Em seguida, seguem o nome da âncora novamente.
<a href="news.htm#seitenanfang">Para o início da página</a>
Dessa forma, vocês podem criar facilmente referências para âncoras em qualquer arquivo.
