Introdução Ao HTML5

Introduo ao HTML5 O que h de novo?
http://www.escolacriatividade.com/introducao-ao-html5-o-que-ha-de-novo/
A linguagem HTML5 ainda no est na sua verso final, mas a cada dia que passa mais
e mais websites comeam a us-la. A linguagem aproxima-se dos requisitos da Web e
torna-se mais fcil publicar contedos Web 2.0. Quando HTML4 reinava, a Web2.0 nem
sequer tinha sido pensada, sendo assim pouco compatveis. Mas com HTML5,
expectvel que seja diferente.
Embora seja previsvel que quando HTML5 chegar sua verso final, j exista Web 3.0,
4.0 ou quem sabe at mais, criando assim a necessidade de um update ao HTML5. As
diferenas entre HTML4 e HTML5 no so muitas, mas h algumas que so
importantes e que convm referir, confira em baixo!
SINTAXE SIMPLIFICADA
Esta uma das diferenas mais notveis entre HTML4 e HTML5, e que certamente ir
fazer as delicias dos programadores Web. A sintaxe HTML5 compativel com HTML4
mas h bastantes melhorias. A declarao doctype muito mais curta (<!doctype
html> ao invs de por ex. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> ). Variaes de
doctypes j no so suportadas, necessrio sintaxe XHTML ou HTML em modo
restricto.
NOVOS ELEMENTOS
Os novos elementos em HTML5 a diferena mais notvel, tm como propsito a
simplificar o desenvolvimento do website, aproximar dos requisitos Web2.0, entre
outros de entre uma lista enorme que pode ser consultada aqui.
Deixo agora alguns elementos aqui descritos:
<article> Este atributo usado para separar artigos, posts de blogs e outro
contedo de texto. Com a crescente comunidade de bloggers e artigos de
opinio, este elemento certamente muito til.
<header> e <footer> Estes elementos so usados para o cabealho e rodap da
pgina e podem substituir os elementos <div> que usamos hoje para identificar
vrios elementos, incluindo o cabealho e rodap. Uma vez que cabealho e
rodap esto presentes em quase todas as pginas, faz sentido que agora tenham
um elemento s seu.
<nav> Semelhente ao <header> e <footer>, na medida em que foi criado para
dar um elemento navegao de pgina.
<audio> e <video> O contedo udio e vdeo to comum de hoje em dia,
alavancado pelas ligaes internet de alta velocidade, que era impossvel no
ter estes elementos disponveis em HTML5, para facilitar a colocao destes

contedos no website.
Alm dos novos elementos introduzidos, foram tambm introduzidos novos atributos a
elementos j existentes, mas a lista ainda maior do que a lista dos elementos! De
qualquer forma, antes de comear a programar em HTML5, d uma olhadela na nova
lista de atributos para elementos que usa frequentemente.
ELEMENTOS E ATRIBUTOS ELIMINADOS

Alm de novos elementos e atributos, tambm alguns destes foram apagados. Embora
muitos deles no venham a fazer falta, porque muito raramente eram utilizados, alguns
podiam ter ficado.
O primeiro grupo de elementos que foram utilizados e que sero melhor
utilizados atravs de CSS so o <center>, <big> e <u>. Agora o seu lugar na
folha de estilos.
O segundo grupo tem a ver com as frames, <frame>, <frameset> e <noframes>
eram to antiquados que foi um alvio terem sido eliminados. Quando foram
lanados, seriam espectaculares mas com a evoluo rapidamente passaram a
antiquados.
O terceiro grupo pende em elementos raramente utilizados, que o caso do
<isindex>, <dir>, <applet> e <acronym>.
Como pode constatar, h de facto algumas diferenas entre o HTML5 e o HTML4, mas
elas no so diferenas muito profundas. Quero com isto dizer que no ter de
reaprender HTML da estaca zero. De qualquer das formas ir levar o seu tempo at se
habituar s novas regras, nomeadamente no que toca aos atributos e elementos
alterados. A boa notcia que o HTML5 veio para simplificar, e isto o suficiente para
justificar a actualizao.
Ainda assim, deixamos uma relao das novas tags HTML5, as quais vm mudar um
pouco o contexto do novo HTML5, tome nota:
article: Bloco de artigo
aside: Contedo extra q tenha a ver com o site / artigo
audio: Contedo de som
canvas: Grfico vetorial
command: Boto de comando
datagrid: Dados em uma lista ramificada
datalist: Lista dropdown

datatemplate: Template de dados
details: Detalhes de um elemento
dialog: Dilogo de uma conversa
embed: Interatividade com contedo externo ou um plugin (at que fim foi
especificado!)
event-source: Alvo para eventos enviados por um servidor
figure: Grupo de contedo de mdia e sua legenda
footer: Bloco de rodap
header: Bloco de cabealho
mark: Tag para marcao em textos
meter: Medio entre um valor mnimo e um valor mximo
nav: Bloco de navegao
nest: Prximo ponto para criao de elemento (trabalha junto com a tag
datatemplate e rule)
output: Alguns tipos de sada de dados como em execuo de scripts
progress: Progresso de uma tarefa de qualquer tipo
rule: Linha de um template (datatemplate)
selection: Seo do documento como captulos ou alguma outra seo do
documento
source: Recurso multimdia
time: Data / tempo
video: Um vdeo
Aprender HTML5 em 4 passos!

http://www.escolacriatividade.com/aprender-html5/
Como de conhecimento geral, o HTML5 chegou recentemente ao mundo

da internet. Ainda no estando na sua verso final, perfeitamente usvel e
trouxe algumas mudanas e melhorias, conforme informmos no artigo de
Introduo ao HTMl5. Contudo, ainda muito h por aprender e por isso
mesmo decidimos trazer-lhe este artigo com o intuito de aprofundar o
temaou quem sabe dar incio ao seu conhecimento sobre HTML5.
A maioria dos navegadores modernos da atualidade j tem suporte para

HTML5, o que vem potenciar o crescimento e a converso da web para esta
nova linguagem. Nasceu com a cooperao entre a World Wide Web
Consorcium (W3C) e aWeb Hypertext Application Technology Working Group
(WHATWG). Desde logo foram definidas algumas regras para o HTML5, de
entre as quais destacamos a reduo da necessidade de plugins externos,
melhoria no manuseio de erros e o facto de as novas funcionalidades serem
baseadas em HTML, CSS, DOM e JavaScript. Decidimos destacar algumas
destas novas funcionalidades, que passam pela criao de elementos de
udio e vdeo para reproduo de mdia, novos controlos de formulrios e a
criao de um elemento canvas para criao de imagens.
1. NOVOS ELEMENTOS
Como poder imaginar, a internet mudou bastante deste a implementao do HTML
4,01 em 1999. Nos dias de hoje, alguns dos elementos so obsoletos, nunca usados ou
usados mas em desuso. Todos estes elementos foram eliminados ou reescritos para
estarem em conformidade com as exigncias desta nova era. Foi tambm por isso que
foram criados novos elementos para melhorar a estrutura, contedos de mdia e
formulrios.
Irei destacar os novos elementos, divididos nas suas categorias:
Novos elementos de marcao

<article> Para contedo externo, como texto de um uma notcia, blog, forum
ou outra fonte de contedo externo.
<aside> - Para contedo parte daquele onde est inserido
<command> Um boto, checkbox.
<details> Para fazer uma descrio acerca de um documento ou partes dele.

<summary> Uma legenda, ou resumo dentro do elemento de detalhes
<figure> Para agrupar uma seco de contedo no relacionado, como um
vdeo.
<figcaption> A legenda da seco <figure>.
<footer> Para o rodap de um documento ou seco, pode incluir o nome do
autor, a data, informaes de contacto ou informaes de direitos de autor.
<header> Para o cabealho de um documento ou seco, onde pode ser
includa a navegao.
<hgoup> Para uma seco de ttulos usando desde <h1> at <h6>.
<mark> Para diferenciar texto.
<meter> - Elemento de medida, usado apenas se o valor mximo e mnimo
forem conhecidos.
<nav> Para a seco de navegao.
<progress> Informa o estado do trabalho em execuo.
<ruby> Para anotao ruby.
<rt> - Para explicao da anotao ruby.
<rp> Elemento usado para mostrar contedo quando o navegador no suportar
o elemento ruby.
<section> Para uma seco no documento, como captulos, cabealhos,
rodaps ou outras seces.
<time> - Para definir tempo ou data, ou ambos.
<wbr> Quebra de palavra, para definir uma quebra de linha.
Novos elementos de mdia

<audio> Para contedo multimdia, sons, msica ou outros streams de udio.
<video> - Para contedo vdeo, como um clipe de vdeo ou outros streams de
vdeo.
<source> Para recursos media para os elementos de media, definido dentro

dos elementos de udio ou vdeo.
<embed> Para contedo embutido, como um plug.
O elemento tela
<canvas> Para a criao de grficos atravs de script.
Novos elementos de formulrios

<datalist> Uma lista de opes para valores de introduo
<keygen> Gera passwords para autenticao de utilizadores.
<output> Para diferentes tipos de output, como o que criado atravs de um
script.
Novos valores de atributos

tel - O valor de introduo um nmero de telefone.
search O campo de introduo um campo de pesquisa.
url - O valor de introduo um URL.
email - O valor de introduo um ou mais endereos de e-mail.
datetime O valor de introduo uma data ou hora.
date - O valor de introduo uma data.
month o valor de introduo um ms.
week o valor de introduo uma semana.
time o valor de introduo um tipo de tempo.
datetime-local o valor de introduo uma data ou tempo local.
number o valor de introduo um nmero.
range o valor de introduo um nmero dentro de um dado intervalo.
color O valor de introduo uma cor em formato hexadecimal, como
#009900
2. VDEO HTML
At agora, nunca foi estabelecido um formato universal para mostrar vdeos numa
pgina web. Hoje, os vdeos so mostrados atravs de um plugin, sendo que o mais
usado o Flash. No entanto, nem todos os navegadores tm os mesmos plugins, sendo
necessrio instalar aplicaes complementares para fazer o trabalho. Com HTML5, ser
possvel introduzir um formato universal de introduo de vdeo atravs do elemento
<video>.
Formatos de Vdeo
Os formatos de vdeo actualmente suportados so Ogg e MPEG-4. No entanto, devido
s constantes actualizaes dos navegadores, no h uma lista de compatibilidades
actual e concisa entre os browsers e os formatos de vdeos.
Como funciona?
Para introduzir vdeo em HTML5, tudo o que necessrio :
1 <video src="movie.ogg" controls="controls">
2 </video>
O atributo controls para introduzir o reproduzir, pausar, e controlo de volume.
Tambm ser boa ideia incluir os atributos de largura e altura. Para navegadores que no
suportam o elemento vdeo, insira um comentrio dentro das tags <video>
<video src="movie.ogg" width="320" height="240"
1controls="controls">
2O seu navegador no suporta o elemento video de HTML5.
3</video>
No exemplo anterior, usamos um ficheiro Ogg, que suportado pelo Firefox, Opera e
Chrome. Para que possa ver o vdeo no Safari, ter de estar em MPEG-4. Felizmente,
possvel introduzir mais de uma fonte do vdeo, pelo que podemos introduzir o vdeo
em OGG e MPEG-4, para poder ser reproduzido nos navegadores citados. O Internet
Explorer 8 no suporta qualquer um deles, mas est previsto que a sua verso 9 venha
colmatar esta lacuna. Vejamos um exemplo:
1 <video width="320" height="240" controls="controls">
2 <source src="movie.ogg" type="video/ogg" />
3 <source src="movie.mp4" type="video/mp4" />
4 O seu navegador no suporta o elemento vdeo de HTML5.
5 </video>
Atributos vdeo
Atributo - Valor do atributo Descrio
autoplay autoplay Define se o vdeo ir ser exibido assim que estiver pronto
controls controlos Define os controlos que iro ser exibidos.

height pixeis Define a altura do vdeo.
loop loop Define se o vdeo ir ser repetido quando acabar.
preload preload Define se o vdeo ir ser carregado ao mesmo tempo que a pgina
ir ser carregada, e pronto para ser reproduzido. ignorado se o atributo autoplay
estiver activo.
src url Define a fonte do vdeo, em um url.
width Define a largura do vdeo.
3. AUDIO HTML
Tal como no caso do vdeo HTML, no houve at agora um formato universal para
reproduo de audio. A reproduo era feita atravs de plugins como Flash. Agora com
HTML5 e a introduo do elemento <audio>, possvel fazer a reproduo num
formato universal.
Formatos de vdeo
De momento h 3 formatos suportados, Ogg Vorbis, MP3 e Wav, mas tal como no
vdeo, no h uma tabela actual e concisa da relao entre o suporte dos navegadores e
os formatos. Aquilo que garantido que o Internet Explorer 8 no suporta este
elemento.
Como funciona?
Para introduzir o audio com HTML5, basta introduzir o elemento audio:
1 <audio src="song.ogg" controls="controls">
2 </audio>
O atributo controls para introduzir os controlos de reproduzir, pausar e controlo de
volume.
Deve tambm ser introduzido um comentrio, dentro do elemento audio, para os
navegadores que no suportarem este elemento.
1<audio src="song.ogg" controls="controls">
2O seu navegador no suporta a reproduo de audio HTML5.
3</audio>
Mais uma vez, podem ser introduzidas vrias fontes do contedo, para suporte de vrios
navegadores:
1 <audio controls="controls">
2 <source src="song.ogg" type="audio/ogg" />
3 <source src="song.mp3" type="audio/mpeg" />

4 <source src="song.wav" type="audio/wav" />
5 O seu navegador no suporta reproduo de audio HTML5.
6 </audio>
Atributos udio
Atributos Valores de Atributos Descrio
autoplay autoplay Define se o udio ir ser reproduzido assim que estiver
pronto.
controls controls Define quais os controlos que iro estar disponveis.
loop loop Define se o udio ir ser reproduzido repetidamente.
preload preload Define se o udio ir ser carregado ao mesmo tempo do que
a pgina, e pronto a reproduzir.
src url Define o url do udio a reproduzir.
4. TELA HTML5 (CANVAS)

O elemento canvas permite introduzir grficos no documento atravs de Javascript.
uma rea rectangular em que se tem o controlo de todo e qualquer pixel, atravs de
mtodos para criar caixas, crculos, caracteres e ainda adicionar imagens.
Criando o elemento canvas

Para criar o elemento canvas, basta introduzir o seguinte cdigo HTML
1<canvas id="meuCanvas" width="250" height="150"></canvas>
D-se um nome , introduzindo o id que neste caso meuCanvas, define-se a largura e
a altura e o elemento est criado.
Desenhando com Javascript

O elemento canvas no tem por si s capacidade de fazer a criao de imagens, sendo
por isso necessrio faz-lo atravs de Javascript, e dentro da sua tag <script>. Vejamos
um exemplo da criao de um rectngulo.
1 <script type="text/javascript">
2 var c=document.getElementById("meuCanvas");
3 var cxt=c.getContext("2d");
4 cxt.fillStyle="#00FF00";
5 cxt.fillRect(0,0,150,75);
6 </script>
O Javascript procura o elemento atravs da funo .getElementById, depois cria um

objecto em contexto atravs da funo .getContext(2d), que neste caso um objecto
que faz parte do HTML5, que permite a introduo de caixas, crculos, caracteres,
imagens, entre outros.
As 2 linhas fillStyle e fillRect criam um rectngulo, em que fillRect desenha-o com a
sua posio tamanho e forma e fillStyle torna-o verde atravs de cdigo hexadecimal.
Passo a explicar os valores de fillRect(1,2,3,4):
1. Coordenadas X, em que X o topo da pgina.
2. Coordenadas Y, em que Y o lado esquerdo da pgina.
3. Largura do rectngulo
4. Altura do rectngulo
Quer isto dizer que o nosso rectngulo ir ser desenhado no canto superior esquerdo da
pgina.
Exemplo de colocao de imagem:

1 <script type="text/javascript">
2
3 var c=document.getElementById("meuCanvas");
4 var cxt=c.getContext("2d");
5 var img=new Image()
6 img.src="imagem_fantastica.png"
7 cxt.drawImage(img,0,0);
8
9 </script>
Muito mais h a descobrir sobre HTML5 e a capacidade de os navegadores suportarem

as suas funes nas suas novas verses.

Introdução Ao HTML5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introdução Ao HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

Introduo ao HTML5 O que h de novo?

ter estes elementos disponveis em HTML5, para facilitar a colocao destes

ELEMENTOS E ATRIBUTOS ELIMINADOS

datalist: Lista dropdown

Aprender HTML5 em 4 passos!

Como de conhecimento geral, o HTML5 chegou recentemente ao mundo

A maioria dos navegadores modernos da atualidade j tem suporte para

Novos elementos de marcao

<details> Para fazer uma descrio acerca de um documento ou partes dele.

Novos elementos de mdia

<source> Para recursos media para os elementos de media, definido dentro

Novos elementos de formulrios

Novos valores de atributos

controls controlos Define os controlos que iro ser exibidos.

3 <source src="song.mp3" type="audio/mpeg" />

4. TELA HTML5 (CANVAS)

Criando o elemento canvas

Desenhando com Javascript

O Javascript procura o elemento atravs da funo .getElementById, depois cria um

Exemplo de colocao de imagem:

Muito mais h a descobrir sobre HTML5 e a capacidade de os navegadores suportarem

Você também pode gostar