Html5 aula 02

  • 2,224 views
Uploaded on

Segunda aula do curso HTML5 da Especializa Treinamentos

Segunda aula do curso HTML5 da Especializa Treinamentos

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

Views

Total Views
2,224
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
157
Comments
0
Likes
4

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. segunda-feira, 12 de março de 12
  • 2. HTML5 ESSENCIAL Fundamentos de todo serviço na Websegunda-feira, 12 de março de 12
  • 3. EMENTA • Fundamentosde Web • Documentos HTML • Conteúdo • Hipermídia • Semântica • Desempenho 3segunda-feira, 12 de março de 12
  • 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. 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. MARCAÇÕES 6segunda-feira, 12 de março de 12
  • 7. MARCAÇÕES • Marcações HTML são denominadas tags 6segunda-feira, 12 de março de 12
  • 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. 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. 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. 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. 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. 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. 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. ESTRUTURA 8segunda-feira, 12 de março de 12
  • 16. ESTRUTURA <html> 8segunda-feira, 12 de março de 12
  • 17. ESTRUTURA <html> <head> 8segunda-feira, 12 de março de 12
  • 18. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> 8segunda-feira, 12 de março de 12
  • 19. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> 8segunda-feira, 12 de março de 12
  • 20. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> 8segunda-feira, 12 de março de 12
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ESTUDO DE CASO 1 20segunda-feira, 12 de março de 12
  • 37. ESTUDO DE CASO 1 Análise de um site HTML5 thefuturemckeowns.com 20segunda-feira, 12 de março de 12
  • 38. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20segunda-feira, 12 de março de 12
  • 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. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20segunda-feira, 12 de março de 12
  • 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. ESTUDO DE CASO 21segunda-feira, 12 de março de 12
  • 43. ESTUDO DE CASO 2 22segunda-feira, 12 de março de 12
  • 44. ESTUDO DE CASO 2 Que mudanças você faria para atualizá-lo ao HTML5? 22segunda-feira, 12 de março de 12
  • 45. 23segunda-feira, 12 de março de 12
  • 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