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.

1. html
HyperText Mark-up Language
Linguagem de formatação de
documentos

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

17. Regras básicas de layout
CATEGORIAS
 Heading Content
 H1
 H2
 H3
 H4
 H5
 H6
 hgroup
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

24. BODY
HEADER
NAV
SECTION
HEADER
ARTICLE
HEADER
ASIDE
FOOTER
<P>...
<P>...
ARTICLE
HEADER
ASIDE
FOOTER
<P>...
FOOTER
SECTION ASIDE
HEADER
NAV
<P>...
FOOTER
Novos Elementos Estruturais do html5
FOOTER
FOOTER

25. Estrutura do elemento <body>
Elementos semânticos do html5
html 5

26. Estrutura do elemento <body>
Elementos semânticos do html5
html 5

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>

37. Deve ser um
conteúdo
independente e
auto-contido que
possa ser
reutilizado.
 Exercício
7. Defina a secção <article>

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.

47. HTML5
Como decidir que elemento utilizar
html 5

48. 48
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
html 5

49. 49
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
NÃO
html 5

50. 50
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
NÃO
conteúdo é
introdutório ?
html 5

51. 51
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
NÃO
• O conteúdo é
introdutório ?
SIM HEADER
html 5

52. 52
HTML5
Como decidir que elemento utilizar
NÃO
• O conteúdo é
introdutório ?
html 5

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

59. 59
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
SIM
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