Laboratório de Informática Links 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática Links 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Links 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

2 Resumo da aula Trabalharemos com a criação de links entre páginas. Links são o principal fator de sucesso da web;

3 3 Material extra referente ao assunto da aula Sobre links: http://www.pt- br.html.net/tutorials/html/lesson8.asp http://www.pt- br.html.net/tutorials/html/lesson8.asp http://www.w3schools.com/html/html_links.asp http://www.w3schools.com/html/html_links.asp http://dev.opera.com/articles/view/18- html-links-let-s-build-a-web/ http://dev.opera.com/articles/view/18- html-links-let-s-build-a-web/ Links e listas em CSS: http://dev.opera.com/articles/view/32- styling-lists-and-links/ http://dev.opera.com/articles/view/32- styling-lists-and-links/

4 4 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Português:, ; Inglês, ;

5 5 Propriedades CSS referenciadas na aula (em Inglês –site SitePoint)SitePoint background-image: escolhe imagem de fundo; background-image background-position: posição do fundo; background-position background-repeat: repetição do fundo; background-repeat padding-left: desloca o conteúdo em relação à imagem de fundo; padding-left list-style-image: escolhe a imagem do marcador; list-style-image

6 6 Tag 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,...). PUC

7 7 Criar link para um elemento dentro da página (atributo id)

8 8 Criar link para um elemento dentro da página (página + atributo id) Na página exemplo_links2.htm Na página exemplo_links1.htm

9 9 CSS: Estados de um link- LoVe Fears HAte Link: link; Visited: link visitado; Focus: link com o foco (selecionado); Hover: link quando o mouse passa sobre ele; Active: link no momento do clique.

10 10 CSS: Estados de um link LoVe Fears HAte