HTML5 Novos Elementos

1. Html 5
Novos elementos
estruturais

2. <section>
A tag section define uma nova secção
genérica no documento.
Por exemplo, a home de um website pode
ser dividida em diversas seções:
•Introdução ou destaque
•Novidades
•Informação de contato
•Chamadas para conteúdo interno

3. <section>
Exemplos de secções:
• Capítulos
• Separadores de uma Tabbed Page
• Secções numeradas de uma Tese
• Secções genéricas aplicáveis a Webpages:
• Introdução
• Novos Elementos
• Informação de Contactos
Para saber se deve utilizar o elemento Section:
• Só deve ser utilizado se pretender que o título
apareça no Outline da página.

4. <section>
<article>
<hgroup>
<h1>Maçãs</h1>
<h2>Uma fruta deliciosa!</h2>
</hgroup>
<p>A maçã é o fruto suculento da macieira.</p>
<section>
<h1>Vermelhas</h1>
<p>As maças vermelhas são as mais comuns. </p>
</section>
<section>
<h1>Golden</h1>
<p>Menos comuns do que as maças vermelhas.</p>
</section>
</article>
05/30/15

5. <nav>
O Representa uma secção da página que tem ligações
a outras páginas.Uma secção com links de
navegação.
O Nem todos os tipos de navegação precisam de estar
no elemento <nav> apenas os blocos de navegação
principais.
O Exemplo:
É habitual os rodapés conterem elementos de
navegação como termos de um serviço, copyright,
etc. Estes elementos de navegação devem ficar no
elemento <footer> e não no elemento <nav>

6. <article>
O Deve ser composto por conteúdo auto-contido
mas que se encontra integrado dentro de um
documento html.
O Este conteúdo auto-contido poderá ser
distribuído de forma independente do resto da
página html.
O Exemplos:
O Um post de um forum
O Um artigo de revista ou de jornal
O Um comentário de um utilizador

7. <article>
O Quando os artigos se encontrem
dentro de outros artigos os artigos
interiores estão relacionados com o
artigo exterior.

8. <aside>
ORepresenta uma área da página com
informação tangencialmente relacionada
com o resto do conteúdo da página e que
poderia ser considerada separada do
conteúdo principal.
OTipicamente seria um conteúdo representado
numa barra lateral com um tipo de letra ideal
para ser impresso.
OUm exemplo típico para o elemento <aside>
seria conteúdo publicitário.

9. <aside>
• Pode também conter grupos de
hiperligações não principais para o site
caso em que poderia conter vários
elementos <nav>.
• O aside pode ser representado por
conteúdos em sidebars em textos
impressos, publicidade ou até mesmo
para criar um grupo de elementos nav e
outras informações separados do
conteúdo principal do website.

10. <hgroup>
ORepresenta o cabeçalho de uma secção.
OUtilizado para agrupar conjuntos de
elementos <h1>…<h6> que podem
representar títulos e subtítulos da
página.

11. <header>
O Representa um grupo de informação
introdutória ou mesmo de ajuda à navegação.
O Quando exista mais informação relevante deve
estar contido dentro do elementos <hgroup>.
O Pode ser utilizado para agrupar elementos que
componham a table of contents da página.

12. <footer>
O Representa o rodapé da secção em que se encontrar
inserido.
O Deve conter informações genéricas sobre a secção que o
contém:
O Autor
O Data
O Copyright
O Não é necessário que apareçam no fim da secção ou da
página.
O Quando um elemento <footer> contém secções inteiras
de informação, essa informação deve representar –
apendices, índices, info sobre licenciamento, etc.

13. Então quando usar o
elemento <div>?
O Quando não há melhor elemento para
representar essa informação.

14. <time>
O O elemento <time> representa a hora
em formato 24h, ou um data precisa
do calendário.

15. <mark>
O Faz o highlight de uma porção de
texto.

16. <figure> e <figcaption>
OPretende-se uma utilização conjunta dos dois elementos para
identificar diagramas, ilustrações, fotos, etc e acrescentar uma
descrição para cada um, embora o elemento <figure> possa
aparecer isolado.
OPode servir para agrupar diversas imagens com uma só
descrição.
<figure>
<img src=“chimp.jpg”>
<img src=“gorila.jpg”>
<img src=“orangot.jpg”>
<figcaption>Espécies de Macacos</figcaption>
</figure>

17. <audio>
Especifica um som a ser utilizado na página. Atributos:
Oscr = url
Oautoplay = boolean
Oloop = boolean
Ocontrols = boolean (default media controls)
Opreload = none | metadata | auto:
none – não faz preload
metadata – só faz preload da metadata
auto – deixa o browser decidir se faz preload
Oautobuffer – boolean
Indica ao browser para criar um buffer de dados para
stream

18. <audio>
Exemplo:
<audio src="elvis.ogg" controls preload="auto"></audio>
ou
<audio controls preload="auto" autobuffer>
<source src="elvis.mp3" type=“audio/mpeg”>
<source src="elvis.ogg" type=“audio/ogg”>
</audio>

19. <video>
<video width="640" height="360"src=“vid.mp4" controls
autobuffer>
Ou
<video src=http://www.youtube.com/demo.mp4
controls autobuffer autoplay>
<p>Mude de browser</p>
</video>
<video src=“http://www.youtube.com/demo.mp4”
poster=“img.jpg”>
MOSTRA PRIMEIRA FRAME SE VIDEO NÃO TOCAR

20. <embed>
<embed src=“filme.swf”>
<embed src=“filme.swf” height=“300”
width=“300”>
<embed src=“filme.swf” type="application/x-
shockwave-flash">

21. <canvas>
OUtlizado para desenhar dentro de um documento
HTML ou para fazer animações.
ODeve ser utilizado em conjunto com uma linguagem
de script, geralmente, javascript.
Exemplo:
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150"
height="150" >
</canvas>

22. <small>
(redefinição)
• Elemento <small> passou a significar
apenas impressão em letra menor, sem
nenhum tipo de significado semântico.
• Não deve ser utilizado para, por
exemplo referir subtítulos de menor
importância.

23. <output>
Utilizado para mostrar algum tipo de calculo ou processamento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>

24. Script e Link sem type
• ANTES:
<link rel="stylesheet" href="path/to/stylesheet.css"
type="text/css" />
<script type="text/javascript"
src="path/to/script.js"></script>
• AGORA:
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

25. Conteúdo Editável
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>

26. <!doctype html>
<title>Olá Mundo!</title>
<h1>Isto é uma secção</h1>
<section>
<h1>Isto é uma subsecção</h1></section>
</html>
Exercício
1. Aceda ao site:
http://gsnedders.html5.org/outliner/
2. Para verificar a hierarquia gerada pelo seu código introduza:
3. Pressione Outline This!

27. <!doctype html>
<title>Olá Mundo!</title>
<h1>Isto é uma secção</h1>
<section>
<h1>Isto é uma subsecção</h1></section>
</html>
Exercício
1. Aceda ao site:
http://gsnedders.html5.org/outliner/
2. Para verificar a hierarquia gerada pelo seu código introduza:
3. Pressione Outline This!
Aceita o elemento <title>
mesmo sem <head> e sem
<body> embora n o sejaã
correcto.

28. <!doctype html>
<title>Olá Mundo!</title>
<h1>Isto é uma secção</h1>
<section>
<h1>Isto é uma subsecção</h1>
</section>
</html>
Exercício
1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Para verificar a hierarquia gerada pelo seu código introduza:
3. Pressione Outline This!
Os elementos <h1>…<h6>
criam subsec esçõ
implicitamente.

29. Exercício
1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Para verificar a hierarquia gerada pelo seu código
introduza:
<!doctype html>
<title>Olá Mundo!</title>
<section></section>
3. Pressione OutLine This Considera que existe a sec oçã
<body> mesmo sem eu a escrever

30. Exercício
1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Crie 4 secções individuais:
<!doctype html>
<title>Olá Mundo!</title>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
3. Pressione OutLine This

31. Exercício
1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Crie 4 secções individuais:
<!doctype html>
<title>Olá Mundo!</title>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
3. Pressione OutLine This
Corresponde ao elemento
BODY embora este n oã
esteja expl cito, est sempreí á
presente.
BODY

32. Exercício
1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Crie 4 secções individuais:
<!doctype html>
<title>Olá Mundo!</title>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
3. Pressione OutLine This

33. Exercício
1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Crie 4 secções individuais:
<!doctype html>
<title>Olá Mundo!</title>
<h1>Explore Portugal</h1>
<nav> <h2>Navegação do Site</h2> </nav>
<section> <h2>As nossas Viagens</h2></section>
<article><h2>Opiniões dos Clientes</h2></article>
<aside><h2>Promoções Mensais</h2></aside>
Crie texto com
Headings hierarquizados
Dentro de cada sec oçã

34. Exercício1. Aceda ao site
http://gsnedders.html5.org/outliner/
2. Crie um elemento embebido:
<!doctype html>
<title>Olá Mundo!</title>
<h1>Explore Portugal</h1>
<nav> <h2>Navegação do Site</h2> </nav>
<section>
<h2>As nossas Viagens</h2>
<article>
<h2>Viagens de Bicicleta</h2>
<section><h3>Criticas aos troços</h3></section>
</article>
</section>
<article><h2>Opiniões dos Clientes</h2></article>
<aside><h2>Promoções Mensais</h2></aside>

35. Utilizar os Headings
correctamente
O Os Headings podem criar secções
implicitamente
<!doctype html>
<title>Olá Mundo</title>
<h1>Explore Lisboa</h1>
<h1>As nossas Viagens</h1>
<h1>Promoções</h1>
http://gsnedders.html5.org/outliner/

36. O Os Headings podem criar secções
implicitamente
<!doctype html>
<title>Olá Mundo</title>
<h1>Explore Lisboa</h1>
<section><h1>As nossas Viagens</h1></section>
<section><h1>Promoções</h1></section>
Utilizar os Headings
correctamente
http://gsnedders.html5.org/outliner/

37. Os Headings podem criar secções implicitamente
<!doctype html>
<html>
<title>Olá Mundo</title>
<h1>Explore Lisboa</h1>
<section>
<h1>As nossas Viagens</h1>
<h2>Lisboa de Bicicleta</h2>
<h2>Lisboa a pé</h2>
</section>
<section>
<h1>Promoções</h1>
<h2>Promoção Lisboa Antiga</h2>
<h2>Fado e Lisboa</h2>
<h3>Casas de Fado</h3>
<h3>A Severa</h3>
</section>
<h2>Promoções Mensais >
</html>
http://gsnedders.html5.org/outliner/

38. Os Headings podem criar secções implicitamente
<!doctype html>
<header> <p>Explorar Lisboa</p></header>
<title>Olá Mundo</title>
<h1>Explore Lisboa</h1>
<section>
<h1>As nossas Viagens</h1>
<h2>Lisboa de Bicicleta</h2>
<h2>Lisboa a pé</h2>
</section>
<section>
<h1>Promoções</h1>
<h2>Promoção Lisboa Antiga</h2>
<h2>Fado e Lisboa</h2>
<h3>Casas de Fado</h3>
<h3>A Severa</h3>
</section>
<h2>Promoções Mensais </h2>
<footer><p>copyright</p> </footer>
<header> e <footer>
n o aparercem no outline aã
menos que sejam <hx>http://gsnedders.html5.org/outliner/

39. <!doctype html>
<header> <h1>Explorar Lisboa</h1></header>
<title>Olá Mundo</title>
<h1>Explore Lisboa</h1>
<section>
<h1>As nossas Viagens</h1>
<h2>Lisboa de Bicicleta</h2>
<h2>Lisboa a pé</h2>
</section>
<section>
<h1>Promoções</h1>
<h2>Promoção Lisboa Antiga</h2>
<h2>Fado e Lisboa</h2>
<h3>Casas de Fado</h3>
<h3>A Severa</h3>
</section>
<h2>Promoções Mensais </h2>
<footer>
<h1>copyright</h1>
</footer>
<header> e <footer>
n o aparercem no outline aã
menos que sejam <hx>http://gsnedders.html5.org/outliner/

40. Utilizar <hgroup> sobrerpõe às
<section> agrupando titulos <h1>...<h6>
Os Hgroup só mostra hedings relacionados e
ignora as secções. No outline só é
considerado o elemento de ranking mais
elevado
<!doctype html>
<title>Olá Mundo</title>
<h1>Explore Lisboa</h1>
<h2>Venha explorar lisboa à sua maneira</h2>
<!doctype html>
<title>Olá Mundo</title>
<hgroup>
<h2>Venha explorar lisboa à sua maneira</h2>
<h1>Explore Lisboa</h1>
</hgroup>
http://gsnedders.html5.org/outliner/

41. Utilizar <hgroup> sobrerpõe às
<section> agrupando titulos <h1>...<h6>
Imagine que recebeu um patrocínio para um dos
eventos.
Poderíamos utilizar um título <h5> mas como só
dispomos de titulos até <h6> vamos colocar o
patrocínio na secção <aside>mas temos de criar nova
secções para definir o <aside>:
http://gsnedders.html5.org/outliner/

42. <!doctype html>
<title>Olá Mundo!</title>
<h1>Explore Lisboa</h1>
<section>
<header><h2>As Nossas Viagens</h2></header>
<article>
<h2>Comentários às Viagens</h2>
<section>
<h3>Lisboa de Bicicleta</h3>
<h4>Miradouros de Lisboa</h4>
<h4>Jardins e Parques</h4>
</section>
<section>
<h3>Lisboa a Pé</h3>
<aside>
<h5>Com o patrocínio da CML</h5>
</aside>
<h4>Lisboa Antiga</h4>
<h4>Belém e os Jerónimos</h4>
<h4>Zona da Expo</h4>
</section>
</article>
</section>
Imagine que recebeu um patroc nio para um dos eventos.í
Poder amos utilizar um t tulo <h5> mas como s dispomos de t tulos at <h6> vamos colocar o patroc nio na sec oí í ó í é í çã
<aside>mas temos de criar nova sec es para definir o <aside>çõ
http://gsnedders.html5.org/outliner/

43. SITE OUTLINE
Criar um site com a seguinte estrutura - OUTLINE:
1. Explore Lisboa
1. Navegação da Página Principal
2. As nossas Viagens
1. Circuitos de Lisboa
2. Cirrcuito de Monsanto
1. Nível de dificuldade
2. Superficie
• Características especiais
1. Notas Finais
2. Comentários
3. Comentários dos utilizadores
1. Circuito Monsanto
2. Factos Circuito Lisboa Histórica
3. Outos Circuitos
4. Quer pedalar conosco ?
http://gsnedders.html5.org/outliner/

44. 44
Criar um site com a seguinte estrutura - OUTLINE:
1. Explore Lisboa
1. Navegação da Página Principal
2. As nossas Viagens
1. Circuitos de Lisboa
2. Cirrcuito de Monsanto
1. Nível de dificuldade
2. Superficie
• Características especiais
1. Notas Finais
2. Comentários
3. Comentários dos utilizadores
1. Circuito Monsanto
2. Factos Circuito Lisboa Histórica
3. Outos Circuitos
4. Quer pedalar conosco ?
Identificar:
• Elementos semanticos a utilizar na
estrutura da p ginaá
• Que tipo de outline vai ser criado para
os motores de busca
http://gsnedders.html5.org/outliner/
SITE OUTLINE

45. 2. DESENHAR A PÁGINA
45
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
Crie um layout para a sua
página utilizando uma aplicação
simples que permita desenhar
como o PhotoShop, ou se
preferir o Paint ou o PowerPoint.
http://gsnedders.html5.org/outliner/

46. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
http://gsnedders.html5.org/outliner/

47. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
HEADER
2. DESENHAR A PÁGINA
http://gsnedders.html5.org/outliner/

48. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
HEADER
2. DESENHAR A PÁGINA
Navegação
Logotipos
Logotipos Título da página
http://gsnedders.html5.org/outliner/

49. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
Neste caso vamos incluir a navegação dentro do cabeçalho, ou
seja, ou <nav> dentro do <header>
<nav>
<Header>

50. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
Conteúdo
Principal
Conteúdo
Secundário
relacionado
<nav>
<Header>
http://gsnedders.html5.org/outliner/

51. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
Conteúdo
Principal
Conteúdo
Secundário
relacionado
Section?
Article? Section?
Aside?
Article?
<nav>
<Header>
http://gsnedders.html5.org/outliner/

52. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
Conteúdo
Principal
Conteúdo
Secundário
relacionado
Section?
Aside?
Como n o quero separarã
o conte do principalú
numa nova p gina emá
nenhuma circunst ncia,â
vou utilizar o <section>
<nav>
<Header>
http://gsnedders.html5.org/outliner/

53. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
<section>
Conteúdo
Secundário
relacionado
<Header>
<nav>
<Header>
Section?
Aside?
Article?
http://gsnedders.html5.org/outliner/

54. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado fizemos
a ligação até ao Parque da Pedra, onde
os aficionados da queda livre podem
fazer a descida que aí se encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a única
subida que deu alguma luta) onde
atravessamos a ponte para o outro lado.
Seguindo os trilhos, tudo coisa calma,
passámos por traz do Parque do Alvito e
seguindo o muro do Agronomia
chegamos ao alto da Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
<section>
<Header>
<nav>
<Header>
<article>
<article>
Monsanto Oeste 2
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
<article>

55. Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
(...)
2. DESENHAR A PÁGINA<article>
<article>
Monsanto Oeste 2
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
(...)
<article>
Manutenção
por XXX
Depois de utilizar a sua bicileta....
N o est directamenteã á
relacionado com o conte doú
de um trrilho mas é
informa o gen ricaçã é
rerlevante para qualuer trilho.
<aside>
(...)

56. 2. DESENHAR A PÁGINA
Manutenção
por XXX
Depois de utilizar a sua bicileta....
<aside>
(...)
Publicidade
Bicicletas XXXX
Compre...
<aside>
Fora do <article>
Porque é uma
Publicidade geral

57. explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando o
sentido de orientação ajudado por uns
tracks que temos coleccionado
fizemos a ligação até ao Parque da
Pedra, onde os aficionados da queda
livre podem fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma luta)
onde atravessamos a ponte para o
outro lado. Seguindo os trilhos, tudo
coisa calma, passámos por traz do
Parque do Alvito e seguindo o muro
do Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
Todos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um óptimo
exercício físico sem ter necessariamente uma elevada
dificuldade técnica, o trilho de Alfama é feito à sua
medida.
2. DESENHAR A PÁGINA
Pedalar Lisboa
Rua dos Passarinhos
1900 Lisboa
T: 21 21212121
info@btt.pt
Copyright 2011 Pedalar Lisboa
<footer>

58. 58http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-1" /
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
</body>
</html>
Não é obrigatório o
<nav> ficar no <header>
mas neste caso funciona.

59. 59http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-1" /
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
</section>
</body>
</html>
Informação
Principal

60. 60http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-1" /
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
</section>
</body>
</html>
Cabeçalho

61. 61http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
encontra
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Ajuda.
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article>
</article>
</section>
</body>
</html>
Artigo

62. 62http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
Monsanto Oeste 2
por António Santos
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article> </article>
</section>
<article>
<article>
</body>
</html>

63. 63http://gsnedders.html5.org/outl
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhos
tudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
Monsanto Oeste 2
por António Santos
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHO
tipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article> </article>
</section>
<article>
<article></article>
<article>
</body>
</html>

64. 64http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
Monsanto Oeste 2
por António Santos
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article> </article>
</section>
<article>
<article></article>
<article></article>
<article>
</body>
</html>

65. 65http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
Monsanto Oeste 2
por António Santos
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article> </article>
</section>
<article>
<article></article>
<article></article>
<article>
<aside></aside>
</body>
</html>publicidade

66. 66http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
Monsanto Oeste 2
por António Santos
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article> </article>
</section>
<article>
<article></article>
<article></article>
<article>
<aside></aside>
<footer></footer>
</body>publicidadeTelef: mail: morada:

67. 67http://gsnedders.html5.org/outliner/
explore lisboa | os nossos trilhos | notícias | rercursos | circuitos
Guia de Trilhostudo sobre trilhos de btt
PEDALAR
LISBOA
Opiniões Bikers
Monsanto Oeste 1
por António Santos
O Parque da Serafina e utilizando
o sentido de orientação ajudado
por uns tracks que temos
coleccionado fizemos a ligação
até ao Parque da Pedra, onde os
aficionados da queda livre podem
fazer a descida que aí se
Monsanto Oeste 2
por António Santos
Com a falta de vontade para essa
aventura lá seguimos para fazer a
subida até à Cruz das Oliveiras (a
única subida que deu alguma
luta) onde atravessamos a ponte
para o outro lado. Seguindo os
trilhos, tudo coisa calma,
passámos por traz do Parque do
Alvito e seguindo o muro do
Agronomia chegamos ao alto da
Avaliação de Trilhos
odos os trilhos > Lisboa Cidade
Lisboa Cidade
Monsanto
DADOS DO TRILHOtipo: pista única
elevação: 225 metros
extensão: 16.5 km
dificuldade: média
Se procura uma paisagem espectacular e um
óptimo exercício físico sem ter necessariamente
uma elevada dificuldade técnica, o trilho de
Alfama é feito à sua medida.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO 8859-
1" />
<title>Guia de trilhos</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<header> </header>
<article> </article>
</section>
<article>
<article></article>
<article></article>
<article>
<aside></aside>
<footer></footer>
</body>publicidadeTelef: mail: morada:
http://gsnedders.html5.org/outliner/
Verfique a estrutura da página em:

68. Nota Final
O A utilização dos elementos semânticos pode
ser muito diversificada sem que a estrutura
esteja errada.
O Objectivos:
O Interpretação sobre a função de cada
informação
O Outline correcto
68