You are on page 1of 120

Web

Desenvolvimento Web - Aula 01

Professor Dr. Eduardo S. Pereira.


http://eduardopereira.bigdatatec.com/

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

2 Desenvolvimento com netbeans

3 Criando a Semantica das paginas


Exerccio
Novas Tags

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

Web Semantica - Pontos Relevantes

O conteudo deve ser separado da apresentacao visual


Usar as marcacoes para cada secao da pagina.
Nao construir o layout da pagina em tabela
Ttulos: as tags <h1> ate <h6> sao usadas para definir ttulos
e nao devem ser usadas para tamanhos de fonte.

Dr. E. S. Pereira 28
Web
Introducao - HTML5
Web Semantica

Web Semantica - Pontos Relevantes

O conteudo deve ser separado da apresentacao visual


Usar as marcacoes para cada secao da pagina.
Nao construir o layout da pagina em tabela
Ttulos: as tags <h1> ate <h6> sao usadas para definir ttulos
e nao devem ser usadas para tamanhos de fonte.

Dr. E. S. Pereira 29
Web
Introducao - HTML5
Web Semantica

Web Semantica - Pontos Relevantes

O conteudo deve ser separado da apresentacao visual


Usar as marcacoes para cada secao da pagina.
Nao construir o layout da pagina em tabela
Ttulos: as tags <h1> ate <h6> sao usadas para definir ttulos
e nao devem ser usadas para tamanhos de fonte.

Dr. E. S. Pereira 30
Web
Introducao - HTML5
Web Semantica

Web Semantica - Pontos Relevantes

O conteudo deve ser separado da apresentacao visual


Usar as marcacoes para cada secao da pagina.
Nao construir o layout da pagina em tabela
Ttulos: as tags <h1> ate <h6> sao usadas para definir ttulos
e nao devem ser usadas para tamanhos de fonte.

Dr. E. S. Pereira 31
Web
Introducao - HTML5
Web Semantica

Web Semantica - Pontos Relevantes I

Abreviaturas e siglas: usar a tag <abbr> para descrever o


significado.
1 O <abbr title=" Hypertext Markup Language ">HTML<
/abbr> e uma linguagem de..

Imagens: use sempre o atributo alt que especifica um texto


alternativo par a imagem.
1 <img src=" log.png " alt=" Estrela Informatica "
height=" 42 " width=" 42 ">

Dr. E. S. Pereira 32
Web
Introducao - HTML5
Web Semantica

Web Semantica - Pontos Relevantes I

Informacoes de contato: usada para informacoes do autor da


pagina.
1 <address>
2 Postado por Eduardo
3 Rua das Oliveiras , 107 , Centro , Lugar Algum
4 CEP<br>
5 Tel: (00) 0000 -0000
6 </addres>

Bloco de citacoes: deve-se utilizar a tag <blockquote>.


Listas: nao numeradas <ul> e <li>; Numeradas <ol> e <li>.

Dr. E. S. Pereira 33
Web
Introducao - HTML5
Web Semantica

Estrutura Basica do HTML5 I

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

HTML5. Na figura abaixo vemos o caso de funcoes de aplicacao web.

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

Criando Projeto no netbeans

Criando Projeto no netbeans

Dr. E. S. Pereira 50
Web
Desenvolvimento

Criando Projeto no netbeans

Criando Projeto no netbeans

Dr. E. S. Pereira 51
Web
Desenvolvimento

Criando Projeto no netbeans

Criando Projeto no netbeans

Dr. E. S. Pereira 52
Web
Desenvolvimento

Criando Projeto no netbeans

Criando Projeto no netbeans

Dr. E. S. Pereira 53
Web
Desenvolvimento

Criando Projeto no netbeans

Criando Projeto no netbeans

Dr. E. S. Pereira 54
Web
Desenvolvimento

Criando novas Pastas e Arquivos

Criando novas Pastas e Arquivos

Dr. E. S. Pereira 55
Web
Desenvolvimento

Estrutura do Projeto

Crie a seguinte estrutura de pastas para o projeto:

Dr. E. S. Pereira 56
Web
Criando a Semantica das paginas

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

Crie a seguinte estrutura de pastas para o projeto:

Dr. E. S. Pereira 68
Web
Criando a Semantica das paginas

Pagina Principal Do Site I

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

Pagina Principal Do Site II


16 </li>
17 <li>
18 <a href=" videos.html ">Videos</a>
19 </li>
20 <li>
21 <a href=" shows.html ">Shows</a>
22 </li>
23 <li>
24 <a href=" sobre.html ">Sobre</a>
25 </li>
26 </ul>
27 </nav>
28
29 <header>
30 <h1>Frederic Chopin</h1>
31 </header>
32 <aside>
Dr. E. S. Pereira 70
Web
Criando a Semantica das paginas

Pagina Principal Do Site III


33 <nav>
34 <!-- Possivel menu secundario ou outras
informacoes -->
35 </nav>
36 </aside>
37 <section>
38 <article>
39 <header>
40 <h1>Classico Vivo</h1>
41 <p>
42 A musica classica pode e deve ser
acessvel a todos.
43 </p>
44 </header>
45 <div>
46 <!-- Mais informacoes -->
47 </div>
Dr. E. S. Pereira 71
Web
Criando a Semantica das paginas

Pagina Principal Do Site IV

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

Pagina Principal Do Site V

57 <img alt=" Licenca Creative Commons "


style=" border-width:0 " src=" https: //
i.creativecommons.org /l/ by /4.0/88
x31.png " /></a><br />Este trabalho
esta licenciado com uma Licenca <a
rel=" license " href=" http: //
creativecommons.org / licenses / by /4.0/ "
>Creative Commons - Atribuicao 4.0
Internacional
58 </a>.
59 </p>
60 </footer>
61 </body>
62 </html>

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

Novas Tags - time I

Usada para marcar e definir datas ou horas


1<p>
2 O curso comeca as <time>13:00</time>
3</p>
4<p>
5 O curso comeca as <time datetime=" 2017
-02-06T13:00:00-03:00 ">06 -01-2017</time>
6 </p>
7 <p>
8 Publicado em <time datetime=" 2017
-02-06T13:00:00Z " pubdate=" pubdate ">06
-01-2017</time>
9 <!--Z para horario UTC -->
10 </p>

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

Novas Tags - video I

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.
height: Altura do vdeo
Largura do vdeo
Dr. E. S. Pereira 91
Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - video II

muted: especifica que o vdeo, ao iniciar, ficara em estado do


mudo, sem audio.
poster: Indica uma imagem para ser exibida enquato o vdeo e
carregado ou enquanto nao for iniciado;
type: especifica o tipo MIME dos dados para o objeto. (flv, avi,
mov, mp4, webm)

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

Novas Tags - track

src: Especifica o local do arquivo fonte;


kind: especifica o tipo de texto. captions, chapters, descriptions,
metadata, subtitles
srclang: especifica o idioma da legenda
label: especifica o ttulo.

Dr. E. S. Pereira 94
Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - track

src: Especifica o local do arquivo fonte;


kind: especifica o tipo de texto. captions, chapters, descriptions,
metadata, subtitles
srclang: especifica o idioma da legenda
label: especifica o ttulo.

Dr. E. S. Pereira 95
Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - track

src: Especifica o local do arquivo fonte;


kind: especifica o tipo de texto. captions, chapters, descriptions,
metadata, subtitles
srclang: especifica o idioma da legenda
label: especifica o ttulo.

Dr. E. S. Pereira 96
Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - track

src: Especifica o local do arquivo fonte;


kind: especifica o tipo de texto. captions, chapters, descriptions,
metadata, subtitles
srclang: especifica o idioma da legenda
label: especifica o ttulo.

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

Novas Tags - embed

src: Especifica o local do arquivo fonte;


heght: altura
width: largura
type: especifica o tipo MIME

Dr. E. S. Pereira 99
Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - embed

src: Especifica o local do arquivo fonte;


heght: altura
width: largura
type: especifica o tipo MIME

Dr. E. S. Pereira 100


Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - embed

src: Especifica o local do arquivo fonte;


heght: altura
width: largura
type: especifica o tipo MIME

Dr. E. S. Pereira 101


Web
Criando a Semantica das paginas
Novas Tags

Novas Tags - embed

src: Especifica o local do arquivo fonte;


heght: altura
width: largura
type: especifica o tipo MIME

Dr. E. S. Pereira 102


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 III

30 O curso comeca as <time datetime=" 2017


-02-06T13:00:00-03:00 ">06 -01-2017</time
>
31 </p>
32 <p>
33 Publicado em <time datetime=" 2017
-02-06T13:00:00Z " pubdate=" pubdate ">06
-01-2017</time>
34 <!--Z para horario UTC -->
35 </p>
36 </div>
37 <div>
38 <p>
39 Genu<wbr>flexorio: Peca de madeira fixa ou
movel usado nas igrejas , geralmente na
parte de tras do
Dr. E. S. Pereira 105
Web
Criando a Semantica das paginas
Novas Tags

Novas Tags IV

40 banco , pra que os fieis possam ajoelhar-se


e rezar.
41 </p>
42 </div>
43 <div>
44 <p>
45 <figure>
46 <img src=" images / chopin.jpg " alt=" Retrato
Chopin " width=" 300 "
47 height=" 300 ">
48 <figcaption>Retrato de Frederic Chopin na
juventude.</figcaption>
49 </figure>
50 </p>
51 </div>
52 <div>
Dr. E. S. Pereira 106
Web
Criando a Semantica das paginas
Novas Tags

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

Novas Tags VII

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>

Dr. E. S. Pereira 109


Web
Exerccio

Exerccio

Dr. E. S. Pereira 110


Web
Exerccio

Exerccio

Tente identificar as novas tags em acao

Dr. E. S. Pereira 111


Web
Exerccio

Exerccio

Tente identificar as novas tags em acao

Dr. E. S. Pereira 112


Web
Exerccio

Exerccio

Tente identificar as novas tags em acao

Dr. E. S. Pereira 113


Web
Exerccio

Exerccio

Implemente a pagina de audio com um conjunto de musicas.

Dr. E. S. Pereira 114


Web
Elementos Obsoletos

Elementos Obsoletos

Dr. E. S. Pereira 115


Web
Elementos Obsoletos

Elementos Obsoletos

Foram eliminados e muitos deles sao melhor manipulados via CSS


<acronym>: acronimo
<applet> applet
<basefont>: Fonte base para pagina
<big>: texto grande
<center>: texto centralizado
<dir>: Lista de diretorios
<font>: Fonte, tamanho e cor de texto
<frame>: Define um frame
<frameset>:Defini um conjunto de frame

Dr. E. S. Pereira 116


Web
Elementos Obsoletos

Elementos Obsoletos

Foram eliminados e muitos deles sao melhor manipulados via CSS


<isindex>: Define um campo de entrada numa unica linha
<noframes>: Define uma secao nao frame
<s>: Define um texto tachado
<strike>: Define um texto tachado
<tt>: Define teletipos de texto
<u> Define texto sublinhados

Dr. E. S. Pereira 117


Web
Referencias Bibliograficas

Referencias Bibliograficas

Dr. E. S. Pereira 118


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

Dr. E. S. Pereira 119


Web
Referencias Bibliograficas

FIM

FIM

MUITO OBRIGADO.
Dr. E. S. Pereira 120

You might also like