introduÇÃo ao desenvolvimento...

PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AODESENVOLVIMENTO WEB

(Exercício Prático CSS - noticias1)

2

Exercício Prático CSS

Arquivo index.html - sem formatações de estilo

Av. Araucária, 780 ­ Vila A ­ Foz do Iguaçu/PR ­ Telefone: (45) 3422­5300

3

Exercício Prático CSS

Arquivo index.html - com formatações de estilo

Av. Araucária, 780 - Vila A - Foz do Iguaçu/PR - Telefone: (45) 3422-5300

4

Exercício Prático CSS

<p> principal

<td> resumo<td> resumo

<td> titulo<td> titulo

<td> origem<td> origem

<table> tb1

<table> tb1 <a> link, visited, hover, active

Av. Araucária, 780 - Vila A - Foz do Iguaçu/PR - Telefone: (45) 3422-5300 <td> rodape

5

Exercício Prático CSS

Arquivo noticia1.html - sem formatações de estilo

6

Exercício Prático CSS

Arquivo noticia1.html - com formatações de estilo

7

Exercício Prático CSS

<p> ptitulo

<p> presumo<p> pautor

<p> ptexto

Arquivo noticia1.html - com formatações de estilo

8

Exercício Prático CSS

Arquivo noticia2.html - com formatações de estilo

9

Exercício Prático CSS

Regras CSS

- Tag <p>

• principal

• ptitulo

• presumo

• pautor

• ptexto

Arquivo noticia.css

Tag <td> titulo origem resumo rodape

Tag <a> link visited active hover

Tag <a> link visited active hover

– Tag <table> tb1

10

Exercício Prático CSS

Regras CSS

Tag <p>

• principal – Fonte Arial, negrito, itálico, tamanho 30px cor #280

• ptitulo – Fonte Arial, negrito, itálico, tamanho 25px, cor #006

• presumo – Fonte Arial, itálico, tamanho 20px

• pautor – Fonte Arial, negrito, itálico, tamanho 20px, cor #666

• ptexto – Fonte Arial, tamanho 15px

11

Exercício Prático CSS

Regras CSS

Tag <td>

• titulo – Fonte Arial, negrito, itálico, tamanho 15px, cor de fundo #FFF

• origem – Fonte Arial, negrito, tamanho 20px, cor de fonte #280, cor de fundo #FFF

• resumo – Fonte Arial, tamanho 12px, cor de fundo #FFF

• rodape – Fonte Arial, negrito, tamanho 11px, texto centralizado, cor de fundo #CFB

12

Exercício Prático CSS

Regras CSS

Tag <a>

• link – cor #0000FF

• visited – cor #DDC71A

• active – cor #AC0B44

• hover – cor #FF0000, negrito

13

Exercício Prático CSS

Regras CSS

Tag <table>

• tb1 – com borda sólida, com espessura de 1px na cor preta, largura da tabela 766 pixel, altura da tabela 36 pixel, cor de fundo da tabela #000033