SlideShare uma empresa Scribd logo
Aula 1:
prof. Gustavo Zimmermann | contato@swag.ag
Visão Geral
do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
WEB
HTML5 - Marcação
Visão Geral do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
HTTP
WEB
HTML5 - Marcação
Visão Geral do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
HTTP
HTML
WEB
HTML5 - Marcação
Visão Geral do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
• 1990 - Criação do Protocolo HTTP e do HTML.
HTML5 - Marcação
Visão Geral do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 06/08/1991
Primeiro site da Web
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 1992
NCSA MOSAIC
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 1994
Desenvolvedores saem do Mosaic
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• IBM Web Explorer
• UDI WWW
• Internet Explorer
• 1995
Surgem novos Navegadores
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
86%
14%
• 1996
Arrogância
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
• 1998
IE já instalado no Windows
prof. Gustavo Zimmermann | contato@swag.ag
• 1999
America Online compra o Netscape
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
$$$
prof. Gustavo Zimmermann | contato@swag.ag
Uso de Navegadores (MUNDO)
MUNDO: Abril/2015 (StatCounter)
HTML5 - Marcação
Visão Geral do HTML5
50,15%
17,53%
17,02%
9,92%
1,69%
3,69%OUTROS
prof. Gustavo Zimmermann | contato@swag.ag
Uso de Navegadores (MUNDO)
BRASIL: Abril/2015 (StatCounter)
HTML5 - Marcação
Visão Geral do HTML5
66,38%
17,74%
10,75%
2,91%
0,94%
1,27%OUTROS
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
5 principais novidades do navegador:
1. Escrever diretamente sobre a tela
2. Assistente pessoal
3. Leitura
4. Design minimalista
5. Rapidez
“Nosso objetivo é evitar interferir
visualmente na experiência de
navegação. A ideia é apoiá-la"
prof. Gustavo Zimmermann | contato@swag.ag
• 1990
HTML5 - Marcação
Visão Geral do HTML5
HTML1
prof. Gustavo Zimmermann | contato@swag.ag
• 1995
HTML5 - Marcação
Visão Geral do HTML5
HTML2
HTML Work Group:
•
•
prof. Gustavo Zimmermann | contato@swag.ag
• 1995
HTML5 - Marcação
Visão Geral do HTML5
HTML3
W3C comanda:
prof. Gustavo Zimmermann | contato@swag.ag
• 1997
HTML5 - Marcação
Visão Geral do HTML5
HTML4
prof. Gustavo Zimmermann | contato@swag.ag
• 2004
HTML5 - Marcação
Visão Geral do HTML5
XHTML1.0
Preocupação:
•
•
prof. Gustavo Zimmermann | contato@swag.ag
• 2007
HTML5 - Marcação
Visão Geral do HTML5
XHTML2.0
Proposta do WHATWG:
•
prof. Gustavo Zimmermann | contato@swag.ag
• 2007
HTML5 - Marcação
Visão Geral do HTML5
HTML5
Abandono:
prof. Gustavo Zimmermann | contato@swag.ag
Análise do suporte atual pelos
Navegadores e
Estratégias de Uso
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
O desenvolvimento modular
01. SEMÂNTICA 02. ESTILOS
03. INTERATIVIDADE
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
Não há como os desenvolvedores manterem um bom nível de
compatibilidade com todos estes browsers levando em consideração a
particularidade de cada um.
MOTOR BROWSER
Webkit
Gecko
Trident
Presto
prof. Gustavo Zimmermann | contato@swag.ag
IDEs
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
IDEs
Ferramentas
FREE:
PAGAS:
ONLINE:
prof. Gustavo Zimmermann | contato@swag.ag
Estrutura básica,
DOCTYPE e
charsets
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Estrutura básica, DOCTYPE e charsets
TAGs
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. <head>
4. <meta charset="UTF-8">
5. <title>Olá, Mundo!</title>
6. </head>
7. <body>
8. <p>Estrutura básica do HTML5</p>
9. </body>
10. </html>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Estrutura básica, DOCTYPE e charsets
HTML4 vs. HTML5
<!-- XHTML 1.0-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<-- HTML5-->
<!DOCTYPE html>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Estrutura básica, DOCTYPE e charsets
HTML4 vs. HTML5
<!-- HTML4-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- HTML5-->
<meta charset="utf-8">
prof. Gustavo Zimmermann | contato@swag.ag
Web Standards:
Modelos de conteúdo
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
XHTML
Quando a W3C propôs uma versão do
HTML baseado em XML ela tinha a
intenção de organizar melhor o código
HTML. Esta organização tem como
base 5 principais regras.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Marcações em minúsculo
<HEAD></HEAD>
<head></head>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de TAGs
• Marcação
<li> Item
<li> Item </li>
• Execução
<br > <br />
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Encadeamento
<b> <i> Item </b> </i>
<b> <i> Item </i> </b>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Indentação do HTML
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
</div>
<div>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<ol>
</div>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Caminhos Absolutos e Relativos
• Absoluto
http://gust4vo.com/cursos/wp-
content/uploads/2014/07/Plano-de-Trabalho-
HTML5.pdf
• Relativo
Plano-de-Trabalho-HTML5.pdf
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de Elementos
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de
elementos: elementos de linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns
exemplos: a, strong, em, img, input, abbr, span.
Os elementos de blocos são como caixas, que dividem o conteúdo nas
seções do layout.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de Elementos:
• Os elementos de linha podem conter outros elementos de
linha, dependendo da categoria que ele se encontra. Por exemplo: o
elemento a não pode conter o elemento label.
• Os elementos de linha nunca podem conter elementos de
bloco.
• Elementos de bloco sempre podem conter elementos de
linha.
• Elementos de bloco podem conter elementos de bloco,
dependendo da categoria que ele se encontra. Por exemplo, um
parágrafo não pode conter um DIV. Mas o contrário é possível.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias
Cada elemento no HTML pode ou não fazer parte de um grupo de
elementos com características similares. As categorias estão a seguir.
Manteremos os nomes das categorias em inglês para que haja um melhor
entendimento:
1. Metadata content
2. Flow content
3. Sectioning content
4. Heading content
5. Phrasing content
6. Embedded content
7. Interactive content
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias
Abaixo segue como as categorias estão relacionadas de acordo com o
WHATWG:
Flow
Phrasing
Embedded
Interactive
Metadata
Heading
Sectioning
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
A maioria dos elementos utilizados no body e aplicações são categorizados
como Flow Content. São eles:
a, abbr, address, area (se for um decendente de um elemento de mapa), article,
aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command,
datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2,
h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label,
link (se o atributo itemprop for utilizado), map, mark, math, menu, meta (se o
atributo itemprop for utilizado), meter, nav, noscript, object, ol, output, p, pre,
progress, q, ruby, samp, script, section, select, small, span, strong, style (se o
atributo scoped for utilizado), sub, sup, svg, table, textarea, time, ul, var, video,
wbr, text*
* Sob algumas circunstâncias.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Estes elementos definem um grupo de cabeçalhos e rodapés. Basicamente
são elementos que juntam grupos de textos no documento.:
article
aside
nav
section
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Os elementos da categoria Heading definem uma seção de cabeçalhos, que
podem estar contidos em um elemento na categoria Sectioning:
h1
h2
h3
h4
h5
h6
hgroup
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Fazem parte desta categoria elementos que marcam o texto do documento,
bem como os elementos que marcam este texto dentro do elemento de
parágrafo:
a, abbr, area (se ele for descendente de um elemento de mapa), audio, b,
bdo, br, button, canvas, cite, code, command, datalist, del (se ele
contiver um elemento da categoria de Phrasing), dfn, em, embed, i,
iframe, img, input, ins (se ele contiver um elemento da categoria de
Phrasing), kbd, keygen, label, link (se o atributo itemprop for utilizado),
map (se apenas ele contiver um elemento da categoria de Phrasing),
mark, math, meta (se o atributo itemprop for utilizado), meter, noscript,
object, output, progress, q, ruby, samp, script, select, small, span,
strong, sub, sup, svg, textarea, time, var, video, wbr, text.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Na categoria Embedded, há elementos que importam outra fonte de
informação para o documento:
audio
canvas
embed
iframe
img
math
object
svg
video
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Interactive Content são elementos que fazem parte da interação de usuário:
a, audio (se o atributo control for utilizado), button, details,
embed, iframe, img (se o atributo usemap for utilizado),
input (se o atributo type não tiver o valor hidden), keygen,
label, menu (se o atributo type tiver o valor toolbar), object
(se o atributo usemap for utilizado), select, textarea,
video (se o atributo control for utilizado).
prof. Gustavo Zimmermann | contato@swag.ag
Novos
Elementos e
Atributos
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
section
nav
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
article
aside
header
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
footer
time
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• align como atributo da tag
• caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3,
h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.
• alink, link, text e vlink como atributos da tag body.
• background como atributo da tag body.
• bgcolor como atributo da tag table, tr, td, th e body.
• border como atributo da tag table e object.
• cellpadding e cellspacing como atributos da tag table.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• char e charoff como atributos da tag
col, colgroup, tbody, td, tfoot, th, thead e tr.
• clear como atributo da tag br.
• compact como atributo da tag dl, menu, ol e ul.
• frame como atributo da tag table.
• frameborder como atributo da tag iframe.
• height como atributo da tag td e th.
• hspace e vspace como atributos da tag img e object.
• marginheight e marginwidth como atributos da tag iframe.
• noshade como atributo da tag hr.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• nowrap como atributo da tag td e th.
• rules como atributo da tag table.
• scrolling como atributo da tag iframe.
• size como atributo da tag hr.
• type como atributo da tag li, ol e ul.
• valign como atributo da tag
col, colgroup, tbody, td, tfoot, th, thead e tr.
• width como atributo da tag hr, table, td, th, col, colgroup e pre.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• rev e charset como atributos da tag link e a.
• shape e coords como atributos da tag a.
• longdesc como atributo da tag img and iframe.
• target como atributo da tag link.
• nohref como atributo da tag area.
• profile como atributo da tag head.
• version como atributo da tag html.
Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent
eles serão discutidos.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• name como atributo da tag img (use id).
• scheme como atributo da tag meta.
• archive, classid, codebase, codetype, declare e standby como
atributos da tag object.
• valuetype e type como atributos da tag param.
• axis e abbr como atributos da tag td e th.
• scope como atributo da tag td.
Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent
eles serão discutidos.
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Elementos que ganham novos Atributos
• O atributo autofocus pode ser especificado nos elementos input (exceto
quando há atributo hiddenatribuído), textarea, select e button.
• A tag a passa a suportar o atributo media como a tag link.
• A tag form ganha um atributo chamado novalidate. Quando aplicado o
formulário pode ser enviado sem validação de dados.
• O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado
os indicadores da lista são colocados na ordem inversa, isto é, da forma
descendente.
Alguns elementos ganharam novos atributos:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Elementos que ganham novos Atributos
• O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos
os filhos de fieldset são desativados.
• O novo atributo placeholder pode ser colocado em inputs e textareas.
• O elemento area agora suporta os atributos hreflang e rel como os
elementos a e link
• O elemento base agora suporta o atributo target assim como o elemento a. O
atributo target também não está mais descontinuado nos
elementos a e area porque são úteis para aplicações web.
Alguns elementos ganharam novos atributos:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Outros Atributos descontinuados
• O atributo border utilizado na tag img.
• O atributo language na tag script.
• O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de
name.
• O atributo summary na tag table.
Os atributos abaixo foram descontinuados:
prof. Gustavo Zimmermann | contato@swag.ag
Elementos
modificados e
ausentes
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
b
span
<b></b>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
i span
<i></i>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
a href
placeholder
<a></a>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
address
<andress></andress>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
hr
<hr />
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
strong
<strong></strong>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
head child
<head></head >
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
basefont
big
center
font
s
strike
tt
u
Os elementos abaixo foram descontinuados por que seus efeitos são
apenas visuais:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
frame
frameset
noframes
Os elementos abaixo foram descontinuados por que ferem os princípios
de acessibilidade e usabilidade:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
• acronym não foi incluído porque criou um bocado de confusão
entre os desenvolvedores que preferiram utilizar a tag abbr.
• applet ficou obsoleto em favor da tag object.
• isindex foi substituído pelo uso de form controls.
• dir ficou obsoleto em favor da tag ul.
Os elementos abaixo não foram incluídos na especificação porque não
tiveram uso entre os desenvolvedores ou porque sua função foi substituída
por outro elemento:
prof. Gustavo Zimmermann | contato@swag.ag
Vamos a
Prática
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
Organização
de Pastas
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
Nomeações
Para a nomeação de referências precisamos respeitar 4 regras básicas:
1. Prestar atenção na escola e intercalação de Maiúsculas e Minúsculas;
2. Sem caracteres especiais (@#$%&*()+[]ªº°<>/|);
3. Sem acentuação ou pontuação (“’!?¨´`^~.:;,);
4. Underlines (_) e Traços (-) ao invés de Espaço;
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
HTML:
<tag atributo=“parâmetro”>
CSS inline:
<tag style=“atributo: parâmetro;”>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
H1 a H6:
As TAGs H1 a H6 são utilizadas para a marcação semântica e hierárquica de
títulos, como no exemplo abaixo:
<h1>Título principal</h1>
<h2>Segundo princípio</h2>
No HTML5 temos uma nova TAG chamada <hgroup> utilizada para
agrupar grupos de títulos que pertencem a uma mesma categoria:
<hgroup>
<h1>Título principal</h1>
<h2>Segundo princípio</h2>
</hgroup>
prof. Gustavo Zimmermann | contato@swag.ag
Mais TAGs e
Exercício de
Fixação
prof. Gustavo Zimmermann | contato@swag.ag
<fim />

Mais conteúdo relacionado

Mais procurados

Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Fábio Flatschart
 
HTML5
HTML5HTML5
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
Unb 2012.1 - dweb - c - técnicas
Unb   2012.1 - dweb - c - técnicasUnb   2012.1 - dweb - c - técnicas
Unb 2012.1 - dweb - c - técnicas
Claudenio Alberto
 
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
Matheus Thomaz
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Html5
Html5Html5
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
Diego Santos
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoVitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
WordPress Floripa
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
Sliedesharessbarbosa
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
Carlos Rodrigo de Araujo
 
Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
Vinicius Rocha Olivieri
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
Vitor Garcia
 

Mais procurados (20)

Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
HTML5
HTML5HTML5
HTML5
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Unb 2012.1 - dweb - c - técnicas
Unb   2012.1 - dweb - c - técnicasUnb   2012.1 - dweb - c - técnicas
Unb 2012.1 - dweb - c - técnicas
 
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Html5
Html5Html5
Html5
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoVitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 

Semelhante a HTML5 Básico: Marcação (aula 1)

Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
Rodrigo Kono
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
ssuser546d49
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
introfini
 
HTML 5 & JavaScript
HTML 5 & JavaScriptHTML 5 & JavaScript
HTML 5 & JavaScript
Giolvani de Matos
 
Um front end entre nós
Um front end entre nósUm front end entre nós
Um front end entre nós
Gabriel Do Nascimento Barbier
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
Ana Carolina Gracioso
 
Web Standards
Web StandardsWeb Standards
Web Standards
Renata Tibiriçá
 
Html 5 datainfo
Html 5   datainfoHtml 5   datainfo
Html 5 datainfo
Romário J. Santos
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
Daniel Arndt Alves
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Uni Buscapé Company
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
hellequin
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
JEANCLEVERSONPRATAS
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
Dickson Henrique Justino Daniel
 
HTML5
HTML5HTML5
Webstandards
WebstandardsWebstandards
Webstandards
Bruno Viana
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
Náiron Jcg
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
Guga Alves
 

Semelhante a HTML5 Básico: Marcação (aula 1) (20)

Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
HTML 5 & JavaScript
HTML 5 & JavaScriptHTML 5 & JavaScript
HTML 5 & JavaScript
 
Um front end entre nós
Um front end entre nósUm front end entre nós
Um front end entre nós
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Html 5 datainfo
Html 5   datainfoHtml 5   datainfo
Html 5 datainfo
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
 
HTML5
HTML5HTML5
HTML5
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 

Mais de Gustavo Zimmermann

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
Gustavo Zimmermann
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
Gustavo Zimmermann
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
Gustavo Zimmermann
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
Gustavo Zimmermann
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
Gustavo Zimmermann
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
Gustavo Zimmermann
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
Gustavo Zimmermann
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
Gustavo Zimmermann
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
Gustavo Zimmermann
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
Gustavo Zimmermann
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
Gustavo Zimmermann
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
Gustavo Zimmermann
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
Gustavo Zimmermann
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Gustavo Zimmermann
 

Mais de Gustavo Zimmermann (20)

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 

HTML5 Básico: Marcação (aula 1)

  • 2. prof. Gustavo Zimmermann | contato@swag.ag Visão Geral do HTML5
  • 3. prof. Gustavo Zimmermann | contato@swag.ag Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:URI WEB HTML5 - Marcação Visão Geral do HTML5
  • 4. prof. Gustavo Zimmermann | contato@swag.ag Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:URI HTTP WEB HTML5 - Marcação Visão Geral do HTML5
  • 5. prof. Gustavo Zimmermann | contato@swag.ag Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:URI HTTP HTML WEB HTML5 - Marcação Visão Geral do HTML5
  • 6. prof. Gustavo Zimmermann | contato@swag.ag • 1990 - Criação do Protocolo HTTP e do HTML. HTML5 - Marcação Visão Geral do HTML5
  • 7. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 • 06/08/1991 Primeiro site da Web
  • 8. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 • 1992 NCSA MOSAIC
  • 9. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 • 1994 Desenvolvedores saem do Mosaic
  • 10. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 • IBM Web Explorer • UDI WWW • Internet Explorer • 1995 Surgem novos Navegadores
  • 11. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 86% 14% • 1996 Arrogância
  • 12. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 11% 89% • 1998 IE já instalado no Windows
  • 13. prof. Gustavo Zimmermann | contato@swag.ag • 1999 America Online compra o Netscape HTML5 - Marcação Visão Geral do HTML5 11% 89% $$$
  • 14. prof. Gustavo Zimmermann | contato@swag.ag Uso de Navegadores (MUNDO) MUNDO: Abril/2015 (StatCounter) HTML5 - Marcação Visão Geral do HTML5 50,15% 17,53% 17,02% 9,92% 1,69% 3,69%OUTROS
  • 15. prof. Gustavo Zimmermann | contato@swag.ag Uso de Navegadores (MUNDO) BRASIL: Abril/2015 (StatCounter) HTML5 - Marcação Visão Geral do HTML5 66,38% 17,74% 10,75% 2,91% 0,94% 1,27%OUTROS
  • 16. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5
  • 17. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5
  • 18. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Visão Geral do HTML5 5 principais novidades do navegador: 1. Escrever diretamente sobre a tela 2. Assistente pessoal 3. Leitura 4. Design minimalista 5. Rapidez “Nosso objetivo é evitar interferir visualmente na experiência de navegação. A ideia é apoiá-la"
  • 19. prof. Gustavo Zimmermann | contato@swag.ag • 1990 HTML5 - Marcação Visão Geral do HTML5 HTML1
  • 20. prof. Gustavo Zimmermann | contato@swag.ag • 1995 HTML5 - Marcação Visão Geral do HTML5 HTML2 HTML Work Group: • •
  • 21. prof. Gustavo Zimmermann | contato@swag.ag • 1995 HTML5 - Marcação Visão Geral do HTML5 HTML3 W3C comanda:
  • 22. prof. Gustavo Zimmermann | contato@swag.ag • 1997 HTML5 - Marcação Visão Geral do HTML5 HTML4
  • 23. prof. Gustavo Zimmermann | contato@swag.ag • 2004 HTML5 - Marcação Visão Geral do HTML5 XHTML1.0 Preocupação: • •
  • 24. prof. Gustavo Zimmermann | contato@swag.ag • 2007 HTML5 - Marcação Visão Geral do HTML5 XHTML2.0 Proposta do WHATWG: •
  • 25. prof. Gustavo Zimmermann | contato@swag.ag • 2007 HTML5 - Marcação Visão Geral do HTML5 HTML5 Abandono:
  • 26. prof. Gustavo Zimmermann | contato@swag.ag Análise do suporte atual pelos Navegadores e Estratégias de Uso
  • 27. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Análise do suporte atual pelos Navegadores e Estratégias de Uso O desenvolvimento modular 01. SEMÂNTICA 02. ESTILOS 03. INTERATIVIDADE
  • 28. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Análise do suporte atual pelos Navegadores e Estratégias de Uso Motores de Renderização
  • 29. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Análise do suporte atual pelos Navegadores e Estratégias de Uso Motores de Renderização Não há como os desenvolvedores manterem um bom nível de compatibilidade com todos estes browsers levando em consideração a particularidade de cada um. MOTOR BROWSER Webkit Gecko Trident Presto
  • 30. prof. Gustavo Zimmermann | contato@swag.ag IDEs
  • 31. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação IDEs Ferramentas FREE: PAGAS: ONLINE:
  • 32. prof. Gustavo Zimmermann | contato@swag.ag Estrutura básica, DOCTYPE e charsets
  • 33. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Estrutura básica, DOCTYPE e charsets TAGs 1. <!DOCTYPE html> 2. <html lang="pt-br"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Olá, Mundo!</title> 6. </head> 7. <body> 8. <p>Estrutura básica do HTML5</p> 9. </body> 10. </html>
  • 34. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Estrutura básica, DOCTYPE e charsets HTML4 vs. HTML5 <!-- XHTML 1.0--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <-- HTML5--> <!DOCTYPE html>
  • 35. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Estrutura básica, DOCTYPE e charsets HTML4 vs. HTML5 <!-- HTML4--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTML5--> <meta charset="utf-8">
  • 36. prof. Gustavo Zimmermann | contato@swag.ag Web Standards: Modelos de conteúdo
  • 37. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; XHTML Quando a W3C propôs uma versão do HTML baseado em XML ela tinha a intenção de organizar melhor o código HTML. Esta organização tem como base 5 principais regras.
  • 38. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Marcações em minúsculo <HEAD></HEAD> <head></head>
  • 39. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Tipos de TAGs • Marcação <li> Item <li> Item </li> • Execução <br > <br />
  • 40. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Encadeamento <b> <i> Item </b> </i> <b> <i> Item </i> </b>
  • 41. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Indentação do HTML <div> <ul> <li>Item 1</li> <li>Item 2</li> <ul> </div> <div> <ol> <li>Item 1</li> <li>Item 2</li> <ol> </div>
  • 42. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Caminhos Absolutos e Relativos • Absoluto http://gust4vo.com/cursos/wp- content/uploads/2014/07/Plano-de-Trabalho- HTML5.pdf • Relativo Plano-de-Trabalho-HTML5.pdf
  • 43. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Tipos de Elementos Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos: elementos de linha e de bloco. Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong, em, img, input, abbr, span. Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout.
  • 44. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Tipos de Elementos: • Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label. • Os elementos de linha nunca podem conter elementos de bloco. • Elementos de bloco sempre podem conter elementos de linha. • Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível.
  • 45. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que haja um melhor entendimento: 1. Metadata content 2. Flow content 3. Sectioning content 4. Heading content 5. Phrasing content 6. Embedded content 7. Interactive content
  • 46. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG: Flow Phrasing Embedded Interactive Metadata Heading Sectioning
  • 47. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias: A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content. São eles: a, abbr, address, area (se for um decendente de um elemento de mapa), article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link (se o atributo itemprop for utilizado), map, mark, math, menu, meta (se o atributo itemprop for utilizado), meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style (se o atributo scoped for utilizado), sub, sup, svg, table, textarea, time, ul, var, video, wbr, text* * Sob algumas circunstâncias.
  • 48. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias: Estes elementos definem um grupo de cabeçalhos e rodapés. Basicamente são elementos que juntam grupos de textos no documento.: article aside nav section
  • 49. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias: Os elementos da categoria Heading definem uma seção de cabeçalhos, que podem estar contidos em um elemento na categoria Sectioning: h1 h2 h3 h4 h5 h6 hgroup
  • 50. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias: Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de parágrafo: a, abbr, area (se ele for descendente de um elemento de mapa), audio, b, bdo, br, button, canvas, cite, code, command, datalist, del (se ele contiver um elemento da categoria de Phrasing), dfn, em, embed, i, iframe, img, input, ins (se ele contiver um elemento da categoria de Phrasing), kbd, keygen, label, link (se o atributo itemprop for utilizado), map (se apenas ele contiver um elemento da categoria de Phrasing), mark, math, meta (se o atributo itemprop for utilizado), meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, text.
  • 51. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias: Na categoria Embedded, há elementos que importam outra fonte de informação para o documento: audio canvas embed iframe img math object svg video
  • 52. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Web Standards: Modelos de conteúdo; Categorias: Interactive Content são elementos que fazem parte da interação de usuário: a, audio (se o atributo control for utilizado), button, details, embed, iframe, img (se o atributo usemap for utilizado), input (se o atributo type não tiver o valor hidden), keygen, label, menu (se o atributo type tiver o valor toolbar), object (se o atributo usemap for utilizado), select, textarea, video (se o atributo control for utilizado).
  • 53. prof. Gustavo Zimmermann | contato@swag.ag Novos Elementos e Atributos
  • 54. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Novos elementos e atributos Elemento/Atributo Descrição section nav
  • 55. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Novos elementos e atributos Elemento/Atributo Descrição article aside header
  • 56. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Novos elementos e atributos Elemento/Atributo Descrição footer time
  • 57. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Atributos descontinuados • align como atributo da tag • caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. • alink, link, text e vlink como atributos da tag body. • background como atributo da tag body. • bgcolor como atributo da tag table, tr, td, th e body. • border como atributo da tag table e object. • cellpadding e cellspacing como atributos da tag table. Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:
  • 58. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Atributos descontinuados • char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr. • clear como atributo da tag br. • compact como atributo da tag dl, menu, ol e ul. • frame como atributo da tag table. • frameborder como atributo da tag iframe. • height como atributo da tag td e th. • hspace e vspace como atributos da tag img e object. • marginheight e marginwidth como atributos da tag iframe. • noshade como atributo da tag hr. Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:
  • 59. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Atributos descontinuados • nowrap como atributo da tag td e th. • rules como atributo da tag table. • scrolling como atributo da tag iframe. • size como atributo da tag hr. • type como atributo da tag li, ol e ul. • valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr. • width como atributo da tag hr, table, td, th, col, colgroup e pre. Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:
  • 60. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Atributos descontinuados • rev e charset como atributos da tag link e a. • shape e coords como atributos da tag a. • longdesc como atributo da tag img and iframe. • target como atributo da tag link. • nohref como atributo da tag area. • profile como atributo da tag head. • version como atributo da tag html. Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.
  • 61. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Atributos descontinuados • name como atributo da tag img (use id). • scheme como atributo da tag meta. • archive, classid, codebase, codetype, declare e standby como atributos da tag object. • valuetype e type como atributos da tag param. • axis e abbr como atributos da tag td e th. • scope como atributo da tag td. Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.
  • 62. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Elementos que ganham novos Atributos • O atributo autofocus pode ser especificado nos elementos input (exceto quando há atributo hiddenatribuído), textarea, select e button. • A tag a passa a suportar o atributo media como a tag link. • A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser enviado sem validação de dados. • O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os indicadores da lista são colocados na ordem inversa, isto é, da forma descendente. Alguns elementos ganharam novos atributos:
  • 63. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Elementos que ganham novos Atributos • O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset são desativados. • O novo atributo placeholder pode ser colocado em inputs e textareas. • O elemento area agora suporta os atributos hreflang e rel como os elementos a e link • O elemento base agora suporta o atributo target assim como o elemento a. O atributo target também não está mais descontinuado nos elementos a e area porque são úteis para aplicações web. Alguns elementos ganharam novos atributos:
  • 64. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Novos Elementos e Atributos Outros Atributos descontinuados • O atributo border utilizado na tag img. • O atributo language na tag script. • O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name. • O atributo summary na tag table. Os atributos abaixo foram descontinuados:
  • 65. prof. Gustavo Zimmermann | contato@swag.ag Elementos modificados e ausentes
  • 66. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados b span <b></b>
  • 67. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados i span <i></i>
  • 68. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados a href placeholder <a></a>
  • 69. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados address <andress></andress>
  • 70. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados hr <hr />
  • 71. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados strong <strong></strong>
  • 72. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos modificados head child <head></head >
  • 73. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos ou atributos descontinuados basefont big center font s strike tt u Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:
  • 74. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos ou atributos descontinuados frame frameset noframes Os elementos abaixo foram descontinuados por que ferem os princípios de acessibilidade e usabilidade:
  • 75. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Elementos modificados e ausentes Elementos ou atributos descontinuados • acronym não foi incluído porque criou um bocado de confusão entre os desenvolvedores que preferiram utilizar a tag abbr. • applet ficou obsoleto em favor da tag object. • isindex foi substituído pelo uso de form controls. • dir ficou obsoleto em favor da tag ul. Os elementos abaixo não foram incluídos na especificação porque não tiveram uso entre os desenvolvedores ou porque sua função foi substituída por outro elemento:
  • 76. prof. Gustavo Zimmermann | contato@swag.ag Vamos a Prática
  • 77. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Vamos começar Organização de Pastas
  • 78. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Vamos começar Nomeações Para a nomeação de referências precisamos respeitar 4 regras básicas: 1. Prestar atenção na escola e intercalação de Maiúsculas e Minúsculas; 2. Sem caracteres especiais (@#$%&*()+[]ªº°<>/|); 3. Sem acentuação ou pontuação (“’!?¨´`^~.:;,); 4. Underlines (_) e Traços (-) ao invés de Espaço;
  • 79. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Vamos começar HTML: <tag atributo=“parâmetro”> CSS inline: <tag style=“atributo: parâmetro;”>
  • 80. prof. Gustavo Zimmermann | contato@swag.ag HTML5 - Marcação Vamos começar H1 a H6: As TAGs H1 a H6 são utilizadas para a marcação semântica e hierárquica de títulos, como no exemplo abaixo: <h1>Título principal</h1> <h2>Segundo princípio</h2> No HTML5 temos uma nova TAG chamada <hgroup> utilizada para agrupar grupos de títulos que pertencem a uma mesma categoria: <hgroup> <h1>Título principal</h1> <h2>Segundo princípio</h2> </hgroup>
  • 81. prof. Gustavo Zimmermann | contato@swag.ag Mais TAGs e Exercício de Fixação
  • 82. prof. Gustavo Zimmermann | contato@swag.ag <fim />