Download - Html5 aula 02
![Page 1: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/1.jpg)
segunda-feira, 12 de março de 12
![Page 2: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/2.jpg)
HTML5 ESSENCIALFundamentos de todo serviço na Web
segunda-feira, 12 de março de 12
![Page 3: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/3.jpg)
• Fundamentos de Web• Documentos HTML• Conteúdo• Hipermídia• Semântica• Desempenho
EMENTA
3
segunda-feira, 12 de março de 12
![Page 4: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/4.jpg)
• 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
O QUE VEREMOS AGORA
4
segunda-feira, 12 de março de 12
![Page 5: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/5.jpg)
• 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
DOCUMENTOS HTML
5
segunda-feira, 12 de março de 12
![Page 6: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/6.jpg)
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 7: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/7.jpg)
• Marcações HTML são denominadas tags
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 8: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/8.jpg)
• Marcações HTML são denominadas tags• Todo arquivo HTML apresenta marcações entre angular brackets (< e >)
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 9: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/9.jpg)
• 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>
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 10: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/10.jpg)
• 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>
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 11: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/11.jpg)
• 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 />
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 12: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/12.jpg)
• 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” />
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 13: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/13.jpg)
• 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 />
MARCAÇÕES
6
segunda-feira, 12 de março de 12
![Page 14: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/14.jpg)
• 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>
MARCAÇÕES
7
segunda-feira, 12 de março de 12
![Page 15: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/15.jpg)
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 16: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/16.jpg)
<html>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 17: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/17.jpg)
<html><head>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 18: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/18.jpg)
<html><head>
<title>Relou o Ôrde</title>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 19: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/19.jpg)
<html><head>
<title>Relou o Ôrde</title></head>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 20: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/20.jpg)
<html><head>
<title>Relou o Ôrde</title></head><body>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 21: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/21.jpg)
<html><head>
<title>Relou o Ôrde</title></head><body>
<h1>Relou o Ôrde</h1>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 22: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/22.jpg)
<html><head>
<title>Relou o Ôrde</title></head><body>
<h1>Relou o Ôrde</h1></body>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 23: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/23.jpg)
<html><head>
<title>Relou o Ôrde</title></head><body>
<h1>Relou o Ôrde</h1></body>
</html>
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 24: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/24.jpg)
<html><head>
<title>Relou o Ôrde</title></head><body>
<h1>Relou o Ôrde</h1></body>
</html>• HTML: Nó raiz
HEAD: Cabeçalho do documentoTITLE: Título da páginaBODY: Corpo do documento
ESTRUTURA
8
segunda-feira, 12 de março de 12
![Page 25: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/25.jpg)
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
9
segunda-feira, 12 de março de 12
![Page 26: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/26.jpg)
ESTRUTURA HTML5
10
• Estruturas vem sendo “layoutadas” usando muitos divs• Engenheiros do Google catalogaram muitos divs com id ou classes
iguais
segunda-feira, 12 de março de 12
![Page 27: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/27.jpg)
ESTRUTURA HTML5
11
• Proposta de criação de tags específicas para evitar uso excessivo de divs
• Essas tags padronizam a nomenclatura usada em estrutura semanticamente comuns
segunda-feira, 12 de março de 12
![Page 28: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/28.jpg)
ESTRUTURA HTML5
12
• 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.
segunda-feira, 12 de março de 12
![Page 29: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/29.jpg)
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
![Page 30: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/30.jpg)
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
![Page 31: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/31.jpg)
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
![Page 32: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/32.jpg)
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>
16
segunda-feira, 12 de março de 12
![Page 33: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/33.jpg)
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
17
segunda-feira, 12 de março de 12
![Page 34: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/34.jpg)
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
18
segunda-feira, 12 de março de 12
![Page 35: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/35.jpg)
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
![Page 36: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/36.jpg)
20
ESTUDO DE CASO 1
segunda-feira, 12 de março de 12
![Page 37: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/37.jpg)
20
ESTUDO DE CASO 1
Análise de um site HTML5
thefuturemckeowns.com
segunda-feira, 12 de março de 12
![Page 38: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/38.jpg)
20
ESTUDO DE CASO 1menu principal do site: <nav><ul><li>
segunda-feira, 12 de março de 12
![Page 39: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/39.jpg)
20
ESTUDO DE CASO 1menu principal do site: <nav><ul><li>
Seção da galeria de fotos: <section> com tags <div> internas
segunda-feira, 12 de março de 12
![Page 40: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/40.jpg)
20
ESTUDO DE CASO 1menu principal do site: <nav><ul><li>
segunda-feira, 12 de março de 12
![Page 41: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/41.jpg)
20
ESTUDO DE CASO 1menu principal do site: <nav><ul><li>
Duas áreas <section> e <footer> logo abaixo
segunda-feira, 12 de março de 12
![Page 42: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/42.jpg)
21
ESTUDO DE CASO
segunda-feira, 12 de março de 12
![Page 43: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/43.jpg)
22
ESTUDO DE CASO 2
segunda-feira, 12 de março de 12
![Page 44: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/44.jpg)
22
ESTUDO DE CASO 2
Que mudanças você faria para atualizá-lo ao HTML5?
segunda-feira, 12 de março de 12
![Page 45: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/45.jpg)
23
segunda-feira, 12 de março de 12
![Page 46: Html5 aula 02](https://reader034.vdocuments.pub/reader034/viewer/2022050805/558878e8d8b42a7b158b4637/html5/thumbnails/46.jpg)
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