introduÇÃo ao desenvolvimento...
TRANSCRIPT
![Page 1: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/1.jpg)
PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AODESENVOLVIMENTO WEB
(Exercício Prático CSS - noticias1)
![Page 2: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/2.jpg)
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) 34225300
![Page 3: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/3.jpg)
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
![Page 4: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/4.jpg)
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
![Page 5: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/5.jpg)
5
Exercício Prático CSS
Arquivo noticia1.html - sem formatações de estilo
![Page 6: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/6.jpg)
6
Exercício Prático CSS
Arquivo noticia1.html - com formatações de estilo
![Page 7: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/7.jpg)
7
Exercício Prático CSS
<p> ptitulo
<p> presumo<p> pautor
<p> ptexto
Arquivo noticia1.html - com formatações de estilo
![Page 8: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/8.jpg)
8
Exercício Prático CSS
Arquivo noticia2.html - com formatações de estilo
![Page 9: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/9.jpg)
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
![Page 10: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/10.jpg)
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
![Page 11: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/11.jpg)
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
![Page 12: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/12.jpg)
12
Exercício Prático CSS
Regras CSS
Tag <a>
• link – cor #0000FF
• visited – cor #DDC71A
• active – cor #AC0B44
• hover – cor #FF0000, negrito
![Page 13: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/7/75/Exercicio-css-noticias1.pdf · Arquivo noticia1.html - com formatações de estilo. 8 Exercício Prático](https://reader034.vdocuments.pub/reader034/viewer/2022050206/5f598cfa101cdc66b20707bd/html5/thumbnails/13.jpg)
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