Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .
-
Upload
fernando-amaral -
Category
Documents
-
view
217 -
download
2
Transcript of Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .
![Page 1: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/1.jpg)
<XHTML>Unifesp - Cursos de Verão 2010
Luiz Gustavo Soares@luizgrshttp://luizsoares.net
![Page 2: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/2.jpg)
Agenda
XHTML? Acesso Tags Atributos <tags> Entidades Futuro Referência
![Page 3: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/3.jpg)
XHTML?
HTML + XML
eXtensible HyperText Markup Language
XML
W3C
Texto bem organizado
![Page 4: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/4.jpg)
XHTML?
![Page 5: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/5.jpg)
XHTML?
Transitional;
Strict;
Frameset;
![Page 6: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/6.jpg)
XHTML, CSS e Javascript
Camadas;
Função;
Interação;
![Page 7: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/7.jpg)
Como Faz?
![Page 8: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/8.jpg)
Como Faz?
![Page 9: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/9.jpg)
Como Faz?
![Page 10: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/10.jpg)
Como Faz?
![Page 11: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/11.jpg)
Acesso
Browsers;
Móvel;
Leitores de Tela;
Crawlers;
![Page 12: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/12.jpg)
<Tags>
Principais Elementos ;
Marcam;
Semântica;
Tudo que abre fecha;
Abriu antes fecha depois;
![Page 13: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/13.jpg)
<Tags>
<img>
<body> <span>
<head>
<h5><h1>
<thead>
<table><ol>
<div><ul>
<p>
![Page 14: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/14.jpg)
Atributos
Características;
Propriedades;
Minúsculos;
![Page 15: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/15.jpg)
Atributos Padrãoid
<div id=“peixe”></div>
class<div class=“botao”></div>
style<div style=“color:#F00;”></div>
title<div title=“Clique Aqui”></div>
![Page 16: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/16.jpg)
Esqueleto<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Título</title></head>
<body>
</body>
</html>
![Page 17: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/17.jpg)
<a> - Anchor
Pontos importantes do documento;
Links para outros documentos;
![Page 18: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/18.jpg)
<a> - href
Hypertext Refence;
Destino do link;
<a href=“http://www.google.com”>Google</a>
![Page 19: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/19.jpg)
<a> - name
Nome da âncora;
Bookmark;
<a name=“cap1”>Capítulo 1</a>
![Page 20: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/20.jpg)
<a> - target
Aonde abrir o link;
<a href=“http://www.google.com” target=“_blank”>Google</a>
![Page 21: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/21.jpg)
<img /> - Image
Imagem;
![Page 22: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/22.jpg)
<img /> - src
Source;
Imagem que será exibida;
<img src=“smiley_feliz.gif” />
![Page 23: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/23.jpg)
<img /> - alt
Texto Alternativo;
<img src=“smiley_feliz.gif” alt=“: D” />
:D
![Page 24: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/24.jpg)
<p> - Paragraph
Parágrafos;
<p>Texto do parágrafo</p>
![Page 25: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/25.jpg)
<div> - Division
Seções, divisões;
Agrupamento;
<div><p>Parágrafo 1</p><p>Parágrafo 2</p>
</div>
![Page 26: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/26.jpg)
<table> - Table
Tabela;
Dados, estatísticas,...
![Page 27: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/27.jpg)
<tr> - Table Row
Linhas da tabela;
![Page 28: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/28.jpg)
<td> - Table Standard Cell Células da tabela;
![Page 29: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/29.jpg)
<table> - Tabela Finalmente<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
![Page 30: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/30.jpg)
<table> -cellspacing Numérico; Espaço entre células;
<table cellspacing=“0”><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
![Page 31: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/31.jpg)
<table> -cellspacing
![Page 32: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/32.jpg)
<th> - Table Header Cell
Células da tabela;
Semântica!
![Page 33: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/33.jpg)
<th>, <tr> - colspan
colspan Numérico Mesclar colunas;
![Page 34: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/34.jpg)
<th>, <tr> - colspan
<tr><td colspan="2"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
![Page 35: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/35.jpg)
<th>, <tr> - rowspan
rowspan Numérico Mesclar linhas;
![Page 36: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/36.jpg)
<th>, <tr> - rowspan
<tr><td rowspan="2"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
![Page 37: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/37.jpg)
<th>, <tr> - colspan e rowspan<tr><td rowspan="2“ colspan=“2”></td><td></td><td></td></tr><tr><td></td><td></td></tr>
![Page 38: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/38.jpg)
<thead> - Table Header Agrupar cabeçalho;
<table><thead><tr><th>Nome</th><th>Idade</th></tr></thead></table>
![Page 39: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/39.jpg)
<tbody> - Table Body Agrupar conteúdo;
<table><tbody><tr><td>Luiz</td><td>22</td></tr></tbody></table>
![Page 40: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/40.jpg)
<tfoot> - Table Footer Agrupar o rodapé; Deve aparecer antes do <tbody>!
<table><tfoot><tr><td>Média Idade</td><td>22</td></tr></tfoot><tbody>...</tbody></table>
![Page 41: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/41.jpg)
<caption> - Table Caption Título da tabela; Deve ser primeiro filho da <table>!
<table><caption>Estudantes</caption><tbody>...</tbody>
</table>
![Page 42: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/42.jpg)
<table> - Agora Completa<table><caption>Estudantes</caption><thead><tr><th>Nome</th><th>Idade</th></tr></thead><tfoot><tr><td>Média:</td><td>21</td></tr></tfoot><tbody><tr><td>Luiz Gustavo</td><td>22</td></tr><tr><td>Bozo</td><td>20</td></tr></tbody></table>
![Page 43: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/43.jpg)
<table> - Agora Completa
![Page 44: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/44.jpg)
<h1>...<h6> - Header 1-6 Cabeçalho;
<h1>Título Principal</h1><h2>Sub-título</h2><h3>...</h3>
![Page 45: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/45.jpg)
<h1>...<h6> - Header 1-6
![Page 46: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/46.jpg)
<ul> - Unordered List
Lista de itens sem ordenação;
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>
![Page 47: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/47.jpg)
<ul> - Unordered List
![Page 48: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/48.jpg)
<ol> - Ordered List
Lista de itens ordenados;
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ol>
![Page 49: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/49.jpg)
<ol> - Ordered List
![Page 50: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/50.jpg)
<input /> - Input Field
Colher informações do usuário;
<input />
![Page 51: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/51.jpg)
<input /> - type
button
checkbox
file
hidden
password
![Page 52: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/52.jpg)
<input /> - type
radio
reset
submit
text
image
![Page 53: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/53.jpg)
<input type=“text|password” /> - maxlength Numérico; Máximo de caracteres;
<input type=“text” maxlength=“10” />
![Page 54: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/54.jpg)
<input type=“text|password” /> - readonly Somente Leitura;
<input type=“text” readonly=“readonly” />
![Page 55: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/55.jpg)
<input type=“radio|checkbox” /> - checked Marcado;
<input type=“radio” checked=“checked” />
![Page 56: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/56.jpg)
<input type=“image” /> - src
Caminho da Imagem;
<input type=“image” src=“search.gif” />
![Page 57: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/57.jpg)
<input type=“image” /> - alt
Texto Alternativo;
<input type=“image” src=“search.gif” alt=“Search” />
![Page 58: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/58.jpg)
<input /> - value
Valor contido ou representado pelo campo;
<input type=“...” value=“texto” />
![Page 59: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/59.jpg)
<input /> - name
Identifica o campo ao submetê-lo;
<input type=“...” name=“nome” />
![Page 60: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/60.jpg)
<input /> - disabled
Desabilita os campos;
<input type=“...” disabled=“disabled” />
![Page 61: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/61.jpg)
<input /> - tabindex
Ordem do foco;
<input type=“...” tabindex=“0” />
![Page 62: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/62.jpg)
<select> - Select List
Lista de Opções;
<select><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
![Page 63: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/63.jpg)
<select> - Select List
![Page 64: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/64.jpg)
<select> - size
Itens visíveis simultaneamente;
<select size=“2”><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
![Page 65: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/65.jpg)
<select> - multiple
Selecionar mais de uma opção;
<select multiple=“multiple”><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
![Page 66: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/66.jpg)
<select> - multiple
![Page 67: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/67.jpg)
<select> - disabled
Não permite modificações;
<select disabled=“disabled”><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
![Page 68: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/68.jpg)
<option> - value
Valor representado pela opção;
<select><option value=“1”>Item 1</option><option value=“2”>Item 2</option><option value=“3”>Item 3</option>
</select>
![Page 69: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/69.jpg)
<option> - selected
Selecionado;
<select><option>Item 1</option><option>Item 2</option><option selected=“selected”>Item 3</option>
</select>
![Page 70: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/70.jpg)
<optgroup> - Options Group
Agrupa <option>s;
<select><optgroup label=“Terrestre”><option>Carro</option><option>Velotrol</option>
</optgroup><optgroup label=“Aéreo”><option>Avião</option><option>Helicóptero</option></optgroup>
</select>
![Page 71: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/71.jpg)
<textarea> - Text Area
Caixa de texto para várias linhas;
<textarea rows=“3” cols=“10”></textarea>
![Page 72: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/72.jpg)
<textarea> - atributos
cols Colunas de texto visíveis;
rows Linhas de texto visíveis;
![Page 73: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/73.jpg)
<textarea> - atributos
Atributos que definem simplesmente aparência?
![Page 74: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/74.jpg)
<fieldset> - Fields Set Agrupa campos de um formulário;
<fieldset><legend>Requisitante</legend><label..>Nome:</label><input type=“text” /><label..>Idade:</label><input type=“text” />
</fieldset><fieldset>
<legend>Cônjuge</legend><label..>Nome:</label><input type=“text” /><label..>Idade:</label><input type=“text” />
</fieldset>
![Page 75: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/75.jpg)
<fieldset> - Fields Set
![Page 76: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/76.jpg)
<form> - Form
Formulário; Contém campos;
<form><input … /><input … />
</form>
![Page 77: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/77.jpg)
<form> - action
URL que receberá os dados;
<form action=“pagina.html”><input … /><input … />
</form>
![Page 78: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/78.jpg)
<form> - method
Como transmitir os dados; get post
<form action=“pagina.html” method=“get” >
<input … /><input … />
</form>
![Page 79: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/79.jpg)
<form> - enctype Como os dados serão codificados;
application/x-www-form-urlencoded multipart/form-data text/plain
<form action=“pagina.html” enctype=“multipart/form-data” ><input … /><input … /></form>
![Page 80: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/80.jpg)
<label> - Label
Rótulos de campos de formulário;
<label>Nome:</label> <input type=“text” />
![Page 81: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/81.jpg)
<label> - for
A qual campo o label está ligado;
<label for=“txtnome”>Nome:</label> <input type=“text” id=“txtnome” />
![Page 82: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/82.jpg)
Entidades
Caracteres Reservados;
Difíceis de digitar;
Símbolos;
![Page 83: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/83.jpg)
EntidadesCaracter Núm.
EntidadeNome Entidade
Descrição
" " " quotation mark' ' ' (IE não) apostrophe & & & ampersand< < < less-than> > > greater-thanÅ Å Å capital a, ringÆ Æ Æ capital aeÇ Ç Ç capital c, cedillaÈ È È capital e, grave accent¿ ¿ ¿ inverted question mark♣ ♣ ♣ club‰ ‰ ‰ per mille ζ ζ ζ zeta
![Page 84: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/84.jpg)
Futuro
![Page 85: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/85.jpg)
HTML5
<video>
<canvas>
<input type=“email|range” />, required;
<audio>
<progress>
![Page 86: Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs .](https://reader035.fdocumentos.tips/reader035/viewer/2022062818/570638471a28abb8238f386e/html5/thumbnails/86.jpg)
Referências
www.w3c.org http://www.w3schools.com/ www.maujor.com