Html5 aula 02

segunda-feira, 12 de março de 12

HTML5 ESSENCIAL
Fundamentos de todo serviço na Web


EMENTA
• Fundamentosde Web
• Documentos HTML
• Conteúdo
• Hipermídia
• Semântica
• Desempenho

3

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

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

MARCAÇÕES

6

MARCAÇÕES
• Marcações HTML são denominadas tags

6

MARCAÇÕES
• Todo arquivo HTML apresenta marcações entre angular brackets (< e >)

6

MARCAÇÕES
• Toda tag tem um nome associado. Ex.: <body>

6

MARCAÇÕES
• Tags podem ter conteúdo. Ex: Um texto em <strong>destaque</strong>

6

MARCAÇÕES
• Tags podem ser autocontidas. Ex: <br />

6

MARCAÇÕES
• Tags podem conter atributos. Ex.: <img src=“foto.gif” />

6

MARCAÇÕES
• Tags podem conter atributos. Ex.: <img src=“foto.gif” />
• Atributos podem ser autocontidos.
Ex.: <input type=“text” disabled />

6

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

ESTRUTURA

8

ESTRUTURA
<html>

8

ESTRUTURA
<html>
<head>

8

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

8

ESTRUTURA
<html>
<head>
</head>

8

ESTRUTURA
<html>
<head>
</head>
<body>

8

ESTRUTURA
<html>
<head>
</head>
<body>
<h1>Relou o Ôrde</h1>

8

ESTRUTURA
<html>
<head>
</head>
<body>
</body>

8

ESTRUTURA
<html>
<head>
</head>
<body>
</body>
</html>

8

ESTRUTURA
<html>
<head>
</head>
<body>
</body>
</html>
• HTML: Nó raiz
HEAD: Cabeçalho do documento
TITLE: Título da página
BODY: Corpo do documento

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 ﬁnal
• <span></span> - Simples agrupamento de texto para
qualquer ﬁnalidade

9

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

10

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

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

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 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

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

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

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

ESTUDO DE CASO 1

20

ESTUDO DE CASO 1

Análise de um site HTML5

thefuturemckeowns.com

20

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

20

ESTUDO DE CASO 1

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

20

ESTUDO DE CASO 1

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

20

ESTUDO DE CASO

21

ESTUDO DE CASO 2

22

ESTUDO DE CASO 2

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

22

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

Html5 aula 02

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Html5 aula 02

Ähnlich wie Html5 aula 02 (20)

Mehr von Jose Berardo

Mehr von Jose Berardo (11)

Html5 aula 02