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

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

on

  • 660 views

 

Statistics

Views

Total Views
660
Views on SlideShare
660
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • DWEB - Design para Web / Carlos José Perguntas ?26 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12
    • 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