Você está na página 1de 2

27/03/2012

Tratando-se de uma linguagem de hipertexto, o XHTML permite associar pores de uma pgina a outra pgina. O link tem sempre um local de origem (ncora) que se liga a um destino (target). Geralmente, a navegao pode ser feita entre documentos distintos ou dentro do mesmo documento. A tag <a> utilizada para criar links ou para assinalar uma ncora. Fecha-se com o tag </a>. Entre estas tags pode colocar-se texto, mudanas de linha, imagens e

Professores: Andre Augusto Menegassi - andremenegassi@unoeste.br Cristiane Maciel Rizo - cris@unoeste.br Silvio Antonio Carro - silvio@unoeste.br

cabealhos. Atributos: href=recurso" - especifica o recurso a que se pretende fazer a ligao: arquivos, URLs, e-mail, etc. Exemplo: <a href="http://www.unoeste.br>UNOESTE</a>

Linkando arquivos locais: fazer ligao de um texto com outra pgina, ou figura, ou outros arquivos que estejam na mesma pasta que seu documento est. Referencia uma nova pgina ou trecho da pgina atual: Exemplo: <a href=Pagina.html>Clique aqui - prxima pgina</a>

O Consrcio W3C criou algumas classes pr definidas (pseudo classes). Um link visitado, no visitado, ativo ou no estado hover (quando voc passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes atravs de CSS. Com a definio de folhas de estilo, voc usa "pseudo classe" para criar a formatao desejada. * Estas pseudo classes se aplicam apenas ao seletor a

<a href=Pagina.html><img src=Figura.gif alt=imagem/></a>

a:link........define o estilo do link no estado inicial; a:visited...define o estilo do link visitado; a:hover.....define o estilo do link quando passa-se o mouse sobre ele; a:active....define o estilo do link ativo (o que foi "clicado").

Ser exibida uma borda azul para diferenciar das outras imagens que no so links.

importante a ordem de definio das regras para os estados dos links. Lembre-se de que pelo "efeito cascata", as regras mais prximas do elemento prevalecem sobre as mais distantes. A ordem normal e lgica das declaraes: a:link o estado inicial dos links; a:link dever ser a primeira declarao; a:active dever acontecer mesmo em links j visitados; a:active dever ser declarada depois de a:visited; a:hover no precisa funcionar em a:active; a:active pode ser declarada depois de a:hover. Em conseqncia a ordem das declaraes deve ser: a:link a:visited a:hover a:active

Removendo o sublinhado do link Um efeito muito comum em pginas web o de se retirar o sublinhado do link normal, mudar a cor e fazer "aparecer" o sublinhado, quando o mouse passado sobre ele. a:link {text-decoration: none} a:visited {text-decoration: none} a:hover {text-decoration: underline; color: #FF0000;} a:active {text-decoration: none}

27/03/2012

Diferentes estilos de links em uma mesma pgina web possvel definir diferentes estilos para os 4 seletores de links para serem usados em uma mesma pgina. a.classe1:link {text-decoration: none} a.classe1:visited {text-decoration: none} a.classe1:hover {text-decoration: underline; color: #FF0000; } a.classe1:active {text-decoration: none} a.classe2:link {text-decoration: underline overline } a.classe2:visited {text-decoration: underline overline } a.classe2:hover {text-decoration: underline; color: #00FF00; } a.classe2:active {text-decoration: underline overline}

Uma ncora um ponto de referncia ou endereo que ser acessado por um link. Uma ncora pode ser usada dentro do documento para marcar o incio de uma seo do documento, ou mesmo para acessar locais de outro documento. Suponha que seu texto seja muito grande, o que tornaria trabalhoso para quem estiver vendo a pgina conseguir se movimentar. Ex: Nomeie um pedao da sua pgina atravs da tag: <a name =NOME> Texto </a> Lembre-se que o nome fictcio, voc escolhe. Depois escreva o pedao que voc quer associar a esse nome. <a href=#NOME> Clique Aqui</a>

Um link para acessar uma ncora de outro documento: Ex: No arquivo Doc1.html <a name =NOME> Texto </a> Lembre-se que o nome fictcio, voc escolhe. Para associar a esse nome de dentro do arquivo Doc2.html. <a href=Doc1.html#NOME> Clique Aqui</a>