Html 5
Novos elementos
estruturais
<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
<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.
<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
<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>
<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
<article>
O Quando os artigos se encontrem
dentro de outros artigos os artigos
interiores estão relacionados com o
artigo exterior.
<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.
<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.
<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.
<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.
<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.
Então quando usar o
elemento <div>?
O Quando não há melhor elemento para
representar essa informação.
<time>
O O elemento <time> representa a hora
em formato 24h, ou um data precisa
do calendário.
<mark>
O Faz o highlight de uma porção de
texto.
<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>
<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
<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>
<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
<embed>
<embed src=“filme.swf”>
<embed src=“filme.swf” height=“300”
width=“300”>
<embed src=“filme.swf” type="application/x-
shockwave-flash">
<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>
<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.
<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>
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>
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>
<!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!
<!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.
<!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.
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
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
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
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
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çã
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>
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/
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/
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/
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/
<!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/
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/
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/
<!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/
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
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
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/
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/
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/
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/
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>
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/
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/
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/
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/
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>
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>
(...)
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
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>
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.
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
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
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
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>
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>
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>
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
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:
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:
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

04 02 novos elementos

  • 1.
  • 2.
    <section> A tag sectiondefine 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>Amaçã é 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 umasecçã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 sercomposto 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 osartigos se encontrem dentro de outros artigos os artigos interiores estão relacionados com o artigo exterior.
  • 8.
    <aside> ORepresenta uma áreada 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émconter 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çalhode 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 umgrupo 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 orodapé 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 usaro 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 ohighlight de uma porção de texto.
  • 16.
    <figure> e <figcaption> OPretende-seuma 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 soma 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" controlspreload="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 desenhardentro 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 mostraralgum 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 Linksem 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> <htmllang="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 aosite 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 aosite 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 aosite 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 aosite 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 aosite 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 aosite 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 OOs 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 Headingspodem 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 podemcriar 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 podemcriar 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>ExplorarLisboa</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>ExploreLisboa</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 umsite 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 sitecom 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 APÁ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 Oeste1 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 APÁ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 Autilizaçã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

Notas do Editor

  • #44 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #45 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #46 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #47 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #48 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #49 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #50 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #51 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #52 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #53 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #54 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #55 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #56 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #57 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #58 Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • #59 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #60 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #61 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #62 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #63 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #64 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #65 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #66 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #67 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • #68 Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure