css3 e html5 - o que há de novo / parte 1
DESCRIPTION
Nessa apresentação iremos falar um pouco da história do Html e do CSS e um pouco sobre o que há de novo no Html5 e no CSS3!TRANSCRIPT
![Page 1: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/1.jpg)
Vamos falar de
![Page 2: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/2.jpg)
Html5 + SexyCSS3 + Potente
![Page 3: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/3.jpg)
Um pouco da evolução
![Page 4: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/4.jpg)
1991 – Html1994 – Html21996 – Css1 e JavaScript1.21997 – Html41998 - CSS2
![Page 5: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/5.jpg)
Surge a W3C2000 – XHtml12002 – Web Stantard2005 – AJAX2009 – Html 5 e CSS3
![Page 6: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/6.jpg)
html5test.com
![Page 7: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/7.jpg)
Quarto Lugar...
![Page 8: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/8.jpg)
Terceiro Lugar...
![Page 9: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/9.jpg)
Segundo Lugar...
![Page 10: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/10.jpg)
Primeiro Lugar...
![Page 11: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/11.jpg)
Não testado...
![Page 12: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/12.jpg)
Xhtml 1
![Page 13: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/13.jpg)
<?xml version=”1.0” encoding=”utf-8” ?><!DOCTYPE htlm PUBLIC *-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html lang=”pt – BR” xml:lang=”pt – BR” xmlns=”http://www.w3.org/1999/xhtml”>
<head><title>CSS3 e Html 5</title><meta content=”text/html; charset=UTF-8” http-equiv=”content-type” />
</head>
<body>
<div id=”principal”>
<div id=”topo”>Imagem do topo
</div><div id=”conteudo”>
Conteúdo da página</div><div id=”rodape”>
Links e informações do rodapé</div>
</div>
</body>
![Page 14: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/14.jpg)
Html5 e CSS3
![Page 15: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/15.jpg)
<!DOCTYPE htlm><html>
<head><title>CSS3 e Html 5</title><meta charset=”utf-8”>
</head>
<body><principal>
<topo>Imagem do topo
</topo>
<conteudo>Conteúdo da página
<conteudo>
<rodape>Links e informações do rodapé
</rodape>
</principal></body>
![Page 16: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/16.jpg)
Tags do Html5
![Page 17: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/17.jpg)
Unidade de medida...
![Page 18: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/18.jpg)
“px” por “em” para defnirtamanho das fontes...
![Page 19: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/19.jpg)
html { font-size: 100%; }body { font-size: .68em; }
#conteudo h1 { font-size: 1.45em; }#conteudo p { font-size: 1.1em; }#conteudo p strong { font-size: 1.16em; }
![Page 20: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/20.jpg)
Cálculo feito: 11/16 = 0.68
A idéia é que 11px é igual a 0.68em de 16px.
![Page 21: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/21.jpg)
(valor de referência) / (valor a ser convertido) =
(valor que desejamos)
![Page 22: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/22.jpg)
- bordas redondas- sombras- múltiplos backgrounds- novos seletores- transformação 2D e 3D em animações
![Page 23: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/23.jpg)
box 1 / -webkit-transform: translate(3em,0);box 2 / -webkit-transform: rotate(30deg);box 3 / -webkit-transform: translate(-3em,1em);box 4 / -webkit-transform: scale(2);
![Page 24: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/24.jpg)
Chrome e Safari = -webkit;Firefox = -moz;Opera = -o;
![Page 25: CSS3 e Html5 - O que há de novo / parte 1](https://reader036.vdocuments.mx/reader036/viewer/2022062406/558c8d1fd8b42a6c678b475f/html5/thumbnails/25.jpg)