Uma das formas de interagirmos com uma interface web é através dos hiperlinks ou links. Os links permitem-nos navegar entre o conteúdo de um site ou estabelecer ligações para sites externos. Tanto podem ser internos, entre páginas do site, ou externos, permitindo a ligação com outros sites. Temos, igualmente os links ou âncoras que nos permitem navegar numa página, de secção para secção e ou links de e-mail.
Um link tem a seguinte estrutura: <a href="html/linkseancoras.html">Links e âncoras</a>
É composto pelo elemento <a (anchor) /espaço/ o url do ficheiro, neste caso, o ficheiro linkseancoras.html dentro de uma pasta chamada html, seguido do texto visível na página entre o ínicio e o fecho do elemento <a>.
Um link externo tem a seguinte estrutura: <a href="http://www.leonelcunha.com/aulas1lab">Aulas1lab</a>
O target pode ser_blank (abre o link numa nova janela do browser), _self (abre o link na mesma janela do browser), _parent (abre no frameset parent do documento, caso estejam definidas frames), _top (abre o link na própria janela, sobrepondo frames caso existam).
No caso das frames pode ser mainFrame ou leftFrame (se houver uma frame esquerda)
Caixa central fixa vertical e horizontalmente
<a href="../posicionamento/fixaverthoriz.html" target="_blank" title="link para um exemplo de posicionamento">Caixa central fixa vertical e horizontalmente</a>
Leonel Cunha
Neste exemplo teremos a seguinte estrutura:
<a href="http://www.leonelcunha.com" target="_blank" title="leonelcunha.com">Leonel Cunha</a>
Os links têm quatros estados:
Os estados dos links devem ser definidos segundo a ordem indicada, de outra forma não funcionam da forma prevista. Estes estados correspondem a pseudo classes :link, :visited, :hover, :active. :link corresponde ao link no seu estado corrente sem interacção; :visited, ao estado do link depois de visitado; :hover ao estado do link no monento de interacção, ou seja quando passamos o cursor por cima; :active corresponde ao link activo no documento.
a:link, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000000;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
background-color: #666666;
text-decoration: none;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000000;
text-decoration: none;
}
É uma boa prática definir o estado :visited igual ao estado :link. Desta forma podemos evitar efeitos gráficos desgradáveis ou alguma confusão no utilizador.
As âncoras, links entre o mesmo documento são uma forma útil de navegar entre seccções do documento, de organizar o fluxo e aforma como se interage com a informação. Apresentam-se da seguinte forma:
<a name="topo" id="topo"></a>
A âncora é constituida pela sua marcação num determinado ponto da página, com um nome que a identifica (id) e pelo link cujo url (href) apenas refere a âncora pelo seu nome (id).
<a href="#topo">Voltar para o topo</a>
Os links de e-mail permitem-nos criar ligações para uma conta de e-mail definida:
<a href="mailto: blablabla@aqui.com" title="Manda um e-mail para blablabla@aqui.com!">Contacto</a>