Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs http://luizsoares.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Unifesp - Cursos de Verão 2010
Luiz Gustavo Soares@luizgrshttp://luizsoares.net
XHTML?AcessoTagsAtributos<tags>EntidadesFuturoReferência
HTML + XML
eXtensible HyperText Markup Language
XML
W3C
Texto bem organizado
Transitional;
Strict;
Frameset;
Camadas;
Função;
Interação;
Browsers;
Móvel;
Leitores de Tela;
Crawlers;
Principais Elementos ;
Marcam;
Semântica;
Tudo que abre fecha;
Abriu antes fecha depois;
<img>
<body> <span>
<head>
<h5><h1>
<thead>
<table><ol>
<div>
<ul>
<p>
Características;
Propriedades;
Minúsculos;
id<div id=“peixe”></div>
class<div class=“botao”></div>
style<div style=“color:#F00;”></div>
title<div title=“Clique Aqui”></div>
<!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>
Pontos importantes do documento;
Links para outros documentos;
Hypertext Reference;
Destino do link;
<a href=“http://www.google.com”>Google</a>
Nome da âncora;
Bookmark;
<a name=“cap1”>Capítulo 1</a>
Onde abrir o link;
<a href=“http://www.google.com” target=“_blank”>Google</a>
Imagem;
Source;
Imagem que será exibida;
<img src=“smiley_feliz.gif” />
Texto Alternativo;
<img src=“smiley_feliz.gif” alt=“: D” />
:D
Parágrafos;
<p>Texto do parágrafo</p>
Seções, divisões;
Agrupamento;
<div><p>Parágrafo 1</p><p>Parágrafo 2</p></div>
Tabela;
Dados, estatísticas,...
Linhas da tabela;
Células da tabela;
<table><tr> <td></td><td></td></tr><tr> <td></td><td></td></tr></table>
Numérico;Espaço entre células;
<table cellspacing=“0”><tr> <td></td><td></td></tr><tr> <td></td><td></td></tr></table>
Células da tabela;
Semântica!
colspanNuméricoMesclar colunas;
<tr><td colspan="2"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
rowspanNuméricoMesclar linhas;
<tr><td rowspan="2"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
<tr><td rowspan="2“ colspan=“2”></td><td></td><td></td></tr><tr><td></td><td></td></tr>
Agrupar cabeçalho;
<table><thead><tr><th>Nome</th><th>Idade</th></tr></thead></table>
Agrupar conteúdo;
<table><tbody><tr><td>Luiz</td><td>22</td></tr></tbody></table>
Agrupar o rodapé;Deve aparecer antes do <tbody>!
<table><tfoot><tr><td>Média Idade</td><td>22</td></tr></tfoot><tbody>...</tbody></table>
Título da tabela;Deve ser primeiro filho da <table>!
<table><caption>Estudantes</caption><tbody>...</tbody></table>
<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>
Cabeçalho;
<h1>Título Principal</h1><h2>Sub-título</h2><h3>...</h3>
Lista de itens sem ordenação;
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>
Lista de itens ordenados;
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ol>
Colher informações do usuário;
<input />
button
checkbox
file
hidden
password
radio
reset
submit
text
image
Numérico;Máximo de caracteres;
<input type=“text” maxlength=“10” />
Somente Leitura;
<input type=“text” readonly=“readonly” />
Marcado;
<input type=“radio” checked=“checked” />
Caminho da Imagem;
<input type=“image” src=“search.gif” />
Texto Alternativo;
<input type=“image” src=“search.gif” alt=“Search” />
Valor contido ou representado pelo campo;
<input type=“...” value=“texto” />
Identifica o campo ao submetê-lo;
<input type=“...” name=“nome” />
Desabilita os campos;
<input type=“...” disabled=“disabled” />
Ordem do foco;
<input type=“...” tabindex=“0” />
Lista de Opções;
<select><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
Itens visíveis simultaneamente;
<select size=“2”><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
Selecionar mais de uma opção;
<select multiple=“multiple”><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
Não permite modificações;
<select disabled=“disabled”><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
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>
Selecionado;
<select><option>Item 1</option><option>Item 2</option><option selected=“selected”>Item 3</option></select>
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>
Caixa de texto para várias linhas;
<textarea rows=“3” cols=“10”></textarea>
colsColunas de texto visíveis;
rowsLinhas de texto visíveis;
Atributos que definem simplesmente aparência?
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>
Formulário;Contém campos;
<form><input … /><input … /></form>
URL que receberá os dados;
<form action=“pagina.html”><input … /><input … /></form>
Como transmitir os dados;getpost
<form action=“pagina.html” method=“get” ><input … /><input … /></form>
Como os dados serão codificados; application/x-www-form-urlencodedmultipart/form-datatext/plain
<form action=“pagina.html” enctype=“multipart/form-data” >
<input … /><input … /></form>
Rótulos de campos de formulário;
<label>Nome:</label> <input type=“text” />
A qual campo o label está ligado;
<label for=“txtnome”>Nome:</label> <input type=“text” id=“txtnome” />
Caracteres Reservados;
Difíceis de digitar;
Símbolos;
Caracter Núm. Entidade Nome 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
<video>
<canvas>
<input type=“email|range” />, required;
<audio>
<progress>
www.w3c.orghttp://www.w3schools.com/www.maujor.com
Related Documents
