Anhanguera

Páginas: 6 (1273 palavras) Publicado: 14 de maio de 2013
Aula 3 – TraBALHANDO COM links

Com a linguagem HTML é possível criar documentos com o conceito de hipertexto, ou seja, documentos que se comunicam com outros documentos por meio de ligações especiais conhecidas como LINKS ou HIPERLINKS. Essas ligações podem ser entre elementos do próprio documento, como áreas ou seções distintas do documento, ou em outra página da Web.
Os links são destacadosnos navegadores por cores distintas e um sublinhado.
Tag <A>
Utilizada para criar um link é a tag <A>, mas para que um texto ou imagem recebe uma ligação é necessário utilizar os atributos dessa tag.
Atributos da tag <A>
Href: responsável por determinar o destino do link.
Sintaxe: <a href=”url”> texto </a>
URL: é o caminho absoluto ou relativo do documento dedestino.
Texto: é um bloco de texto ou imagem que será utilizado como a ligação entre o elemento especificado no atributo HREF e o documento que possui link.
Exemplo: <a href=”http://www.google.com.br”>Google</a>
Target: é utilizado para especificar como o documento de destino do link deve ser carregado. O padrão é abrir na mesma janela, sobrepondo o arquivo atual. Importante: osvalores desse atributo deverão ser escrito em letras minúsculas.
_blank: carrega o documento vinculado em uma janela nova do navegador;
Cores de Links
Os efeitos em links são possíveis através de declarações de regras e estilo para as pseudo-classes do elemento <a> do HTML.
As pseudo-classes são usadas em CSS, para adicionar efeitos diferentes a alguns seletores ou a uma instância dealguns seletores.
São quatro as pseudo classes para links:
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, quando for clicado.

É importante a ordem de definição das regras para os estados dos links. Lembre-se de que pelo “efeito cascata”,quando duas ou mais regras são conflitantes aquela ocupando uma posição na folha de estilo é sobrescrita (“perde para”) uma regra posterior a ela na folha. Assim, por exemplo, se você define a:hover ANTES de a:visited, esta prevalecerá sobre a:hover e em consequência, o link visitado pela primeira vez assumirá a regra definida em a:visited e a partir de então a:hover não mais funcionará naquelelink pois a:visited prevalecerá sobre a:hover.
Exemplo:
<style type="text/css">
a:link, a:visited {
text-decoration: none
}
a:hover {
text-decoration: underline;
color: #f00
}
a:active {
text-decoration: none
}
</style>
Neste exemplo o link ativo e o link visitado não terão o texto sublinhado, ao passar o mouse sobre o link o mesmo mudará de cor e o efeito sublinhadoreaparece, no momento que clica no link, o mesmo volta no estado inicial.
Tipos de Links
Absolutos: utilizam o endereço completo do documento que está sendo referenciado pelo link. Os caminhos absolutos são utilizados para criar links para um documento que está localizado em um outro servidor web. Exemplo: <a href=”http://www.portalanchieta.com.br”>Portal Anchieta</a>
Relativos: é ométodo mais apropriado para criar links para documentos de um mesmo site. É útil utilizar esse tipo de caminho quando o documento que possui o link e o documento que está ligado está localizado em um mesmo diretório e permanecerão juntos. Exemplo: <a href=”index.html”>Home</a>
Correio eletrônico: Os links a endereços de correio são aqueles em que ao clicá-los nos abre uma novamensagem de correio eletrônico dirigido a um determinado endereço de e-mail. Para colocar um link dirigido a um endereço de correio colocamos mailto: no atributo href do link, seguido do endereço de correio ao qual se deve dirigir o link. Exemplo: <a href="mailto:juliana@criarweb.com">juliana@portalanchieta.com.br</a>
Arquivos: O mecanismo é o mesmo que conhecemos nos links locais e nos...
Ler documento completo

Por favor, assinar para o acesso.

Estes textos também podem ser interessantes

  • Anhanguera
  • anhanguera
  • anhanguera
  • anhanguera
  • anhanguera
  • anhanguera
  • Anhanguera
  • anhanguera

Seja um membro do Trabalhos Feitos

CADASTRE-SE AGORA!