G u i a P r t i c o & V i s ua l

HTML5
e CSS3
Traduo da Stima Edio

ELIZABETH CASTRO BRUCE HYSLOP

Rio de Janeiro, 2013

2EmendaRT-RG-HTML5andCSS3-Cap00-0-Apresentao-Mar2013.indd 1

12/06/2013 13:09:06

 famlia.

BOOK - HTML5andCSS3 - 11-06-13.indb 3

12/06/2013 11:43:55

Agradecimentos
Escrever os agradecimentos um dos
maiores desafios ao se trabalhar em um
livro, porque voc quer ter a certeza de
mostrar, apropriadamente, sua gratido a
todos. Este livro o resultado do apoio,
trabalho incessante e boa vontade de
muitas pessoas. Espero fazer justia a
todas elas, e que voc tenha um pouquinho
de pacincia enquanto eu as agradeo.

Scout Festa, por corrigir cuidadosamente

a gramtica e a pontuao, amarrar a
linguagem, assegurar a preciso das
figuras e referncias dos captulos e,
acima de tudo, por fornecer um nvel muito
importante de polidez.
David Van Ness, por seu grande cuidado ao
montar as pginas e por sua capacidade e
ateno aos detalhes.

Meus mais sinceros agradecimentos para:

Nolan Hester, por compartilhar sua

percia para o esforo de revisar a
disposio das pginas.

Nancy Aldrich-Ruenzel e Nancy Davis, por

confiar a mim esta edio de um livro que tem
sido importante Peachpit por tantos anos.

Valery Haynes Perry, por lidar com a crtica

tarefa de criar um ndice remissivo eficiente,
com o qual os leitores contaro muitas vezes.

Cliff Colby, por me recomendar e tornar isso

possvel; por sua confiana em mim e sua
pacincia, flexibilidade e orientao; e por
inmeras conversas e muitas risadas.

Os inmeros companheiros de marketing,

vendas e outros na Peachpit pelo trabalho de
bastidores para tornar este livro um sucesso.

Robyn Thomas, por seu tremendo esforo

em nos manter no caminho certo, por
disputar diversos documentos, fazer sbias
edies e recomendaes, e por nos dar
constantes palavras de incentivo, que
sempre foram um combustvel.
Michael Bester, por todos os feedbacks e
sugestes precisas, detectando erros tcnicos
e omisses, e por nos ajudar a passar a
mensagem correta aos leitores. Foi um imenso
prazer trabalhar com ele em outro livro.
Chris Casciano, sob a mesma linha, por
toda sua especialidade tcnica, sugestes
e feedback fundamental. Eu lhe agradeo
muito por juntar-se a ns nas ltimas
semanas; tivemos sorte em ter voc.
Cory Borman, pelo hbil supervisionamento
da produo do livro, por criar diagramas
rapidamente, e seu bom humor.

A minha famlia e amigos, por checarem

meu progresso e por me fazerem ter
pausas ocasionais e bem-vindas da escrita.
Obrigado queles amigos em particular que,
apesar de cansados de me ouvir dizer que
no poderamos nos encontrar, continuaram
me convidando mesmo assim.
Robert Reinhardt, como sempre, por fazer eu
comear a escrever livros e por sua orientao
enquanto eu embarcava neste aqui.
comunidade da internet, por suas
inovaes e por compartilharem seu
conhecimento para que outros se
beneficiem (eu mencionei vrios de vocs
ao longo do livro).
A vocs, leitores, pelo interesse em aprender
sobre HTML e CSS e por selecionar este
livro; eu sei que h muitos outros para
escolher. Espero que o livro os sirva bem.

ivAgradecimento

BOOK - HTML5andCSS3 - 11-06-13.indb 4

12/06/2013 11:43:55

Muito obrigado aos seguintes autores

contribuintes. Os leitores tm um livro mais
valioso graas aos seus esforos, pelos
quais sou grato. Eu tambm gostaria de
pedir desculpas ao Erik Vorhes por no
sermos capazes de encaixar os Apndices
A e B no livro. Os leitores que os virem no
site do livro com certeza daro valor ao seu
trabalho.
Em ordem alfabtica por sobrenome, os
autores contribuintes so:
Scott Boms (Captulo 14)
Scott um premiado designer, escritor e
orador que fez parcerias com organizaes
como PayPal, HSBC, Hyundai, DHL, XM
Radio, revista Toronto Life, e Masterfile
durante seus mais de 15 anos de trabalho
com a web. Quando ele est longe do
computador, voc pode encontr-lo tirando
fotos com sua Polaroid; tocando bateria com
sua banda, George; ou curtindo o tempo
com sua esposa maravilhosa e dois filhos.
Ele @scottboms no Twitter.
Ian Devlin (Captulo 17)
Ian Devlin um desenvolvedor web
irlands, blogueiro e autor que gosta de
codificar e escrever sobre tecnologias
web emergentes como HTML5 e CSS3.
Alm de desenvolvedor front-end, Ian
tambm constri solues para tecnologias
back-end como .NET e PHP. Ele escreveu
recentemente um livro, HTML5 Multimedia:
Develop and Design (Peachpit Press, 2011).

Seth Lemoine (Captulos 5 e 16)

Seth Lemoine um desenvolvedor de
software e professor em Atlanta. Por mais
de dez anos, ele trabalhou em projetos
desafiadores para ver o que possvel com
tecnologias que vo de HTML, JavaScript e
CSS a Objective-C e Ruby. Seja encontrar
formas inovadoras de ensinar HTML5 e CSS
a seus alunos, ou aperfeioar sua receita de
Schezuan em sua panela wok ao ar livre. Ser
criativo sua paixo.
Erik Vorhes Apndices A e B,
(disponveis no site do livro)
Erik Vorhes cria coisas para a web com o VSA
Partners e editor de gesto do Typedia
(http://typedia.com/). Mora em Chicago.
Brian Warren (Captulo 13)
Brian Warren um designer snior da
Happy Cog, na Filadlfia. Quando no est
escrevendo ou projetando, ele passa seu
tempo brincando com sua bela famlia,
ouvindo msica e fabricando cerveja. Ele
atualiza, incessantemente, seu blog em
http://begoodnotbad.com.

E, por fim, gostaria de agradecer

especialmente a Elizabeth Castro. Ela
criou a primeira edio deste livro h mais
de 15 anos e alimentou seu pblico com
cada verso que se seguia. Seu estilo de
ensinar ressoou, literalmente, em centenas
de milhares de leitores ao longo dos
anos. Eu sou extremamente grato pela
oportunidade de ser parte deste livro, e fui
muito cuidadoso para fazer tudo certo, tanto
pelo livro quanto para os leitores, enquanto
trabalhava nesta edio.
Bruce

Agradecimento v

BOOK - HTML5andCSS3 - 11-06-13.indb 5

12/06/2013 11:43:56

Sumrio Resumido
Agradecimentos iv
Introduoxv
Captulo 1

Blocos de Montagem de Pginas na Web1

Captulo 2

Trabalhando com Arquivos de Pginas na Web 25

Captulo 3

Estrutura Bsica do HTML41

Captulo 4 Texto 99
Captulo 5 Imagens 147
Captulo 6 Links165
Captulo 7

Blocos de Montagem do CSS 179

Captulo 8

Trabalhando com Folhas de Estilo 197

Captulo 9

Definindo Seletores213

Captulo 10

Formatando o Texto com Estilos 241

Captulo 11

Layout com Estilos 275

Captulo 12

Folhas de Estilo de Portteis a Desktop 327

Captulo 13

Trabalhando com Fontes Web353

Captulo 14

Aprimoramentos com o CSS3 371

Captulo 15 Listas 397

Captulo 16 Formulrios 417
Captulo 17

Vdeo, udio e Outras Mdias449

Captulo 18 Tabelas489
Captulo 19

Trabalhando com Scripts 497

Captulo 20

Testando e Depurando Pginas na Web 505

Captulo 21

Publicando Suas Pginas na Web521

ndice529

viSumrio

BOOK - HTML5andCSS3 - 11-06-13.indb 6

12/06/2013 11:43:56

Sumrio
Agradecimentos..................................................................................iv
Introduo............................................................................................xv
HTML e CSS em Resumo...................................................................................xvi
Aprimoramento Progressivo: a melhor prtica..........................................xviii
Este Livro para Voc?....................................................................................... xx
Como Este Livro Funciona................................................................................xxii
Web Site da Companhia...................................................................................xxiv

Captulo 1

Blocos de Montagem de Pginas na Web....................................... 1

Uma Pgina HTML Bsica.................................................................................... 3
A Semntica do HTML: Marcao com Significado 6
Marcadores: Elementos, Atributos e Valores...................................................13
O Contedo de Texto de Uma Pgina na Web............................................ 16
Links, Imagens e Outros Contedos No-Textuais......................................17
Nomes de Arquivos.............................................................................................. 19
URLs......................................................................................................................... 20
Elementos-chave...................................................................................................24

Captulo 2

Trabalhando com Arquivos de Pginas na Web 25

Planejando Seu Site............................................................................................ 26
Criando uma Nova Pgina na Web................................................................. 28
Salvando Sua Pgina na Web........................................................................... 30
Especificando uma Pgina Padro ou Homepage.....................................33
Editando Pginas na Web.................................................................................. 35
Organizando Arquivos........................................................................................ 36
Visualizando Sua Pgina em um Navegador................................................37
A Inspirao dos Outros..................................................................................... 39

Captulo 3

Estrutura Bsica do HTML................................................................ 41

Iniciando Sua Pgina na Web............................................................................43
Criando um Ttulo................................................................................................. 46
Criando Cabealhos............................................................................................ 48
Entendendo o Outline do Documentodo HTML5....................................... 50
Agrupando Cabealhos..................................................................................... 58

Sumrio vii

BOOK - HTML5andCSS3 - 11-06-13.indb 7

12/06/2013 11:43:56

Construes de Pginas Comuns................................................................... 60

Trabalhando com a Tag Header....................................................................... 61
Marcando a Navegao..................................................................................... 64
Criando um Artigo................................................................................................ 68
Definindo uma Seo..........................................................................................72
Especificando um Aside.....................................................................................75
Criando um Rodap............................................................................................ 80
Criando Containers Genricos......................................................................... 84
Melhorando a Acessibilidade com ARIA....................................................... 88
Nomeando Elementos com uma Class ou ID.............................................. 92
Adicionando o Atributo Title aos Elementos............................................... 95
Adicionando Comentrios................................................................................. 96

Captulo 4

Texto....................................................................................................99
Iniciando um Novo Pargrafo..........................................................................100
Adicionando Informao de Contato do Autor..........................................102
Criando uma Figura............................................................................................104
Especificando o Tempo.....................................................................................106
Enfatizando e Marcando um Texto Como Importante 110
Indicando uma Citao ou Referncia...........................................................112
Citando um Texto.................................................................................................113
Destacando um Texto.........................................................................................116
Explicando Abreviaes....................................................................................118
Definindo um Termo...........................................................................................120
Criando Superscripts e Subscripts.................................................................121
Informando Edies e Textos Imprecisos.................................................... 124
Marcando o Cdigo............................................................................................128
Utilizando Texto Pr-formatado......................................................................130
Especificando Fine Print...................................................................................132
Criando uma Quebra de Linha........................................................................ 133
Criando Spans...................................................................................................... 134
Outros Elementos...............................................................................................136

Captulo 5

Imagens..............................................................................................147
Sobre as Imagens para a Web........................................................................148
Conseguindo Imagens......................................................................................152
Escolhendo um Editor de Imagens................................................................153
Salvando Suas Imagens....................................................................................154
Inserindo Imagens em uma Pgina................................................................156
Oferecendo um Texto Alternativo.................................................................. 157

viiiSumrio

BOOK - HTML5andCSS3 - 11-06-13.indb 8

12/06/2013 11:43:56

Especificando o Tamanho da Imagem..........................................................158

Dimensionando Imagenscom o Navegador.....................................................160
Dimensionando Imagens com um Editor de Imagens 161
Adicionando cones ao Seu Site.....................................................................162

Captulo 6

Links................................................................................................... 165
A Anatomia de um Link......................................................................................166
Criando um Link para Outra Pgina na Web............................................... 167
Criando ncoras.................................................................................................. 172
Direcionando a uma ncora Especfica....................................................... 174
Criando Outros Tipos de Links....................................................................... 175

Captulo 7

Blocos de Montagem do CSS........................................................179

Construindo uma Regra de Estilo...................................................................181
Adicionando Comentrios a Regras de Estilo............................................182
A Cascata: Quando as Regras Colidem.......................................................184
Um Valor de uma Propriedade........................................................................188

Captulo 8

Trabalhando com Folhas de Estilo................................................197

Criando uma Folha de Estilo Externa............................................................198
Vinculando a Folhas de Estilo Externas......................................................200
Criando uma Folha de Estilo Incorporada..................................................202
Aplicando Estilos Inline....................................................................................204
A Importncia da Localizao........................................................................206
Usando Folhas de Estilo para Mdias Especficas....................................208
Oferecendo Folhas de Estilo Alternativas...................................................210
A Inspirao dos Outros: CSS.........................................................................212

Captulo 9

Definindo Seletores.........................................................................213
Construindo Seletores.......................................................................................214
Selecionando Elementos por Nome..............................................................216
Selecionando Elementos por Class ou ID...................................................218
Selecionando Elementos por Contexto.......................................................221
Selecionando Parte de um Elemento.......................................................... 227
Selecionando Links Baseados em Seus Estados.....................................230
Selecionando Elementos Baseados nos Atributos..................................232
Especificando Grupos de Elementos...........................................................236
Combinando Seletores.....................................................................................238
Recapitulao dos Seletores..........................................................................240

Sumrio ix

BOOK - HTML5andCSS3 - 11-06-13.indb 9

12/06/2013 11:43:56

Captulo 10

Formatando o Texto com Estilos...................................................241

Escolhendo uma Famlia de Fontes.............................................................. 243
Especificando Fontes Alternativas............................................................... 244
Criando Itlicos...................................................................................................246
Aplicando Formatao em Negrito............................................................... 248
Definindo o Tamanho da Fonte.....................................................................250
Definindo a Altura da Linha.............................................................................255
Definindo Todos os Valores de Fonte de Uma s Vez 256
Definindo a Cor...................................................................................................258
Modificando o Background do Texto...........................................................260
Controlando o Espaamento..........................................................................264
Adicionando Indentao..................................................................................265
Definindo as Propriedades de Espao em Branco..................................266
Alinhando o Texto..............................................................................................268
Alterando a Caixa do Texto............................................................................. 270
Usando Caixa Baixa........................................................................................... 271
Decorando o Texto............................................................................................ 272

Captulo 11

Layout com Estilos..........................................................................275

Consideraes ao Comear um Layout...................................................... 276
Estruturando Suas Pginas............................................................................. 279
Estilizando Elementos do HTML5 em Navegadores Antigos 286
Redefinindo ou Normalizando Estilos Padres.........................................290
O Modelo Caixa..................................................................................................292
Modificando o Background.............................................................................294
Definindo a Altura ou a Largura de um Elemento....................................298
Definindo as Margens ao Redor de um Elemento...................................302
Adicionando Padding ao Redor de um Elemento....................................304
Fazendo os Elementos Flutuarem.................................................................306
Controlando Onde os Elementos Flutuam.................................................308
Definindo a Borda................................................................................................311
Deslocando Elementos do Fluxo Natural.................................................... 314
Posicionando Elementos Absolutamente....................................................316
Posicionando Elementos em 3D.....................................................................318
Determinando Como Tratar Overflow..........................................................320
Alinhando Elementos Verticalmente............................................................322
Modificando o Cursor....................................................................................... 323
Exibindo e Ocultando Elementos.................................................................. 324

xSumrio

BOOK - HTML5andCSS3 - 11-06-13.indb 10

12/06/2013 11:43:56

Captulo 12

Folhas de Estilo de Portteis a Desktop..................................... 327

Estratgias paraPortteis e Consideraes.............................................................328
Entendendo e Implementando Media Queries......................................... 333
Construindo uma Pgina que se Adapte
com Media Queries....................................................................................340

Captulo 13

Trabalhando com Fontes Web......................................................353

O Que uma Fonte Web?...............................................................................354
Onde Encontrar Fontes Web..........................................................................356
Baixando Sua Primeira Fonte Web...............................................................358
Trabalhando com @font-face.........................................................................360
Estilizando Fontes Web e Gerenciando o
Tamanho do Arquivo..................................................................................365

Captulo 14

Aprimoramentos com o CSS3........................................................371

Entendendo os Prefixos dos Fabricantes................................................... 373
Uma Olhada Rpida sobre a Compatibilidade
dos Navegadores........................................................................................ 375
Utilizando Polyfills para o Aprimoramento Progressivo 376
Arredondando os Cantos dos Elementos................................................... 378
Adicionando Sombras ao Texto.....................................................................382
Adicionando Sombras a Outros Elementos...............................................384
Aplicando Diversos Backgrounds.................................................................388
Utilizando Backgrounds Gradientes.............................................................390
Definindo a Opacidade dos Elementos.......................................................394

Captulo 15

Listas..................................................................................................397
Criando Listas Ordenadas e Desordenadas..............................................398
Escolhendo Seus Marcadores.........................................................................401
Escolhendo Onde Comear a Numerao da Lista.................................403
Utilizando Marcadores Personalizados.......................................................404
Controlando Onde Ficam os Marcadores...................................................406
Definindo de uma s Vez Todas as Propriedades dos
Estilos de Lista............................................................................................. 407
Estilizando Listas Aninhadas..........................................................................408
Criando Listas de Descrio............................................................................ 412

Sumrio xi

BOOK - HTML5andCSS3 - 11-06-13.indb 11

12/06/2013 11:43:56

Captulo 16

Formulrios........................................................................................417
Criando Formulrios...........................................................................................419
Processando Formulrios................................................................................. 421
Enviando Dados de Formulrio por E-mail................................................. 424
Organizando os Elementos do Formulrio................................................. 426
Criando Caixas de Texto.................................................................................. 428
Criando Caixas de Senha................................................................................. 431
Criando Caixas de E-mail, Telefone e URL................................................. 432
Rotulando Partes do Formulrio.................................................................... 434
Criando Botes de Rdio.................................................................................436
Criando Caixas de Seleo.............................................................................438
Criando Checkboxes.........................................................................................440
Criando reas de Texto.................................................................................... 441
Permitindo aos Usurios o Upload de Arquivos....................................... 442
Criando Campos Ocultos................................................................................. 443
Criando um Boto de Envio............................................................................444
Utilizando uma Imagem para Enviar um Formulrio................................446
Desativando Elementos do Formulrio....................................................... 447
Novos Recursos do HTML5 e Suporte dos Navegadores 448

Captulo 17

Vdeo, udio e Outras Mdias.......................................................449

Plugins de Terceiros e a Multimdia Nativa.................................................. 451
Formatos de Arquivos de Vdeo....................................................................452
Adicionando um nico Vdeo Sua Pgina............................................... 453
Explorando os Atributos de Vdeo................................................................454
Adicionando Controles e Autorreproduo a Seu Vdeo 455
Colocando um Vdeo em Loop e Especificando um
Pster de uma Imagem.............................................................................. 457
Evitando o Pr-carregamento de Seu Vdeo.............................................458
Utilizando Vdeos com Vrias Fontes..........................................................459
Vrias Fontes de Mdia e o Elemento Source............................................460
Adicionando Vdeo com Hyperlink Fallbacks.............................................461
Adicionando Vdeo com Flash Fallbacks....................................................463
Fornecendo Acessibilidade............................................................................ 467
Adicionando Arquivos no Formato de udio.............................................468
Adicionando um nico Arquivo de udio Sua Pgina 469
Adicionando Sua Pgina um nico Arquivo de udio
com Controles ............................................................................................. 470
Explorando os Atributos de udio................................................................. 471
Adicionando Controles e Autorreproduo para o
udio em um Loop...................................................................................... 472

xiiSumrio

BOOK - HTML5andCSS3 - 11-06-13.indb 12

12/06/2013 11:43:56

Pr-carregando um Arquivo de udio......................................................... 473

Fornecendo Diversas Fontes de udio........................................................474
Adicionando udio com Hyperlink Fallbacks............................................ 475
Adicionando udio com Flash Fallbacks.................................................... 476
Adicionando udio com Flash e um Hyperlink Fallback 478
Conseguindo Arquivos Multimdia................................................................480
Considerando o Gerenciamento de Direitos Digitais (DRM) 481
Incorporando uma Animao em Flash.......................................................482
Incorporando um Vdeo do YouTube...........................................................484
Utilizando Vdeo com Canvas........................................................................485
Emparceirando Vdeos com SVG..................................................................486
Outros Recursos................................................................................................. 487

Captulo 18

Tabelas..............................................................................................489
Estruturando Tabelas........................................................................................490
Abrangendo Colunas e Fileiras.....................................................................494

Captulo 19

Trabalhando com Scripts...............................................................497

Carregando um Script Externo......................................................................499
Adicionando um Script Incorporado.............................................................502
Eventos JavaScript............................................................................................503

Captulo 20

Testando e Depurando Pginas na Web...................................... 505

Experimentando Algumas Tcnicas de Depurao................................506
Checando as Coisas Fceis: Em Geral........................................................508
Checando as Coisas Fceis: HTML................................................................510
Checando as Coisas Fceis: CSS...................................................................512
Validando Seu Cdigo....................................................................................... 514
Testando Sua Pgina.........................................................................................516
Quando as Imagens No Aparecem.............................................................519
Ainda com Problemas?.....................................................................................520

Captulo 21

Publicando Suas Pginas na Web................................................ 521

Conseguindo Seu Prprio Nome de Domnio...........................................522
Encontrando um Servidor para Seu Site.....................................................523
Transferindo Arquivos para o Servidor........................................................525

ndice.................................................................................................529

Sumrio xiii

BOOK - HTML5andCSS3 - 11-06-13.indb 13

12/06/2013 11:43:56

Introduo
Se estiver apenas comeando a aventurarse na construo de sites, ou j tenha
construdo alguns, mas quer assegurar-se
de que seu conhecimento est atualizado,
voc chegou a um momento muito
emocionante da indstria.
A forma como codificamos e estilizamos
pginas, os navegadores nos quais vemos
as pginas e os aparelhos nos quais
vemos os navegadores se desenvolveram
substancialmente nos ltimos anos. Antes
limitados apenas a mostrar a web em
nossos computadores e laptops, hoje
podemos lev-la conosco em diversos
aparelhos: telefones, tablets, laptops,
computadores, e muito mais.
Isso nada mais alm do que deveria ser,
porque a promessa da web sempre esteve
associada dissoluo dos limites o
poder de compartilhar e acessar informao

livremente de qualquer metrpole,

comunidade rural ou em qualquer lugar
no meio disso, a partir de qualquer
aparelho habilitado para a web. E o alcance
dela continua a se expandir conforme
a tecnologia encontra seu espao em
comunidades que antes estavam isoladas.
Outra coisa grandiosa da web que
qualquer pessoa livre para criar e lanar
um site. Este livro lhe mostra como. Ele
ideal para o iniciante, sem nenhum
conhecimento de HTML ou CSS, que quer
comear a criar pginas na web. Voc
encontrar instrues claras e fceis de se
seguir, que vo lev-lo atravs do processo
de criao de pginas passo a passo. Por
ltimo, o livro um guia til de se ter a mo.
Voc pode procurar os tpicos no sumrio
ou ndice remissivo e consultar apenas
aqueles assuntos sobre quais precise de
mais informao.

Introduo xv

BOOK - HTML5andCSS3 - 11-06-13.indb 15

12/06/2013 11:43:56

HTML e CSS em Resumo

No centro do sucesso da web est uma
linguagem de marcao simples, baseada
em texto, que fcil de aprender e qualquer
aparelho com um navegador web bsico
pode ler: HTML. Todas as pginas na web
requerem ao menos um pouco de HTML;
elas no seriam pginas na web sem ele.
Conforme voc aprender em maiores
detalhes enquanto avana por este livro,
o HTML usado para definir o significado
de seu contedo, e o CSS tem a funo de
definir como seu contedo e sua pgina
web parecero. Tanto as pginas em
HTML e arquivos CSS (folhas de estilo) so
arquivos de texto, tornando-os fceis de
editar. Voc pode ver trechos de HTML
e CSS em Como Este Livro Funciona,
prximo ao fim desta introduo.
Voc mergulhar no aprendizado de uma
HTML bsica logo no incio do Captulo 1,
e comear a aprender como estilizar suas
pginas com CSS no Captulo 7. Veja O que
Este Livro Vai lhe Ensinar para uma viso
geral de todos os captulos e um resumo
dos tpicos abordados.

O que HTML5?
Saber um pouco do bsico da origem do
HTML ajuda para que voc entenda o HTML5.
O HTML comeou no incio da dcada de
1990 como um pequeno documento que
detalhava diversos elementos usados para
construir pginas na web. Muitos desses
elementos eram para descrever contedos
de pginas como cabealhos, pargrafos
e listas. O nmero de verses de HTML
aumentou conforme a linguagem evoluiu com
a introduo de outros elementos e ajustes s
suas regras. A verso mais atual o HTML5.
O HTML5 uma evoluo natural das
verses anteriores do HTML e luta para
refletir as necessidades tanto dos sites atuais
quanto dos do futuro. Ele herda a grande

maioria dos recursos de suas predecessoras,

fazendo com que, se voc j codificava em
HTML antes do HTML5, j saiba muito sobre
esta. Isso tambm significa que muito do
HTML5 funciona em navegadores novos
e antigos; ser compatvel com verses
anteriores um princpio de design chave do
HTML5 (veja www.w3.org/TR/html-designprinciples/ - site em ingls).
O HTML5 tambm adiciona um monte de
novos recursos. Muitos so bem diretos,
como elementos adicionais (artigo,
seo, figura, e muitos outros) que so
usados para descrever contedo. Outros
so bem complexas e ajudam a criar
aplicaes web poderosas. Voc precisar
ter uma noo concreta sobre a criao de
pginas na web antes que possa avanar
para os recursos mais complexos que o
HTML5 oferece. Ele tambm introduz udio
prprio e playback de vdeo para suas
pginas, os quais o livro tambm aborda.

O que CSS3?
A primeira verso do CSS no existia at
o HTML j estar por a aps alguns anos,
tornando-se oficial em 1996. Assim como o
HTML5 e sua relao com verses anteriores
de HTML, o CSS3 uma extenso natural
das verses de CSS que o precederam.
O CSS3 mais poderoso do que suas
verses anteriores e introduz inmeros
efeitos visuais, como sombras de texto,
cantos arredondados e gradientes. (Veja O
Que Este Livro Vai lhe Ensinar para detalhes
sobre o que abordado.)

Padres Web e Especificaes

Em primeiro lugar, voc deve estar se
perguntando quem criou o HTML e o CSS,
e quem continua a desenvolv-los. O World
Wide Web Consortium (W3C) dirigido pelo
inventor da web e HTML, Tim Berners-Lee
a organizao responsvel por guiar o
desenvolvimento dos padres web.

xviIntroduo

BOOK - HTML5andCSS3 - 11-06-13.indb 16

12/06/2013 11:43:56

As especificaes so documentos que

definem os parmetros de linguagens
como HTML e CSS. Em outras palavras, as
especificaes padronizam as regras. Siga
as atividades do W3C em www.w3.org (em
ingls) A .

A O site da W3C a fonte primria da indstria

para especificaes sobre os padres web.

Por diversas razes, outra organizao

Web Hypertext Application Technology
Working Group (WHATWG, encontrada
em www.whatwg.org em ingls) est
desenvolvendo a especificao do HTML5.
O W3C incorpora o trabalho da WHATWG
em sua verso oficial das especificaes em
progresso.
Com os padres definidos, ns podemos
construir nossas pginas a partir de regras
preestabelecidas, e navegadores como
Chrome, Firefox, Internet Explorer (IE), Opera
e Safari podem ser construdos para mostrar
nossas pginas com aquelas regras em mente.
(No geral, os navegadores implementam bem
os padres. Algumas verses antigas do IE,
especialmente o IE6, tm alguns problemas.)
As especificaes passam por diversos
estgios de desenvolvimento antes de serem
consideradas finalizadas, quando recebem
uma Recomendao (www.w3.org/2005/10/
Process-20051014/tr em ingls).
As especificaes para o HTML5 foram
concludas e publicadas em 17/12/2012
(veja em www.w3.org/2012/12/html5-cr), j
iniciando a elaborao das especificaes
para o HTML5.1. As especificaes do CSS3
ainda esto sendo elaboradas (www.w3.org/
Style/CSS/current-work), mas o que se verifica
que, em ambos os casos, se trata de um
trabalho contnuo, onde aps a concluso de
uma especificao, uma nova iniciada.
Em geral, os recursos mencionados neste livro
esto bem arraigados em suas respectivas
especificaes, ento o risco de elas mudarem
antes de se tornarem uma Recomendao
mnimo. Os desenvolvedores tm usado vrios
recursos do HTML5 e CSS3 h algum tempo.
Logo, voc tambm pode.
Introduo xvii

BOOK - HTML5andCSS3 - 11-06-13.indb 17

12/06/2013 11:43:56

Aprimoramento
Progressivo: a
melhor prtica
Comecei a introduo falando da
universalidade da web a noo de que
a informao deve ser acessvel a todos.
O Aprimoramento Progressivo o ajuda
a construir sites com a universalidade
em mente. No uma linguagem, mas
uma abordagem de construir sites que
Steve Champeon criou em 2003 (http://
en.wikipedia.org/wiki/Progressive_
enhancement em ingls).
A ideia simples, mas poderosa: comece
seu site com contedo e comportamento
em HTML que seja acessvel a todos os
visitantes A . mesma pgina, adicione
seu design com CSS B e adicione mais um
comportamento com JavaScript, geralmente
carregando-os a partir de arquivos externos
(voc aprender como fazer isso).

A Uma pgina HTML bsica, sem nenhum CSS

personalizado. Esta pgina pode no parecer
incrvel, mas a informao acessvel e isso que
importa. Mesmo navegadores criados quase que
juntamente com a web, h mais de 20 anos, podem
mostrar esta pgina; assim como os celulares mais
antigos com navegadores web. E os leitores de
telas, software que l em voz alta pginas da web
para deficientes visuais, conseguiro navegar por
ela facilmente.

O resultado que os aparelhos e

navegadores capazes de acessar pginas
bsicas exibiro uma experincia padro
e simplificada; aparelhos e navegadores
capazes de visualizar sites mais robustos
mostraro a verso aprimorada. A
experincia do seu site no precisa ser a
mesma para todos, desde que seu contedo
seja acessvel. Em sua essncia, a ideia por
trs do aprimoramento progressivo que
todos ganham.

xviiiIntroduo

BOOK - HTML5andCSS3 - 11-06-13.indb 18

12/06/2013 11:43:57

Este livro ensina como construir sites

progressivamente melhorados, ainda que
nem sempre d esse nome explicitamente
quando faz isso. Trata-se de um resultado
natural das melhores prticas transmitidas
ao longo do livro.

B A mesma pgina vista em um navegador que

suporta CSS. Trata-se da mesma informao, s
que apresentada diferente. Usurios com aparelhos
e navegadores mais poderosos conseguem uma
experincia aprimorada quando visitam a pgina.

Entretanto, os Captulos 12 e 14 realmente

destinam-se ao aprimoramento progressivo
logo de cara. D uma olhadinha rpida
neles caso esteja interessado em saber
como o princpio dessa melhoria o ajuda
a construir um site que adapte seu layout
baseado no tamanho da tela de um aparelho
e capacidades de um navegador, ou como
navegadores mais antigos mostraro
designs simplificados enquanto os mais
modernos exibiro designs melhorados,
com efeitos em CSS3.
O aprimoramento progressivo uma melhor
prtica chave, que o corao para a
construo de sites para todos.

Introduo xix

BOOK - HTML5andCSS3 - 11-06-13.indb 19

12/06/2013 11:43:57

Este Livro para Voc?

Este livro no requer nenhum
conhecimento anterior sobre construo
de sites. Por isso destinado ao iniciante
absoluto. Voc aprender tanto HTML
quanto CSS desde o incio. Para que isso
seja possvel, voc tambm aprender
sobre os recursos que so novos no
HTML5 e CSS3, com nfase naqueles que
designers e desenvolvedores utilizam
atualmente em seus trabalhos dirios.
Mas mesmo que voc esteja familiarizado
com HTML e CSS, voc ainda pode
aprender com este livro, especialmente se
quiser se atualizar rapidamente sobre as
ltimas novidades do HTML5, CSS3 e das
melhores prticas.

O que este livro vai lhe ensinar

Ns adicionamos aproximadamente 125
pginas a este livro desde a edio anterior
para que possamos trazer at voc o
mximo de material possvel. (A primeira
edio do livro, publicada em 1996, tinha
um total de 176 pginas.) Tambm fizemos
atualizaes substanciais (ou reescrevemos
totalmente) a quase todas a pginas.
Resumindo, esta Stima Edio representa
uma grande reviso.
Os captulos esto organizados da
seguinte forma:
Os captulos de 1 a 6 e 15 a 18 abordam
os princpios da criao de pginas
HTML e a gama de elementos HTML
sua disposio, demonstrando
claramente como utilizar cada um.
Os captulos de 7 a 14 focam-se no CSS,
desde a criao de sua primeira regra de
estilo at a aplicao de efeitos visuais
aprimorados com CSS3.

O captulo 19 mostra como adicionar

JavaScript previamente escrito nas
suas pginas.
O captulo 20 diz como testar e depurar
suas pginas antes de coloc-las na web.
O captulo 21 explica como assegurar
seu prprio domnio e depois publicar
seu site na web para todos verem.
Dando um pouco mais de detalhes, alguns
dos tpicos incluem:
Criando, salvando e editando arquivos
HTML e CSS.
O que significa escrever HTML
semntico e por que ele importante
Como separar o contedo de suas
pginas (ou seja, seu HTML) de suas
apresentaes um aspecto chave do
aprimoramento progressivo.
Estruturando seu contedo de forma
significativa atravs do uso de elementos
HTML que esto no mercado h anos e
outros que so novos no HTML5.
Melhorando a acessibilidade de seu site
com o ARIA landmark roles e outras boas
prticas de codificao.
Adicionando imagens s suas pginas e
otimizando-as para a web.
Vinculando uma pgina a outra, ou parte
de uma pgina a outra parte.
Estilizando o texto (tamanho, cor,
negrito, itlico, e mais); adicionando
cores de background e imagens; e
implementando um layout fluido, de
mltiplas colunas, que pode diminuir ou
expandir para acomodar tamanhos de
telas diferentes.

xxIntroduo

BOOK - HTML5andCSS3 - 11-06-13.indb 20

12/06/2013 11:43:57

 Alavancando novos seletores no CSS3

que permitam a voc focar seus estilos a
uma gama maior de maneiras do que era
possvel anteriormente.
Aprendendo as opes para atender
visitantes em aparelhos portteis.
Construindo um nico site para todos
os usurios estejam usando celulares,
tablet, laptop, desktop ou outro aparelho
habilitado para a web baseado
em vrios princpios de web design
responsivo, alguns dos quais influenciam
as media queries do CSS3.
Adicionando fontes web personalizadas
a suas pginas com @font-face.
Utilizando efeitos CSS3 como opacidade,
transparncia de background alpha,
gradientes, cantos arredondados,
sombreamento, sombras dentro de
elementos, sombras de texto, e vrias
imagens de background.
Construindo formulrios para solicitar
informao de seus visitantes, incluindo
o uso de alguns dos novos tipos de
formulrios no HTML5.

O que este livro no vai lhe ensinar

Apesar da incluso de tantas pginas desde
a edio anterior, h tanta coisa para se
falar quando se trata de HTML e CSS que
tivemos que deixar alguns tpicos de lado.
Com algumas excees, decidimos omitir
itens que voc teria menos ocasies de
uso, que ainda esto sujeitos a mudanas,
que faltam suporte aos navegadores mais
utilizados, que exigem conhecimento em
JavaScript, ou que sejam de nvel avanado.
Alguns dos tpicos no abordados incluem:
Os elementos details, summary,
menu, command e keygen do HTML5.
O elemento canvas do HTML5, que o
permite desenhar grficos (e at criar
jogos) com JavaScript.

As APIs do HTML5 e outros recursos

avanados que requerem conhecimento
em JavaScript ou que no estejam
diretamente relacionadas aos novos
elementos semnticos do HTML5.

E mais.

CSS sprites. Esta tcnica envolve a

combinao de mais de uma imagem em
uma nica imagem, o que muito til
para minimizar o nmero de assets que
sua pgina precisa carregar. Veja www.
bruceontheloose.com/sprites/ (site em
ingls) para mais informaes.

Esses tpicos so complementados por

vrias dezenas de exemplos de cdigos que
mostram como implementar os recursos
baseados nas melhores prticas na indstria.

Substituio de imagens CSS. Estas

tcnicas esto geralmente ligadas com
CSS sprites. Veja www.bruceontheloose.
com/ir (em ingls) para mais informaes.

Incluindo mdia em suas pginas

com os elementos de audio e video
do HTML5.

Novos mdulos de layout do CSS3.

Introduo xxi

BOOK - HTML5andCSS3 - 11-06-13.indb 21

12/06/2013 11:43:57

Como Este Livro

Funciona
Praticamente todas as sees do livro
contm exemplos prticos de cdigos que
demonstram um uso no mundo real ( A e
B ). Normalmente, eles so emparceirados
com capturas de tela que mostram o
resultado do cdigo quando voc v a
pgina web em um navegador C .
A maioria das capturas da ltima
verso do Firefox disponvel naquele
momento. Entretanto, isso no implica a
recomendao do Firefox sobre qualquer
outro navegador. As amostras de cdigo
sero muito parecidas em qualquer uma das
verses mais recentes do Chrome, Internet
Explorer, Opera ou Safari. Como voc
aprender no Captulo 20, voc deve testar
suas pginas em uma vasta variedade de

navegadores antes de coloc-las na web, j

que no h como saber quais navegadores
seus visitantes vo usar.
O cdigo e as telas so acompanhados
de descries dos elementos do HTML ou
propriedades do CSS em questo, ambos
para dar contexto s amostras e aumentar o
seu grau de entendimento sobre elas.
Em vrios casos, voc poder achar que as
descries e amostras de cdigos sero
suficientes para que comece a usar os
recursos do HTML e CSS. Mas caso precise
de uma orientao explcita sobre como
us-las, instrues passo a passo so
sempre fornecidas.
Por fim, a maioria das sees contm dicas
que do informaes de uso adicionais,
melhores prticas, referncias a partes
relacionadas do livro, links para recursos
relevantes e mais.

A Voc encontrar um fragmento de cdigo HTML em vrias pginas, com as sees pertinentes
destacadas. Uma elipse () representa um cdigo ou contedo adicional que foi omitido para abreviar.
Normalmente, a poro omitida mostrada em uma figura diferente do cdigo.
..
<body>
<header role="banner">
..
<nav role="navigation">
<ul class="nav">
<li><a href="/" class="current">home</a></li>
<li><a href="/about/">about</a></li>
<li><a href="/resources/">resources</a></li>
<li><a href="/archives/">archives</a></li>
</ul>

</nav>
..
</header>
..
</body>
</html>

xxiiIntroduo

BOOK - HTML5andCSS3 - 11-06-13.indb 22

12/06/2013 11:43:57