HTML5 & CSS3

HTML5 & CSS3
Jonas Keizo Hirata

TREINAMENTOS
Wednesday, May 25, 2011
TREINAMENTOS
O QUE VEREMOS?
Uma breve histria do HTML Estrutura de um documento HTML5 Comparao entre HTML4/XHTML e HTML5 Apresentar a especicao Descobrir as novas possibilidades
TREINAMENTOS
O QUE NO VEREMOS?
Cdigo e mais cdigo Explicao detalhada de uso das APIs Exemplos de Elementos e ou APIs que no foram implementados por nenhum browser Explicaes passo a passo de tcnicas de como tentar tornar um browser compatvel com o HTML5
TREINAMENTOS
HTML5: UM POUCO DE HISTRIA
1998: HTML 4.01 2000: XHTML

Transitional Strict
Frameset
Gerao de desenvolvedores preocupados com cdigo vlido e bem estruturado. Quebraria a compatibilidade com browsers mais antigos
2002: XHTML 2.0

Prometia uma revoluo na linguagem
2004: Web Forms 2.0
WHATWG Web Hypertext Application Technology Working Group

www.whatwg.org
TREINAMENTOS
HTML5: UM POUCO DE HISTRIA
2006: W3C cai na real (XHTML 2.0)
W3C
WHATWG
Processo de especicao totalmente diferente: aberto e emprico
2009: W3C direciona os esforos para o HTML5 2010 ~ 2011: Suporte ao HTML5 aumenta a cada release dos browsers.
2012: O mundo acaba :P

TREINAMENTOS
HTML5: ESTRUTURA
Vamos comear pelo comeo e por aquilo que ningum lembra de cabea como se ecreve: DOCTYPE
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
TREINAMENTOS
HTML5: ESTRUTURA
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
TREINAMENTOS
HTML5: ESTRUTURA
HTML5
<!doctype html>
TREINAMENTOS
HTML5: ESTRUTURA
Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META
HTML 4.01
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
TREINAMENTOS
HTML5: ESTRUTURA
HTML 4.01
XHTML
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
TREINAMENTOS
HTML5: ESTRUTURA
HTML 4.01
XHTML
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
HTML5
<meta charset="utf-8">
TREINAMENTOS
HTML5: ESTRUTURA
Hora de juntar tudo...

<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Ttulo da pgina</title> </head> <body>  </body> </html>
TREINAMENTOS
HTML5: ESTRUTURA
E aquele negcio de SGML e XML?
TREINAMENTOS
HTML5: ESTRUTURA
HEIN?!
TREINAMENTOS
HTML5: ESTRUTURA
<html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="pt-BR"> <head> <meta charset="utf-8" /> <title>Ttulo</title> </head> <body> <p>Texto simples.</p> </body> </html>

<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Ttulo</title> </head> <body> <p>Texto simples. </body> </html>
TREINAMENTOS
HTML5: ESTRUTURA
<html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="pt-BR"> <head> <meta charset="utf-8" /> <title>Ttulo</title> </head> <body> <p>Texto simples.</p> </body> </html>

<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Ttulo</title> </head> <body> <p>Texto simples. </body> </html>
text/html HTML Parser/Serializer

application/xhtml+xml Pgina XML Parser/Serializer
TREINAMENTOS
ESTRUTURA BSICA DE UM BLOG
Como um blog se parece?
TREINAMENTOS
Como um blog se parece? Um possvel wireframe seria...
Cabealho (header) Post
Post Rodap (footer)

Menu lateral (sidebar)
TREINAMENTOS
E em HTML, como caria?
TREINAMENTOS
E em HTML, como caria? Provavelmente assim...

<div id="header"> <h1>Meu BLOG</h1> </div> <div id="sidebar"> <ul> <li><a href="maio-2011.html">Maio 2011</a></li> <li><a href="abril-2011.html">Abril 2011</a></li> <li><a href="marco-2011.html">Marco 2011</a></li> <li><a href="fevereiro-2011.html">Fevereiro 2011</a></li> <li><a href="janeiro-2011.html">Janeiro 2011</a></li> </ul> </div> <div class="post"> <h2>Ttulo do Post 1</h2> <p>Texto do Post 1</p> </div> <div class="post"> <h2>Ttulo do Post 2</h2> <p>Texto do Post 2</p> </div> <div id="footer"> <p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p> </div>
TREINAMENTOS
Apenas para visualizarmos o HTML em nosso wireframe...
<div id=header> <div class=post>

<div id= sidebar>
<div class=post> <div id=footer>

TREINAMENTOS
Que diabos esse tal <div>?!
TREINAMENTOS
De acordo com a especicao do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements dene content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
TREINAMENTOS
De acordo com a especicao do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements dene content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes. HEIN?! Inline?! Block-level?! Calma...
TREINAMENTOS
Uma palavrinha sobre semntica HTML...

A semntica HTML o uso da linguagem de marcao HTML para dar signicado ao contedo de um documento ao invs de denir a sua apresentao (aparncia).
TREINAMENTOS
Uma palavrinha sobre semntica HTML...

A semntica HTML o uso da linguagem de marcao HTML para dar signicado ao contedo de um documento ao invs de denir a sua apresentao (aparncia).
Exemplo:
<i>: formata um texto em itlico apresentao <em>: indica que o texto deve ser enfatizado signicado <cite>: indica uma citao signicado
TREINAMENTOS
OK, mas e aquele tal <div>?!
TREINAMENTOS
Apenas para visualizarmos o HTML em nosso wireframe...
<div id=header> <div class=post>

<div id= sidebar>
<div class=post> <div id=footer>

TREINAMENTOS
O elemento <div> no possui signicado e, por padro, no afeta a apresentao. Mais uma olhadinha na especicao do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements dene content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
TREINAMENTOS
Voltando ao nosso blog...
TREINAMENTOS
No seria perfeito se fosse assim?
<header> <post>
<sidebar>
<post> <footer>
TREINAMENTOS
Por qu?
TREINAMENTOS
Por qu?
Dois motivos bem simples: 1 - obviamente, escreve-se menos 2 - traria signicado ao contedo
TREINAMENTOS
Legal... e da?
TREINAMENTOS
Legal... e da? a que entre o HTML5!

Um dos objetivos do HTML5 trazer uma semntica maior aos elementos da linguagem. Para isso foram introduzidos novos elementos e alguns j existentes foram alterados semanticamente.
TREINAMENTOS
HTML5: ESTRUTURA
Vamos ver como poderia car o nosso blog em HTML5:

<header> <h1>Meu BLOG</h1> </header> <aside> <nav> <ul> <li><a href="maio-2011.html">Maio 2011</a></li> <li><a href="abril-2011.html">Abril 2011</a></li> <li><a href="marco-2011.html">Marco 2011</a></li> <li><a href="fevereiro-2011.html">Fevereiro 2011</a></li> <li><a href="janeiro-2011.html">Janeiro 2011</a></li> </ul> </nav> </aside> <article> <h2>Ttulo do Post 1</h2> <p>Texto do Post 1</p> </article> <article> <h2>Ttulo do Post 2</h2> <p>Texto do Post 2</p> </article> <footer> <p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p> </footer>
TREINAMENTOS
Apenas para visualizarmos o HTML5 em nosso wireframe...
<header> <article>
<aside>
As tags <post> e <sidebar> que utilizamos na nossa situao perfeita no existem. No lugar delas utilizamos as tags <article> e <aside> que so mais genricas, anal seria impossvel existirem tags para para todo tipo de site com diversos temas diferentes, no mesmo?
<article> <footer>
TREINAMENTOS
UM POUCO DE ESTATSTICA
Analysis of Variance
2 2 ___ BSS n j X j M X j nj 2 ___ 2 WSS = X n 1 s ij X j j j

2 T
XT
X
2

XT

Xj
N
nj
TSS = N -1 s
2 T
X
ij
M
F df b k
BSS k 1 dfb ,dfw WSS n k
NOTE:
1, df w n k, df t n 1
T = Total M = Grand Mean N = Overall N TSS = BSS + WSS
TREINAMENTOS

2 T
XT
X
2
N

XT
?!
Xj
nj
TSS = N -1 s
2 T
X
ij
M
N T = Total M = Grand Mean N = Overall N TSS = BSS + WSS
F df b k
NOTE:
TREINAMENTOS

2 T
XT
X
2

XT

Xj
N
nj
TSS = N -1 s
2 T
X
ij
M
F df b k
NOTE:
T = Total M = Grand Mean N = Overall N TSS = BSS + WSS
TREINAMENTOS
Valores populares para o atributo id
Total: 1.782.769
Valor footer content header logo container main
Frequncia 288.061 228.661 223.726 121.351 119.877 106.327
Valor table1 menu layer1 autonumber1 search nav
Frequncia 101.677 96.161 93.920 77.350 74.887 72.057
Valor wrapper top table2 layer2 sidebar image1
Frequncia 66.730 66.615 57.934 56.823 52.416 48.922
Fonte: Opera MAMA crawler http://dev.opera.com/articles/view/mama-common-attributes/ MAMA - Metadata Analysis and Mining Application
TREINAMENTOS
Valores populares para o atributo class
Total: 2.139.184
Valor footer menu style1 msonormal text content title
Frequncia 179.528 146.673 138.308 123.374 122.911 113.951 91.957
Valor style2 header copyright button main style3 small
Frequncia 89.851 89.274 86.979 81.503 69.620 69.349 68.995
Valor nav clear search style4 logo body left
Frequncia 68.634 68.571 59.802 56.032 48.831 48.052 47.822
Fonte: Opera MAMA crawler http://dev.opera.com/articles/view/mama-common-attributes/ MAMA - Metadata Analysis and Mining Application
TREINAMENTOS
Coincidncia alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5?
TREINAMENTOS
Coincidncia alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5?
No
TREINAMENTOS
Lembra que eu disse que o processo de especicao do HTML5 era diferente? Eu disse que era: Aberto Qualquer um pode participar da lista de e-mail do WHATWG Emprico Os responsveis pela especicao no levaram em conta apenas o que era discutido nas listas de e-mail ou o que eles achavam melhor. Eles observaram o comportamento dos desenvolvedores, ou seja, analisaram pginas e mais pginas em busca de um padro.
TREINAMENTOS
HTML5: NOVOS ELEMENTOS
De marcao:
<article> <aside> <gure> <gcaption> <footer> <header> <hgroup> <mark>

<nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr>
TREINAMENTOS
De marcao:
<article> <aside> <gure> <gcaption> <footer> <header> <hgroup> <mark>

<nav> <progress> <ruby> X <rt> <rp> <section> <time> <wbr>
Ruby: Linguagem de Programao
TREINAMENTOS
Mdia:
<audio> <video> <source> <embed>
Safari 5.0.5 Firefox 4.0.1 Chrome 11.0.696.68 Opera 11.11
TREINAMENTOS
Grco:
<canvas>
TREINAMENTOS

// Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath();
Grco:
<canvas>
TREINAMENTOS
Grco:
<canvas>
Bibliotecas para manipular o canvas: gury - http://guryjs.org/ EaselJS - http://easeljs.com/ RGraph - http://www.rgraph.net/ Processing.js - http://processingjs.org/
TREINAMENTOS
Formulrio:
<datalist> <keygen> <output>
TREINAMENTOS
HTML5: ELEMENTOS REDEFINIDOS
<ol> <dl> <cite> <address> <em>, <i> <strong>, <b> <hr> <small>
TREINAMENTOS
<input type=TIPO>
button checkbox color date datetime datetime-local email le hidden image month number
password radio range reset search submit tel text time url week
TREINAMENTOS
<input>
Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max step
TREINAMENTOS
<input>
Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max step
* The off state indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prell the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.
TREINAMENTOS
HTML5: ATRIBUTOS GLOBAIS

setAttribute() getAttribute()
contenteditable data-* draggable=true spellcheck tabindex=-1
TREINAMENTOS
HTML5: ARMAZENAMENTO
Hoje em dia, como armazenamos dados localmente atravs de um documento HTML?
TREINAMENTOS
Hoje em dia, como armazenamos dados localmente atravs de um documento HTML? Uma dica... s
TREINAMENTOS
Hoje em dia, como armazenamos dados localmente atravs de um documento HTML? COOKIES
Compartilhado com o servidor atravs do cabealho de requisio
Chato de criar, chato de manter e chato de remover Para armazenar estruturas de dados um pouco mais complexas, deve ser serializado primeiro
TREINAMENTOS
Quais as opes do HTML5?
COOKIES Web Storage Web SQL Databases

TREINAMENTOS
HORA DE DAR UMA BROCHADA
E a, j posso sair usando o HTML5?!
Sim
TREINAMENTOS
Sim... e No
Utilize o bom senso
TREINAMENTOS
Sim... e No
Utilize o bom senso
TREINAMENTOS
CSS3
Temos vontade de matar o designer quando ele pede para...
TREINAMENTOS
CSS3
Temos vontade de matar o designer quando ele pede para...
Fazer caixinhas com bordas arredondadas Colocar uma sombrinha nos textos/caixas Utilizar um background gigante Utilizar um background composto Fazer uma pgina adaptvel ao tamanho da tela Fazer os ttulos das pginas ter uma fonte mais style
TREINAMENTOS
CSS3: BORDAS ARREDONDADAS

2 border-radius: 10px; border-radius: 5px 10px 15px 20px; -moz-border-radius -webkit-border-radius
TREINAMENTOS
CSS3: SOMBRAS
box-shadow: inset 5px 5px 5px #ff0000; -moz-box-shadow -webki-box-shadow box-shadow: 10px 10px 10px #000000;
TREINAMENTOS
CSS3: BACKGROUND GIGANTE
Qual o problema do background gigante?
TREINAMENTOS
Qual o problema do background gigante?
TREINAMENTOS
Qual o problema do background gigante? Soluo: SVG + background-size
TREINAMENTOS
CSS3: BACKGROUND COMPOSTO
Como resolvemos hoje o problema dos backgrounds compostos?
TREINAMENTOS
Como resolvemos hoje o problema dos backgrounds compostos? <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>
TREINAMENTOS
Como resolvemos hoje o problema dos backgrounds compostos? Soluo: Mltiplas declaraes de background.
TREINAMENTOS
CSS3: PGINA ADAPTVEL
Como resolvemos o problema das pginas com aparncias diferentes para tamanhos diferentes de tela?
TREINAMENTOS
Como resolvemos o problema das pginas com aparncias diferentes para tamanhos diferentes de tela? Antes do CSS3: @media screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." />
TREINAMENTOS
Como resolvemos o problema das pginas com aparncias diferentes para tamanhos diferentes de tela? Antes do CSS3: @media screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." /> CSS3: @media all and (min-width:500px) { ... } @media print and (orientation: portrait) { ... } <link rel="stylesheet" media="print and (min-width: 25cm)" href="..." />
TREINAMENTOS
CSS3: FONTES STYLE
E as fontes diferentes das que no so as do padro web?
TREINAMENTOS
CSS3: FONTES STYLE
E as fontes diferentes das que no so as do padro web? Como era feito at hoje? Imagem esttica SIFR (Scalable Inman Flash Replacement) Cufn Imagem dinmica (ex: FLIR)
TREINAMENTOS
CSS3: FONTES STYLE
E as fontes diferentes das que no so as do padro web? Como era feito at hoje? Imagem esttica SIFR (Scalable Inman Flash Replacement) Cufn Imagem dinmica (ex: FLIR)
TREINAMENTOS
CSS3: FONTES STYLE
E as fontes diferentes das que no so as do padro web? Com CSS3 ca assim:

@font-face { font-family: nomeDaFonte; src: url('/local-da-fonte/arquivo-da-fonte') format("tipo-da-fonte"); } Na hora de usar: ELEMENTO { font-family: nomeDaFonte, verdana, helvetica; }
TREINAMENTOS
CSS3: FONTES STYLE
Padres de formatos de fonte:

WOFF (webfonts) TTF (Truetype) OTF (Opentype) SVG (Scalable Vector Graphic) iPhone/iPad/WebKit
TREINAMENTOS
CSS3: SELETORES
Novos seletores de atributo:

E[foo^="bar"] E[foo$="bar"] E[foo*="bar"]
TREINAMENTOS
CSS3: SELETORES
Seletor de irmao genrico:

E~F Funciona exatamente como o E + F, porm F no precisa estar imediatamente precedido de E
TREINAMENTOS
CSS3: PSEUDO-CLASSES
Novas pseudo-classes:
E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:rst-of-type E:last-of-type E:only-child E:only-of-type E:empty E:enabled E:checked E:not(s)
HTML5 & CSS3

Jonas Keizo Hirata
TREINAMENTOS
www.k19.com.br twitter: @k19treinamentos contato@k19.com.br

HTML5 &amp; CSS3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML5 &amp; CSS3

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML5 & CSS3

Jonas Keizo Hirata

Wednesday, May 25, 2011

Wednesday, May 25, 2011

Wednesday, May 25, 2011

HTML5: UM POUCO DE HISTRIA

1998: HTML 4.01 2000: XHTML

2002: XHTML 2.0

2004: Web Forms 2.0

WHATWG Web Hypertext Application Technology Working Group

Wednesday, May 25, 2011

HTML5: UM POUCO DE HISTRIA

2006: W3C cai na real (XHTML 2.0)

Processo de especicao totalmente diferente: aberto e emprico

2012: O mundo acaba :P

Wednesday, May 25, 2011

Wednesday, May 25, 2011

Wednesday, May 25, 2011

Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META

Wednesday, May 25, 2011

Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META

Wednesday, May 25, 2011

Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META

Hora de juntar tudo...

Wednesday, May 25, 2011

E aquele negcio de SGML e XML?

Wednesday, May 25, 2011

E aquele negcio de SGML e XML?

E aquele negcio de SGML e XML?

Wednesday, May 25, 2011

E aquele negcio de SGML e XML?

text/html HTML Parser/Serializer

application/xhtml+xml Pgina XML Parser/Serializer

ESTRUTURA BSICA DE UM BLOG

Como um blog se parece?

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

Como um blog se parece? Um possvel wireframe seria...

Cabealho (header) Post

Post Rodap (footer)

Menu lateral (sidebar)

ESTRUTURA BSICA DE UM BLOG

E em HTML, como caria?

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

E em HTML, como caria? Provavelmente assim...

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

Apenas para visualizarmos o HTML em nosso wireframe...

<div id=header> <div class=post>

<div class=post> <div id=footer>

ESTRUTURA BSICA DE UM BLOG

Que diabos esse tal <div>?!

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

ESTRUTURA BSICA DE UM BLOG

Uma palavrinha sobre semntica HTML...

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

Uma palavrinha sobre semntica HTML...

Wednesday, May 25, 2011

ESTRUTURA BSICA DE UM BLOG

HTML5 & CSS3

HTML5 & CSS3

BSS k 1 dfb ,dfw WSS n k

BSS k 1 dfb ,dfw WSS n k

BSS k 1 dfb ,dfw WSS n k