04 01 estrutura de um documento
TRANSCRIPT
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
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 Base Link Meta NoScript Script Style Title
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:
Flow Content – elementos utilizados no body a abbr address area (se for descendente do elemento map) article aside audio b
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:
Flow Content – elementos utilizados no body Bdo (bi-directional override - rtl) Blockquote Br Button Canvas Cite Code Command
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:
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
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:
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
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:
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:
Novos Elementos Estruturais do html5
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>
Novos Elementos Estruturais do html5
BODYHEADER
NAV
SECTIONHEADER
ARTICLE
HEADER
ASIDE
FOOTER
<P>...
<P>...ARTICLE
HEADER
ASIDE
FOOTER
<P>...
FOOTER
SECTION ASIDEHEADER
NAV
<P>...
FOOTER
Novos Elementos Estruturais do html5
FOOTER
FOOTER
Estrutura do elemento <body>Elementos semânticos do html5
html 5
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:
<!doctype html><html lang=“pt”>
<head><meta charset=ISO-8859-1> <title>Benvindo ao html</title>
</head><body>
<header><h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2>
</header><nav></nav>
</body></html>
html 5 Exercício5. Defina a secção header:
<!doctype html><html lang=“pt”>
<head><meta charset=ISO-8859-1> <title>Benvindo ao html</title>
</head><body>
<header><h1>Explore o continente Europeu</h1><h2>Onde quer ir hoje?</h2><img src=“logo.gif”>
</header><nav></nav>
</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:
<!doctype html><html lang=“pt”>
<head><meta charset=ISO-8859-1> <title>Benvindo ao html</title>
</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:
<!doctype html><html lang=“pt”>
<head><meta charset=ISO-8859-1> <title>Benvindo ao html</title>
</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:
<!doctype html><html lang=“pt”>
<head><meta charset=ISO-8859-1> <title>Benvindo ao html</title>
</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
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
InformaçãoComplementar
Conteúdo independente
42
SECTION –Economia
html 5 Exercício8. Defina a secção <aside>
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
html 5 Exercício8. Defina a secção <aside>
HEADER - Expresso
ASIDE - Comissárioviu-se grego
NAV•Política
• Economia• Desporto
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
ARTICLEO comissário europeu xpto
rerferiu hoje nas suas declarações à.....
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
ARTICLEO comissário europeu xpto
rerferiu hoje nas suas declarações à.....
NAV•Política
• Economia• Desporto
ASIDE – Resgate à Grécia
ASIDE – Resgate a Portugal
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
• Economia• Desporto
ASIDE – Resgate à Grécia
ASIDE – Resgate a Portugal
FOOTER
FOOTER
SECTION –Economia
FOOTER
HEADEROs Rresgates Financeiros
da UE
ARTICLEO comissário europeu xpto
rerferiu hoje nas suas declarações à.....
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
HTML5Como decidir que elemento utilizar
O elemento deve iniciar uma nova Secção ?
html 5
49
HTML5Como decidir que elemento utilizar
O elemento deve iniciar uma nova Secção ?
NÃO
html 5
50
HTML5Como decidir que elemento utilizar
O elemento deve iniciar uma nova Secção ?
NÃO
conteúdo é introdutório ?
html 5
51
HTML5Como decidir que elemento utilizar
O elemento deve iniciar uma nova Secção ?
NÃO
• O conteúdo é introdutório ?
SIM HEADER
html 5
52
HTML5Como decidir que elemento utilizar
NÃO
• O conteúdo é introdutório ?
html 5
53
HTML5Como decidir que elemento utilizar
NÃO
• O conteúdo é introdutório ?
O conteúdo tem informação sobre o autor,
links rerlacionados, ou informação legal ?
SIM FOOTER
html 5
54
HTML5Como decidir que elemento utilizar
NÃO
• O conteúdo é introdutório ?
O conteúdo tem informação sobre o autor,
links rerlacionados, ou informação legal ?
SIM FOOTER
Pode não estar no fundo
da página
html 5
55
HTML5Como decidir que elemento utilizar
NÃO
O conteúdo tem informação sobre o autor,
links rerlacionados, ou informação legal ?
html 5
56
HTML5Como decidir que elemento utilizar
NÃO
O conteúdo tem informação sobre o autor,
links rerlacionados, ou informação legal ?
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
HTML5Como decidir que elemento utilizar
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 ?
Só por questão visual
DIV
html 5
58
HTML5Como decidir que elemento utilizar
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 ?
Não é conteúdopara uma secção
aside
html 5
59
HTML5Como decidir que elemento utilizar
O elemento deve iniciar uma nova Secção ?
SIM
html 5
60
HTML5Como decidir que elemento utilizar
O elemento deve iniciar uma nova Secção ?
SIM
O conteúdo faz parte da navegação principal da
página?
html 5
61
HTML5Como decidir que elemento utilizar
SIM
SIM NAV
html 5
Usar só para anavegação principal
O elemento deve iniciar uma nova Secção ?
O conteúdo faz parte da navegação principal da
página?
62
HTML5Como decidir que elemento utilizar
O conteúdo faz parte da navegação principal da
página?
NÃO
html 5
63
HTML5Como decidir que elemento utilizar
O conteúdo faz parte da navegação principal da
página?
NÃO
O conteúdo é auto-contido e poderia ser usado de forma
independente ?
html 5
64
HTML5Como decidir que elemento utilizar
SIM ARTICLE
html 5
O conteúdo faz parte da navegação principal da
página?
NÃO
O conteúdo é auto-contido e poderia ser usado de forma
independente ?
65
HTML5Como decidir que elemento utilizar
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
HTML5Como decidir que elemento utilizar
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
HTML5Como decidir que elemento utilizar
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
HTML5Como decidir que elemento utilizar
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
HTML5Como decidir que elemento utilizar
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