Your SlideShare is downloading. ×
0
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Unb   2012.1 - dweb - 04 - html5 básico - parte iii
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

508

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
508
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 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:151 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  3. DWEB - Design para Web / Carlos José Objetivo da Aula Apresentar a linguagem de marcação HTML 5 com seus conceitos básicos, bem como a construção de documentos.3 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  4. DWEB - Design para Web / Carlos José Agendan Listade tag’s e atributosn Exercícios4 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  5. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Lista de Tags e atributos n  Astags apresentadas aqui formam uma compilação das definições oficiais da linguagem. î  http://www.w3schools.com î  http://www.htmldog.com5 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  6. DWEB - Design para Web / Carlos José HTML – Lista de definiçãon  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.6 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  7. DWEB - Design para Web / Carlos José HTML – exe08.html<!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Listas de defini&ccedil;&atilde;o aninhadas</title> </head><body><h1>Lista de Defini&ccedil;&atilde;o</h1> <dl> <dt><h3>P&atilde;o Pizza</h3></dt> <dl> <dt><h4>Ingredientes</h4></dt> <dd>1 kg de farinha de trigo</dd> <dd>100 ml de &oacute;leo</dd> <dd>1 copo de leite</dd> <dd>1 de &aacute;gua</dd> <dd>1 ovo</dd> <dd>1 colher (sopa) de sal</dd> <dd>2 colheres (sopa) de a&ccedil;&uacute;car</dd> <dd>2 pacotinhos de fermento de 15g cada</dd> </dl> </dl>7 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  8. DWEB - Design para Web / Carlos José HTML – exe08.htmlContinuaçã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&ccedil;&uacute;car</dd> <dd>8 colheres de sopa de &aacute;gua</dd> </dl> </dl> </body></html>8 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  9. DWEB - Design para Web / Carlos José HTML - <table> Criando tabelan  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.9 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  10. DWEB - Design para Web / Carlos José HTML - <table> Criando tabelan  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. TF Especifica o alinhamento de uma tabela de acordo com o texto adjacente bgcolor rgb(x,x,x), #xxxxxx, colorname Em desuso. Use CSS em vez disso. TF Especifica a cor de fundo de uma tabela border pixels Especifica a largura das bordas. STF cellpadding pixels or % Especifica o espaço entre a parede de uma celular STF e o conteúdo da célula. cellspacing pixels or % Especifica o espaço entre as células. STF width pixels or % Especifica a largura de uma tabela STF10 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  11. DWEB - Design para Web / Carlos José HTML – <th> Elementos de uma Tabelan  Lista de Tags e atributos î HTML <th> tag n  Definiçãoe forma de uso: A tag <th> define uma célula de cabeçalho em uma tabela HTML. î  Otexto contido na tag <th> é um visualizado em negrito e centralizado. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Osatributos "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.11 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  12. DWEB - Design para Web / Carlos José HTML – <th> Elementos de uma Tabelan  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. TF Especifica a cor de fundo de uma célula. colspan number Define o número de colunas de uma célula que STF serão mescladas. rowspan number Define o número de linhas de uma célula que STF serão mescladas. 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. TF Especifica a largura de uma célula. height pixels or % Em desuso. Use CSS em vez disso. TF Especifica a altura de uma célula.12 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  13. DWEB - Design para Web / Carlos José HTML – <tr> Elementos de uma Tabelan 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.13 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  14. DWEB - Design para Web / Carlos José HTML – <tr> Elementos de uma Tabelan  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. TF Especifica a cor de fundo de uma linha de uma tabela. valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma linha STF da tabela.14 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  15. DWEB - Design para Web / Carlos José HTML – <td> Elementos de uma Tabelan  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.15 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  16. DWEB - Design para Web / Carlos José HTML – <td> Elementos de uma Tabelan  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. 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. TF Especifica a cor de fundo de uma célula. colspan number Define o número de colunas de uma célula que STF serão mescladas. rowspan number Define o número de linhas de uma célula que STF serão mescladas. 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. TF Especifica a largura de uma célula. height pixels or % Em desuso. Use CSS em vez disso. TF Especifica a altura de uma célula.16 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  17. DWEB - Design para Web / Carlos José HTML – <caption> Elementos de uma Tabelan  Lista de Tags e atributos î HTML <caption> tag n  Definiçãoe 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.17 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  18. DWEB - Design para Web / Carlos José HTML – <caption> Elementos de uma Tabelan  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. TF Define o alinhamento de uma legenda.18 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  19. DWEB - Design para Web / Carlos José HTML – exe09.html<!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>CRIA&Ccedil;&Atilde;O DE TABELAS</title> </head><body> <h1>CRIA&Ccedil;&Atilde;O DE TABELAS</h1> <hr /> <table width="350" border="1"> <tr> <td>Nome</td> <td>Email</td> </tr> <tr> <td>Jos&eacute; Pedro</td> <td><a href="mailto:jp@eai.com.br">jp@eai.com.br</a></td> </tr> <tr> <td>Luiz Pedro</td> <td><a href="mailto:lp@tolegal.com.br">lp@tolegal.com.br</a></td> </tr>19 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  20. DWEB - Design para Web / Carlos José HTML – exe09.htmlContinuação... <tr> <td>Matilde Santos</td> <td><a href="mailto:ms@gmail.com">ms@gmail.com</a></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table></body></html>20 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  21. DWEB - Design para Web / Carlos José HTML - <thead> Elementos de uma Tabelan  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>.21 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  22. DWEB - Design para Web / Carlos José HTML - <tbody> Elementos de uma Tabelan  Lista de Tags e atributos î HTML <tbody> tag n  Definiçãoe 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.22 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  23. DWEB - Design para Web / Carlos José HTML - <tfoot> Elementos de uma Tabelan  Lista de Tags e atributos î HTML <tfoot> tag n  Definiçãoe 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.23 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  24. DWEB - Design para Web / Carlos José HTML – exe10.html<!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>CRIA&Ccedil;&Atilde;O DE TABELA SEM&Acirc;NTICA</title> </head> <body> <h1>CRIA&Ccedil;&Atilde;O DE TABELA SEM&Acirc;NTICA</h1> <hr /> <table width=“400“ border=”1”> <caption>Seu Z&eacute; da Venda Empreendimentos</caption> <thead> <tr> <th>C&oacute;digo</th><th>Produto</th><th>Pre&ccedil;o</th> </tr> </thead>24 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  25. DWEB - Design para Web / Carlos José HTML – exe10.htmlContinuação... <tfoot> <tr> <th>C&oacute;digo</th><th>Produto</th><th>Pre&ccedil;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>25 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  26. DWEB - Design para Web / Carlos José Perguntas ?26 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
  27. DWEB - Design para Web / Carlos José Considerações Finaisn  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.com27 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12

×