04 02 novos elementos

158 visualizações

Publicada em

HTML5 Novos Elementos

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
158
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an html5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • Ch4. Coding an HTML5 Site: Inicial page Structure – Planning document structure
  • 04 02 novos elementos

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

    ×