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

prof. Gustavo Zimmermann | contato@swag.ag
Visão Geral
do HTML5

Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
WEB
HTML5 - Marcação
Visão Geral do HTML5

Pilares da Web
HTTP
WEB
HTML5 - Marcação

Pilares da Web
HTTP
HTML
WEB
HTML5 - Marcação

• 1990 - Criação do Protocolo HTTP e do HTML.
HTML5 - Marcação

HTML5 - Marcação
• 06/08/1991
Primeiro site da Web

HTML5 - Marcação
• 1992
NCSA MOSAIC

HTML5 - Marcação
• 1994
Desenvolvedores saem do Mosaic

HTML5 - Marcação
• IBM Web Explorer
• UDI WWW
• Internet Explorer
• 1995
Surgem novos Navegadores

HTML5 - Marcação
86%
14%
• 1996
Arrogância

HTML5 - Marcação
11%
89%
• 1998
IE já instalado no Windows

• 1999
America Online compra o Netscape
HTML5 - Marcação
11%
89%
$$$

Uso de Navegadores (MUNDO)
MUNDO: Abril/2015 (StatCounter)
HTML5 - Marcação
50,15%
17,53%
17,02%
9,92%
1,69%
3,69%OUTROS

Uso de Navegadores (MUNDO)
BRASIL: Abril/2015 (StatCounter)
HTML5 - Marcação
66,38%
17,74%
10,75%
2,91%
0,94%
1,27%OUTROS

HTML5 - Marcação

HTML5 - Marcação
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"

• 1990
HTML5 - Marcação
HTML1

• 1995
HTML5 - Marcação
HTML2
HTML Work Group:
•
•

• 1995
HTML5 - Marcação
HTML3
W3C comanda:

• 1997
HTML5 - Marcação
HTML4

• 2004
HTML5 - Marcação
XHTML1.0
Preocupação:
•
•

• 2007
HTML5 - Marcação
XHTML2.0
Proposta do WHATWG:
•

• 2007
HTML5 - Marcação
HTML5
Abandono:

Análise do suporte atual pelos
Navegadores e
Estratégias de Uso

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

HTML5 - Marcação
Motores de Renderização

HTML5 - Marcação
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

IDEs

HTML5 - Marcação
IDEs
Ferramentas
FREE:
PAGAS:
ONLINE:

Estrutura básica,
DOCTYPE e
charsets

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>

HTML5 - Marcação
HTML4 vs. HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<-- HTML5-->
<!DOCTYPE html>

HTML5 - Marcação
HTML4 vs. HTML5

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8">

Web Standards:
Modelos de conteúdo

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.

HTML5 - Marcação
Marcações em minúsculo
<HEAD></HEAD>
<head></head>

HTML5 - Marcação
Tipos de TAGs
• Marcação
<li> Item
<li> Item </li>
• Execução
<br > <br />

HTML5 - Marcação
Encadeamento
<b> <i> Item </b> </i>
<b> <i> Item </i> </b>

HTML5 - Marcação
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>

HTML5 - Marcação
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

HTML5 - Marcação
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.

HTML5 - Marcação
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.

HTML5 - Marcação
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

HTML5 - Marcação
Categorias
Abaixo segue como as categorias estão relacionadas de acordo com o
WHATWG:
Flow
Phrasing
Embedded
Interactive
Metadata
Heading
Sectioning

HTML5 - Marcação
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.

HTML5 - Marcação
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

HTML5 - Marcação
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

HTML5 - Marcação
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.

HTML5 - Marcação
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

HTML5 - Marcação
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).

Novos
Elementos e
Atributos

HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
section
nav

HTML5 - Marcação
article
aside
header

HTML5 - Marcação
footer
time

HTML5 - Marcação
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:

HTML5 - Marcação
• 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.

HTML5 - Marcação
• 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.

HTML5 - Marcação
• 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.

HTML5 - Marcação
• 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.

HTML5 - Marcação
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:

HTML5 - Marcação
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:

HTML5 - Marcação
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:

Elementos
modificados e
ausentes

HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
b
span
<b></b>

HTML5 - Marcação
i span
<i></i>

HTML5 - Marcação
a href
placeholder
<a></a>

HTML5 - Marcação
address
<andress></andress>

HTML5 - Marcação
hr
<hr />

HTML5 - Marcação
strong
<strong></strong>

HTML5 - Marcação
head child
<head></head >

HTML5 - Marcação
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:

HTML5 - Marcação
frame
frameset
noframes
Os elementos abaixo foram descontinuados por que ferem os princípios
de acessibilidade e usabilidade:

HTML5 - Marcação
• 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:

Vamos a
Prática

HTML5 - Marcação
Vamos começar
Organização
de Pastas

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;

HTML5 - Marcação
Vamos começar
HTML:
<tag atributo=“parâmetro”>
CSS inline:
<tag style=“atributo: parâmetro;”>

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>

Mais TAGs e
Exercício de
Fixação

<fim />

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

Mais conteúdo relacionado

Mais procurados

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

Mais de Gustavo Zimmermann

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