html5 básico: marcação (aula 1)
DESCRIPTION
Curso de Extensão em Desenvolvimento Web - Módulo I: HTML5. Curso de Sistemas de Informação da ULBRA Cachoeira do SulTRANSCRIPT
![Page 1: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/1.jpg)
Aula 1:
![Page 2: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/2.jpg)
![Page 3: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/3.jpg)
2003: Téc. Informática (EMAI)
2008: 1ª Agência Digital
2007: Microlins
2010: Abertura de Agência Digital
2011: Incorporação da Agência
2012: Gerencia de Projetos – Estratégia e Ação (ESPM)
2013: Analista de Sistemas (ULBRA)
2014: MBA Gestão de Projetos (UNINTER)
2010: Senac
2009: Primeira Palestra (SEDW)
2014: Abertura da 2ª Agência Digital
![Page 4: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/4.jpg)
Projetos
![Page 5: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/5.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Links
1. Portfolio : http://gust4vo.com
2. Site do Curso: http://gust4vo.com/cursos/extensaosi
3. E-mail: [email protected]
Acessos
![Page 7: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/7.jpg)
prof. Gustavo Zimmermann | [email protected]
Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:
URI
WEB
HTML5 - Marcação
Visão Geral do HTML5
![Page 8: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/8.jpg)
prof. Gustavo Zimmermann | [email protected]
Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:
URI
HTT
P
WEB
HTML5 - Marcação
Visão Geral do HTML5
![Page 9: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/9.jpg)
prof. Gustavo Zimmermann | [email protected]
Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:
URI
HTT
P
HTM
L
WEB
HTML5 - Marcação
Visão Geral do HTML5
![Page 10: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/10.jpg)
prof. Gustavo Zimmermann | [email protected]
• 1990 - Criação do Protocolo HTTP e do HTML.
HTML5 - Marcação
Visão Geral do HTML5
![Page 11: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/11.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Visão Geral do HTML5
• 06/08/1991 Primeiro site da Web
![Page 12: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/12.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Visão Geral do HTML5
• 1992 NCSA MOSAIC
![Page 13: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/13.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Visão Geral do HTML5
• 1994 Desenvolvedores saem do Mosaic
![Page 14: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/14.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Visão Geral do HTML5
• IBM Web Explorer • UDI WWW • Internet Explorer
• 1995 Surgem novos Navegadores
![Page 15: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/15.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Visão Geral do HTML5
86% 14%
• 1996 Arrogância
![Page 16: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/16.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
• 1998 IE já instalado no Windows
![Page 17: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/17.jpg)
prof. Gustavo Zimmermann | [email protected]
• 1999 America Online compra o Netscape
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
$$$
![Page 18: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/18.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 19: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/19.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 22: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/22.jpg)
prof. Gustavo Zimmermann | [email protected]
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"
![Page 24: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/24.jpg)
prof. Gustavo Zimmermann | [email protected]
• 1995
HTML5 - Marcação
Visão Geral do HTML5
HTML2 HTML Work Group: •
•
![Page 25: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/25.jpg)
prof. Gustavo Zimmermann | [email protected]
• 1995
HTML5 - Marcação
Visão Geral do HTML5
HTML3 W3C comanda:
![Page 27: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/27.jpg)
prof. Gustavo Zimmermann | [email protected]
• 2004
HTML5 - Marcação
Visão Geral do HTML5
XHTML1.0 Preocupação:
•
•
![Page 28: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/28.jpg)
prof. Gustavo Zimmermann | [email protected]
• 2007
HTML5 - Marcação
Visão Geral do HTML5
XHTML2.0 Proposta do WHATWG: •
![Page 29: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/29.jpg)
prof. Gustavo Zimmermann | [email protected]
• 2007
HTML5 - Marcação
Visão Geral do HTML5
HTML5 Abandono:
![Page 30: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/30.jpg)
prof. Gustavo Zimmermann | [email protected]
Análise do suporte atual pelos
Navegadores e Estratégias de Uso
![Page 31: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/31.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 32: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/32.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
![Page 33: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/33.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 37: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/37.jpg)
prof. Gustavo Zimmermann | [email protected]
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>
![Page 38: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/38.jpg)
prof. Gustavo Zimmermann | [email protected]
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>
![Page 39: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/39.jpg)
prof. Gustavo Zimmermann | [email protected]
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">
![Page 41: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/41.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 42: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/42.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Marcações em minúsculo
<HEAD></HEAD>
<head></head>
![Page 43: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/43.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de TAGs
• Marcação <li> Item
<li> Item </li>
• Execução <br > <br />
![Page 44: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/44.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Encadeamento
<b> <i> Item </b> </i>
<b> <i> Item </i> </b>
![Page 45: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/45.jpg)
prof. Gustavo Zimmermann | [email protected]
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>
![Page 46: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/46.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 47: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/47.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 48: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/48.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 49: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/49.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 50: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/50.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 51: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/51.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 52: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/52.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 53: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/53.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 54: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/54.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 55: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/55.jpg)
prof. Gustavo Zimmermann | [email protected]
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
![Page 56: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/56.jpg)
prof. Gustavo Zimmermann | [email protected]
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).
![Page 58: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/58.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
section
nav
![Page 59: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/59.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
article
aside
header
![Page 60: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/60.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
footer
time
![Page 61: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/61.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 62: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/62.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 63: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/63.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 64: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/64.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 65: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/65.jpg)
prof. Gustavo Zimmermann | [email protected]
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.
![Page 66: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/66.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 67: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/67.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 68: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/68.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 70: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/70.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
b
span
<b></b>
![Page 71: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/71.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
i span
<i></i>
![Page 72: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/72.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
a href
placeholder
<a></a>
![Page 73: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/73.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
address
<andress></andress>
![Page 74: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/74.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
hr
<hr />
![Page 75: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/75.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
strong
<strong></strong>
![Page 76: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/76.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
head child
<head></head >
![Page 77: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/77.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 78: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/78.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 79: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/79.jpg)
prof. Gustavo Zimmermann | [email protected]
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:
![Page 82: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/82.jpg)
prof. Gustavo Zimmermann | [email protected]
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;
![Page 83: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/83.jpg)
prof. Gustavo Zimmermann | [email protected]
HTML5 - Marcação
Vamos começar
HTML:
<tag atributo=“parâmetro”>
CSS inline:
<tag style=“atributo: parâmetro;”>
![Page 84: HTML5 Básico: Marcação (aula 1)](https://reader030.vdocuments.pub/reader030/viewer/2022013121/558afeb6d8b42a4c268b4575/html5/thumbnails/84.jpg)
prof. Gustavo Zimmermann | [email protected]
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>