![Page 1: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/1.jpg)
Aula 4 Html - 4
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
27/02/15 © P C F de Oliveira 2015 1
![Page 2: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/2.jpg)
27/02/15 © P C F de Oliveira 2015 2
Lembrete
ul = unordered list
ol = ordered list
li = list item
![Page 3: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/3.jpg)
27/02/15 © P C F de Oliveira 2015 3
<ul> ! <li>Pão</li> ! <li>Carne</li> ! <li>Fruta</li> !</ul> !
• Pão• Carne• Fruta
![Page 4: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/4.jpg)
27/02/15 © P C F de Oliveira 2015 4
<ol> ! <li>Soldado</li> ! <li>Capitão</li> ! <li>General</li> !</ol> !
1. Soldado2. Capitão3. General
![Page 5: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/5.jpg)
27/02/15 © P C F de Oliveira 2015 5
Lembrete
dl = definition list dt = definition term dd = definition description
![Page 6: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/6.jpg)
27/02/15 © P C F de Oliveira 2015 6
![Page 7: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/7.jpg)
27/02/15 © P C F de Oliveira 2015 7
![Page 8: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/8.jpg)
27/02/15 © P C F de Oliveira 2015 8
<h2>Lista Aninhada</h2> !<ol> ! <li>Pães ! <ul> ! <li>Francês</li> ! <li>Italiano</li> ! <li>Alemão</li> ! </ul> ! </li> ! <li>Carnes ! <ul> ! <li>Rosbife</li> ! <li>Peru</li> ! <li>Carneiro</li> ! </ul> ! </li> ! <li>Frutas ! <ul> ! <li>Bananas</li> ! <li>Peras</li> ! <li>Maçãs</li> ! </ul> ! </li> !</ol> !
![Page 9: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/9.jpg)
27/02/15 © P C F de Oliveira 2015 9
Lista Aninhada !!1. Pães !
o Francês !o Italiano !o Alemão !
2. Carnes !o Rosbife !o Peru !o Carneiro !
3. Frutas !o Bananas !o Peras !o Maçãs !!
![Page 10: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/10.jpg)
27/02/15 © P C F de Oliveira 2015 10
Lembrete
th = table header tr = table row td = table data
![Page 11: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/11.jpg)
27/02/15 © P C F de Oliveira 2015 11
Item Menu Calorias Gordura (g) Sopa Miojo 120 2
Salada Caesar 400 26
![Page 12: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/12.jpg)
27/02/15 © P C F de Oliveira 2015 12
linha
célula cabeçalho
célula de dados
![Page 13: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/13.jpg)
27/02/15 © P C F de Oliveira 2015 13
![Page 14: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/14.jpg)
27/02/15 © P C F de Oliveira 2015 14
<table> ! <tr> ! <th>Item Menu</th> ! <th>Calorias</th> ! <th>Gordura (g)</th> ! </tr> ! <tr> ! <td>Sopa Miojo</td> ! <td>120</td> ! <td>2</td> ! </tr> ! <tr> ! <td>Salada Caesar</td> ! <td>400</td> ! <td>26</td> ! </tr> !</table> !
![Page 15: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/15.jpg)
27/02/15 © P C F de Oliveira 2015 15
![Page 16: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/16.jpg)
27/02/15 © P C F de Oliveira 2015 16
Gordura Gordura saturada (g) Gordura insaturada (g)
Extensão de coluna (column span)
![Page 17: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/17.jpg)
27/02/15 © P C F de Oliveira 2015 17
<table> ! <tr> ! <th colspan=“2”>Gordura</th> ! </tr> ! <tr> ! <td>Gordura Saturada (g)</td> ! <td>Gordura Insaturada (g)</td> ! </tr> !</table> !
![Page 18: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/18.jpg)
27/02/15 © P C F de Oliveira 2015 18
Extensão de linha (row span)
Porção Pequena (230 g) Média (460 g) Grande (690 g)
![Page 19: Aula 4 Html - 4 - blogdoprofpc.files.wordpress.com · Aula 4 Html - 4 Prof. Paulo Cesar F ... o Francês! o Italiano! o Alemão! 2.Carnes! o Rosbife! o Peru! o Carneiro! ... 27/02/15](https://reader031.vdocuments.com.br/reader031/viewer/2022022716/5c23037b09d3f2da4f8b5b3f/html5/thumbnails/19.jpg)
27/02/15 © P C F de Oliveira 2015 19
<table> ! <tr> ! <th rowspan=“3”>Porção</th> !
<td>Pequena (230 g)</td> ! </tr> ! <tr> ! <td>Média (460 g)</td> ! </tr> !
<tr> ! <td>Grande(690 g)</td> ! </tr> !</table> !