links e ncoras

http://www.leonelcunha.net/formacao/HTML/css/links.html

Links e ncoras
Uma das formas de interagirmos com uma interface web atravs dos hiperlinks ou links. Os links permitem-nos navegar entre o contedo de um site ou estabelecer ligaes para sites externos. Tanto podem ser internos, entre pginas do site, ou externos, permitindo a ligao com outros sites. Temos, igualmente os links ou ncoras que nos permitem navegar numa pgina, de seco para seco 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) /espao/ o url do ficheiro, neste caso, o ficheiro linkseancoras.html dentro de uma pasta chamada html, seguido do texto visvel na pgina 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 prpria 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 tm quatros estados: a:link a:visited a:hover a:active Os estados dos links devem ser definidos segundo a ordem indicada, de outra forma no funcionam da forma prevista. Estes estados correspondem a pseudo classes :link, :visited, :hover, :active. :link corresponde ao link no seu estado corrente sem interaco; :visited, ao estado do link depois de visitado; :hover ao estado do link no monento de interaco, ou seja quando passamos o cursor por cima; :active corresponde ao link activo no documento. a:link, a:visited {

1 of 2

3/22/10 12:33 PM

links e ncoras

http://www.leonelcunha.net/formacao/HTML/css/links.html

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 prtica definir o estado :visited igual ao estado :link. Desta forma podemos evitar efeitos grficos desgradveis ou alguma confuso no utilizador. As ncoras, links entre o mesmo documento so uma forma til de navegar entre secces do documento, de organizar o fluxo e aforma como se interage com a informao. Apresentam-se da seguinte forma:
Voltar para o topo

<a name="topo" id="topo"></a> A ncora constituida pela sua marcao num determinado ponto da pgina, 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 ligaes para uma conta de e-mail definida:
Contacto

<a href="mailto: blablabla@aqui.com" title="Manda um e-mail para blablabla@aqui.com!">Contacto</a>

Voltar para o topo

2 of 2

3/22/10 12:33 PM