86
Aula 1:

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

Embed Size (px)

DESCRIPTION

Curso de Extensão em Desenvolvimento Web - Módulo I: HTML5. Curso de Sistemas de Informação da ULBRA Cachoeira do Sul

Citation preview

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

Aula 1:

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

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)

Projetos

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

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 6: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

Visão Geral do HTML5

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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 20: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

HTML5 - Marcação

Visão Geral do HTML5

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

prof. Gustavo Zimmermann | [email protected]

HTML5 - Marcação

Visão Geral do HTML5

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

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 23: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

• 1990

HTML5 - Marcação

Visão Geral do HTML5

HTML1

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

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)

prof. Gustavo Zimmermann | [email protected]

• 1995

HTML5 - Marcação

Visão Geral do HTML5

HTML3 W3C comanda:

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

prof. Gustavo Zimmermann | [email protected]

• 1997

HTML5 - Marcação

Visão Geral do HTML5

HTML4

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

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)

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)

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)

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)

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)

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)

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 34: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

IDEs

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

prof. Gustavo Zimmermann | [email protected]

HTML5 - Marcação

IDEs

Ferramentas

FREE:

PAGAS:

ONLINE:

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

prof. Gustavo Zimmermann | [email protected]

Estrutura básica,

DOCTYPE e charsets

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

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)

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)

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 40: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

Web Standards: Modelos de conteúdo

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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 57: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

Novos Elementos e Atributos

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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 69: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

Elementos modificados e ausentes

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

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 80: HTML5 Básico: Marcação (aula 1)

prof. Gustavo Zimmermann | [email protected]

Vamos a Prática

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

prof. Gustavo Zimmermann | [email protected]

HTML5 - Marcação

Vamos começar

Organização de Pastas

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

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)

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)

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>

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

prof. Gustavo Zimmermann | [email protected]

Mais TAGs e Exercício de Fixação

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

prof. Gustavo Zimmermann | [email protected]

<fim />