Html5 aula 02

1. segunda-feira, 12 de março de 12

2. HTML5 ESSENCIAL Fundamentos de todo serviço na Web segunda-feira, 12 de março de 12

3. EMENTA • Fundamentosde Web • Documentos HTML • Conteúdo • Hipermídia • Semântica • Desempenho 3 segunda-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 4 segunda-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 5 segunda-feira, 12 de março de 12

6. MARCAÇÕES 6 segunda-feira, 12 de março de 12

7. MARCAÇÕES • Marcações HTML são denominadas tags 6 segunda-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 >) 6 segunda-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> 6 segunda-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> 6 segunda-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 /> 6 segunda-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” /> 6 segunda-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 /> 6 segunda-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> 7 segunda-feira, 12 de março de 12

15. ESTRUTURA 8 segunda-feira, 12 de março de 12

16. ESTRUTURA <html> 8 segunda-feira, 12 de março de 12

17. ESTRUTURA <html> <head> 8 segunda-feira, 12 de março de 12

18. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> 8 segunda-feira, 12 de março de 12

19. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> 8 segunda-feira, 12 de março de 12

20. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> 8 segunda-feira, 12 de março de 12

21. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> 8 segunda-feira, 12 de março de 12

22. ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> </body> 8 segunda-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> 8 segunda-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 8 segunda-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 ﬁnal • <span></span> - Simples agrupamento de texto para qualquer ﬁnalidade 9 segunda-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 10 segunda-feira, 12 de março de 12

27. ESTRUTURA HTML5 • Proposta de criação de tags especíﬁcas para evitar uso excessivo de divs • Essas tags padronizam a nomenclatura usada em estrutura semanticamente comuns 11 segunda-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. 12 segunda-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> 13 segunda-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). 14 segunda-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> 15 segunda-feira, 12 de março de 12

32. ELEMENTOS DE TEXTO • Listas de deﬁniçõ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> 16 segunda-feira, 12 de março de 12

33. ELEMENTOS DE TEXTO • Demais tags para deﬁniçã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áﬁcas de sub e superescrito • <abbr> - Para acrônimos 17 segunda-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 deﬁnitions) apontado pela tag DOCTYPE • Browsers nunca validam documentos sob pena de ﬁcaram 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 18 segunda-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> 19 segunda-feira, 12 de março de 12

36. ESTUDO DE CASO 1 20 segunda-feira, 12 de março de 12

37. ESTUDO DE CASO 1 Análise de um site HTML5 thefuturemckeowns.com 20 segunda-feira, 12 de março de 12

38. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20 segunda-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 20 segunda-feira, 12 de março de 12

40. ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20 segunda-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 20 segunda-feira, 12 de março de 12

42. ESTUDO DE CASO 21 segunda-feira, 12 de março de 12

43. ESTUDO DE CASO 2 22 segunda-feira, 12 de março de 12

44. ESTUDO DE CASO 2 Que mudanças você faria para atualizá-lo ao HTML5? 22 segunda-feira, 12 de março de 12

45. 23 segunda-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 24 segunda-feira, 12 de março de 12

Html5 aula 02

Esté a ler uma amostra.

Confira estes a seguir

Html5 aula 02

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Semelhante a Html5 aula 02 (20)

Mais de Jose Berardo (11)

Html5 aula 02

Html5 aula 02

Esté a ler uma amostra.

Html5 aula 02

Recomendadas

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Semelhante a Html5 aula 02 (20)

Mais de Jose Berardo (11)

Html5 aula 02