unb 2012.1 - dweb - 04 - html5 básico - parte iii
TRANSCRIPT
Curso Superior de Tecnologia em Design Gráfico
1 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
DWEB - Design para Web
4 HTML 5 – básico III
Em verdade vos digo que qualquer que não receber o reino de Deus como menino, de maneira nenhuma entrará nele.. Marcos 10:15
DWEB - Design para Web / Carlos José
2 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
Contato
Carlos José
[email protected] www.carlosjose.net
twitter.com/carlosjoser2n
DWEB - Design para Web / Carlos José
3 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
Objetivo da Aula
Apresentar a linguagem de marcação HTML 5 com seus conceitos básicos, bem como a construção de documentos.
DWEB - Design para Web / Carlos José
4 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
Agenda
n Lista de tag’s e atributos
n Exercícios
DWEB - Design para Web / Carlos José
5 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
Introdução as linguagens de marcação
n Introdução î Lista de Tags e atributos
n As tags apresentadas aqui formam uma compilação das definições oficiais da linguagem.
î http://www.w3schools.com î http://www.htmldog.com
DWEB - Design para Web / Carlos José
6 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – Lista de definição
n Lista de Tags e atributos î HTML <dl> tag
n Definição e forma de uso: A tag <dl> define uma lista de definição.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î Nenhuma.
î HTML <dt> tag n Definição e forma de uso: A tag <dt> define um termo de uma
lista de definição. n Diferenças entre HTML 4.01, XHTML e HTML 5
î Nenhuma.
î HTML <dd> tag n Definição e forma de uso: A tag <dd> define a descrição dos
itens de uma lista de definição. n Diferenças entre HTML 4.01, XHTML e HTML 5
î Nenhuma.
DWEB - Design para Web / Carlos José
7 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – exe08.html
<!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>Listas de definição aninhadas</title> </head> <body> <h1>Lista de Definição</h1> <dl> <dt><h3>Pão Pizza</h3></dt> <dl> <dt><h4>Ingredientes</h4></dt> <dd>1 kg de farinha de trigo</dd> <dd>100 ml de óleo</dd> <dd>1 copo de leite</dd> <dd>1 de água</dd> <dd>1 ovo</dd> <dd>1 colher (sopa) de sal</dd> <dd>2 colheres (sopa) de açúcar</dd> <dd>2 pacotinhos de fermento de 15g cada</dd> </dl> </dl>
DWEB - Design para Web / Carlos José
8 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – exe08.html
Continuação... <hr /> <dl> <dt><h3>Pudim de microondas</h3></dt> <dl> <dt><h4>Ingredientes</h4></dt> <dd>1 lata de leite condensado</dd> <dd>1 ½ lata de leite comum</dd> <dd>4 ovos</dd> <dt><h4>Calda</h4></dt> <dd>10 colheres de sopa de açúcar</dd> <dd>8 colheres de sopa de água</dd> </dl> </dl> </body> </html>
DWEB - Design para Web / Carlos José
9 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML - <table> Criando tabela
n Lista de Tags e atributos î HTML <table> tag
n Definição e forma de uso: A tag <table> define uma tabela.
î A tabela HTML simples é composta pelos elementos <tr>, <th> e <td>. § O elemento <tr> define uma linha da tabela, o
elemento <th> define um cabeçalho da tabela, e o elemento <td> define uma célula da tabela.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î O "alinhamento" e "bgcolor" atributos do elemento da
tabela estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD.
DWEB - Design para Web / Carlos José
10 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML - <table> Criando tabela
n Lista de Tags e atributos î HTML <table> tag
n Atributos opcionais î DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align Left, center, right Em desuso. Use CSS em vez disso. Especifica o alinhamento de uma tabela de acordo com o texto adjacente
TF
bgcolor rgb(x,x,x), #xxxxxx, colorname Em desuso. Use CSS em vez disso. Especifica a cor de fundo de uma tabela
TF
border pixels Especifica a largura das bordas. STF
cellpadding pixels or % Especifica o espaço entre a parede de uma celular e o conteúdo da célula.
STF
cellspacing pixels or % Especifica o espaço entre as células. STF
width pixels or % Especifica a largura de uma tabela STF
DWEB - Design para Web / Carlos José
11 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – <th> Elementos de uma Tabela
n Lista de Tags e atributos î HTML <th> tag
n Definição e forma de uso: A tag <th> define uma célula de cabeçalho em uma tabela HTML.
î O texto contido na tag <th> é um visualizado em negrito e centralizado.
n Diferenças entre HTML 4.01, XHTML e HTML 5
î Os atributos "bgcolor", "altura", "largura", e "nowrap" estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD.
DWEB - Design para Web / Carlos José
12 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <th> tag
n Atributos opcionais î DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align Left, center, right, justify Alinha o conteúdo de uma célula. STF
bgcolor rgb(x,x,x), #xxxxxx, colorname Em desuso. Use CSS em vez disso. Especifica a cor de fundo de uma célula.
TF
colspan number Define o número de colunas de uma célula que serão mescladas.
STF
rowspan number Define o número de linhas de uma célula que serão mescladas.
STF
valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma célula. STF
width pixels or % Em desuso. Use CSS em vez disso. Especifica a largura de uma célula.
TF
height pixels or % Em desuso. Use CSS em vez disso. Especifica a altura de uma célula.
TF
HTML – <th> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
13 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <tr> tag
n Definição e forma de uso: A tag <tr> define uma linha em uma tabela.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î O atributo “bgcolor” da tag <tr> está em
desuso no HTML 4.01, e não são suportados em DTD XHTML 1.0 Strict.
HTML – <tr> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
14 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <tr> tag
n Atributos opcionais î DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align Left, center, right, justify Alinha o conteúdo de uma linha da tabela. STF
bgcolor rgb(x,x,x), #xxxxxx, colorname Em desuso. Use CSS em vez disso. Especifica a cor de fundo de uma linha de uma tabela.
TF
valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma linha da tabela.
STF
HTML – <tr> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
15 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <td> tag
n Definição e forma de uso: A tag <td> define uma célula normal em uma tabela HTML.
î Dois tipos de células § Células Header - contém informações de cabeçalho (criado
com o elemento <th>) § Células Standard - contém dados (criada com o elemento
<td>)
n Diferenças entre HTML 4.01, XHTML e HTML 5 î Os atributos "bgcolor", "altura", "largura", e
"nowrap" da tag <td> estão em desuso em HTML 4.01, e não são suportados em DTD XHTML 1.0 Strict.
HTML – <td> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
16 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <td> tag
n Atributos opcionais î DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
HTML – <td> Elementos de uma Tabela
Attribute Value Description DTD
align Left, center, right, justify Alinha o conteúdo de uma célula. STF
bgcolor rgb(x,x,x), #xxxxxx, colorname Em desuso. Use CSS em vez disso. Especifica a cor de fundo de uma célula.
TF
colspan number Define o número de colunas de uma célula que serão mescladas.
STF
rowspan number Define o número de linhas de uma célula que serão mescladas.
STF
valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma célula. STF
width pixels or % Em desuso. Use CSS em vez disso. Especifica a largura de uma célula.
TF
height pixels or % Em desuso. Use CSS em vez disso. Especifica a altura de uma célula.
TF
DWEB - Design para Web / Carlos José
17 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <caption> tag
n Definição e forma de uso: A tag <caption> define uma legenda da tabela.
î O <caption> tag deve ser inserida imediatamente após a tag <table>.
î Você pode especificar apenas uma legenda por tabela. î Normalmente, a legenda aparecerá acima da tabela e
centralizada.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î O atributo "alinhamento“ da legenda está em desuso no
HTML 4.01, e não é suportado no XHTML 1.0 Strict DTD.
HTML – <caption> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
18 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <caption> tag
n Atributos opcionais î DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align Left, center, right, justify Em desuso. Use CSS em vez disso. Define o alinhamento de uma legenda.
TF
HTML – <caption> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
19 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – exe09.html <!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>CRIAÇÃO DE TABELAS</title> </head> <body> <h1>CRIAÇÃO DE TABELAS</h1> <hr /> <table width="350" border="1"> <tr> <td>Nome</td> <td>Email</td> </tr> <tr> <td>José Pedro</td> <td><a href="mailto:[email protected]">[email protected]</a></td> </tr> <tr> <td>Luiz Pedro</td> <td><a href="mailto:[email protected]">[email protected]</a></td> </tr>
DWEB - Design para Web / Carlos José
20 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – exe09.html Continuação... <tr> <td>Matilde Santos</td> <td><a href="mailto:[email protected]">[email protected]</a></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>
DWEB - Design para Web / Carlos José
21 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML - <thead> Elementos de uma Tabela
n Lista de Tags e atributos î HTML <thead> tag
n Definição e forma de uso: A tag <thead> é usado para agrupar o conteúdo do cabeçalho em uma tabela HTML.
î O elemento thead deve ser usado em conjunto com o tbody e tfoot.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î Nenhum dos atributos HTML 4.01 são suportados em HTML5.
n Observações î A tag <thead> deve ter a tag <tr> dentro dela. î Se você usar um dos elementos thead, tbody e tfoot, você deve
usar todos eles. î O elemento <td> não é permitido no elemento <thead>, use o
<th>.
DWEB - Design para Web / Carlos José
22 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <tbody> tag
n Definição e forma de uso: A tag <tbody> é usado para agrupar o conteúdo do corpo em uma tabela HTML.
î O elemento tbody deve ser usado em conjunto com o thead e tfoot.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î Nenhum dos atributos HTML 4.01 são suportados em
HTML5. n Observações
î A tag <tbody> deve ter a tag <tr> dentro dela. î Se você usar um dos elementos thead, tbody e tfoot, você
deve usar todos eles.
HTML - <tbody> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
23 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
n Lista de Tags e atributos î HTML <tfoot> tag
n Definição e forma de uso: A tag <tfoot> é usado para agrupar o conteúdo do rodapé em uma tabela HTML.
î O elemento tfoot deve ser usado em conjunto com o thead e tbody.
n Diferenças entre HTML 4.01, XHTML e HTML 5 î Nenhum dos atributos HTML 4.01 são suportados em
HTML5. n Observações
î A tag <tfoot> deve ter a tag <tr> dentro dela. î Se você usar um dos elementos thead, tbody e tfoot, você
deve usar todos eles.
HTML - <tfoot> Elementos de uma Tabela
DWEB - Design para Web / Carlos José
24 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – exe10.html <!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>CRIAÇÃO DE TABELA SEMÂNTICA</title> </head> <body> <h1>CRIAÇÃO DE TABELA SEMÂNTICA</h1> <hr /> <table width=“400“ border=”1”> <caption>Seu Zé da Venda Empreendimentos</caption> <thead> <tr> <th>Código</th><th>Produto</th><th>Preço</th> </tr> </thead>
DWEB - Design para Web / Carlos José
25 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
HTML – exe10.html Continuação... <tfoot> <tr> <th>Código</th><th>Produto</th><th>Preço</th> </tr> </tfoot> <tbody> <tr><td>123</td><td>Baton Garoto</td><td>R$ 0,50</td></tr> <tr><td>456</td><td>Diamante Negro</td><td>R$ 2,50</td></tr> <tr><td>789</td><td>Chiclete Adams</td><td>R$ 1,50</td></tr> <tr><td>159</td><td>Pipoca Veneza</td><td>R$ 1,00</td></tr> <tr><td>357</td><td>Chocolate Zorro</td><td>R$ 0,50</td></tr> </tr> </tbody> </table> </body> </html>
DWEB - Design para Web / Carlos José
26 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
Perguntas
?
DWEB - Design para Web / Carlos José
27 Monday, 5 de March de 12 Capítulo 4 - HTML 5 básico III
Considerações Finais
n Atenção î Revisar os conceitos e fundamentos do HTML î Tentar refazer os documentos HTML pelo o que
você vê no navegador, ou seja, o resultado final.
Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil, julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição; http://www.htmldog.com/; http://www.w3schools.com