1. Fernando Pontes
Discente do curso de Sistema de Informação - 4º Período - FACIMP
Web Designer
CEO da websonic – Produtora Web – www.websonic.com.br

2. HTML 5 - Fernando Pontes 2

3.  É um tipo especial de documento de texto
que é usado por navegadores (browser) da
Web para apresentar texto e gráficos.
 Hyper Text Markup Language.
 Não é uma linguagem de programação.
 É uma linguagem de marcação que utiliza
as tags para organizar o documento.
 Tim Berners-Lee junto com Robert Cailliau
criaram o HTML (1990) original. Com o
objetivo de facilitar a comunicação e
disseminação das pesquisas entre ele e seu
grupo de colegas.
HTML 5 - Fernando Pontes 3
TimBerners-LeeRobertCailliau

4. Um screen
shot do
computador
de Tim
Berners-Lee's
rodando uma
página no
browser
WorldWideWeb
HTML 5 - Fernando Pontes 4
http://info.cern.ch/

5. HTML 5 - Fernando Pontes 5

6. HTML 5 - Fernando Pontes 6

7. HTML 5 - Fernando Pontes 7

8.  Incorporação de novas tags:
◦ Vídeos.
◦ Áudio.
◦ Gráficos.
◦ Armazenamento de dados client-side.
◦ Tratamento de dados do formulário.
 Redução do custo e tempo de
desenvolvimento.
 Implantação do conceito de web
semântica.
 RIAS (Rich Internet Application).
 Caching de Aplicações.
 Geolocalização.
 Drag & Drop.
HTML 5 - Fernando Pontes 8

9.  <article> Define um artigo.
 <aside> Define o conteúdo relacionado com o conteúdo da página.
 <audio> Tag utilizada para anexar áudio ao documento.
 <canvas> Tag para exibição de gráficos.
 <datalist> Define uma lista em formato de dropdown.
 <details> Define detalhes de uma elemento.
 <embed> Define um conteúdo interativo ou um plugin.
 <figcaption> Define a legenda de uma tag figure.
 <figure> Usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio.
 <footer> Define o rodapé de uma seção ou de uma página.
 <header> Define o cabeçalho de uma seção ou de uma página.
 <hgroup> Define um grupo de cabeçalhos de uma seção.
 <keygen> Utilizada para gerar uma chave para troca de informações em um formulário.
 <mark> Define uma marcação no texto.
 <nav> Define uma área onde contém links para navegação.
 <section> Define uma seção do documento.
 <summary> Define o cabeçalho de uma elemento details.
 <video> Tag utilizada para anexar vídeo ao documento.
HTML 5 - Fernando Pontes 9

10.  <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <s>
 <strike>
 <tt>
 <u>
 <xmp>
HTML 5 - Fernando Pontes 10

11. HTML 4.1
HTML 5
HTML 5 - Fernando Pontes 11

12. <audio src="horse.ogg" controls="controls">
Seu navegador não suporta a tag audio.
</audio>
HTML 5 - Fernando Pontes 12
Atributo Valor Descrição
autoplay autoplay Se estiver presente, o som irá começar a tocar assim
que estiver pronto.
controls controls Se estiver presente, os controles serão exibidos,
como um botão de play.
loop loop Se estiver presente, o áudio iniciará automaticamente
quando o mesmo finalizar.
preload auto
metadata
none
Especifica se o áudio deve ser carregado quando a
página é carregada ou não. Ignorando se autoplay
está presente.
src url Define a URL do arquivo de audio.

13. HTML 5 - Fernando Pontes 13
Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis No Yes Yes Yes No
MP3 No No No Yes Yes
Wav No Yes Yes No Yes

14. <video src="movie.ogg" width="320" height="240"
controls="controls">
Seu navegador não suporta a tag video.
</video>
HTML 5 - Fernando Pontes 14
Atributo Valor Descrição
autoplay autoplay Se estiver presente, o vídeo irá começar assim que
estiver pronto.
controls controls Se estiver presente, os controles serão exibidos,
como um botão de play.
loop loop Se estiver presente, o áudio iniciará automaticamente
quando o mesmo finalizar.
preload auto
metadata
none
Especifica se o áudio deve ser carregado quando a
página é carregada ou não. Ignorando se autoplay
está presente.
src url Define a URL do arquivo de audio.
Width Pixels Define a largura do player de vídeo
Height Pixels Define a altura do player de vídeo

15. HTML 5 - Fernando Pontes 15
Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg No Yes Yes Yes No
MPEG 4 No No No Yes Yes
 Ogg = codec de vídeo Thedora e codec de áudio
Vorbis.
 MPEG4 = codec de vídeo H.264 e codec de áudio AAC.

16. <canvas id="myCanvas" width="200" height="100"></canvas>
HTML 5 - Fernando Pontes 16
 Utiliza-se da Canvas 2D API
 É possível desenhar desde elementos simples, como
linhas, círculos, retângulos até inserir elementos como
imagens e animações.

17. HTML 5 - Fernando Pontes 17
 O HTML 5 traz dois métodos para armazenar dados no
cliente (browser), são eles:
 localStorage: Armazenamento de dados por tempo
indeterminado.
 sessionStorage: Armazenamento de dados por sessão,
ou seja, temporariamente.
 O HTML 5 usa JavaScript para armazenar e acessar os
dados.

18. HTML 5 - Fernando Pontes 18
 O método sessionStorage:
◦ Os dados estarão disponível temporariamente.
◦ Reduz a carga no servidor.
◦ Otimiza o site ou sistema web.
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

19. HTML 5 - Fernando Pontes 19
 Novos campos de entrada.
 Maior facilidade na validação dos dados.
 Entre os novos campos podemos destacar:
◦ email
◦ url
◦ number
◦ range
◦ Date pickers (date, month, week, time, datetime, datetime-
local)

20. HTML 5 - Fernando Pontes 20
Input type IE Firefox Opera Chrome Safari
email No No 9.0 No No
url No No 9.0 No No
number No No 9.0 No No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 No No

21. HTML 5 - Fernando Pontes 21
 Entre os novos elementos podemos destacar:
◦ datalist
◦ keygen
◦ output
Atributo IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No

22. HTML 5 - Fernando Pontes 22
 Novos atributos para formulários:
◦ autocomplete
◦ Novalidate
 Novos atributos para entradas:
◦ autocomplete
◦ autofocus
◦ form
◦ form overrides (formaction, formenctype, formmethod, formnovalidate,
formtarget)
◦ height and width
◦ list
◦ min, max and step
◦ multiple
◦ pattern (regexp)
◦ placeholder
◦ required

23. HTML 5 - Fernando Pontes 23
Atributos IE Firefox Opera Chrome Safari Campos
autocomplete 8.0 3.5 9.5 3.0 4.0
text, search, url, telephone, email, password,
datepickers, range e color.
autofocus No No 10.0 3.0 4.0 Todos os tipos de campo.
form No No 9.5 No No Todos os tipos de campo.
form overrides No No 10.5 No No submit and image.
height and width 8.0 3.5 9.5 3.0 4.0 Image.
list No No 9.5 No No
text, search, url, telephone, email, date pickers,
number, range e color.
min, max and step No No 9.5 3.0 No date pickers, number e range.
multiple No 3.5 No 3.0 4.0 Email e file.
novalidate No No No No No
<form> e <input>: text, search, url, telephone,
email, password, date pickers, range e color.
pattern No No 9.5 3.0 No text, search, url, telephone, email e password
placeholder No No No 3.0 3.0 text, search, url, telephone, email e password
required No No 9.5 3.0 No
text, search, url, telephone, email, password, date
pickers, number, checkbox, radio e file.

24. HTML 5 - Fernando Pontes 24
“É uma extensão da Web atual, que permitirá aos computadores e humanos
trabalharem em cooperação. A Web semântica interliga significados de
palavras e, neste âmbito, tem como finalidade conseguir atribuir um
significado (sentido) aos conteúdos publicados na Internet de modo que
seja perceptível tanto pelo humano como pelo computador.” wikipédia
“A Web Semântica é nada mais nada menos, que uma web com toda sua
informação organizada de forma que não somente seres humanos possam
entendê-la, mas principalmente máquinas. Disse principalmente máquinas,
porque elas nos ajudarão, de fato, em tarefas que hoje, invariávelmente
temos que fazer manualmente.” Diego Eis, do site tableless

25. XHTML 1.0 HTML 5
HTML 5 - Fernando Pontes 25

26. HTML 5 - Fernando Pontes 26
 Rich Internet application.
 Características semelhantes das aplicações para
Desktop.
 Redução da carga de servidor.
 Sem necessidade de vários refresh (atualizações) da
página do site ou sistema.
 Mais exemplos:
◦ Flash (Adobe), Silverlight (Microsoft), Ajax, JavaFx (Oracle) e o
Ajax (CSS, JavaScript, HTML).

27.  Segundo o site http://html5test.com/, os pontos
(no total de 300) alcançados pelos browser são:
HTML 5 - Fernando Pontes 27
Versão: 7.0.517.41
231 pontos
Versão: 10.63
159 pontos
Versão: 3.6.11
139 pontos
Versão: 8.0
27 pontos
Versão: 5.0.2
207 pontos

28.  http://www.w3.org/html/
 http://www.w3.org/MarkUp/Guide/
 http://www.w3schools.com/
 http://info.cern.ch/
 http://pt.wikipedia.org/wiki/Tim_Berners-Lee
 http://pt.wikipedia.org/wiki/HTML
 http://pt.wikipedia.org/wiki/Web_semântica
 http://www.tableless.com.br/a-web-semantica
 http://www.w3.org/TR/html5/offline.html
 http://dev.w3.org/geo/api/spec-source.html
 http://www.carolinisantos.com/artigos/html5ecss3/htm
l5.html
HTML 5 - Fernando Pontes 28

29. HTML 5 - Fernando Pontes 29
www.websonic.com.br