html5 básico: marcação (aula 1)

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

Projetos

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 - Marcação

1. Portfolio : http://gust4vo.com

2. Site do Curso: http://gust4vo.com/cursos/extensaosi

3. E-mail: gustavo@swag.ag

Acessos

Visão Geral do HTML5

Pilares da Web De acordo com o W3C a Web é baseada em 3 pilares:

HTML5 - Marcação

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

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

• 1998 IE já instalado no Windows

• 1999 America Online compra o Netscape

HTML5 - Marcação

Uso de Navegadores (MUNDO) MUNDO: Abril/2015 (StatCounter)

HTML5 - Marcação

50,15%

17,53%

17,02%

3,69% OUTROS

Uso de Navegadores (MUNDO) BRASIL: Abril/2015 (StatCounter)

HTML5 - Marcação

66,38%

17,74%

10,75%

1,27% OUTROS

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

• 1995

HTML5 - Marcação

HTML2 HTML Work Group: •

• 1995

HTML5 - Marcação

HTML3 W3C comanda:

• 1997

HTML5 - Marcação

• 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

Trident

Presto

HTML5 - Marcação

Ferramentas

PAGAS:

ONLINE:

Estrutura básica,

DOCTYPE e charsets

HTML5 - Marcação

Estrutura básica, DOCTYPE e charsets

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

Web Standards: Modelos de conteúdo

HTML5 - Marcação

Web Standards: Modelos de conteúdo;

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

HTML5 - Marcação

Tipos de TAGs

• Marcação <li> Item

• Execução <br > <br />

HTML5 - Marcação

Encadeamento

HTML5 - Marcação

Indentação do HTML

</div>

</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:

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

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:

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:

canvas

iframe

object

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

Elemento/Atributo Descrição

section

HTML5 - Marcação

article

header

HTML5 - Marcação

footer

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

• O atributo summary na tag table.

Os atributos abaixo foram descontinuados:

Elementos modificados e ausentes

HTML5 - Marcação

Elementos modificados

<b></b>

HTML5 - Marcação

i span

<i></i>

HTML5 - Marcação

a href

placeholder

<a></a>

HTML5 - Marcação

address

HTML5 - Marcação

<hr />

HTML5 - Marcação

strong

HTML5 - Marcação

head child

HTML5 - Marcação

Elementos ou atributos descontinuados

basefont

center

strike

Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:

HTML5 - Marcação

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

CSS inline:

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)

Internet

html5 sensitivo

web e html5

html5 final

html5 ignition

aula html5

html5 - tags semânticas

html5 - w3c · 2020-06-10 · futuro da web - html5 ....

unb 2012.1 - dweb - 04 - html5 básico - parte iii

minicurso de html básico - atualizado para html5

apostila html5 - w3c

html5 fisl15

html5 aula 01

semântica html5

html5 - pedro rosa

html curso bÁsico - clubedainformatica.com.br · html –...

html5 - w3c...html4 + css 56 html5 - futuro da web futuro da...

html5 & css3

desbravando o html5

html5 css3 -...

versão tasy html5