04 01 estrutura de um documento

htmlHyperText Mark-up LanguageLinguagem de formatação de documentos

Modelos de conteúdo Elementos em linha – InLine Elements Elementos de bloco – Block Elements

04/15/23

Modelos de conteúdo Elementos em linha – InLine Elements

Normalmente são marcadores de texto<a><strong><em><img><imput><span>

04/15/23

Modelos de conteúdo Elementos de bloco – Block Elements

São como caixas que dividem o conteúdo nas secções do layout

<div><nav><section><article><aside>

04/15/23

Regras básicas de layout Os elementos Inline podem conter outros

elementos Inline dependendo da categoria do elemento.

Exemplos: O elemento <p> pode conter um elemento <a> O elemento <a> não pode conter o elemento

<label>

04/15/23

Regras básicas de layout

04/15/23

Regras básicas de layout Os elementos Block podem conter qualquer

elemento inline:

<div><strong>...</strong></div><article><em>...</em></article>

04/15/23

Regras básicas de layout

04/15/23

Regras básicas de layoutCATEGORIASCada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:

Metadata Content Flow Content Sectioning Content Heading Content Phrasing Content Embeded Content Interactive Content

04/15/23


Metadata Content Base Link Meta NoScript Script Style Title

04/15/23


Flow Content – elementos utilizados no body a abbr address area (se for descendente do elemento map) article aside audio b

04/15/23


Flow Content – elementos utilizados no body Bdo (bi-directional override - rtl) Blockquote Br Button Canvas Cite Code Command

04/15/23


Flow Content – elementos utilizados no body Datalist Del Details Dfn Div DL Em Embed

04/15/23

o FieldSeto Figureo Footero Formo H1...H6o Headero Hgroupo Hro Io iframe


Flow Content – elementos utilizados no body Img Input Ins Kbd Keygen Label Map Mark

04/15/23

o Matho Menuo Metero Navo NoScripto Objecto OLo Outputo Po pre


Flow Content – elementos utilizados no body Progress Q Samp Script Section Select small span

04/15/23

o Strongo Subo Supo Tableo Texareao Timeo Ulo Varo Videoo Text

Regras básicas de layoutCATEGORIASSectioning Content

Article Aside Nav Section

04/15/23

Regras básicas de layoutCATEGORIASHeading Content

H1 H2 H3 H4 H5 H6 hgroup

04/15/23

Regras básicas de layoutCATEGORIASPhrasing Content

a abbr area (map>area) audio b bdo br button canvas

04/15/23

• cite• code• command• datalist• del• dfn• em• Embed• i

• iframe• img• input• Ins • kbd• keygen• Label• Link• Map

Regras básicas de layoutCATEGORIASPhrasing Content

Mark Meter Noscript Object Output Progress Samp Script Select Small

04/15/23

• Span• strong• Sub• Sup• Svg• Texarea• Time• Var• Video• Text

Regras básicas de layoutCATEGORIASEmbeded Content

Audio Canvas Iframe Img Math Object Svg Video

04/15/23

Novos Elementos Estruturais do html5

Estrutura base de um documento:

<!DOCTYPE html><html lang=“pt”>

<head><meta charset=Latin-1>

</head><body>

….<body>

</html>

Estrutura base do elemento BODY:


Estrutura base de um documento:

<!DOCTYPE html><html lang=“pt”>

<head><meta charset=Latin-1>

</head><body>

<HEADER>…</HEADER><SECTION>…</SECTION><ARTICLE>…</ARTICLE><NAV>…</NAV><ASIDE>…<ASIDE><FOOTER>…</FOOTER>

<body></html>


BODYHEADER

NAV

SECTIONHEADER

ARTICLE

HEADER

ASIDE

FOOTER

<P>...

<P>...ARTICLE

HEADER

ASIDE

FOOTER

<P>...

FOOTER

SECTION ASIDEHEADER

NAV

<P>...

FOOTER


FOOTER

FOOTER

Estrutura do elemento <body>Elementos semânticos do html5

html 5

ExercícioDefina a secção header:

<!doctype html><html lang=“pt”>

<head><meta charset=ISO-8859-1> <title>Benvindo ao html</title>

</head><body>

<header>

</header><nav></nav>

</body></html>

Deve conter o logotipo ou barra superior e pode conter

a barra de navegação embora não seja o mais

indicado.Deve conter elementos fixos

de um site

html 5 Exercício5. Defina a secção header:



</head><body>

<header><h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2>


</body></html>

html 5 Exercício5. Defina a secção header:



</head><body>

<header><h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2><img src=“logo.gif”>


</body></html>

E se não quiser que o <h2> apareça no outline da

página ?Como ver o header como

um único elemento?

Exercício5. Defina a secção header:



</head><body>

<header>

<hgroup><h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2><img src=“logo.gif”>

</hgroup></header>

html 5

Exercício5. Defina a secção header:



</head><body>

<header> <hgroup>

<h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2><img src=“logo.gif”>

</hgroup></header>

html 5

Exercício5. Defina a secção nav:



</head><body>

<header><h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2>

</header><nav>

</nav></body>

</html>

Deve conter os elementos de navegação principal de uma

página.Links / botões.

Pode conter outros elementos que não navegação.

html 5

Exercício5. Defina a secção nav:…

<body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> <ul>

<li><a href=“viagens.htm” title=“Viagens”>Viagens</a></li><li><a href=“missao.htm” title=“Aquilo em que acreditamos”>Missão</a></li><li><a href=“recursos.htm” title=“Planeie os seus rercursos”>Recursos</a></li> <li><a href=“exploradores.htm” title=“A nossa Comunidade”>Exploradores</a></li> <li><a href=“contactos.htm” title=“Contacte-nos” class=“ultimo”>Contactos</a></li>

</ul> </nav>

</body></html>

ver

html 5

ver

Deve ser utilizado quando existir um resumo por tópicos

do documento.“Document Outline” (esboço do documento) ou conteúdo

de introdução.

Exercício6. Defina a secção section:<!doctype html><html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header>...</header> <nav>...</nav> <section> </section> </body></html>

Exercício6. Defina a secção section:<!doctype html>... <section> <h1>Emprersa de Viagens</h1> <p>Dê a volta ao mundo connosco em 80 dias.</p> <p>Consulte a nossa oferta nesta página</p>

</section> ...</html>

ver

ver

Exercício6. Cada <section> pode conter o seuPróprio <header>:<!doctype html>... <section>

<header><h1>Quem Somos</h1></header> <h1>Emprersa de Viagens</h1> <p>Dê a volta ao mundo connosco em 80 dias.</p> <p>Consulte a nossa oferta nesta página</p>

</section> ...</html>

Deve ser um conteúdo

independente e auto-contido que

possa ser reutilizado.

Exercício7. Defina a secção <article>

38

html 5

Deve ser um conteúdo

independente e auto-contido que

possa ser reutilizado.

Blog Post

Notícias Sobre O sitePromoções

Exercício7. Defina a secção <article>

39

html 5

ver

Exercício7. Defina a secção <article>...<body>...

</section> <article> <h1>Artigos em promoção</h1> <ul> <li><h2>Viagem às Maldivas</h2></li> <li><h2>Viagem a Marrocos</h2></li> </ul> </article>

40

html 5 Exercício8. Defina a secção <aside>

Deve ser conter informação

relacionada com a informação do

<article> mas que poderia ser usada

como conteúdo independente

41


Deve ser conter informação

relacionada com a informação do

<article> mas que poderia ser usada

como conteúdo independente

InformaçãoComplementar

Conteúdo independente

42

SECTION –Economia


HEADER - Expresso

ASIDE – Resgate à Grécia

ASIDE – Resgate a Portugal

HEADEROs Resgates Financeiros

da UE

ARTICLEO comissário europeu xpto

rerferiu hoje nas suas declarações à.....

NAV•Política

• Economia• Desporto

43

SECTION –Economia


HEADER - Expresso

ASIDE - Comissárioviu-se grego

NAV•Política


ASIDEO local onde se coloca o

ASIDE indica a sua função neste caso só diz rrespeito

a um artigo

HEADEROs Resgates Financeiros

da UE



44

html 5 Exercício9. Defina <footer>

Não é uma secção mas uma descrição de uma secção.

HEADER - Expresso

HEADEROs Rresgates Financeiros

da UE



NAV•Política




FOOTER

FOOTER

SECTION –Economia

FOOTER

45

html 5 Exercício9. Defina <footer>

Pode colocar mais de um footer e não temde ser no fim da página.

HEADER - Expresso

NAV•Política




FOOTER

FOOTER

SECTION –Economia

FOOTER

HEADEROs Rresgates Financeiros

da UE



FOOTER

46

html 5A forma como hirerquizamos o código de html5 vai influenciar o modo como os motores de busca e os geradores de código automático vão interpretar os dados.

HTML5Como decidir que elemento utilizar

html 5

48


O elemento deve iniciar uma nova Secção ?

html 5

49



NÃO

html 5

50



NÃO

conteúdo é introdutório ?

html 5

51



NÃO

• O conteúdo é introdutório ?

SIM HEADER

html 5

52


NÃO


html 5

53


NÃO


O conteúdo tem informação sobre o autor,

links rerlacionados, ou informação legal ?

SIM FOOTER

html 5

54


NÃO




SIM FOOTER

Pode não estar no fundo

da página

html 5

55


NÃO



html 5

56


NÃO



O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para

um ID ou Class ?

html 5

57



um ID ou Class ?

Só por questão visual

DIV

html 5

58



um ID ou Class ?

Não é conteúdopara uma secção

aside

html 5

59



SIM

html 5

60



SIM

O conteúdo faz parte da navegação principal da

página?

html 5

61


SIM

SIM NAV

html 5

Usar só para anavegação principal



página?

62



página?

NÃO

html 5

63



página?

NÃO

O conteúdo é auto-contido e poderia ser usado de forma

independente ?

html 5

64


SIM ARTICLE

html 5


página?

NÃO

O conteúdo é auto-contido e poderia ser usado de forma

independente ?

65


O conteúdo é auto-contido e poderia ser

usado de forma independente ?

SIM ARTICLE

NÃO

Está relacionado apenas de forma tangencial com

o conteúdo que o rodeia ?

html 5

66


O conteúdo é auto-contido e poderia ser

usado de forma independente ?

SIM ARTICLE

Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ?

SIM ASIDE

html 5

NÃO

67


SIM

NÃO

ASIDEEstá relacionado apenas de forma tanjencial com o conteúdo que o rodeia ?

É conteúdo agrupado por tema, e pode ter o seu

próprio header e footer?

html 5

68


SIM

NÃO

ASIDEEstá relacionado apenas de forma tanjencial com o conteúdo que o rodeia ?

É conteúdo agrupado por tema, e ter o seu próprio

header e footer?SIM SECTION

html 5

69


SIM

NÃO

É conteúdo agrupado por tema, e ter o seu próprio

header e footer?SECTION

Use um <h...> para criar uma secção

implicitamente

html 5

70

RESUMOTags (ou marcadores), elementos e atributosEstrutura base de um documento HTMLCodificação de caracteres e definição de idiomaOs primeiros novos elementos estruturais do HTML5:

Header, Nav, Aside, Footer, Section, Article

html 5

04 01 estrutura de um documento

Technology

Transcript of 04 01 estrutura de um documento