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

Like this? Share it with your network

Share

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

  • 706 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
706
On Slideshare
706
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
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 &#189; 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