Unb 2012.1 - dweb - 04 - html5 básico - parte iii

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é


Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

Apresentar a linguagem de marcação HTML 5 com seus conceitos básicos, bem como a construção de documentos.



Agenda

n Lista de tag’s e atributos

n Exercícios



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



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.



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>



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>



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.



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



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.



n  Lista de Tags e atributos î HTML <th> tag




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



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



n  Lista de Tags e atributos î HTML <tr> tag




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



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



n  Lista de Tags e atributos î HTML <td> tag



HTML – <td> Elementos de uma Tabela


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



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



n  Lista de Tags e atributos î HTML <caption> tag




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



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>



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>



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



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



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



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>



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>



Perguntas

?



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

Documents

Unb 2012.1 - dweb - 04 - html5 básico - parte iii