html5 aula 02
Post on 23-Jun-2015
2.800 Views
Preview:
DESCRIPTION
TRANSCRIPT
segunda-feira, 12 de março de 12
HTML5 ESSENCIALFundamentos de todo serviço na Web
segunda-feira, 12 de março de 12
• Fundamentos de Web• Documentos HTML• Conteúdo• Hipermídia• Semântica• Desempenho
EMENTA
3
segunda-feira, 12 de março de 12
• 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
• 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
MARCAÇÕES
6
segunda-feira, 12 de março de 12
• Marcações HTML são denominadas tags
MARCAÇÕES
6
segunda-feira, 12 de março de 12
• 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
• 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
• 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
• 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
• 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
• 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
• 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
ESTRUTURA
8
segunda-feira, 12 de março de 12
<html>
ESTRUTURA
8
segunda-feira, 12 de março de 12
<html><head>
ESTRUTURA
8
segunda-feira, 12 de março de 12
<html><head>
<title>Relou o Ôrde</title>
ESTRUTURA
8
segunda-feira, 12 de março de 12
<html><head>
<title>Relou o Ôrde</title></head>
ESTRUTURA
8
segunda-feira, 12 de março de 12
<html><head>
<title>Relou o Ôrde</title></head><body>
ESTRUTURA
8
segunda-feira, 12 de março de 12
<html><head>
<title>Relou o Ôrde</title></head><body>
<h1>Relou o Ôrde</h1>
ESTRUTURA
8
segunda-feira, 12 de março de 12
<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
<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
<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
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
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
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
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
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
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
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
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
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
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
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
20
ESTUDO DE CASO 1
segunda-feira, 12 de março de 12
20
ESTUDO DE CASO 1
Análise de um site HTML5
thefuturemckeowns.com
segunda-feira, 12 de março de 12
20
ESTUDO DE CASO 1menu principal do site: <nav><ul><li>
segunda-feira, 12 de março de 12
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
20
ESTUDO DE CASO 1menu principal do site: <nav><ul><li>
segunda-feira, 12 de março de 12
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
21
ESTUDO DE CASO
segunda-feira, 12 de março de 12
22
ESTUDO DE CASO 2
segunda-feira, 12 de março de 12
22
ESTUDO DE CASO 2
Que mudanças você faria para atualizá-lo ao HTML5?
segunda-feira, 12 de março de 12
23
segunda-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
24
segunda-feira, 12 de março de 12
top related