apresentação relacionada - Bruno Campagnolo de Paula

Bruno C. de Paula
Laboratório de Informática
Links
1º Semestre 2010 > PUCPR > BSI
Resumo da aula
Trabalharemos
com a
criação de links entre
páginas.
Links
são o principal fator de
sucesso da web;
Material extra referente ao assunto
da aula
 Sobre
3
links:
http://www.ptbr.html.net/tutorials/html/lesson8.asp
http://www.w3schools.com/html/html_links
.asp
http://dev.opera.com/articles/view/18html-links-let-s-build-a-web/
 Links e listas em CSS:
http://dev.opera.com/articles/view/32styling-lists-and-links/
4
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Português:
<a>, <base>;
Inglês
<a>, <base>;
Propriedades CSS referenciadas na aula
(em Inglês –site SitePoint)
 background-image:
escolhe imagem de
5
fundo;
 background-position: posição do fundo;
 background-repeat: repetição do fundo;
 padding-left: desloca o conteúdo em relação
à imagem de fundo;
 list-style-image: escolhe a imagem do
marcador;
6
Tag <a>
Cria link entre páginas;
 Principal motivo do sucesso da web!
 Atributos principais:
href: determina o site a ser linkado;
title: exibe dica visual ao link ou explicação;
rel: especifica o relacionamento entre a página
atual e a página linkada (help, next, prev,...).
 <a href=“http://www.pucpr.br” title=“site da
puc”>PUC</a>

Criar link para um elemento dentro
da página (atributo id)
7
Criar link para um elemento dentro
da página (página + atributo id)
Na página exemplo_links1.htm
Na página exemplo_links2.htm
8
CSS: “Estados” de um linkLoVe Fears HAte
Link:
9
link;
Visited: link visitado;
Focus: link com o foco
(selecionado);
Hover: link quando o mouse passa
sobre ele;
Active: link no momento do clique.
CSS: “Estados” de um link
LoVe Fears HAte
10