Aula 4 Html - 4

Prof. Paulo Cesar F. De Oliveira, BSc, PhD

27/02/15 © P C F de Oliveira 2015 1

27/02/15 © P C F de Oliveira 2015 2

Lembrete

ul = unordered list

ol = ordered list

li = list item

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

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

27/02/15 © P C F de Oliveira 2015 5

Lembrete

dl = definition list dt = definition term dd = definition description

27/02/15 © P C F de Oliveira 2015 6

27/02/15 © P C F de Oliveira 2015 7

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> !

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 !!

27/02/15 © P C F de Oliveira 2015 10

Lembrete

th = table header tr = table row td = table data

27/02/15 © P C F de Oliveira 2015 11

Item Menu Calorias Gordura (g) Sopa Miojo 120 2

Salada Caesar 400 26

27/02/15 © P C F de Oliveira 2015 12

linha

célula cabeçalho

célula de dados

27/02/15 © P C F de Oliveira 2015 13

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> !

27/02/15 © P C F de Oliveira 2015 15

27/02/15 © P C F de Oliveira 2015 16

Gordura Gordura saturada (g) Gordura insaturada (g)

Extensão de coluna (column span)

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> !

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)

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> !