Html5 aula 02
Upcoming SlideShare
Loading in...5
×
 

Html5 aula 02

on

  • 2,207 views

Segunda aula do curso HTML5 da Especializa Treinamentos

Segunda aula do curso HTML5 da Especializa Treinamentos

Statistics

Views

Total Views
2,207
Views on SlideShare
2,207
Embed Views
0

Actions

Likes
4
Downloads
137
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

Html5 aula 02 Html5 aula 02 Presentation Transcript

  • 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 3segunda-feira, 12 de março de 12
  • 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
  • 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
  • MARCAÇÕES 6segunda-feira, 12 de março de 12
  • MARCAÇÕES • Marcações HTML são denominadas tags 6segunda-feira, 12 de março de 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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> 8segunda-feira, 12 de março de 12
  • ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> 8segunda-feira, 12 de março de 12
  • ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> 8segunda-feira, 12 de março de 12
  • ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> 8segunda-feira, 12 de março de 12
  • ESTRUTURA <html> <head> <title>Relou o Ôrde</title> </head> <body> <h1>Relou o Ôrde</h1> </body> 8segunda-feira, 12 de março de 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • ESTUDO DE CASO 1 20segunda-feira, 12 de março de 12
  • ESTUDO DE CASO 1 Análise de um site HTML5 thefuturemckeowns.com 20segunda-feira, 12 de março de 12
  • ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20segunda-feira, 12 de março de 12
  • 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
  • ESTUDO DE CASO 1 menu principal do site: <nav><ul><li> 20segunda-feira, 12 de março de 12
  • 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
  • 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? 22segunda-feira, 12 de março de 12
  • 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 • 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