04 02 novos elementos

Html 5Novos 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>

04/15/23

<nav>ORepresenta uma secção da página que tem

ligações a outras páginas.Uma secção com links de navegação.

ONem todos os tipos de navegação precisam de estar no elemento <nav> apenas os blocos de navegação principais.

OExemplo:É 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>ODeve ser composto por conteúdo auto-

contido mas que se encontra integrado dentro de um documento html.

OEste conteúdo auto-contido poderá ser distribuído de forma independente do resto da página html.

OExemplos:OUm post de um forumOUm artigo de revista ou de jornalOUm 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>

ORepresenta um grupo de informação introdutória ou mesmo de ajuda à navegação.

OQuando exista mais informação relevante deve estar contido dentro do elementos <hgroup>.

OPode ser utilizado para agrupar elementos que componham a table of contents da página.

<footer>ORepresenta o rodapé da secção em que se

encontrar inserido.

ODeve conter informações genéricas sobre a secção que o contém: OAutorODataOCopyright

ONão é necessário que apareçam no fim da secção ou da página.

OQuando 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>?

OQuando não há melhor elemento para representar essa informação.

<time>OO elemento <time> representa

a hora em formato 24h, ou um data precisa do calendário.

<mark>OFaz 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 = urlOautoplay = booleanOloop = booleanOcontrols = boolean (default media controls)Opreload = none | metadata | auto:

none – não faz preloadmetadata – só faz preload da metadataauto – deixa o browser decidir se faz preload

Oautobuffer – booleanIndica 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.mp4controls 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

<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ício1. 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ício1. Aceda ao site:

http://gsnedders.html5.org/outliner/ 2. Para verificar a hierarquia gerada pelo seu código introduza:


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ício1. Aceda ao site

http://gsnedders.html5.org/outliner/ 2. Para verificar a hierarquia gerada pelo seu código introduza:


Os elementos <h1>…<h6> criam

subsecções implicitamente.

Exercício

1. Aceda ao sitehttp://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 ThisConsidera que existe a

secção<body> mesmo sem

eu a escrever

Exercício

1. Aceda ao sitehttp://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


<!doctype html>


<nav></nav>

<section></section>

<article></article>

<aside></aside>


Corresponde ao elemento BODY embora este não

esteja explícito, está sempre presente.

BODY

Exercício


<!doctype html>


<nav></nav>

<section></section>

<article></article>

<aside></aside>


Exercício1. Aceda ao sitehttp://gsnedders.html5.org/outliner/ 2. Crie 4 secções individuais:

<!doctype html>


<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 sitehttp://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 Headingscorrectamente

OOs Headings podem criar secçõesimplicitamente

<!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çõesimplicitamente

<!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 Headingscorrectamente


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>


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>


<!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>


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>



<h2>Venha explorar lisboa à sua maneira</h2>

<!doctype html>


<hgroup>

<h2>Venha explorar lisboa à sua maneira</h2>


</hgroup>


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>:


<!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>


SITE OUTLINECriar um site com a seguinte estrutura - OUTLINE:

1. Explore Lisboa1. Navegação da Página Principal2. As nossas Viagens

1. Circuitos de Lisboa2. Cirrcuito de Monsanto

1. Nível de dificuldade2. Superficie• Características especiais1. Notas Finais2. Comentários

3. Comentários dos utilizadores1. Circuito Monsanto2. Factos Circuito Lisboa Histórica3. Outos Circuitos

4. Quer pedalar conosco ?


44

Criar um site com a seguinte estrutura - OUTLINE:

1. Explore Lisboa1. Navegação da Página Principal2. As nossas Viagens

1. Circuitos de Lisboa2. Cirrcuito de Monsanto

1. Nível de dificuldade2. Superficie• Características especiais1. Notas Finais2. Comentários

3. Comentários dos utilizadores1. Circuito Monsanto2. Factos Circuito Lisboa Histórica3. 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


SITE OUTLINE

2. DESENHAR A PÁGINA

45

explore lisboa | os nossos trilhos | notícias | rercursos | circuitos

Guia de Trilhostudo sobre trilhos de btt

PEDALAR

LISBOA

Opiniões BikersMonsanto Oeste 1por 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 TrilhosTodos os trilhos > Lisboa Cidade

Lisboa Cidade

MonsantoDADOS DO TRILHO

tipo: pista únicaelevação: 225 metrosextensã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 suapágina utilizando uma aplicaçãosimples que permita desenhar como o PhotoShop, ou sepreferir o Paint ou o PowerPoint.




PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média






PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média


HEADER





PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média


HEADER

2. DESENHAR A PÁGINANavegação

Logotipos

Logotipos Título da página




PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média



Neste caso vamos incluir a navegação dentro do cabeçalho, ouseja, ou <nav> dentro do <header>

<nav><Header>



PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média



ConteúdoPrincipal

ConteúdoSecundáriorelacionado

<nav><Header>




PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média



ConteúdoPrincipal


Section?Article? Section?

Aside?Article?

<nav><Header>




PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média



ConteúdoPrincipal


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>




PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média



<section>


<Header>

<nav><Header>

Section?Aside?Article?




PEDALAR

LISBOA





Lisboa Cidade

MonsantoDADOS DO TRILHOtipo: pista únicaelevação: 225 metrosextensão: 16.5 km

dificuldade: média



<section>

<Header>

<nav><Header>

<article>

<article>

Monsanto Oeste 2por António Santos



<article>


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>


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çãopor 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ÁGINAManutençãopor XXX

Depois de utilizar a sua bicileta....

<aside>

(...)

PublicidadeBicicletas XXXX

Compre...

<aside>Fora do <article>Porque é umaPublicidade geral



PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média



Pedalar LisboaRua dos Passarinhos1900 Lisboa

T: 21 [email protected]

Copyright 2011 Pedalar Lisboa

<footer>

58http://gsnedders.html5.org/outliner/



PEDALAR

LISBOAOpiniões Bikers





Lisboa Cidade

MonsantoDADOS DO TRILHOtipo: pista única

elevação: 225 metrosextensão: 16.5 km

dificuldade: média


<!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.




PEDALAR






Lisboa Cidade



dificuldade: média




</head>

<body> <header> <nav></nav> </header> <section> </section></body></html>

InformaçãoPrincipal




PEDALAR






Lisboa Cidade



dificuldade: média




</head>

<body> <header> <nav></nav> </header> <section> <header> </header> </section></body></html>

Cabeçalho




PEDALAR






Lisboa Cidade



dificuldade: média



<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




PEDALAR



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 2por António SantosCom 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.


Lisboa Cidade



dificuldade: média





<body> <header> <nav></nav> </header> <section> <header></header> <article></article> </section> <article> <article></body></html>

63http://gsnedders.html5.org/

outliner/



PEDALAR

LISBOA





Lisboa Cidade



dificuldade: média





<body> <header> <nav></nav> </header> <section> <header></header> <article></article> </section> <article>

<article></article> <article></body></html>




PEDALAR






Lisboa Cidade



dificuldade: média






<article></article> <article></article>

<article></body></html>




PEDALAR






Lisboa Cidade



dificuldade: média







<article> <aside></aside></body></html>

publicidade




PEDALAR






Lisboa Cidade



dificuldade: média







<article> <aside></aside> <footer></footer></body></html>

publicidadeTelef: mail: morada:




PEDALAR






Lisboa Cidade



dificuldade: média







<article> <aside></aside> <footer></footer></body></html>

publicidadeTelef: mail: morada:


Verfique a estrutura da página em:

Nota FinalOA utilização dos elementos semânticos

pode ser muito diversificada sem que a estrutura esteja errada.

OObjectivos:OInterpretação sobre a função de cada

informaçãoOOutline correcto

68

04 02 novos elementos

Internet