html5 aula 02

segunda-feira, 12 de março de 12

HTML5 ESSENCIALFundamentos de todo serviço na Web


• Fundamentos de Web• Documentos HTML• Conteúdo• Hipermídia• Semântica• Desempenho

EMENTA

3


• 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


• 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


MARCAÇÕES

6


• Marcações HTML são denominadas tags

MARCAÇÕES

6


• Marcações HTML são denominadas tags• Todo arquivo HTML apresenta marcações entre angular brackets (< e >)

MARCAÇÕES

6


• 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


• 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


• 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


• 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


• 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


• 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


ESTRUTURA

8


<html>

ESTRUTURA

8


<html><head>

ESTRUTURA

8


<html><head>

<title>Relou o Ôrde</title>

ESTRUTURA

8


<html><head>

<title>Relou o Ôrde</title></head>

ESTRUTURA

8


<html><head>

<title>Relou o Ôrde</title></head><body>

ESTRUTURA

8


<html><head>


<h1>Relou o Ôrde</h1>

ESTRUTURA

8


<html><head>


<h1>Relou o Ôrde</h1></body>

ESTRUTURA

8


<html><head>



</html>

ESTRUTURA

8


<html><head>



</html>• HTML: Nó raiz

HEAD: Cabeçalho do documentoTITLE: Título da páginaBODY: Corpo do documento

ESTRUTURA

8


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


ESTRUTURA HTML5

10

• Estruturas vem sendo “layoutadas” usando muitos divs• Engenheiros do Google catalogaram muitos divs com id ou classes

iguais


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


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.


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


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


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


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


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


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


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


http://www.w3.org/TR/html4/strict.dtd




http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

20

ESTUDO DE CASO 1


20

ESTUDO DE CASO 1

Análise de um site HTML5

thefuturemckeowns.com


http://thefuturemckeowns.com/


20

ESTUDO DE CASO 1menu principal do site: <nav><ul><li>




20


Seção da galeria de fotos: <section> com tags <div> internas




20





20


Duas áreas <section> e <footer> logo abaixo




21

ESTUDO DE CASO


22

ESTUDO DE CASO 2


22

ESTUDO DE CASO 2

Que mudanças você faria para atualizá-lo ao HTML5?


http://www.it.eku.edu/

http://www.it.eku.edu/

23


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


http://www.ibm.com/developerworks/library/x-html5/

http://www.ibm.com/developerworks/library/x-html5/

http://html5doctor.com/you-can-still-use-div/

http://html5doctor.com/you-can-still-use-div/

http://www.impressivewebs.com/html5-section/

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://www.maujor.com/tutorial/acessibilidade-na-html5.php

http://en.wikipedia.org/wiki/Quirks_mode

http://en.wikipedia.org/wiki/Quirks_mode

http://www.maujor.com/tutorial/apoio_haslayout/quirksmode.html

http://www.maujor.com/tutorial/apoio_haslayout/quirksmode.html

html5 aula 02

Documents