04 01 estrutura de um documento

203 visualizações

Publicada em

HTML5 Estrutura de um documento

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
203
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • 04 01 estrutura de um documento

    1. 1. html HyperText Mark-up Language Linguagem de formatação de documentos
    2. 2. Modelos de conteúdo  Elementos em linha – InLine Elements  Elementos de bloco – Block Elements 5/30/2015
    3. 3. Modelos de conteúdo  Elementos em linha – InLine Elements  Normalmente são marcadores de texto <a> <strong> <em> <img> <imput> <span> 5/30/2015
    4. 4. Modelos de conteúdo  Elementos de bloco – Block Elements  São como caixas que dividem o conteúdo nas secções do layout <div> <nav> <section> <article> <aside> 5/30/2015
    5. 5. Regras básicas de layout  Os elementos Inline podem conter outros elementos Inline dependendo da categoria do elemento. Exemplos:  O elemento <p> pode conter um elemento <a>  O elemento <a> não pode conter o elemento <label> 5/30/2015
    6. 6. Regras básicas de layout  Os elementos InLine nunca podem conter elementos bloco: <a><div>...</div></a> 5/30/2015
    7. 7. Regras básicas de layout  Os elementos Block podem conter qualquer elemento inline: <div><strong>...</strong></div> <article><em>...</em></article> 5/30/2015
    8. 8. Regras básicas de layout  Os elementos Block podem conter elementos Block dependendo da categoria em que eles se encontrem: Exemplo: <p><div></div></p> <div><p></p></div> 5/30/2015
    9. 9. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Metadata Content  Flow Content  Sectioning Content  Heading Content  Phrasing Content  Embeded Content  Interactive Content 5/30/2015
    10. 10. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Metadata Content  Base  Link  Meta  NoScript  Script  Style  Title 5/30/2015
    11. 11. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  a  abbr  address  area (se for descendente do elemento map)  article  aside  audio  b 5/30/2015
    12. 12. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Bdo (bi-directional override - rtl)  Blockquote  Br  Button  Canvas  Cite  Code  Command 5/30/2015
    13. 13. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Datalist  Del  Details  Dfn  Div  DL  Em  Embed 5/30/2015 o FieldSet o Figure o Footer o Form o H1...H6 o Header o Hgroup o Hr o I o iframe
    14. 14. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Img  Input  Ins  Kbd  Keygen  Label  Map  Mark 5/30/2015 o Math o Menu o Meter o Nav o NoScript o Object o OL o Output o P o pre
    15. 15. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Progress  Q  Samp  Script  Section  Select  small  span 5/30/2015 o Strong o Sub o Sup o Table o Texarea o Time o Ul o Var o Video o Text
    16. 16. Regras básicas de layout CATEGORIAS  Sectioning Content  Article  Aside  Nav  Section 5/30/2015
    17. 17. Regras básicas de layout CATEGORIAS  Heading Content  H1  H2  H3  H4  H5  H6  hgroup 5/30/2015
    18. 18. Regras básicas de layout CATEGORIAS  Phrasing Content  a  abbr  area (map>area)  audio  b  bdo  br  button  canvas 5/30/2015 • cite • code • command • datalist • del • dfn • em • Embed • i • iframe • img • input • Ins • kbd • keygen • Label • Link • Map
    19. 19. Regras básicas de layout CATEGORIAS  Phrasing Content  Mark  Meter  Noscript  Object  Output  Progress  Samp  Script  Select  Small 5/30/2015 • Span • strong • Sub • Sup • Svg • Texarea • Time • Var • Video • Text
    20. 20. Regras básicas de layout CATEGORIAS  Embeded Content  Audio  Canvas  Iframe  Img  Math  Object  Svg  Video 5/30/2015
    21. 21. Novos Elementos Estruturais do html5 Estrutura base de um documento: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> …. <body> </html>
    22. 22. Estrutura base do elemento BODY: Novos Elementos Estruturais do html5
    23. 23. Estrutura base de um documento: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <HEADER>…</HEADER> <SECTION>…</SECTION> <ARTICLE>…</ARTICLE> <NAV>…</NAV> <ASIDE>…<ASIDE> <FOOTER>…</FOOTER> <body> </html> Novos Elementos Estruturais do html5
    24. 24. BODY HEADER NAV SECTION HEADER ARTICLE HEADER ASIDE FOOTER <P>... <P>... ARTICLE HEADER ASIDE FOOTER <P>... FOOTER SECTION ASIDE HEADER NAV <P>... FOOTER Novos Elementos Estruturais do html5 FOOTER FOOTER
    25. 25. Estrutura do elemento <body> Elementos semânticos do html5 html 5
    26. 26. Estrutura do elemento <body> Elementos semânticos do html5 html 5
    27. 27. Exercício Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> </header> <nav> </nav> </body> </html> Deve conter o logotipo ou barra superior e pode conter a barra de navegação embora não seja o mais indicado. Deve conter elementos fixos de um site
    28. 28. html 5  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> </nav> </body> </html>
    29. 29. html 5  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> <img src=“logo.gif”> </header> <nav> </nav> </body> </html> E se não quiser que o <h2> apareça no outline da página ? Como ver o header como um único elemento?
    30. 30.  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <hgroup> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> <img src=“logo.gif”> </hgroup> </header> html 5
    31. 31.  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <hgroup> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> <img src=“logo.gif”> </hgroup> </header> html 5
    32. 32.  Exercício 5. Defina a secção nav: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> </nav> </body> </html> Deve conter os elementos de navegação principal de uma página. Links / botões. Pode conter outros elementos que não navegação. html 5
    33. 33.  Exercício 5. Defina a secção nav: … <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> <ul> <li><a href=“viagens.htm” title=“Viagens”>Viagens</a></li> <li><a href=“missao.htm” title=“Aquilo em que acreditamos”>Missão</a></li> <li><a href=“recursos.htm” title=“Planeie os seus rercursos”>Recursos</a></li> <li><a href=“exploradores.htm” title=“A nossa Comunidade”>Exploradores</a></li> <li><a href=“contactos.htm” title=“Contacte-nos” class=“ultimo”>Contactos</a></li> </ul> </nav> </body> ver html 5
    34. 34. ver Deve ser utilizado quando existir um resumo por tópicos do documento. “Document Outline” (esboço do documento) ou conteúdo de introdução.  Exercício 6. Defina a secção section: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header>...</header> <nav>...</nav> <section> </section> </body> </html>
    35. 35.  Exercício 6. Defina a secção section: <!doctype html> ... <section> <h1>Emprersa de Viagens</h1> <p>Dê a volta ao mundo connosco em 80 dias.</p> <p>Consulte a nossa oferta nesta página</p> </section> ... </html> ver
    36. 36. ver  Exercício 6. Cada <section> pode conter o seu Próprio <header>: <!doctype html> ... <section> <header><h1>Quem Somos</h1></header> <h1>Emprersa de Viagens</h1> <p>Dê a volta ao mundo connosco em 80 dias.</p> <p>Consulte a nossa oferta nesta página</p> </section> ... </html>
    37. 37. Deve ser um conteúdo independente e auto-contido que possa ser reutilizado.  Exercício 7. Defina a secção <article>
    38. 38. 38 html 5 Deve ser um conteúdo independente e auto-contido que possa ser reutilizado. Blog Post Notícias Sobre O sitePromoções  Exercício 7. Defina a secção <article>
    39. 39. 39 html 5 ver  Exercício 7. Defina a secção <article> ... <body> ... </section> <article> <h1>Artigos em promoção</h1> <ul> <li><h2>Viagem às Maldivas</h2></li> <li><h2>Viagem a Marrocos</h2></li> </ul> </article>
    40. 40. 40 html 5  Exercício 8. Defina a secção <aside> Deve ser conter informação relacionada com a informação do <article> mas que poderia ser usada como conteúdo independente
    41. 41. 41 html 5  Exercício 8. Defina a secção <aside> Deve ser conter informação relacionada com a informação do <article> mas que poderia ser usada como conteúdo independente Informação Complementar Conteúdo independente
    42. 42. 42 SECTION –Economia html 5  Exercício 8. Defina a secção <aside> HEADER - Expresso ASIDE – Resgate à Grécia ASIDE – Resgate a Portugal HEADER Os Resgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à..... NAV •Política • Economia • Desporto
    43. 43. 43 SECTION –Economia html 5  Exercício 8. Defina a secção <aside> HEADER - Expresso ASIDE - Comissário viu-se grego NAV •Política • Economia • Desporto ASIDE O local onde se coloca o ASIDE indica a sua função neste caso só diz rrespeito a um artigo HEADER Os Resgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à.....
    44. 44. 44 html 5  Exercício 9. Defina <footer> Não é uma secção mas uma descrição de uma secção. HEADER - Expresso HEADER Os Rresgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à..... NAV •Política • Economia • Desporto ASIDE – Resgate à Grécia ASIDE – Resgate a Portugal FOOTER FOOTER SECTION –Economia FOOTER
    45. 45. 45 html 5  Exercício 9. Defina <footer> Pode colocar mais de um footer e não tem de ser no fim da página. HEADER - Expresso NAV •Política • Economia • Desporto ASIDE – Resgate à Grécia ASIDE – Resgate a Portugal FOOTER FOOTER SECTION –Economia FOOTER HEADER Os Rresgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à..... FOOTER
    46. 46. 46 html 5 A forma como hirerquizamos o código de html5 vai influenciar o modo como os motores de busca e os geradores de código automático vão interpretar os dados.
    47. 47. HTML5 Como decidir que elemento utilizar html 5
    48. 48. 48 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? html 5
    49. 49. 49 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? NÃO html 5
    50. 50. 50 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? NÃO conteúdo é introdutório ? html 5
    51. 51. 51 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? NÃO • O conteúdo é introdutório ? SIM HEADER html 5
    52. 52. 52 HTML5 Como decidir que elemento utilizar NÃO • O conteúdo é introdutório ? html 5
    53. 53. 53 HTML5 Como decidir que elemento utilizar NÃO • O conteúdo é introdutório ? O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? SIM FOOTER html 5
    54. 54. 54 HTML5 Como decidir que elemento utilizar NÃO • O conteúdo é introdutório ? O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? SIM FOOTER Pode não estar no fundo da página html 5
    55. 55. 55 HTML5 Como decidir que elemento utilizar NÃO O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? html 5
    56. 56. 56 HTML5 Como decidir que elemento utilizar NÃO O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para um ID ou Class ? html 5
    57. 57. 57 HTML5 Como decidir que elemento utilizar O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para um ID ou Class ? Só por questão visual DIV html 5
    58. 58. 58 HTML5 Como decidir que elemento utilizar O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para um ID ou Class ? Não é conteúdo para uma secção aside html 5
    59. 59. 59 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? SIM html 5
    60. 60. 60 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? SIM O conteúdo faz parte da navegação principal da página? html 5
    61. 61. 61 HTML5 Como decidir que elemento utilizar SIM SIM NAV html 5 Usar só para a navegação principal O elemento deve iniciar uma nova Secção ? O conteúdo faz parte da navegação principal da página?
    62. 62. 62 HTML5 Como decidir que elemento utilizar O conteúdo faz parte da navegação principal da página? NÃO html 5
    63. 63. 63 HTML5 Como decidir que elemento utilizar O conteúdo faz parte da navegação principal da página? NÃO O conteúdo é auto-contido e poderia ser usado de forma independente ? html 5
    64. 64. 64 HTML5 Como decidir que elemento utilizar SIM ARTICLE html 5 O conteúdo faz parte da navegação principal da página? NÃO O conteúdo é auto-contido e poderia ser usado de forma independente ?
    65. 65. 65 HTML5 Como decidir que elemento utilizar O conteúdo é auto- contido e poderia ser usado de forma independente ? SIM ARTICLE NÃO Está relacionado apenas de forma tangencial com o conteúdo que o rodeia ? html 5
    66. 66. 66 HTML5 Como decidir que elemento utilizar O conteúdo é auto- contido e poderia ser usado de forma independente ? SIM ARTICLE Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ? SIM ASIDE html 5 NÃO
    67. 67. 67 HTML5 Como decidir que elemento utilizar SIM NÃO ASIDE Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ? É conteúdo agrupado por tema, e pode ter o seu próprio header e footer? html 5
    68. 68. 68 HTML5 Como decidir que elemento utilizar SIM NÃO ASIDE Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ? É conteúdo agrupado por tema, e ter o seu próprio header e footer? SIM SECTION html 5
    69. 69. 69 HTML5 Como decidir que elemento utilizar SIM NÃO É conteúdo agrupado por tema, e ter o seu próprio header e footer? SECTION Use um <h...> para criar uma secção implicitamente html 5
    70. 70. 70 RESUMO Tags (ou marcadores), elementos e atributos Estrutura base de um documento HTML Codificação de caracteres e definição de idioma Os primeiros novos elementos estruturais do HTML5: Header, Nav, Aside, Footer, Section, Article html 5

    ×