unifesp - cursos de verão 2010 luiz gustavo soares @luizgrs
TRANSCRIPT
<XHTML>Unifesp - Cursos de Verão 2010
Luiz Gustavo Soares@luizgrshttp://luizsoares.net
Agenda
XHTML? Acesso Tags Atributos <tags> Entidades Futuro Referência
XHTML?
HTML + XML
eXtensible HyperText Markup Language
XML
W3C
Texto bem organizado
XHTML?
XHTML?
Transitional;
Strict;
Frameset;
XHTML, CSS e Javascript
Camadas;
Função;
Interação;
Como Faz?
Como Faz?
Como Faz?
Como Faz?
Acesso
Browsers;
Móvel;
Leitores de Tela;
Crawlers;
<Tags>
Principais Elementos ;
Marcam;
Semântica;
Tudo que abre fecha;
Abriu antes fecha depois;
<Tags>
<img>
<body> <span>
<head>
<h5><h1>
<thead>
<table><ol>
<div><ul>
<p>
Atributos
Características;
Propriedades;
Minúsculos;
Atributos Padrãoid
<div id=“peixe”></div>
class<div class=“botao”></div>
style<div style=“color:#F00;”></div>
title<div title=“Clique Aqui”></div>
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>
<a> - Anchor
Pontos importantes do documento;
Links para outros documentos;
<a> - href
Hypertext Refence;
Destino do link;
<a href=“http://www.google.com”>Google</a>
<a> - name
Nome da âncora;
Bookmark;
<a name=“cap1”>Capítulo 1</a>
<a> - target
Aonde abrir o link;
<a href=“http://www.google.com” target=“_blank”>Google</a>
<img /> - Image
Imagem;
<img /> - src
Source;
Imagem que será exibida;
<img src=“smiley_feliz.gif” />
<img /> - alt
Texto Alternativo;
<img src=“smiley_feliz.gif” alt=“: D” />
:D
<p> - Paragraph
Parágrafos;
<p>Texto do parágrafo</p>
<div> - Division
Seções, divisões;
Agrupamento;
<div><p>Parágrafo 1</p><p>Parágrafo 2</p>
</div>
<table> - Table
Tabela;
Dados, estatísticas,...
<tr> - Table Row
Linhas da tabela;
<td> - Table Standard Cell Células da tabela;
<table> - Tabela Finalmente<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
<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>
<table> -cellspacing
<th> - Table Header Cell
Células da tabela;
Semântica!
<th>, <tr> - colspan
colspan Numérico Mesclar colunas;
<th>, <tr> - colspan
<tr><td colspan="2"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
<th>, <tr> - rowspan
rowspan Numérico Mesclar linhas;
<th>, <tr> - rowspan
<tr><td rowspan="2"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
<th>, <tr> - colspan e rowspan<tr><td rowspan="2“ colspan=“2”></td><td></td><td></td></tr><tr><td></td><td></td></tr>
<thead> - Table Header Agrupar cabeçalho;
<table><thead><tr><th>Nome</th><th>Idade</th></tr></thead></table>
<tbody> - Table Body Agrupar conteúdo;
<table><tbody><tr><td>Luiz</td><td>22</td></tr></tbody></table>
<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>
<caption> - Table Caption Título da tabela; Deve ser primeiro filho da <table>!
<table><caption>Estudantes</caption><tbody>...</tbody>
</table>
<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>
<table> - Agora Completa
<h1>...<h6> - Header 1-6 Cabeçalho;
<h1>Título Principal</h1><h2>Sub-título</h2><h3>...</h3>
<h1>...<h6> - Header 1-6
<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>
<ul> - Unordered List
<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>
<ol> - Ordered List
<input /> - Input Field
Colher informações do usuário;
<input />
<input /> - type
button
checkbox
file
hidden
password
<input /> - type
radio
reset
submit
text
image
<input type=“text|password” /> - maxlength Numérico; Máximo de caracteres;
<input type=“text” maxlength=“10” />
<input type=“text|password” /> - readonly Somente Leitura;
<input type=“text” readonly=“readonly” />
<input type=“radio|checkbox” /> - checked Marcado;
<input type=“radio” checked=“checked” />
<input type=“image” /> - src
Caminho da Imagem;
<input type=“image” src=“search.gif” />
<input type=“image” /> - alt
Texto Alternativo;
<input type=“image” src=“search.gif” alt=“Search” />
<input /> - value
Valor contido ou representado pelo campo;
<input type=“...” value=“texto” />
<input /> - name
Identifica o campo ao submetê-lo;
<input type=“...” name=“nome” />
<input /> - disabled
Desabilita os campos;
<input type=“...” disabled=“disabled” />
<input /> - tabindex
Ordem do foco;
<input type=“...” tabindex=“0” />
<select> - Select List
Lista de Opções;
<select><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
<select> - Select List
<select> - size
Itens visíveis simultaneamente;
<select size=“2”><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
<select> - multiple
Selecionar mais de uma opção;
<select multiple=“multiple”><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
<select> - multiple
<select> - disabled
Não permite modificações;
<select disabled=“disabled”><option>Item 1</option><option>Item 2</option><option>Item 3</option>
</select>
<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>
<option> - selected
Selecionado;
<select><option>Item 1</option><option>Item 2</option><option selected=“selected”>Item 3</option>
</select>
<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>
<textarea> - Text Area
Caixa de texto para várias linhas;
<textarea rows=“3” cols=“10”></textarea>
<textarea> - atributos
cols Colunas de texto visíveis;
rows Linhas de texto visíveis;
<textarea> - atributos
Atributos que definem simplesmente aparência?
<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>
<fieldset> - Fields Set
<form> - Form
Formulário; Contém campos;
<form><input … /><input … />
</form>
<form> - action
URL que receberá os dados;
<form action=“pagina.html”><input … /><input … />
</form>
<form> - method
Como transmitir os dados; get post
<form action=“pagina.html” method=“get” >
<input … /><input … />
</form>
<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>
<label> - Label
Rótulos de campos de formulário;
<label>Nome:</label> <input type=“text” />
<label> - for
A qual campo o label está ligado;
<label for=“txtnome”>Nome:</label> <input type=“text” id=“txtnome” />
Entidades
Caracteres Reservados;
Difíceis de digitar;
Símbolos;
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
Futuro
HTML5
<video>
<canvas>
<input type=“email|range” />, required;
<audio>
<progress>
Referências
www.w3c.org http://www.w3schools.com/ www.maujor.com
