0
segunda-feira, 12 de março de 12
HTML5 ESSENCIAL                                   Fundamentos de todo serviço na Websegunda-feira, 12 de março de 12
EMENTA    • Fundamentosde Web    • Documentos HTML    • Conteúdo    • Hipermídia    • Semântica    • Desempenho           ...
O QUE VEREMOS AGORA    • Fundamentos da Web    • Documentos HTML         •   DHTML, XHTML, HTML5         •   Tags         ...
DOCUMENTOS HTML                 • HTMLé uma linguagem de marcação                 • DHTML x XHTML x HTML5                 ...
MARCAÇÕES                                       6segunda-feira, 12 de março de 12
MARCAÇÕES    • Marcações                    HTML são denominadas tags                                                6segu...
MARCAÇÕES    • Marcações                    HTML são denominadas tags              •   Todo arquivo HTML apresenta marcaçõ...
MARCAÇÕES    • Marcações                    HTML são denominadas tags              • Todo arquivo HTML apresenta marcações...
MARCAÇÕES    • Marcações                    HTML são denominadas tags              • Todo arquivo HTML apresenta marcações...
MARCAÇÕES    • Marcações                    HTML são denominadas tags              • Todo arquivo HTML apresenta marcações...
MARCAÇÕES    • Marcações                    HTML são denominadas tags              •   Todo arquivo HTML apresenta marcaçõ...
MARCAÇÕES    • Marcações                    HTML são denominadas tags              •   Todo arquivo HTML apresenta marcaçõ...
MARCAÇÕES    • Regras                  XML (XHTML)              • Toda tag deve fechar na mesma “caixa” que abriu. Ex.:   ...
ESTRUTURA                                       8segunda-feira, 12 de março de 12
ESTRUTURA        <html>                                       8segunda-feira, 12 de março de 12
ESTRUTURA        <html>            <head>                                       8segunda-feira, 12 de março de 12
ESTRUTURA        <html>            <head>               <title>Relou o Ôrde</title>                                       ...
ESTRUTURA        <html>            <head>               <title>Relou o Ôrde</title>            </head>                    ...
ESTRUTURA        <html>            <head>               <title>Relou o Ôrde</title>            </head>            <body>  ...
ESTRUTURA        <html>            <head>               <title>Relou o Ôrde</title>            </head>            <body>  ...
ESTRUTURA        <html>            <head>               <title>Relou o Ôrde</title>            </head>            <body>  ...
ESTRUTURA        <html>             <head>                <title>Relou o Ôrde</title>             </head>             <bod...
ESTRUTURA        <html>             <head>                <title>Relou o Ôrde</title>             </head>             <bod...
TAGS BÁSICAS                 • Semântica                 de textos:                      •   <h1></h1> a <h6></h6> - Para ...
ESTRUTURA HTML5                   •   Estruturas vem sendo “layoutadas” usando muitos divs                   •   Engenheir...
ESTRUTURA HTML5    •   Proposta de criação de tags        específicas para evitar uso        excessivo de divs    •   Essas...
ESTRUTURA HTML5    • Novas                 tags estruturais semânticas do HTML5         •   <section>. Delimita uma seção ...
DICAS SEMÂNTICAS            • As   novas tags estruturais da HTML5 vieram para                promover mais semântica mas ...
DICAS SEMÂNTICAS            • Dicas                de cabeçalhos e links                 •    É importante utilizar os ele...
ELEMENTOS DE TEXTO                 • Listas                 •   Não ordenadas <ul>                 •   Ordenadas <ol>     ...
ELEMENTOS DE TEXTO                 • Listas            de definições                 •   Tags <dl>                 •   Iten...
ELEMENTOS DE TEXTO                 • Demais          tags para definição de textos                      •   <small> - Para ...
MODOS E DOCTYPES                      •   No XML, DOCTYPE é uma marcação acima do nó raiz que                          apo...
MODOS E DOCTYPES                 • Exemplos                 de DOCTYPES:                      •   DOCTYPE para o HTML 4   ...
ESTUDO DE CASO 1                                          20segunda-feira, 12 de março de 12
ESTUDO DE CASO 1                                               Análise de um site HTML5        thefuturemckeowns.com      ...
ESTUDO DE CASO 1     menu principal do site: <nav><ul><li>                                             20segunda-feira, 12...
ESTUDO DE CASO 1     menu principal do site: <nav><ul><li>                              Seção da galeria de fotos: <sectio...
ESTUDO DE CASO 1     menu principal do site: <nav><ul><li>                                             20segunda-feira, 12...
ESTUDO DE CASO 1     menu principal do site: <nav><ul><li>                                    Duas áreas <section> e <foot...
ESTUDO DE CASO                                         21segunda-feira, 12 de março de 12
ESTUDO DE CASO 2                                          22segunda-feira, 12 de março de 12
ESTUDO DE CASO 2                                    Que mudanças você faria para atualizá-lo ao HTML5?                    ...
23segunda-feira, 12 de março de 12
DICAS E LINKS              • Analise a estrutura semântica das marcações                  HTML dos sites que você visitar ...
Upcoming SlideShare
Loading in...5
×

Html5 aula 02

2,830

Published on

Segunda aula do curso HTML5 da Especializa Treinamentos

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

No Downloads
Views
Total Views
2,830
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
194
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 aula 02"

  1. 1. segunda-feira, 12 de março de 12
  2. 2. HTML5 ESSENCIAL Fundamentos de todo serviço na Websegunda-feira, 12 de março de 12
  3. 3. EMENTA • Fundamentosde Web • Documentos HTML • Conteúdo • Hipermídia • Semântica • Desempenho 3segunda-feira, 12 de março de 12
  4. 4. O QUE VEREMOS AGORA • Fundamentos da Web • Documentos HTML • DHTML, XHTML, HTML5 • Tags • Regras XHTML • Estrutura de documento HTML • Doctypes e Modos de browsers (quirks e stricts) • Conteúdo • Hipermídia 4segunda-feira, 12 de março de 12
  5. 5. DOCUMENTOS HTML • HTMLé uma linguagem de marcação • DHTML x XHTML x HTML5 • Dynamic HTML x eXtensible HTML x HTML5 • DHTML: Páginas HTML integradas com CSS e Javascript • XHTML: HTML com maior preocupação sintática • HTML5: HTML menos burocrática e mais rapidamente evoluída 5segunda-feira, 12 de março de 12
  6. 6. MARCAÇÕES 6segunda-feira, 12 de março de 12
  7. 7. MARCAÇÕES • Marcações HTML são denominadas tags 6segunda-feira, 12 de março de 12
  8. 8. MARCAÇÕES • Marcações HTML são denominadas tags • Todo arquivo HTML apresenta marcações entre angular brackets (< e >) 6segunda-feira, 12 de março de 12
  9. 9. MARCAÇÕES • Marcações HTML são denominadas tags • Todo arquivo HTML apresenta marcações entre angular brackets (< e >) • Toda tag tem um nome associado. Ex.: <body> 6segunda-feira, 12 de março de 12
  10. 10. MARCAÇÕES • Marcações HTML são denominadas tags • Todo arquivo HTML apresenta marcações entre angular brackets (< e >) • Toda tag tem um nome associado. Ex.: <body> • Tags podem ter conteúdo. Ex: Um texto em <strong>destaque</strong> 6segunda-feira, 12 de março de 12
  11. 11. MARCAÇÕES • Marcações HTML são denominadas tags • Todo arquivo HTML apresenta marcações entre angular brackets (< e >) • Toda tag tem um nome associado. Ex.: <body> • Tags podem ter conteúdo. Ex: Um texto em <strong>destaque</strong> • Tags podem ser autocontidas. Ex: <br /> 6segunda-feira, 12 de março de 12
  12. 12. MARCAÇÕES • Marcações HTML são denominadas tags • Todo arquivo HTML apresenta marcações entre angular brackets (< e >) • Toda tag tem um nome associado. Ex.: <body> • Tags podem ter conteúdo. Ex: Um texto em <strong>destaque</strong> • Tags podem ser autocontidas. Ex: <br /> • Tags podem conter atributos. Ex.: <img src=“foto.gif” /> 6segunda-feira, 12 de março de 12
  13. 13. MARCAÇÕES • Marcações HTML são denominadas tags • Todo arquivo HTML apresenta marcações entre angular brackets (< e >) • Toda tag tem um nome associado. Ex.: <body> • Tags podem ter conteúdo. Ex: Um texto em <strong>destaque</strong> • Tags podem ser autocontidas. Ex: <br /> • Tags podem conter atributos. Ex.: <img src=“foto.gif” /> • Atributos podem ser autocontidos. Ex.: <input type=“text” disabled /> 6segunda-feira, 12 de março de 12
  14. 14. MARCAÇÕES • Regras XML (XHTML) • Toda tag deve fechar na mesma “caixa” que abriu. Ex.: • <p>conteúdo de um parágrafo</p> • <p>conteúdo de um parágrafo</P> ERRADO • Atributos devem sempre vir no formato chave=“valor” Obs.: O HTML5 não insiste mais nesse tema • Tags devem sempre fechar na ordem inversa de abertura: <body> <p> Um texto com <strong>marcações</strong> </p> </body> 7segunda-feira, 12 de março de 12
  15. 15. ESTRUTURA 8segunda-feira, 12 de março de 12
  16. 16. ESTRUTURA <html> 8segunda-feira, 12 de março de 12
  17. 17. ESTRUTURA <html> <head> 8segunda-feira, 12 de março de 12
  18. 18. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> 8segunda-feira, 12 de março de 12
  19. 19. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> 8segunda-feira, 12 de março de 12
  20. 20. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> 8segunda-feira, 12 de março de 12
  21. 21. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> 8segunda-feira, 12 de março de 12
  22. 22. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> </body> 8segunda-feira, 12 de março de 12
  23. 23. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> </body> </html> 8segunda-feira, 12 de março de 12
  24. 24. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> </body> </html> • HTML: Nó raiz HEAD: Cabeçalho do documento TITLE: Título da página BODY: Corpo do documento 8segunda-feira, 12 de março de 12
  25. 25. TAGS BÁSICAS • Semântica de textos: • <h1></h1> a <h6></h6> - Para títulos de capítulos ou seções • <p></p> - Para parágrafos • <br/> - Para quebras de linhas • <em></em> - Para ênfase (em geral deixa o texto itálico) • <strong></strong> - Para ênfase forte • <b></b> - Para negrito • <i></i> - Para itálico • Obs.: Essa é a recomendação do W3C embora todos os browsers coloquem strong e em como negrito e itálico respectivamente • <div></div> - Pura divisão de textos em blocos. Não há margem de parágrafos, apenas quebra ao final • <span></span> - Simples agrupamento de texto para qualquer finalidade 9segunda-feira, 12 de março de 12
  26. 26. ESTRUTURA HTML5 • Estruturas vem sendo “layoutadas” usando muitos divs • Engenheiros do Google catalogaram muitos divs com id ou classes iguais 10segunda-feira, 12 de março de 12
  27. 27. ESTRUTURA HTML5 • Proposta de criação de tags específicas para evitar uso excessivo de divs • Essas tags padronizam a nomenclatura usada em estrutura semanticamente comuns 11segunda-feira, 12 de março de 12
  28. 28. ESTRUTURA HTML5 • Novas tags estruturais semânticas do HTML5 • <section>. Delimita uma seção de conteúdo. • <nav>. Delimita uma área de links para navegação para outro conteúdo. • <article>. Delimita um conteúdo de um artigo, um post em foruns, um comentário, etc • <aside>. Delimita um conteúdo satélite ao principal da página • <header>. Delimita uma subregião de uma seção que agrupa títulos ou estrutura de navegacional • <hgroup>. Delimita um conjunto de elementos de cabeçalho de <h1> a <h6> quando a seção tiver mais de um nível • <footer>. Delimita o rodapé de uma página ou seção. 12segunda-feira, 12 de março de 12
  29. 29. DICAS SEMÂNTICAS • As novas tags estruturais da HTML5 vieram para promover mais semântica mas nenhuma estética • <body> pode conter várias <section> que podem ter <header> e <footer> • <article> funciona como uma <section> para textos de artigos ou comentários • <body> funciona como a principal <section> e também pode ter <header> e <footer> gerais do documento • <section> podem agrupar <div> e mais elementos <section> <div> <p> <span> texto </span> <p> </div> </section> 13segunda-feira, 12 de março de 12
  30. 30. DICAS SEMÂNTICAS • Dicas de cabeçalhos e links • É importante utilizar os elementos da maneira que melhor expresse o conteúdo • <header> podem possuir <hX> e estas podem estar em <hgroup> • Cabeçalhos <hx> representam níveis de destaque e isso • A estrutura <nav> agrupa a navegação principal da página ou do conteúdo de uma seção • A navegação é composta de links (tags <a> que veremos adiante). • É comum haver links dispostos em listas não ordenadas (tags <ul> que veremos adiante). 14segunda-feira, 12 de março de 12
  31. 31. ELEMENTOS DE TEXTO • Listas • Não ordenadas <ul> • Ordenadas <ol> • Itens de listas <li> <ul> <li>Chrome</li> <li>Firefox</li> <li>Opera</li> <li>Safari</li> </ul> 15segunda-feira, 12 de março de 12
  32. 32. ELEMENTOS DE TEXTO • Listas de definições • Tags <dl> • Itens de listas <dt> e descrição de itens <dd> <dl> <dt>WebKit</dt> <dd>Engenho do Chrome e no Safari</dd> <dt>Gecko</dt> <dd>Engenho do Firefox</dd> <dt>Presto</dt> <dd>Engenho do Opera</dd> <dt>Trident</dt> <dd>Engenho Internet Explorer</dd> </dl> 16segunda-feira, 12 de março de 12
  33. 33. ELEMENTOS DE TEXTO • Demais tags para definição de textos • <small> - Para letras miúdas de contrato ;-) • <mark> - Para uma ligeira marca de um texto (HTML5) • <cite> - Para uma citação de alguém • <sub> e <sup> - Convenções tipográficas de sub e superescrito • <abbr> - Para acrônimos 17segunda-feira, 12 de março de 12
  34. 34. MODOS E DOCTYPES • No XML, DOCTYPE é uma marcação acima do nó raiz que aponta para regras (inline ou em documento à parte) que devem ser seguidas pelo documento atual • Um documento XML bem formado (que seguem suas regras básicas) podem ser validados em um DTD (document type definitions) apontado pela tag DOCTYPE • Browsers nunca validam documentos sob pena de ficaram mais lentos • Ao evoluir em novas versões, os browsers vivem o dilema de continuar dando o mesmo resultado em sites antigos e suportar novidades • Browsers utilizam os DOCTYPES para mudar seu estilo de compatibilidade. Assim o próprio site indica se quer ou não que o browser ainda se comporte como na versão anterior 18segunda-feira, 12 de março de 12
  35. 35. MODOS E DOCTYPES • Exemplos de DOCTYPES: • DOCTYPE para o HTML 4 • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict.dtd"> • DOCTYPE XHTML modo Strict (mais rígido) • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • DOCTYPE XHTML Transitional (um dos mais usados ainda hoje) • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • DOCTYPE HTML5, bem mais simples • <!DOCTYPE html> 19segunda-feira, 12 de março de 12
  36. 36. ESTUDO DE CASO 1 20segunda-feira, 12 de março de 12
  37. 37. ESTUDO DE CASO 1 Análise de um site HTML5 thefuturemckeowns.com 20segunda-feira, 12 de março de 12
  38. 38. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20segunda-feira, 12 de março de 12
  39. 39. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> Seção da galeria de fotos: <section> com tags <div> internas 20segunda-feira, 12 de março de 12
  40. 40. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20segunda-feira, 12 de março de 12
  41. 41. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> Duas áreas <section> e <footer> logo abaixo 20segunda-feira, 12 de março de 12
  42. 42. ESTUDO DE CASO 21segunda-feira, 12 de março de 12
  43. 43. ESTUDO DE CASO 2 22segunda-feira, 12 de março de 12
  44. 44. ESTUDO DE CASO 2 Que mudanças você faria para atualizá-lo ao HTML5? 22segunda-feira, 12 de março de 12
  45. 45. 23segunda-feira, 12 de março de 12
  46. 46. DICAS E LINKS • Analise a estrutura semântica das marcações HTML dos sites que você visitar • Exiba o código fonte em ferramentas como o Firebug ou o Chrome Developer Tools e analise estruturas e elementos inline • Sites de conteúdo interessante: • http://www.ibm.com/developerworks/library/x-html5/ • http://html5doctor.com/you-can-still-use-div/ • http://www.impressivewebs.com/html5-section/ • http://www.vanseodesign.com/web-design/html5-semantic- elements/ • http://www.maujor.com/tutorial/acessibilidade-na-html5.php • http://en.wikipedia.org/wiki/Quirks_mode • http://www.maujor.com/tutorial/apoio_haslayout/quirksmode.html 24segunda-feira, 12 de março de 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×