Este documento fornece informações sobre a linguagem HTML. Ele explica os diferentes elementos de conteúdo em HTML, incluindo elementos em linha, elementos de bloco e categorias de elementos. Também discute regras básicas de layout e novos elementos estruturais do HTML5 como header, nav, section, article, aside e footer.
2. Modelos de conteúdo
Elementos em linha – InLine Elements
Elementos de bloco – Block Elements
5/30/2015
3. Modelos de conteúdo
Elementos em linha – InLine Elements
Normalmente são marcadores de texto
<a>
<strong>
<em>
<img>
<imput>
<span>
5/30/2015
4. 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>
5/30/2015
5. 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>
5/30/2015
6. Regras básicas de layout
Os elementos InLine nunca podem conter
elementos bloco:
<a><div>...</div></a>
5/30/2015
7. Regras básicas de layout
Os elementos Block podem conter qualquer
elemento inline:
<div><strong>...</strong></div>
<article><em>...</em></article>
5/30/2015
8. Regras básicas de layout
Os elementos Block podem conter elementos
Block dependendo da categoria em que eles se
encontrem:
Exemplo:
<p><div></div></p>
<div><p></p></div>
5/30/2015
9. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
10. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
11. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
12. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
13. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
o FieldSet
o Figure
o Footer
o Form
o H1...H6
o Header
o Hgroup
o Hr
o I
o iframe
14. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
o Math
o Menu
o Meter
o Nav
o NoScript
o Object
o OL
o Output
o P
o pre
15. Regras básicas de layout
CATEGORIAS
Cada 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
5/30/2015
o Strong
o Sub
o Sup
o Table
o Texarea
o Time
o Ul
o Var
o Video
o Text
16. Regras básicas de layout
CATEGORIAS
Sectioning Content
Article
Aside
Nav
Section
5/30/2015
18. Regras básicas de layout
CATEGORIAS
Phrasing Content
a
abbr
area (map>area)
audio
b
bdo
br
button
canvas
5/30/2015
• cite
• code
• command
• datalist
• del
• dfn
• em
• Embed
• i
• iframe
• img
• input
• Ins
• kbd
• keygen
• Label
• Link
• Map
19. Regras básicas de layout
CATEGORIAS
Phrasing Content
Mark
Meter
Noscript
Object
Output
Progress
Samp
Script
Select
Small
5/30/2015
• Span
• strong
• Sub
• Sup
• Svg
• Texarea
• Time
• Var
• Video
• Text
20. Regras básicas de layout
CATEGORIAS
Embeded Content
Audio
Canvas
Iframe
Img
Math
Object
Svg
Video
5/30/2015
21. Novos Elementos Estruturais do html5
Estrutura base de um documento:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
….
<body>
</html>
22. Estrutura base do elemento BODY:
Novos Elementos Estruturais do html5
23. 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
27. Exercício
Defina 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
28. html 5
Exercício
5. 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>
29. html 5
Exercício
5. 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?
30. Exercício
5. 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
31. Exercício
5. 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
32. Exercício
5. 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
33. Exercício
5. 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> ver
html 5
34. 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ício
6. 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>
35. Exercício
6. 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
36. ver
Exercício
6. Cada <section> pode conter o seu
Pró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>
38. 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ício
7. Defina a secção <article>
39. 39
html 5
ver
Exercício
7. 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. 40
html 5
Exercício
8. 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. 41
html 5
Exercício
8. 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ção
Complementar
Conteúdo
independente
42. 42
SECTION –Economia
html 5
Exercício
8. Defina a secção <aside>
HEADER - Expresso
ASIDE – Resgate à
Grécia
ASIDE – Resgate a
Portugal
HEADER
Os Resgates Financeiros
da UE
ARTICLE
O comissário europeu xpto
rerferiu hoje nas suas
declarações à.....
NAV
•Política
•
Economia
• Desporto
43. 43
SECTION –Economia
html 5
Exercício
8. Defina a secção <aside>
HEADER - Expresso
ASIDE - Comissário
viu-se grego
NAV
•Política
•
Economia
• Desporto
ASIDE
O local onde se coloca o
ASIDE indica a sua função
neste caso só diz rrespeito
a um artigo
HEADER
Os Resgates Financeiros
da UE
ARTICLE
O comissário europeu xpto
rerferiu hoje nas suas
declarações à.....
44. 44
html 5
Exercício
9. Defina <footer>
Não é uma secção mas uma
descrição de uma secção.
HEADER - Expresso
HEADER
Os Rresgates Financeiros
da UE
ARTICLE
O 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. 45
html 5
Exercício
9. Defina <footer>
Pode colocar mais de um footer e não tem
de 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
HEADER
Os Rresgates Financeiros
da UE
ARTICLE
O comissário europeu xpto
rerferiu hoje nas suas
declarações à.....
FOOTER
46. 46
html 5
A 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.
53. 53
HTML5
Como 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. 54
HTML5
Como 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. 55
HTML5
Como decidir que elemento utilizar
NÃO
O conteúdo tem
informação sobre o autor,
links rerlacionados, ou
informação legal ?
html 5
56. 56
HTML5
Como 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. 57
HTML5
Como 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. 58
HTML5
Como 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údo
para uma
secção
aside
html 5
60. 60
HTML5
Como 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. 61
HTML5
Como decidir que elemento utilizar
SIM
SIM
NAV
html 5
Usar só para a
navegação principal
O elemento deve iniciar
uma nova Secção ?
O conteúdo faz parte da
navegação principal da
página?
62. 62
HTML5
Como decidir que elemento utilizar
O conteúdo faz parte da
navegação principal da
página?
NÃO
html 5
63. 63
HTML5
Como 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. 64
HTML5
Como 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. 65
HTML5
Como 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. 66
HTML5
Como 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. 67
HTML5
Como decidir que elemento utilizar
SIM
NÃO
ASIDE
Está 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. 68
HTML5
Como decidir que elemento utilizar
SIM
NÃO
ASIDE
Está 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. 69
HTML5
Como 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. 70
RESUMO
Tags (ou marcadores), elementos e atributos
Estrutura base de um documento HTML
Codificação de caracteres e definição de idioma
Os primeiros novos elementos estruturais do
HTML5:
Header, Nav, Aside, Footer, Section, Article
html 5