Professional Documents
Culture Documents
15 de dezembro de 2016
Dr. E. S. Pereira 1
Web
Sumario
1 Introducao ao HTML5
Novas Tags Estruturais do HTML5
Web Semantica
Compatibilidade
Projeto do Curso
4 Exerccio
5 Elementos Obsoletos
6 Referencias Bibliograficas
Dr. E. S. Pereira 2
Web
Introducao - HTML5
Introducao - HTML5
Dr. E. S. Pereira 3
Web
Introducao - HTML5
HTML
HTML
Hypertext Markup Language.
Utilizamos elementos HTML para marcar e definir tipos de itens
como imagens, paragrafos, ttulos, etc.
Esses elementos sao chamados de tags
Tags sao digitadas entre sinais de menor que (<) e maior que
(>). E a barra (/) indica fechamento.
Dr. E. S. Pereira 4
Web
Introducao - HTML5
HTML
HTML
Hypertext Markup Language.
Utilizamos elementos HTML para marcar e definir tipos de itens
como imagens, paragrafos, ttulos, etc.
Esses elementos sao chamados de tags
Tags sao digitadas entre sinais de menor que (<) e maior que
(>). E a barra (/) indica fechamento.
Dr. E. S. Pereira 5
Web
Introducao - HTML5
HTML
HTML
Hypertext Markup Language.
Utilizamos elementos HTML para marcar e definir tipos de itens
como imagens, paragrafos, ttulos, etc.
Esses elementos sao chamados de tags
Tags sao digitadas entre sinais de menor que (<) e maior que
(>). E a barra (/) indica fechamento.
Dr. E. S. Pereira 6
Web
Introducao - HTML5
HTML
HTML
Hypertext Markup Language.
Utilizamos elementos HTML para marcar e definir tipos de itens
como imagens, paragrafos, ttulos, etc.
Esses elementos sao chamados de tags
Tags sao digitadas entre sinais de menor que (<) e maior que
(>). E a barra (/) indica fechamento.
Dr. E. S. Pereira 7
Web
Introducao - HTML5
HTML
HTML
As tags possuem atributos e valores como boder para tabelas.
No HTML5 muitos atributos de tags nao sao usados, pois foram
excludos, pois suas funcoes sao executadas via CSS.
Maior responsabilidade para o CSS.
O HTML fica responsavel pelo conteudo, e o CSS pela forma,
separando formatacao do layout
Dr. E. S. Pereira 8
Web
Introducao - HTML5
HTML
HTML
As tags possuem atributos e valores como boder para tabelas.
No HTML5 muitos atributos de tags nao sao usados, pois foram
excludos, pois suas funcoes sao executadas via CSS.
Maior responsabilidade para o CSS.
O HTML fica responsavel pelo conteudo, e o CSS pela forma,
separando formatacao do layout
Dr. E. S. Pereira 9
Web
Introducao - HTML5
HTML
HTML
As tags possuem atributos e valores como boder para tabelas.
No HTML5 muitos atributos de tags nao sao usados, pois foram
excludos, pois suas funcoes sao executadas via CSS.
Maior responsabilidade para o CSS.
O HTML fica responsavel pelo conteudo, e o CSS pela forma,
separando formatacao do layout
Dr. E. S. Pereira 10
Web
Introducao - HTML5
HTML
HTML
As tags possuem atributos e valores como boder para tabelas.
No HTML5 muitos atributos de tags nao sao usados, pois foram
excludos, pois suas funcoes sao executadas via CSS.
Maior responsabilidade para o CSS.
O HTML fica responsavel pelo conteudo, e o CSS pela forma,
separando formatacao do layout
Dr. E. S. Pereira 11
Web
Introducao - HTML5
HTML
HTML
O HTML5 e uma nova versao do HTML 4.01.
Concebida para permitir que programadores possam gerar
codigo mais organizados e bem estruturados.
O HTML usado para criar marcacoes e estruturar o conteudo do
documento.
Nasce para ser usado de forma semantica
Dr. E. S. Pereira 12
Web
Introducao - HTML5
HTML
HTML
O HTML5 e uma nova versao do HTML 4.01.
Concebida para permitir que programadores possam gerar
codigo mais organizados e bem estruturados.
O HTML usado para criar marcacoes e estruturar o conteudo do
documento.
Nasce para ser usado de forma semantica
Dr. E. S. Pereira 13
Web
Introducao - HTML5
HTML
HTML
O HTML5 e uma nova versao do HTML 4.01.
Concebida para permitir que programadores possam gerar
codigo mais organizados e bem estruturados.
O HTML usado para criar marcacoes e estruturar o conteudo do
documento.
Nasce para ser usado de forma semantica
Dr. E. S. Pereira 14
Web
Introducao - HTML5
HTML
HTML
O HTML5 e uma nova versao do HTML 4.01.
Concebida para permitir que programadores possam gerar
codigo mais organizados e bem estruturados.
O HTML usado para criar marcacoes e estruturar o conteudo do
documento.
Nasce para ser usado de forma semantica
Dr. E. S. Pereira 15
Web
Introducao - HTML5
HTML
HTML
O que mais foi modificado no HTML5 foi a e a estrutura de
paginas.
Dr. E. S. Pereira 16
Web
Introducao - HTML5
HTML
HTML
Cada divisao na Figura 7 e uma tag nova do HTML5.
Dr. E. S. Pereira 17
Web
Introducao - HTML5
Tags Estrut.
Tags Estruturais
Tags Estruturais
<header>: Cabecalho de secao.
<aside>: Cria secao de conteudo relacionado. Qualquer
conteudo que tenha relacao com o conteudo principal (link,
banner, etc.)
<section>: Cria uma secao de conteudo (generica). Pode ser
usada para agrupar conteudo diversos, inclusive outras secoes.
Dr. E. S. Pereira 18
Web
Introducao - HTML5
Tags Estrut.
Tags Estruturais
Tags Estruturais
<header>: Cabecalho de secao.
<aside>: Cria secao de conteudo relacionado. Qualquer
conteudo que tenha relacao com o conteudo principal (link,
banner, etc.)
<section>: Cria uma secao de conteudo (generica). Pode ser
usada para agrupar conteudo diversos, inclusive outras secoes.
Dr. E. S. Pereira 19
Web
Introducao - HTML5
Tags Estrut.
Tags Estruturais
Tags Estruturais
<header>: Cabecalho de secao.
<aside>: Cria secao de conteudo relacionado. Qualquer
conteudo que tenha relacao com o conteudo principal (link,
banner, etc.)
<section>: Cria uma secao de conteudo (generica). Pode ser
usada para agrupar conteudo diversos, inclusive outras secoes.
Dr. E. S. Pereira 20
Web
Introducao - HTML5
Tags Estrut.
Tags Estruturais
Tags Estruturais
< article >: Criar uma secao de artigo. E o conteudo principal do
documento, contendo texto, imagens, vdeos etc.
<nav> Cria uma secao de menu. Cria o menu principal do site.
Nao deve ser usado para agrupar qualquer link, mas somente um
menu. Pode ser usada para criar secoes de menus secundarios.
Dr. E. S. Pereira 21
Web
Introducao - HTML5
Tags Estrut.
Tags Estruturais
Tags Estruturais
< article >: Criar uma secao de artigo. E o conteudo principal do
documento, contendo texto, imagens, vdeos etc.
<nav> Cria uma secao de menu. Cria o menu principal do site.
Nao deve ser usado para agrupar qualquer link, mas somente um
menu. Pode ser usada para criar secoes de menus secundarios.
Dr. E. S. Pereira 22
Web
Introducao - HTML5
Tags Estrut.
Tags Estruturais
Tags Estruturais
<footer> Cria uma secao de rodape. O rodape pode ser do
documento ou de determinadas secoes. Rodape de paginas
possui informacoes geralmente visveis a todas as paginas do
site, tais como telefones, e-mails, enderecos, aviso de protecao e
de direitos autorais, etc.
Dr. E. S. Pereira 23
Web
Introducao - HTML5
Web Semantica
Web Semantica
Web Semantica
Semantica: ramo da lingustica que estuda o significado das
palavras, ou a ciencia das significacoes.
Usamos tags para dar significado, em termos de codigo, para
tudo.
Navegadores, motores de busca, tradutores, leitores de tela e
qualquer outro sistema de acesso web irao manipular essas
paginas se problemas.
E a padronizacao e universalizacao da informacao da web.
Dr. E. S. Pereira 24
Web
Introducao - HTML5
Web Semantica
Web Semantica
Web Semantica
Semantica: ramo da lingustica que estuda o significado das
palavras, ou a ciencia das significacoes.
Usamos tags para dar significado, em termos de codigo, para
tudo.
Navegadores, motores de busca, tradutores, leitores de tela e
qualquer outro sistema de acesso web irao manipular essas
paginas se problemas.
E a padronizacao e universalizacao da informacao da web.
Dr. E. S. Pereira 25
Web
Introducao - HTML5
Web Semantica
Web Semantica
Web Semantica
Semantica: ramo da lingustica que estuda o significado das
palavras, ou a ciencia das significacoes.
Usamos tags para dar significado, em termos de codigo, para
tudo.
Navegadores, motores de busca, tradutores, leitores de tela e
qualquer outro sistema de acesso web irao manipular essas
paginas se problemas.
E a padronizacao e universalizacao da informacao da web.
Dr. E. S. Pereira 26
Web
Introducao - HTML5
Web Semantica
Web Semantica
Web Semantica
Semantica: ramo da lingustica que estuda o significado das
palavras, ou a ciencia das significacoes.
Usamos tags para dar significado, em termos de codigo, para
tudo.
Navegadores, motores de busca, tradutores, leitores de tela e
qualquer outro sistema de acesso web irao manipular essas
paginas se problemas.
E a padronizacao e universalizacao da informacao da web.
Dr. E. S. Pereira 27
Web
Introducao - HTML5
Web Semantica
Dr. E. S. Pereira 28
Web
Introducao - HTML5
Web Semantica
Dr. E. S. Pereira 29
Web
Introducao - HTML5
Web Semantica
Dr. E. S. Pereira 30
Web
Introducao - HTML5
Web Semantica
Dr. E. S. Pereira 31
Web
Introducao - HTML5
Web Semantica
Dr. E. S. Pereira 32
Web
Introducao - HTML5
Web Semantica
Dr. E. S. Pereira 33
Web
Introducao - HTML5
Web Semantica
1 <!DOCTYPE html>
2 <html lang=" pt-br ">
3 <head>
4 <meta http-equiv=" Content-Type " content=" text /
html; charset=UTF-8 " >
5 <title>Meu Primeiro HTML5</title>
6 </head>
7 <body>
8 </body>
9 </html>
Dr. E. S. Pereira 34
Web
Introducao - HTML5
Compatibilidade
No site http://fmbip.com/litmus podemos ver uma lista de navegadores que suportam ou nao as novas caractersticas do
Dr. E. S. Pereira 35
Web
Introducao - HTML5
Projeto
Projeto do Curso
Projeto do Curso
Nesse curso iremos desenvolver um site para uma estrela do
ramo musical.
O primeiro passo e o de levantar os requisitos do projeto.
Em seguida iremos criar o wireframe e definir o layout do site.
O projeto ira evoluir de acordo com o que for sendo aprendido ao
longo do curso.
No primeiro dia iremos conhecer as tags novas e antigas do
HTML e criar toda a estrutura semantica do projeto, deixando a
formatacao e layout para o CSS.
Vamos discutir. O que nosso cliente espera?
Dr. E. S. Pereira 36
Web
Introducao - HTML5
Projeto
Projeto do Curso
Projeto do Curso
Nesse curso iremos desenvolver um site para uma estrela do
ramo musical.
O primeiro passo e o de levantar os requisitos do projeto.
Em seguida iremos criar o wireframe e definir o layout do site.
O projeto ira evoluir de acordo com o que for sendo aprendido ao
longo do curso.
No primeiro dia iremos conhecer as tags novas e antigas do
HTML e criar toda a estrutura semantica do projeto, deixando a
formatacao e layout para o CSS.
Vamos discutir. O que nosso cliente espera?
Dr. E. S. Pereira 37
Web
Introducao - HTML5
Projeto
Projeto do Curso
Projeto do Curso
Nesse curso iremos desenvolver um site para uma estrela do
ramo musical.
O primeiro passo e o de levantar os requisitos do projeto.
Em seguida iremos criar o wireframe e definir o layout do site.
O projeto ira evoluir de acordo com o que for sendo aprendido ao
longo do curso.
No primeiro dia iremos conhecer as tags novas e antigas do
HTML e criar toda a estrutura semantica do projeto, deixando a
formatacao e layout para o CSS.
Vamos discutir. O que nosso cliente espera?
Dr. E. S. Pereira 38
Web
Introducao - HTML5
Projeto
Projeto do Curso
Projeto do Curso
Nesse curso iremos desenvolver um site para uma estrela do
ramo musical.
O primeiro passo e o de levantar os requisitos do projeto.
Em seguida iremos criar o wireframe e definir o layout do site.
O projeto ira evoluir de acordo com o que for sendo aprendido ao
longo do curso.
No primeiro dia iremos conhecer as tags novas e antigas do
HTML e criar toda a estrutura semantica do projeto, deixando a
formatacao e layout para o CSS.
Vamos discutir. O que nosso cliente espera?
Dr. E. S. Pereira 39
Web
Introducao - HTML5
Projeto
Projeto do Curso
Projeto do Curso
Nesse curso iremos desenvolver um site para uma estrela do
ramo musical.
O primeiro passo e o de levantar os requisitos do projeto.
Em seguida iremos criar o wireframe e definir o layout do site.
O projeto ira evoluir de acordo com o que for sendo aprendido ao
longo do curso.
No primeiro dia iremos conhecer as tags novas e antigas do
HTML e criar toda a estrutura semantica do projeto, deixando a
formatacao e layout para o CSS.
Vamos discutir. O que nosso cliente espera?
Dr. E. S. Pereira 40
Web
Introducao - HTML5
Projeto
Projeto do Curso
Projeto do Curso
Nesse curso iremos desenvolver um site para uma estrela do
ramo musical.
O primeiro passo e o de levantar os requisitos do projeto.
Em seguida iremos criar o wireframe e definir o layout do site.
O projeto ira evoluir de acordo com o que for sendo aprendido ao
longo do curso.
No primeiro dia iremos conhecer as tags novas e antigas do
HTML e criar toda a estrutura semantica do projeto, deixando a
formatacao e layout para o CSS.
Vamos discutir. O que nosso cliente espera?
Dr. E. S. Pereira 41
Web
Introducao - HTML5
Projeto
WireFrame index.html
index
Dr. E. S. Pereira 42
Web
Introducao - HTML5
Projeto
WireFrame playlist.html
playlist
Dr. E. S. Pereira 43
Web
Introducao - HTML5
Projeto
WireFrame disco.html
disco
Dr. E. S. Pereira 44
Web
Introducao - HTML5
Projeto
WireFrame videos.html
videos
Dr. E. S. Pereira 45
Web
Introducao - HTML5
Projeto
WireFrame shows.html
shows
Dr. E. S. Pereira 46
Web
Introducao - HTML5
Projeto
WireFrame sobre.html
sobre
Dr. E. S. Pereira 47
Web
Desenvolvimento
Desenvolvimento
Dr. E. S. Pereira 48
Web
Desenvolvimento
Projeto do Curso
Projeto do Curso
Para criar um site em HTML5 podemos usar as mais diversas
ferramentas, como um bloco de notas ou uma ferramenta mais
sofisticada
nesse curso sera adotado o netbeans para a criacao do projeto.
Dr. E. S. Pereira 49
Web
Desenvolvimento
Dr. E. S. Pereira 50
Web
Desenvolvimento
Dr. E. S. Pereira 51
Web
Desenvolvimento
Dr. E. S. Pereira 52
Web
Desenvolvimento
Dr. E. S. Pereira 53
Web
Desenvolvimento
Dr. E. S. Pereira 54
Web
Desenvolvimento
Dr. E. S. Pereira 55
Web
Desenvolvimento
Estrutura do Projeto
Dr. E. S. Pereira 56
Web
Criando a Semantica das paginas
Dr. E. S. Pereira 57
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
A principal mudanca no HTML5 esta ligada ao paradigma.
Passamos a pensar em estrutura semantica ao inves de meras
divisoes, uso apenas da tag <div>.
Primeiro pensamos na estrutura do site e os significados das
partes que o compoe.
Deve ser otimizado para leitores de telas (Programas que
transformam o texto em audio). Assim, frame foi banido, pois
esses programas tem dificuldade em lidar com essa tag.
Nas regras do CSS podemos usar como seletor cada tag
estrutural do HTML5. Permitindo clareza na hora de criar o layout
do site.
Dr. E. S. Pereira 58
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
A principal mudanca no HTML5 esta ligada ao paradigma.
Passamos a pensar em estrutura semantica ao inves de meras
divisoes, uso apenas da tag <div>.
Primeiro pensamos na estrutura do site e os significados das
partes que o compoe.
Deve ser otimizado para leitores de telas (Programas que
transformam o texto em audio). Assim, frame foi banido, pois
esses programas tem dificuldade em lidar com essa tag.
Nas regras do CSS podemos usar como seletor cada tag
estrutural do HTML5. Permitindo clareza na hora de criar o layout
do site.
Dr. E. S. Pereira 59
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
A principal mudanca no HTML5 esta ligada ao paradigma.
Passamos a pensar em estrutura semantica ao inves de meras
divisoes, uso apenas da tag <div>.
Primeiro pensamos na estrutura do site e os significados das
partes que o compoe.
Deve ser otimizado para leitores de telas (Programas que
transformam o texto em audio). Assim, frame foi banido, pois
esses programas tem dificuldade em lidar com essa tag.
Nas regras do CSS podemos usar como seletor cada tag
estrutural do HTML5. Permitindo clareza na hora de criar o layout
do site.
Dr. E. S. Pereira 60
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
A principal mudanca no HTML5 esta ligada ao paradigma.
Passamos a pensar em estrutura semantica ao inves de meras
divisoes, uso apenas da tag <div>.
Primeiro pensamos na estrutura do site e os significados das
partes que o compoe.
Deve ser otimizado para leitores de telas (Programas que
transformam o texto em audio). Assim, frame foi banido, pois
esses programas tem dificuldade em lidar com essa tag.
Nas regras do CSS podemos usar como seletor cada tag
estrutural do HTML5. Permitindo clareza na hora de criar o layout
do site.
Dr. E. S. Pereira 61
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
O projeto sera formado pela seguinte lista de paginas HTML5:
1 index.html: A pagina principal do site (Landing Page)
2 discografia.html: Opcao de selecao de discos para escutar online
3 disco.html: Usada para tocar a musica de um disco especfico
4 videos.html: Apresenta uma lista de vdeos do youtube
relacionadas ao artista
5 sobre.html: Informacoes sobre o artista.
Dr. E. S. Pereira 62
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
O projeto sera formado pela seguinte lista de paginas HTML5:
1 index.html: A pagina principal do site (Landing Page)
2 discografia.html: Opcao de selecao de discos para escutar online
3 disco.html: Usada para tocar a musica de um disco especfico
4 videos.html: Apresenta uma lista de vdeos do youtube
relacionadas ao artista
5 sobre.html: Informacoes sobre o artista.
Dr. E. S. Pereira 63
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
O projeto sera formado pela seguinte lista de paginas HTML5:
1 index.html: A pagina principal do site (Landing Page)
2 discografia.html: Opcao de selecao de discos para escutar online
3 disco.html: Usada para tocar a musica de um disco especfico
4 videos.html: Apresenta uma lista de vdeos do youtube
relacionadas ao artista
5 sobre.html: Informacoes sobre o artista.
Dr. E. S. Pereira 64
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
O projeto sera formado pela seguinte lista de paginas HTML5:
1 index.html: A pagina principal do site (Landing Page)
2 discografia.html: Opcao de selecao de discos para escutar online
3 disco.html: Usada para tocar a musica de um disco especfico
4 videos.html: Apresenta uma lista de vdeos do youtube
relacionadas ao artista
5 sobre.html: Informacoes sobre o artista.
Dr. E. S. Pereira 65
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
O projeto sera formado pela seguinte lista de paginas HTML5:
1 index.html: A pagina principal do site (Landing Page)
2 discografia.html: Opcao de selecao de discos para escutar online
3 disco.html: Usada para tocar a musica de um disco especfico
4 videos.html: Apresenta uma lista de vdeos do youtube
relacionadas ao artista
5 sobre.html: Informacoes sobre o artista.
Dr. E. S. Pereira 66
Web
Criando a Semantica das paginas
Estrutura Semantica
Estrutura Semantica
O projeto sera formado pela seguinte lista de paginas HTML5:
1 index.html: A pagina principal do site (Landing Page)
2 discografia.html: Opcao de selecao de discos para escutar online
3 disco.html: Usada para tocar a musica de um disco especfico
4 videos.html: Apresenta uma lista de vdeos do youtube
relacionadas ao artista
5 sobre.html: Informacoes sobre o artista.
Dr. E. S. Pereira 67
Web
Criando a Semantica das paginas
Estrutura do Projeto
Dr. E. S. Pereira 68
Web
Criando a Semantica das paginas
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Frederic Chopin</title>
5 <meta charset=" UTF-8 ">
6 <meta name=" viewport " content="
width=device-width , initial-scale=1.0 ">
7 </head>
8 <body>
9 <nav>
10 <ul>
11 <li>
12 <a href=" index.html ">Home</a>
13 </li>
14 <li>
15 <a href=" discografia.html ">Discografia</a>
Dr. E. S. Pereira 69
Web
Criando a Semantica das paginas
48 <footer>
49 <!-- Colocar detalhes ou
50 notas de rodape -->
51 </footer>
52 </article>
53 </section>
54 <footer>
55 <p>
56 <a rel=" license " href=" http: //
creativecommons.org / licenses / by /4.0/ ">
Dr. E. S. Pereira 72
Web
Criando a Semantica das paginas
Dr. E. S. Pereira 73
Web
Criando a Semantica das paginas
Exerccio
Exerccio
Exerccio
Crie a estrutura semantica das outras paginas do projeto.
Dr. E. S. Pereira 74
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
Novas Tags
A declaracao doctype mudou de:
1 <!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01//
EN " " http: // www.w3.org / TR / html4 / strict.dtd ">
Para:
1 <!DOCTYPE html>
Dr. E. S. Pereira 75
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
mark
Usada para marcar um texto. (Efeito marca texto)
1 <p>
2 <mark>Texto destacado</mark>. Texto normal
3 </p>
Dr. E. S. Pereira 76
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
meter
Usada pra criar definicao de medicao; Nao deve ser usada para
construir barra de progresso.
1 <p>
2 HDs <meter value="8" min="0" max=" 10 "/>
3 </p>
4 <p>
5 Mouse <meter value="5" min="0" max=" 10 " />
6 </p>
Dr. E. S. Pereira 77
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
Barra de Progresso
Usada para criar barra de progresso
1 <p>
2 Progresso do Curso <progress value=" 22 " max="
100 "/>
3 </p>
Dr. E. S. Pereira 78
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 79
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
wbr
Usada para especificar oportunidade de quebra de linhas em
palavras. Similar ao hifenizacao em editores de texto.
1 <p>
2 Genu<wbr>flexorio: Peca de madeira fixa ou
movel usado nas igrejas , geralmente na
parte de tras do
3 banco , pra que os fieis possam ajoelhar-se e
rezar.
4 </p>
Dr. E. S. Pereira 80
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
Figuras
Marca e especifica imagens. Nao substitui o <img>, usado para
contexto semantico da pagina.
1 <p>
2 <figure>
3 <img src=" images / chopin.jpg " alt=" Retrato
Chopin " width=" 300 "
4 height=" 300 ">
5 <figcaption>Retrato de Frederic Chopin na
juventude.</figcaption>
6 </figure>
7 </p>
Dr. E. S. Pereira 81
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
Canvas
Cria um recipiente para criacao de graficos atraves de scripts.
Apenas cria a area de desenho;
1 <canvas id=" ij23 " width=" 400 dp " height=" 400 dp ">
</canvas>
2 <script type=" text / javascript ">
3 var canvas = document.getElementById ( ij23 );
4 var ctx = canvas.getContext ( 2d );
5 ctx.fillStyle = # FF0000 ;
6 ctx.fillRect (100 , 200 , 200 , 2) ;
7 </script>
Dr. E. S. Pereira 82
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
audio
Permite a insercao de arquivo de audio na pagina web para que
ele seja reproduzido
1 <p>
2 <audio src=" musicas / Funeral March , Op. posth.
72 no. 2. mp3 "
3 controls=" controls "
4 autoplay=" autoplay "
5 loop=" loop "
6 preload=" none ">
7 Seu Navegador nao suporta o elemento audio.
8 </audio>
9 </p>
Dr. E. S. Pereira 83
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags
audio
src: Especifica o local do arquivo fonte;
autoplay: Reproduz automaticamente assim que a pagina for
carregada;
controls: insere um controle com botoes play, pause e controle
de volume;
loop: faz com que o audio seja reproduzido novamente sempre
que chegar ao fim
preload: pre-carregar: none - o navegador nao carrega o arquivo
de audio enquanto a pagina e carregada; metadata - carrega os
metadados enquanto a pagina e carregada; auto: carrega o
arquivo enquanto a pagina e carregada.
Dr. E. S. Pereira 84
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags
audio
src: Especifica o local do arquivo fonte;
autoplay: Reproduz automaticamente assim que a pagina for
carregada;
controls: insere um controle com botoes play, pause e controle
de volume;
loop: faz com que o audio seja reproduzido novamente sempre
que chegar ao fim
preload: pre-carregar: none - o navegador nao carrega o arquivo
de audio enquanto a pagina e carregada; metadata - carrega os
metadados enquanto a pagina e carregada; auto: carrega o
arquivo enquanto a pagina e carregada.
Dr. E. S. Pereira 85
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags
audio
src: Especifica o local do arquivo fonte;
autoplay: Reproduz automaticamente assim que a pagina for
carregada;
controls: insere um controle com botoes play, pause e controle
de volume;
loop: faz com que o audio seja reproduzido novamente sempre
que chegar ao fim
preload: pre-carregar: none - o navegador nao carrega o arquivo
de audio enquanto a pagina e carregada; metadata - carrega os
metadados enquanto a pagina e carregada; auto: carrega o
arquivo enquanto a pagina e carregada.
Dr. E. S. Pereira 86
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags
audio
src: Especifica o local do arquivo fonte;
autoplay: Reproduz automaticamente assim que a pagina for
carregada;
controls: insere um controle com botoes play, pause e controle
de volume;
loop: faz com que o audio seja reproduzido novamente sempre
que chegar ao fim
preload: pre-carregar: none - o navegador nao carrega o arquivo
de audio enquanto a pagina e carregada; metadata - carrega os
metadados enquanto a pagina e carregada; auto: carrega o
arquivo enquanto a pagina e carregada.
Dr. E. S. Pereira 87
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags
audio
src: Especifica o local do arquivo fonte;
autoplay: Reproduz automaticamente assim que a pagina for
carregada;
controls: insere um controle com botoes play, pause e controle
de volume;
loop: faz com que o audio seja reproduzido novamente sempre
que chegar ao fim
preload: pre-carregar: none - o navegador nao carrega o arquivo
de audio enquanto a pagina e carregada; metadata - carrega os
metadados enquanto a pagina e carregada; auto: carrega o
arquivo enquanto a pagina e carregada.
Dr. E. S. Pereira 88
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
source
Permite colocar outros formatos de audio para o mesmo som
1<p>
2 <audio controls=" controls "
3 autoplay=" autoplay "
4 loop=" loop "
5 preload=" none ">
6 <source src=" musicas / Funeral March , Op.
posth. 72 no. 2. mp3 " type=" audio / mp3 ">
7 <source src=" musicas / Funeral March , Op.
posth. 72 no. 2. wav " type=" audio / wav ">
8 Seu Navegador nao suporta o elemento audio.
9 </audio>
10 </p>
Dr. E. S. Pereira 89
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
video
Permite a insercao de vdeos na pagina web. Pode-se usar a tag
source da mesma forma que em audio, para indicar outras
opcoes de formato.
1 <p>
2 <video src=" videos / developerStories-en.webm "
width=" 300 dp "
3 height=" 250 dp " controls=" controls ">
4 Seu navegador nao suporta o elemento video.
5 </video>
6 </p>
Dr. E. S. Pereira 90
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 92
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
track
Permite adicionar faixas de texto, como legendas, em vdeos e
audios.
1 <p>
2 <video src=" videos / developerStories-en.webm "
width=" 300 dp "
3 height=" 250 dp " controls=" controls ">
4 <track src=" videos /
developerStories-subtitles-en.vtt "
srclang=" en "
5 label=" Ingles ">
6 Seu navegador nao suporta o elemento video.
7 </video>
8 </p>
Dr. E. S. Pereira 93
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 94
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 95
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 96
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 97
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
embed
Permite criar recipientes para insercao de conteudos e
aplicacoes externas.
1 <p>
2 <embed src=" videos / game.swf ">
3 </p>
Dr. E. S. Pereira 98
Web
Criando a Semantica das paginas
Novas Tags
Dr. E. S. Pereira 99
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags I
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Nova Tags</title>
5 <meta charset=" UTF-8 ">
6 <meta name=" viewport " content=" width=device-width
, initial-scale=1.0 ">
7 </head>
8 <body>
9 <div>
10 <p> <mark>Texto Marcado</mark> texto nao
marcado</p>
11 </div>
12 <div>
13 <p>
14 HDs <meter value="8" min="0" max=" 10 "/>
Dr. E. S. Pereira 103
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags II
15 </p>
16 <p>
17 Mouse <meter value="5" min="0" max=" 10 " />
18 </p>
19 </div>
20 <div>
21 <p>
22 Progresso do Curso <progress value=" 22 "
max=" 100 "/>
23 </p>
24 </div>
25 <div>
26 <p>
27 O curso comeca as <time>13:00</time>
28 </p>
29 <p>
Dr. E. S. Pereira 104
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags IV
Novas Tags V
53 <canvas id=" ij23 " width=" 400 dp " height=" 400 dp
"></canvas>
54 <script type=" text / javascript ">
55 var canvas = document.getElementById ( ij23
);
56 var ctx = canvas.getContext ( 2d );
57 ctx.fillStyle = # FF0000 ;
58 ctx.fillRect (100 , 200 , 200 , 10) ;
59 </script>
60 <!-- fillRect x , y , largura , altura -->
61 </div>
62 <div>
63 <p>
64 <audio src=" musicas / Funeral March , Op.
posth. 72 no. 2. mp3 "
65 controls=" controls "
66 autoplay=" autoplay "
Dr. E. S. Pereira 107
Web
Criando a Semantica das paginas
Novas Tags
Novas Tags VI
67 loop=" none "
68 preload=" none ">
69 Seu Navegador nao suporta o elemento
audio.
70 </audio>
71 </p>
72 </div>
73 <div>
74 <p>
75 <video src=" videos / developerStories-en.webm
" width=" 300 dp "
76 height=" 250 dp " controls=" controls ">
77 <track src=" videos /
developerStories-subtitles-en.vtt "
srclang=" en "
78 label=" Ingles ">
79 Seu navegador nao suporta o elemento video.
Dr. E. S. Pereira 108
Web
Criando a Semantica das paginas
Novas Tags
80 </video>
81 </p>
82 </div>
83 <div>
84 <p>
85 <embed src=" videos / game.swf " width=" 600 dp "
height=" 600 dp ">
86 </p>
87 </div>
88 </body>
89 </html>
Exerccio
Exerccio
Exerccio
Exerccio
Exerccio
Elementos Obsoletos
Elementos Obsoletos
Elementos Obsoletos
Referencias Bibliograficas
Referencias
Referencias
Ferreira, S. Guia pratico de HMTL 5. Universos dos Livros. Sao
Paulo. 2013.
Abreu, L. JavaScript. FCA- Editora de Informatica, LTD. Lisboa.
2011.
Desenvolvimento web com html, CSS e JavaScript. https:
//www.caelum.com.br/apostila-html-css-javascript/.
< Acessado em 14 de dezembro de 2016 >
Desenvolvimento web com html, CSS e JavaScript.
http://online.k19.com.br/libraries/handouts/k02. <
Acessado em 14 de dezembro de 2016 >
FIM
FIM
MUITO OBRIGADO.
Dr. E. S. Pereira 120