SlideShare ist ein Scribd-Unternehmen logo
1 von 41
Rommel Peixoto
   Breve história do HTML
   Estrutura de um documento HTML5
   Comparação entre HTML4/XHTML e HTML5
   Conhecer as novidades do HTML5
   O estiloso CSS3
   Códigos, códigos, códigos...
   Explicação detalhada das APIs
   Exemplos online
1998:


HTML 4.0
2000:


XHTML
2002:


XHTML 2.0
2004:


Web 2.0
2006:


W3C + WHATWG
2009:


W3C -> HTML5
2010   ~ 2011:

HTML5
2012:


FIM DO MUNDO!!!
   Alguém sabe de cabeça como escreve o
    DOCTYPE?
   HTML5


    <!doctype html>
   Outro elemento importante em todo HTML: META

   HTML 4.0
    <meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>

   XHTML
    <meta http-equiv=“content-type” content=“text/html;charset=UTF-8” />

   HTML5
    <meta charset=“UTF-8”>
   Juntando tudo!!!
   Conectividade e aplicações em tempo real
   Novas possibilidades de estilo com CSS3
   Gráficos 2D, 3D e Vetoriais
   Recursos multimídia
   Melhor performance
   Elementos semânticos
   Armazenamento offline
   APIs JS: Drag and Drop, Geolocalização, etc...
   Tags de estrutura:
   Tags de estrutura:
   Tags de estrutura:
   Novos tipos de campos:
   Novos tipos de campos:
   Tipos de dados e validadores:
   Tipos de dados e validadores :
   Conteúdo editável :
   Áudio:
   Vídeo:
   Drag and Drop:
   Correção Ortográfica:
   Gráfico:
    <canvas>
   Armazenamento:

   Cookies
   Web Storage
   Web SQL Databases
   Geolocalização:
Quem nao quer matar o designer, quando pede:

   Fazer caixinhas com bordas arredondadas
   Colocar uma sombrinha nos textos/caixas
   Utilizar um background gigante
   Utilizar um background composto
   Fazer uma página adaptável ao tamanho da página
   Fazer os títulos das páginas ter uma font mais
    estilosa
   Bordas arredondadas:
   Sombras:
   Background Gigante:




SVG + background-size
   Gradient:
   Cores RGBA:
   Animações:
   font:
   Media Queries:
   rommelweb
   rommel.com.br

Weitere ähnliche Inhalte

Was ist angesagt?

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTAndré Luís
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Anderson Aguiar
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTMLTales Augusto
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujoorenatoaraujo
 

Was ist angesagt? (20)

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Html5 & CSS3
Html5 & CSS3Html5 & CSS3
Html5 & CSS3
 

Andere mochten auch

CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNRenato Melo
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...joselialcosta
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1Flavia Siqueira
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3brenod123
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3André Luiz Forchesatto
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelGuto Xavier
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5Rodrigo Cascarrolho
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5Rafael Sakurai
 
Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Fabio Moura Pereira
 

Andere mochten auch (13)

CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Css Ppt
Css PptCss Ppt
Css Ppt
 

Ähnlich wie HTML5 CSS3

Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5Otávio Santana
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúClécio Bachini
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal Clécio Bachini
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsNáiron Jcg
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloTchelinux
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebRogério Moraes de Carvalho
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5Danilo Sousa
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudosinfo_cimol
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3CELULA CURSOS
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5José Farias
 
HTML5 & Sencha Touch - Front In Maceió
HTML5 & Sencha Touch - Front In MaceióHTML5 & Sencha Touch - Front In Maceió
HTML5 & Sencha Touch - Front In MaceióNicholas Fazio
 

Ähnlich wie HTML5 CSS3 (20)

HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Html5
Html5Html5
Html5
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5
 
HTML5 & Sencha Touch - Front In Maceió
HTML5 & Sencha Touch - Front In MaceióHTML5 & Sencha Touch - Front In Maceió
HTML5 & Sencha Touch - Front In Maceió
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 

HTML5 CSS3

  • 2. Breve história do HTML  Estrutura de um documento HTML5  Comparação entre HTML4/XHTML e HTML5  Conhecer as novidades do HTML5  O estiloso CSS3
  • 3. Códigos, códigos, códigos...  Explicação detalhada das APIs  Exemplos online
  • 10. 2010 ~ 2011: HTML5
  • 12. Alguém sabe de cabeça como escreve o DOCTYPE?
  • 13. HTML5 <!doctype html>
  • 14. Outro elemento importante em todo HTML: META  HTML 4.0 <meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>  XHTML <meta http-equiv=“content-type” content=“text/html;charset=UTF-8” />  HTML5 <meta charset=“UTF-8”>
  • 15. Juntando tudo!!!
  • 16. Conectividade e aplicações em tempo real  Novas possibilidades de estilo com CSS3  Gráficos 2D, 3D e Vetoriais  Recursos multimídia  Melhor performance  Elementos semânticos  Armazenamento offline  APIs JS: Drag and Drop, Geolocalização, etc...
  • 17. Tags de estrutura:
  • 18. Tags de estrutura:
  • 19. Tags de estrutura:
  • 20. Novos tipos de campos:
  • 21. Novos tipos de campos:
  • 22. Tipos de dados e validadores:
  • 23. Tipos de dados e validadores :
  • 24. Conteúdo editável :
  • 25. Áudio:
  • 26. Vídeo:
  • 27. Drag and Drop:
  • 28. Correção Ortográfica:
  • 29. Gráfico: <canvas>
  • 30. Armazenamento:  Cookies  Web Storage  Web SQL Databases
  • 31. Geolocalização:
  • 32. Quem nao quer matar o designer, quando pede:  Fazer caixinhas com bordas arredondadas  Colocar uma sombrinha nos textos/caixas  Utilizar um background gigante  Utilizar um background composto  Fazer uma página adaptável ao tamanho da página  Fazer os títulos das páginas ter uma font mais estilosa
  • 33. Bordas arredondadas:
  • 34. Sombras:
  • 35. Background Gigante: SVG + background-size
  • 36. Gradient:
  • 37. Cores RGBA:
  • 38. Animações:
  • 39. font:
  • 40. Media Queries:
  • 41. rommelweb  rommel.com.br