HTML5 e CSS3 - Guia Prático e Visual (7 Edição) - 474-606

Machine Translated by Google
17
Vídeo, áudio e
Outros multimídia
Uma das coisas que tornou a Web tão popular é que
você pode adicionar gráficos, sons, animações e Neste capítulo
filmes às suas páginas da Web. Embora no passado
Adicionando um único vídeo à sua página da web 453
o tamanho proibitivo de tais ficheiros tenha
limitado a sua eficácia, tecnologias mais recentes Adicionando controles e reprodução automática a
como o streaming de áudio e vídeo, juntamente Seu vídeo 455
com ligações à Internet de banda larga, abriram a 458
Impedindo o pré-carregamento de um vídeo
porta para a Web multimédia.
Adicionando Vídeo com Hyperlink Fallbacks 461
Páginas. Adicionando vídeo com substitutos de Flash 463
Algumas dessas páginas multimídia da Web podem Fornecendo acessibilidade 467

servir de base para um podcast de áudio ou vídeo;
Adicionando um único arquivo de áudio ao seu
outros podem ser anúncios ou exibições interativas.
Página da Internet 469
Ainda outras páginas da Web podem aproveitar arquivos
multimídia ocasionais para fornecer uma experiência Adicionando controles e reprodução automática a
Áudio em loop 472

mais rica aos seus visitantes. Mostrarei como adicionar
multimídia às suas páginas da Web para todos esses Pré-carregando um arquivo de áudio 473
propósitos e muito mais.
Adicionando Áudio com Hyperlink Fallbacks 475
Adicionando áudio com substitutos de Flash 476

Antes do HTML5, o único método de adicionar
multimídia às suas páginas da Web era através de Adicionando áudio com Flash e um
Substituição de hiperlink 478
plug-ins de terceiros, como Adobe Flash Player ou
QuickTime da Apple. O HTML5 muda tudo isso com a Incorporando animação em Flash 482
introdução da multimídia nativa – onde o navegador
Usando vídeo com Canvas 485
cuida de tudo.
Como a população da Web é tão diversificada,

às vezes pode ser complicado garantir que
todos os visitantes possam ver e ouvir os
arquivos que você fornece (ou o maior número
possível deles). Você precisa pensar no
formato de arquivo necessário para visualizar
ou ouvir. O fato de os desenvolvedores de
tecnologias multimídia não conseguirem
chegar a um acordo sobre os padrões torna
tudo um pouco mais complicado.
Observe que este capítulo pretende ser uma
introdução aos arquivos multimídia da Web, com
forte ênfase no código HTML5 necessário.
Não ensina como criar o conteúdo multimídia,
apenas como disponibilizá-lo aos visitantes.
450 Capítulo 17
Plug-ins de e os formatos de arquivo que ele suporta. Inicialmente, a

especificação HTML5 nomeou dois formatos de mídia
terceiros e tornar-se nativo— um para áudio e outro para vídeo —

que um navegador compatível com HTML5 deve
Conforme mencionado, antes da introdução do HTML5, suportar. Isso teria sido muito útil, mas nem todos os
a única maneira de adicionar mídia como áudio e vídeo fornecedores queriam saber o que
à sua página da Web era através de um plugin de pendência. Tanto a Nokia quanto a Apple discordaram
terceiros. da escolha do formato de mídia obrigatório e, portanto, o
Esses plug-ins de terceiros podem ser uma caixa preta e requisito foi retirado da especificação. Isso significa que
você depende do usuário para realmente instalá-los. Com você precisa fornecer sua mídia em mais de um
algo como o Flash Player, era bem provável que o formato para que ela possa ser reproduzida em HTML5-
usuário o tivesse instalado, porque ele tem uma ampla
participação de mercado e está instalado em navegadores capazes. Veremos isso em detalhes
mais tarde.
muitos sistemas de usuários. A utilidade do HTML5 e da mídia nativa
Mas houve problemas. O código para incorporar um foi aprimorado quando a Apple anunciou que não
vídeo Flash em um navegador não funcionava ofereceria suporte a Flash em seus dispositivos móveis,
necessariamente em outro, e não havia maneiras incluindo iPhone e iPad. Com esses dispositivos se
elegantes de contornar isso. Além disso, sempre tornando cada vez mais difundidos, isso mostrou que
havia um problema de velocidade, porque o navegador a antiga dependência do Flash para reproduzir arquivos
transferia a reprodução do conteúdo de mídia para o plugin. de mídia estava desaparecendo rapidamente e que a
necessidade de fornecer uma solução diferente estava
próxima. É aqui que o HTML5 nativo
Com isso em mente, a multimídia nativa foi adicionada à
especificação HTML5.
a multimídia intervém e mostra sua força, porque o
Isso traz uma série de benefícios: velocidade (qualquer
navegador dos dispositivos móveis da Apple realmente
coisa nativa do navegador certamente será mais rápida
suporta HTML5.
que um plug-in), os controles nativos são integrados
ao navegador e a dependência de plug-ins é drasticamente Sem mais delongas, vamos ver como você pode adicionar
reduzida (mas não totalmente eliminada, como você vídeo nativo ao seu site
pode ver). veremos mais tarde). Páginas.
Tal como acontece com qualquer conjunto de padrões,

existem problemas com a multimídia nativa do HTML5.
Vídeo, Áudio e Outros Multimídias 451

Formatos de arquivo de vídeo

O que é um codec?
Existem vários formatos de arquivo de vídeo ou codecs
Um codec é um programa de computador que usa
diferentes que são suportados pelo HTML5. um algoritmo de compressão para codificar e
decodificar um fluxo digital de dados, tornando-o
mais adequado para reprodução.
HTML5 oferece suporte a três codecs de vídeo principais.
Aqui estão esses três e os navegadores que O objetivo do codec geralmente é tentar manter
apoiá-los: a mais alta qualidade de áudio e vídeo
possível, ao mesmo tempo em que busca um
n Ogg Theora usa o .ogg ou tamanho de arquivo menor.
Extensão de arquivo .ogv e é compatível com Firefox
Claro, alguns codecs são melhores que outros
3.5+, Chrome 5+ e Opera 10.5+.
para fazer isso.
n MP4 (H.264) usa a extensão de arquivo .mp4 ou .m4v

e é compatível com Safari 3+, Chrome 5-?, Internet
Explorer 9+, iOS e Android 2+.
n WebM usa a extensão de arquivo .webm
e é compatível com Firefox 4+, Chrome 6+, Opera

11+, Internet Explorer 9+ e Android 2.3+.
Você precisa fornecer seu vídeo em

pelo menos dois formatos diferentes – MP4 e WebM –
para garantir que todos os navegadores
compatíveis com HTML5 sejam suportados. O que não é tão ruim!
O Google abandonará o suporte para MP4

em uma próxima versão do Chrome, mas ainda
não confirmou quando isso acontecerá.
Convertendo entre formatos de arquivo

Mostrar como criar seus próprios recursos de vídeo está fora do escopo deste capítulo, mas se você já possui um
recurso de vídeo e deseja convertê-lo para qualquer um ou todos os formatos de arquivo listados, há uma série de
ferramentas gratuitas que podem ajudar. você com isso. Aqui estão dois:
Miro Video Converter, em www.mirovideoconverter.com
HandBrake, em http://handbrake.fr
452 Capítulo 17
A Especificando um único vídeo WebM sem

controles Adicionando um único
<corpo>
vídeo à sua página da web
<video src="paddle-steamer.webm"></video>
</body> Para adicionar um vídeo à sua página da
Web em HTML5, você precisa usar o novo vídeo
elemento. Fazer isso não poderia ser mais simples A.
Para adicionar um único

vídeo à sua página da Web:
1. Obtenha seu recurso de vídeo.

2. Digite <video src="myVideo.ext">
</video>, onde myVideo.ext é o local,
o nome e a extensão do arquivo de
vídeo.
E é isso!
Tanto a Apple quanto a Microsoft adotaram e

distorceram a ideia de multimídia nativa. Em
para que a multimídia nativa funcione no Safari
(e o Chrome, por também ser baseado no WebKit), o
QuickTime deve estar instalado no dispositivo do
usuário; O Internet Explorer 9 requer a instalação do
Windows Media Player. Como a vida.

Explorando Vídeo
Atributos
Que outros atributos você pode usar com o
elemento video ? Vamos dar uma olhada
Tabela 17.1.
Como você pode ver, há vários atributos, o que lhe

dá muita flexibilidade com seu vídeo.
TABELA 17.1 Atributos de vídeo
Atributo Descrição
fonte
Especifica o URL do arquivo de vídeo.
Reprodução automática Inicia automaticamente a reprodução do vídeo assim que possível.

controles Adiciona o conjunto de controles padrão do navegador ao vídeo.
silenciado
Silencia o áudio do vídeo (atualmente não suportado por nenhum navegador).
laço Reproduz o vídeo em loop.
poster Especifica um arquivo de imagem a ser exibido (em vez do primeiro quadro do vídeo) quando for carregado.
Leva um URL para o arquivo de imagem necessário.
largura A largura do vídeo em pixels.
altura A altura do vídeo em pixels.
pré-carregamento Indica ao navegador quanto do vídeo deve ser carregado. Pode assumir três valores diferentes:
nenhum não carrega nada.
metadados carrega apenas os metadados do vídeo (por exemplo, duração e dimensões).
auto permite que o navegador decida o que fazer (esta é a configuração padrão).
454 Capítulo 17
A Adicionando um único arquivo de vídeo WebM, desta vez

com controles Adicionando controles
<corpo> e reprodução automática a
<video src="paddle-steamer.webm" ÿ
controles="controls"></video> Seu vídeo
</body>
Até agora, mostrei o método mais simples possível
para adicionar vídeo à sua página da Web, e o vídeo
nesse exemplo nem começará a ser reproduzido,
Atributos Booleanos porque não avisamos. Além disso, se o navegador em
Atributos booleanos, como controles, não que você visualiza este exemplo de código não suportar
precisam ter um valor especificado para eles, o formato de arquivo de vídeo que você está usando, o
porque sua existência dentro do elemento media navegador exibirá um retângulo vazio (em 300 x 150 se
é suficiente. as dimensões não tiverem sido especificadas) ou a
imagem do pôster , se for indicado (através do
Os exemplos neste livro especificam valores
para esses atributos booleanos, mas os atributo poster ).
controles em A também poderiam ser escritos como
<video src="paddle-steamer.webm" O pequeno exemplo de código em “Adicionando um único

ÿ controles></video>. vídeo à sua página da Web” não adicionará nenhum
controle ao vídeo, mas você pode fazer isso com
bastante facilidade A.
O atributo de controles informa ao navegador

para adicionar um conjunto de controles padrão
para o vídeo.
continua na próxima página

Cada navegador tem seu próprio conjunto de padrões
controles, que parecem muito diferentes entre

si (B a F).
O exemplo a seguir ilustra como você pode usar

alguns dos atributos de vídeo de
Tabela 17.1 G.
Para adicionar controles a um vídeo:

B Os controles de vídeo no Firefox
Digite <video src="myVideo.ext"
controles="controles"></video>.
Para adicionar reprodução automática a um vídeo:
1. Obtenha sua fonte de vídeo.
2. Digite <video src="myVideo.ext"

autoplay="autoplay" controles=
"controls"></video>, onde
myVideo.ext é o local, o nome e a C Os controles de vídeo no Safari
extensão do arquivo de vídeo.
D Os controles de vídeo no Chrome
F Os controles de vídeo no Internet Explorer 9
G Um único vídeo WebM configurado para ser reproduzido automaticamente durante o

carregamento
<corpo>
autoplay="autoplay" controles= ÿ
"controles"></video>
</body> E Os controles de vídeo no Opera
456 Capítulo 17
A Um único vídeo WebM configurado para ser reproduzido automaticamente

e depois repetido
Loop de um vídeo e
<corpo>
especificação de um
autoplay="autoplay" loop="loop"> ÿ </video>
Imagem do pôster
</body> Além de configurar seu vídeo para ser reproduzido
automaticamente, você também pode configurá-lo para
ser reproduzido continuamente até ser interrompido A.
B Um único vídeo WebM com controles e uma
(No entanto, isso não é recomendado - pense em
imagem de pôster especificada que será exibida quando
a página carregar e exibir o vídeo seus usuários pobres!)
Você simplesmente usa a reprodução automática e o loop

<corpo>
atributos.
poster="paddle-steamer-poster.jpg" ÿ Observe, entretanto, que o atributo loop não
controles="controls"></video>
é suportado pelo Firefox.
</body>
Normalmente, o navegador exibirá o
primeiro quadro do vídeo ao carregar. Você
pode alterar isso e especificar sua própria
imagem, o que pode ser feito por meio de
uma imagem de pôster.
Para adicionar reprodução automática e repetir um vídeo:

C Um vídeo exibindo uma imagem de pôster. Nesse caso,
a imagem é uma captura de tela tirada do próprio vídeo.
autoplay="autoplay" loop="loop"> </
video>, onde myVideo.ext é o local, o
nome e a extensão do arquivo de vídeo.
Para especificar uma imagem de pôster para

um vídeo:
2. Digite <video src="myVideo.

ext" controles = "controles"
poster="myPoster.jpg"></ video>,
onde myVideo.ext é o local, nome e
extensão do arquivo de vídeo e
myPoster.jpg é a imagem que você deseja
usar como imagem do pôster.

Impedindo o pré- A Um único vídeo WebM que não será carregado quando a
página for totalmente carregada. Ele não será carregado até que
o usuário tente reproduzi-lo.
carregamento de um vídeo
<corpo>
Se você acha improvável que um usuário veja seu
vídeo (por exemplo, se não for o conteúdo principal preload="none" controles="controls"> ÿ </video>
da sua página), você pode pedir ao navegador para
não se preocupar em pré-carregá-lo, o que economizará </body>
largura de banda A.
Para instruir o navegador a

não pré-carregar um vídeo:

preload="none" controles="controls"> </video>,
onde myVideo.ext é o local, o nome e a
extensão do arquivo de vídeo.
B Um vídeo com pré-carregamento definido como

nenhum. Como você pode ver, nada está sendo
exibido, pois o navegador não possui informações sobre
o vídeo (nem mesmo as dimensões) e nenhuma imagem
do pôster foi especificada.
458 Capítulo 17
R Duas fontes são definidas aqui para o vídeo: um

arquivo MP4 e um arquivo WebM. Navegadores Usando vídeo com
mais antigos exibirão apenas a mensagem contida na p
elemento. Várias fontes
<corpo> Tudo isso é ótimo, mas você deve ter notado que todos
<controles de vídeo="controles"> os exemplos anteriores usam apenas um arquivo
<fonte src="paddle-steamer.mp4" ÿ de vídeo e, portanto, um formato.
type="video/mp4">
<source src="paddle-steamer.webm" ÿ Você já viu que para oferecer suporte a todos os
type="video/webm"> navegadores compatíveis com HTML5, você
<p>Desculpe, seu navegador não ÿ precisa fornecer vídeo em pelo menos dois formatos
suporta o elemento de vídeo</p> diferentes: MP4 e WebM.
</vídeo>
</body> Então, como você faz isso? É aqui que entra o
elemento fonte HTML5.
Basicamente, o elemento source permite definir mais

de uma fonte para uma mídia
elemento, neste caso vídeo.
Qualquer número de elementos de origem pode

estar contido em um elemento de vídeo ,
portanto, definir dois formatos diferentes para nosso
exemplo de vídeo é bastante fácil A.
Para especificar duas fontes

de vídeo diferentes:
1. Obtenha suas fontes de vídeo (duas desta

vez).
2. Digite <videocontrols="controls">
para abrir o elemento de vídeo com o
controle padrão definido.
3. Digite <source src="myVideo.mp4"

type="video/mp4">, onde myVideo.mp4
é o nome do arquivo de origem do vídeo MP4.
4. Digite <source src="myVideo.webm"

type="video/webm">, onde
myVideo.webm é o nome do arquivo de
origem do vídeo WebM.
5. Digite <p>Desculpe, seu navegador não

suporte ao elemento video</p> para exibir uma
mensagem para navegadores que não suportam
vídeo HTML5.
6. Digite </video> para fechar o vídeo

elemento.

Múltiplas mídias
Fontes e o
Elemento de origem
Veremos os vários atributos disponíveis para
o elemento source daqui a pouco, mas primeiro
vamos ver rapidamente por que a especificação R O vídeo será carregado em todos os navegadores
de múltiplas fontes para a mesma mídia compatíveis com HTML5 porque especificamos
uma fonte WebM e MP4 para ele.
realmente funciona.
Quando o navegador encontra o vídeo
elemento, primeiro ele verifica se há um src TABELA 17.2 Atributos de Fonte
definido no próprio elemento video .
Nome Descrição
Como não existe, ele verifica a origem
fonte O URL da fonte do vídeo.
elementos. Ele passa por cada um deles em
busca de um que contenha algo que possa tipo Especifica o tipo de vídeo, o que auxilia o
navegador a decidir se pode reproduzir o
tocar. Depois de encontrar um, ele o reproduz
vídeo ou não. Como mostra o exemplo
e ignora o resto. na seção “Usando vídeo com múltiplas
fontes”, o valor desse atributo reflete
No nosso exemplo anterior, o Safari reproduzirá o o formato ou codec do vídeo (por exemplo,
Arquivo MP4 e nem verá o arquivo WebM, video/mp4, video/webm ou video/
enquanto o Firefox notará que não pode ogg).
reproduzir a fonte MP4 e passará para o WebM media Permite especificar uma consulta de mídia
um, que pode reproduzir A. CSS3 para a fonte de vídeo,
permitindo assim especificar vídeos
Qualquer navegador que não reconheça nem diferentes (por exemplo, menores) para
o elemento video nem o elemento source dispositivos com diferentes capacidades de tela.
(ou seja, um navegador que não seja

compatível com HTML5) ignorará essas tags
completamente ao analisar o documento; ele
simplesmente exibirá o texto inserido antes de
fechar o elemento de vídeo .
Vamos dar uma olhada rápida nos atributos

do elemento fonte (Tabela 17.2).
Se você especificar um valor no atributo src

do próprio elemento de vídeo , ele substituirá
automaticamente qualquer coisa especificada em
qualquer elemento de origem .
460 Capítulo 17
Fontes MP4 e WebM são especificadas para o vídeo,

com navegadores mais antigos exibindo um link de
Adicionando vídeo com
download para o arquivo MP4.
Alternativos de hiperlink
<corpo>
<controles de vídeo="controles">
Nem todos os navegadores serão capazes de reproduzir
<fonte src="paddle-steamer.mp4" ÿ vídeos HTML5 (como o Internet Explorer 8 e

type="video/mp4"> versões anteriores). Uma solução alternativa é
<fonte src="paddle-steamer.webm" ÿ necessária para esses navegadores.
type="video/webm">
<a href="paddle-steamer.mp4"> Talvez já tenha lhe ocorrido que a forma como
ÿ Baixe o vídeo</a> os elementos de vídeo e fonte funcionam juntos
</vídeo> no exemplo da seção anterior é ideal.
</body>
E você estaria certo.
Você pode aproveitar o fato de que os

navegadores que não entendem o vídeo
e os elementos de origem simplesmente os
B O Internet Explorer 8 ignora o vídeo e os ignorarão.
elementos de origem e simplesmente
exibe o link de download. Nesse exemplo, você adicionou uma
mensagem de texto que seria exibida aos
visitantes usando um navegador que não suporta HTML5.
Você pode substituir esse trecho de texto por
um hiperlink padrão para o vídeo, permitindo ao
usuário baixar o arquivo e visualizá-lo em
seu lazer.
Neste exemplo A, optei por

inclua um link de download para a versão MP4
do nosso vídeo, mas eu poderia facilmente ter
vinculado ao arquivo WebM ou até mesmo a ambos.
Vídeo, Áudio e Outros Multimídia 461

Para adicionar um
hiperlink substituto a um vídeo:
1. Obtenha suas fontes de vídeo.

type="video/mp4">, onde myVideo.
mp4 é o nome do arquivo de origem
do vídeo MP4.

type="video/webm, onde meuVideo.
webm é o nome do arquivo de origem do vídeo
WebM.
5. Digite <a href="myVideo.mp4"> Baixar

o vídeo</a> (onde myVideo.mp4 é o nome
do arquivo de origem do vídeo) para
especificar um hiperlink de arquivo de
vídeo substituto a partir do qual o usuário
pode baixar o vídeo.

elemento.
462 Capítulo 17
Os navegadores que não suportam vídeo HTML5

reverterão para o player substituto do Flash e Adicionando vídeo com
reproduzirão o arquivo de vídeo MP4 especificado.
Alternativos de Flash
<corpo>
<controles de vídeo="controles"> Além de fornecer um link para download, você pode (e
<fonte src="paddle-steamer.mp4" ÿ provavelmente deve) incorporar um player substituto

type="video/mp4"> do Flash que pode reproduzir o arquivo de vídeo MP4.
<fonte src="paddle-steamer.webm" ÿ
type="video/webm">
<object type="aplicativo/ Sim, infelizmente, apesar de todo esse excelente
ÿ dados x-shockwave-flash"= trabalho com HTML5 e multimídia nativa, você ainda pode
ÿ "player.swf?videoUrl=paddle- querer recorrer à incorporação de conteúdo Flash, apenas
ÿ steamer.mp4&controls=true">
para aqueles navegadores mais antigos que não
<param nome="filme" valor=
conseguem lidar com isso. Dito isto, você deseja alcançar o
ÿ "player.swf?videoUrl=paddle-
ÿ steamer.mp4&controls=true" /> maior número possível de usuários, então pelo menos há
</objeto> uma opção!
</vídeo>
No passado, você poderia incorporar o player substituto
</body>
do Flash e o vídeo em sua página da Web usando o
elemento object ou o elemento embed , mas nenhum
deles era HTML estritamente válido, porque nenhum deles
Jogador substituto do Flash estava na especificação.
O player substituto do Flash (player.swf)

mencionado nos trechos de código está
A especificação HTML5 contém os elementos embed e
disponível com o código para download
object , então pelo menos agora eles são HTML válidos.
acompanhando este capítulo. O player
em si é o excelente JW Player, da
LongTail Video (www.longtailvideo.com/ Usaremos o elemento object aqui porque ele
jogadores/jw-flv-player). oferece uma solução mais completa, pois qualquer conteúdo
no elemento object será renderizado mesmo que o
navegador não o faça.
suporta o plugin que o elemento do objeto especifica.

Isso permite que você especifique outro substituto, caso
seja necessário. Um substituto dentro de um substituto!
Também recomendo baixar um reprodutor de vídeo Flash

de código aberto (como JW Player ou Flowplayer), o
que torna muito mais fácil incorporar seu vídeo desta forma .
É ideal que o player possa reproduzir arquivos MP4, para

que você possa reutilizar um dos arquivos de origem de
vídeo existentes; caso contrário, talvez seja necessário
convertê-lo para um arquivo SWF ou FLV.

Para adicionar um substituto de Flash a um vídeo: B Flash player substituto no Internet Explorer 8
1. Obtenha seus arquivos de vídeo.

<corpo>
<controles de vídeo="controles">
<fonte src="paddle-steamer.mp4" ÿ
type="video/mp4">
<source src="paddle-steamer.webm" ÿ
3. Digite <source src="myVideo.mp4" type="video/webm">

<object type="application/ ÿ x-
type="type/mp4">, onde myVideo.mp4 shockwave-flash" data= ÿ "player.swf?
é o nome da fonte de vídeo MP4
videoUrl=paddle- ÿ
arquivo.
steamer.mp4&controls=true">
<param name="movie" value= ÿ
"player.swf?videoUrl=paddle- ÿ
type="video/webm">, onde steamer.mp4&controls=true" />
myVideo.webm é o nome do arquivo </objeto>
de origem do vídeo WebM. <a href="paddle-steamer.mp4">
ÿ Baixe o vídeo</a>
5. Digite <object type="application/ x- </vídeo>
shockwave-flash" data= </body>
"player.swf?videoUrl=myVideo.mp4
&controls=true"> (onde myVideo.mp4
file) para especificar que é um player
substituto do Flash e para especificar o
player e o arquivo de vídeo a serem usados.
Observe que os parâmetros especificados
aqui são específicos do player.swf usado
neste capítulo.
6. Digite <param name="movie"

value="player.swf?videoUrl=
myVideo.mp4&controls=true" />
(onde myVideo.mp4 é o nome do arquivo
de origem do vídeo) para especificar o
player e o vídeo para navegadores que não
entendem as informações na definição do
elemento do objeto de abertura . Observe que
os parâmetros especificados aqui são
específicos do player.swf usado neste capítulo.
7. Digite </object> para fechar o objeto

elemento.

elemento.
464 Capítulo 17
Você também pode adicionar um download de arquivo de vídeo
link (como no exemplo anterior) após o objeto

Flash, logo antes de fechar o vídeo
elemento. Isto seria ainda mais
substituto, permitindo que os usuários baixem o
arquivo de vídeo C. No entanto, o player substituto do
Flash será exibido junto com o link de download
em navegadores que não suportam vídeo HTML5.
Para adicionar Flash e um

C Os navegadores que não suportam vídeo HTML5
reverterão para o player substituto do Flash, que
hiperlink substituto a um vídeo:
reproduzirá o arquivo de vídeo MP4 especificado. O
1. Obtenha seus arquivos de vídeo.
link para download também será exibido, e os navegadores
que não possuem o Flash instalado ainda oferecerão
essa opção.
para abrir o elemento de vídeo com o controle
padrão definido.

type="type/mp4">, onde myVideo.mp4
arquivo.

type="video/webm">, onde
myVideo.webm é o nome do arquivo de
origem do vídeo WebM.
5. Digite <object type="application/ x-shockwave-

flash" data=
&controls=true"> (onde myVideo.mp4
é o nome do arquivo de origem do vídeo) para
especificar o player e o arquivo de vídeo a serem usados.
Observe que os parâmetros especificados aqui são
6. Digite <param name="movie" value=

&controls=true" /> (onde myVideo
.mp4 é o nome do arquivo de origem do vídeo)
para especificar o player e o vídeo para navegadores
que não entendem o
informações na definição do elemento do objeto

de abertura.


elemento.
8. Digite <a href="myVideo.mp4"> Baixar

o vídeo</a> (onde myVideo.mp4 é o nome
do arquivo de origem do vídeo) para
especificar um hiperlink de download do
arquivo de vídeo substituto.
9. Digite </video> para fechar o vídeo D O Firefox é exibido (com controle padrão definido) quando
elemento. não consegue encontrar um arquivo de vídeo que possa
reproduzir – ele não reverte para o player substituto do Flash
nem exibe o link de download.
Se um navegador suportar vídeo HTML5, mas não

conseguir encontrar um arquivo que possa reproduzir, ele
não reverterá para o player substituto do Flash D.
Um excelente recurso sobre como

disponibilizar o vídeo para todos é “Video for
Everybody” de Kroc Camen (http://
camendesign.com/code/video_for_
todo mundo). Definitivamente vale a pena conferir, assim
como o Video for Everybody Generator de Jonathan
Neal (http://sandbox.thewikies.com/
gerador vfe/).
466 Capítulo 17
Fornecendo acessibilidade
Outra vantagem de ter multimídia nativa é que o
conteúdo pode ser
tornou o teclado mais acessível, aproveitando a

acessibilidade natural dos navegadores modernos.
Ou então você pensaria.
O Opera é atualmente o único navegador

moderno cujo controle padrão está definido para
A mídia HTML5 pode ser acessada pelo teclado.
Para os outros navegadores, a única maneira de ter

um reprodutor de mídia acessível é criando seu próprio
conjunto de controles, para o qual você precisa da
JavaScript Media API (também parte do HTML5), mas
isso está fora do escopo deste capítulo.
HTML5 também especifica um novo formato de arquivo que

permite incluir legendas de texto, legendas, descrições,
capítulos e assim por diante no conteúdo de vídeo.
O formato de arquivo WebVTT (Web Video Text Tracks)

destina-se à marcação de recursos externos de trilha de
texto, como legendas.
Nenhum navegador suporta esse formato ainda, mas

existem diversas bibliotecas JavaScript (como Playr e
Captionator) que você pode usar para aproveitar o
WebVTT e sua funcionalidade.
Uma discussão mais aprofundada sobre
WebVTT e legendagem está fora do escopo deste

capítulo, mas você pode descobrir mais em
www.iandevlin.com/blog/2011/05/html5/
legendas webvtt e vídeo.
Multimídia HTML5 de Ian Devlin: Desenvolver

and Design (Peachpit Press, 2011) tem
capítulos dedicados a mostrar como criar seu
próprio conjunto de controles acessíveis e
como usar o WebVTT.

Adicionando Áudio
Formatos de arquivo
Agora que você pode adicionar vídeo à sua página da

Web usando mídia nativa HTML5, vamos dar uma olhada
em como adicionar áudio. Tal como acontece com HTML5
vídeo, há vários formatos de arquivo (codecs) diferentes
que são suportados.
Existem cinco codecs de áudio principais que você pode

usar. Aqui estão eles, junto com os navegadores
que os suportam:
n Ogg Vorbis usa a extensão de arquivo .ogg

versão e é compatível com Firefox 3.5+, Chrome
5+ e Opera 10.5+.
n MP3 usa a extensão de arquivo .mp3 e é compatível

com Safari 5+, Chrome 6+, Internet Explorer 9+ e
iOS.
n WAV usa a extensão de arquivo .wav e
é compatível com Firefox 3.6+, Safari 5+, Chrome

8+ e Opera 10.5+.
n AAC usa a extensão de arquivo .aac e
é compatível com Safari 3+, Internet Explorer

9+, iOS 3+ e Android 2+.
n MP4 usa a extensão .mp4 e é compatível com Safari

3+, Chrome 5+, Internet Explorer 9+, iOS 3+ e
Android 2+.
Você deve se lembrar que o MP4 também foi listado

como um codec de vídeo, mas também pode ser usado para
codificar apenas dados de áudio.
Assim como acontece com o vídeo, seu

conteúdo precisa estar em dois formatos diferentes
para garantir suporte em todos os navegadores
compatíveis com HTML5. Os dois melhores formatos
para fornecer seu conteúdo são Ogg Vorbis e MP3.
O aplicativo Miro Video Converter

mencionado na seção “Conversão entre arquivos
A barra lateral “Formatos” também pode ser usada para converter
áudio.
468 Capítulo 17
A Um arquivo de áudio simples codificado em Ogg sem

controles Adicionando um único áudio
<corpo> Arquivo para sua página da web
<audio src="piano.ogg"></audio>
Vamos passar a colocar um arquivo de áudio em sua
</body>
página da Web. O processo é muito semelhante ao
de adicionar um vídeo, mas desta vez você
usará o elemento de áudio A.
Para adicionar um único arquivo

de áudio à sua página da Web:
n Obtenha seu arquivo de áudio.
n Digite <audio src="myAudio.ext">

</audio>, onde myAudio.ext é o local, o
nome e a extensão do arquivo de áudio.

Adicionando um único áudio A Um arquivo de áudio simples codificado em Ogg com o

conjunto de controle padrão especificado
Arquivo com controles
<corpo>
<audio src="piano.ogg" controles=
para sua página da web ÿ "controles"></audio>
</body>
Como mostrou o exemplo anterior, é muito fácil
adicionar um único arquivo de áudio à sua página da
Web. Mas isso na verdade não exibe nada, já que um
arquivo de áudio não é visual, então você precisa
adicionar alguns controles usando o atributo de B Os controles de áudio no Firefox
controles A.
Para adicionar um único arquivo de

áudio com controles à sua página da Web: C Os controles de áudio no Safari
1. Obtenha seu arquivo de áudio.
2. Digite <audio src="myAudio.ext"

controles="controles"></audio>.
D Os controles de áudio no Chrome
É claro que, assim como acontece com os controles de
vídeo, cada navegador tem sua própria ideia de
como esses controles deveriam ser (B a F).
E Os controles de áudio no Opera
F Os controles de áudio no Internet Explorer 9
470 Capítulo 17
TABELA 17.3 Atributos de Áudio Explorando Áudio

Nome Descrição Atributos
fonte Especifica o URL do arquivo de áudio.
Assim como acontece com o elemento de
reprodução automática Inicia automaticamente a reprodução do
vídeo , há vários atributos que você pode
áudio assim que possível.
usar com o elemento de áudio . Eles estão
controles Adiciona o controle padrão do navegador
listados na Tabela 17.3.
definido para o áudio.
silenciado Silencia o áudio (atualmente não

suportado por nenhum navegador).
laço Reproduz o áudio em loop.
pré-carregamento Indica ao navegador quanto do áudio deve

ser carregado. Pode assumir três valores
diferentes:
nenhum não carrega nada.
metadata carrega apenas os metadados

do áudio (por exemplo, duração).
auto permite que o navegador decida o que
fazer (esta é a configuração padrão).

Um arquivo de áudio Ogg (com o controle padrão definido) que

Adicionando controles começará a ser reproduzido automaticamente quando a página for
carregada
e reprodução automática a
<corpo>
Áudio em loop <audio src="piano.ogg" reprodução automática=
ÿ "reprodução automática" controles="controls">
Usando os controles e atributos de reprodução ÿ </audio>
automática , adicionar controles e especificar que o </body>
arquivo de áudio deve começar a ser reproduzido no
carregamento é bastante simples (A e B).
Você também pode indicar que deseja que o áudio

seja reproduzido em loop usando o loop
B Um arquivo de áudio (com controles) que começou a ser reproduzido
atributo C. automaticamente ao carregar
Para adicionar controles a um arquivo

C Um arquivo de áudio Ogg (com o controle padrão definido) que fará
de áudio e iniciar a reprodução do um loop
áudio automaticamente: <corpo>

<audio src="piano.ogg" loop="loop" ÿ
controles="controles"></audio>
2. Digite <audio src="myAudio.ext" </body>
autoplay="autoplay" controles=
"controls"></audio>, onde
myAudio.ext é o local, o nome e a extensão
do arquivo de áudio.
Para reproduzir um arquivo de áudio em loop:
2. Digite <audio src="myAudio.ext"

loop="loop" controles="controls"> </audio>,
onde myAudio.ext é o local, o nome e a
extensão do arquivo de áudio.
Firefox não suporta loop

atributo.
Só porque você pode reproduzir áudio

automaticamente e em loop não significa que
você deva.
472 Capítulo 17
A Este arquivo de áudio Ogg deve ter apenas seus metadados

(por exemplo, comprimento) carregados quando a página é
Pré-carregando um
carregada.
Arquivo de áudio
<corpo>
Você pode solicitar que o navegador pré-carregue o
<audio src="piano.ogg" pré-carregamento=
ÿ "metadados" controles="controles"> ÿ </ arquivo de áudio de diferentes maneiras usando
audio> os diferentes atributos do elemento de áudio
</body> (A e B) na Tabela 17.3.
B Este arquivo de áudio Ogg permite que o navegador decida Para solicitar ao navegador que pré-
por si mesmo quanto do arquivo carregar.
carregue apenas os metadados do áudio:
<corpo> 1. Obtenha seu arquivo de áudio.

<audio src="piano.ogg" preload="auto" ÿ
controles="controls"></audio> 2. Digite <audio src="myAudio.
ext" pré-carregamento="metadados"
</body>
control="controls"></audio>, onde myAudio.ext
é o local, o nome e a extensão do arquivo de áudio.
Para pedir ao navegador para decidir

como pré-carregar o arquivo de áudio:
2. Digite <audio src="myAudio.

ext" pré-carregamento="auto"
control="controls"></audio>, onde myAudio.ext
é o local, o nome e a extensão do arquivo de áudio.
Especificando um valor para o pré-carregamento

atributo não garante o comportamento do navegador;
é apenas um pedido.
Especificar que o arquivo de áudio seja

reproduzido automaticamente por meio do atributo
autoplay substitui qualquer configuração do atributo
preload , porque o arquivo de áudio deve ser carregado para ser reproduzido

A Duas fontes de áudio são definidas para este áudio

Fornecendo vários elemento (que também possui um conjunto de
Fontes de áudio controles padrão definido): um codificado como Ogg e

outro como MP3.
Conforme mencionado, para oferecer suporte a <corpo>

todos os navegadores compatíveis com HTML5, <controles de áudio = "controles">
você precisa fornecer seu áudio em mais de um <source src="piano.ogg" type= ÿ "audio/
ogg">
formato. Isto é conseguido exatamente da mesma
<source src="piano.mp3" type= ÿ
maneira que com o elemento de vídeo : usando o
"audio/mp3">
elemento de origem A. </audio>
</body>
Todo o processo funciona da mesma forma que a
especificação de vários arquivos de origem de vídeo.
O navegador ignora o que não pode reproduzir e
reproduz o que pode.
Para especificar duas fontes

de áudio diferentes:
1. Obtenha seus arquivos de áudio.
2. Digite <controles de áudio = "controles">

para abrir o elemento de áudio com o controle
padrão definido.
3. Digite <source src="myAudio.ogg"

type="audio/ogg">, onde myAudio.
ogg é o local, nome e extensão do arquivo de
áudio Ogg Vorbis.
4. Digite <fonte src="myAudio.mp3"

type="audio/mp3">, onde myAudio.
mp3 é o local, nome e extensão do arquivo de áudio
MP3.
5. Digite </audio> para fechar o áudio

elemento.
O atributo type ajuda o navegador a

decidir se pode reproduzir o arquivo de origem.
Para formatos de áudio, o valor é sempre audio/
seguido pelo próprio formato: audio/
ogg, audio/mp3, audio/aac, audio/wav e
audio/mp4.
474 Capítulo 17

elemento, e os navegadores que não são compatíveis
Adicionando áudio com
com HTML5 simplesmente exibirão o hiperlink para a versão
MP3 para download do arquivo de áudio. Alternativos de hiperlink
<corpo> Correndo o risco de me repetir, o método alternativo para
<controles de áudio = "controles"> áudio funciona exatamente da mesma maneira que
<source src="piano.ogg" type= ÿ "audio/ para vídeo.
ogg">
<source src="piano.mp3" type= ÿ Você define suas múltiplas fontes usando os
"audio/mp3"> elementos audio e source e, em seguida, adiciona o
<a href="piano.mp3">Baixe o ÿ substituto para navegadores que não são compatíveis
áudio</a>
com HTML5 antes de fechar o elemento audio A.
</audio>
</body>
Para adicionar um hiperlink

substituto ao seu áudio:
1. Obtenha seus arquivos de áudio.

para abrir o elemento de áudio com o controle
padrão definido.

type="audio/ogg">, onde myAudio.
ogg é o local, nome e extensão do arquivo de
áudio Ogg Vorbis.

MP3.
5. Digite <a href="myAudio.mp3"> Baixar

o áudio</a> (onde myAudio.mp3 é o local, nome
e extensão do arquivo de áudio MP3) para fornecer
um hiperlink de download de áudio para
navegadores que são
não é compatível com HTML5.

elemento.


Adicionando áudio com elemento, e navegadores como o Internet Explorer 8
voltarão a usar o player substituto do Flash
Alternativos de Flash especificado, que usa o arquivo MP3 como fonte de áudio.
Assim como acontece com o vídeo, o Flash costuma ser <corpo>

o plug-in preferido para incorporar conteúdo de áudio. <controles de áudio = "controles">
E, novamente, assim como acontece com o vídeo, <source src="piano.ogg" type= ÿ "audio/
ogg">
você pode fornecer um player substituto do Flash para
navegadores que não são compatíveis com HTML5,
"audio/mp3">
como o Internet Explorer 8. <object type="aplicativo/
ÿ x-shockwave-flash"
Para fornecer um substituto de dados="player.swf?audioUrl=

ÿ piano.mp3&controls=true">
Flash para seu áudio:
<param nome="filme" valor=
1. Obtenha seus arquivos de áudio. ÿ "player.swf?audioUrl=
ÿ piano.mp3&controls=true" />
2. Digite <controles de áudio = "controles"> </objeto>
para abrir o elemento de áudio com o controle </audio>
padrão definido. </body>

type="audio/ogg, onde myAudio.ogg
é a localização, nome e extensão do arquivo de
áudio Ogg Vorbis.

MP3.
5. Digite <object type="application/x-

onda de choque-flash" data="player.swf
?audioUrl=myAudio.mp3&controls=
true"> (onde myAudio.mp3 é o
local, o nome e a extensão do arquivo
de áudio) para especificar que é um
player substituto do Flash e para especificar
o player e o arquivo de áudio a serem
usados. Neste caso , player.swf é o
mesmo player substituto do Flash usado
nas seções do vídeo. Observe que os
parâmetros especificados aqui são específicos do player.swf
usado ao longo deste capítulo.
476 Capítulo 17

value="player.swf?audioUrl=
B Audio Flash player substituto no Internet Explorer 8 myAudio.mp3&controls=true" />
(onde myAudio.mp3 é o local, nome e
extensão do arquivo de áudio) para especificar
o player e o áudio para navegadores que
não entendem as informações.
definição do elemento do objeto de
abertura .

elemento.

elemento B.
Um navegador como o Internet Explorer

8 simplesmente ignorará os elementos de áudio
e de origem e irá direto para o player substituto do
Flash. Contanto que o usuário tenha o Flash
instalado, o conteúdo de áudio será reproduzido.

Adicionando A Duas fontes de áudio são definidas para

navegadores HTML5 e um player substituto do Flash é
áudio com Flash e um definido para navegadores, como o Internet Explorer 8,
que não suportam Flash. Uma alternativa adicional é
fornecida por meio de um simples hiperlink para a
Substituição de hiperlink versão MP3 do arquivo de áudio.
Você pode fornecer um link de download após o player <corpo>

<controles de áudio = "controles">
substituto do Flash para fornecer um substituto extra
<source src="piano.ogg" type= ÿ "audio/
A.
ogg">
Para adicionar Flash e um "audio/mp3">
hiperlink substituto ao seu áudio: <object type="application/ ÿ x-

shockwave-flash" data= ÿ "player.swf?
1. Obtenha seus arquivos de áudio. audioUrl=piano.mp3 ÿ &controls=true"
width="280">
<param name="movie" value= ÿ
para abrir o elemento de áudio com o controle "player.swf?audioUrl=piano.mp3 ÿ
padrão definido. &controls=true" />
</objeto>
<a href="piano.mp3">Baixe o ÿ
type="audio/ogg">, onde áudio</a>
myAudio.ogg é o local, nome e extensão do arquivo </audio>
de áudio Ogg Vorbis. </body>

type="audio/mp3">, onde
myAudio.mp3 é o local, nome e extensão do
arquivo de áudio MP3.
5. Digite <a href="myAudio.mp3"> Baixar

o áudio</a> (onde myAudio.mp3 é o local, nome
e extensão do arquivo de áudio) para fornecer um
hiperlink de download de áudio para navegadores
que não são
Compatível com HTML5.
478 Capítulo 17
6. Digite <object type="application/ x-

shockwave-flash" data=
B Flash de áudio e substituto de hiperlink na Internet
"player.swf?audioUrl=meuÁudio.mp3
Explorador 8
&controls=true"> (onde myAudio.mp3
é o local, o nome e a extensão do arquivo de
áudio) para especificar que é um player
substituto do Flash e para especificar o player e
o arquivo de áudio a serem usados. Observe que o
os parâmetros especificados aqui são

value="player.swf?audioUrl=
myAudio.mp3&controls=true" />
(onde myAudio.mp3 é o local, nome e
extensão do arquivo de áudio) para especificar
o player e o áudio para navegadores que
não entendem o
informações no objeto de abertura
definição do elemento.

elemento.
9. Digite <a href="myAudio.mp3">Baixar

o áudio</a>.

elemento.

Obtendo multimídia
arquivos
Os arquivos multimídia mais comuns incorporados
gravados em páginas da Web são sons e vídeos.

Você pode criar sons com um micro-
telefone e software de digitalização (como Sound

Gravador para Windows ou Amadeus para
Mac). E existem muitos programas que criam MP3 a

partir de CDs.
Com o advento dos smartphones e suas câmeras (que

continuam melhorando), colocar vídeos na Web ficou
mais fácil.
Mesmo que o vídeo não esteja no formato desejado,
ferramentas como Miro Video Con-verter e
HandBrake permitem converter facilmente os arquivos
para o formato desejado.
Você também pode encontrar sons e filmes em
na Web, embora você deva ler atentamente os acordos

de licença correspondentes.
Mas não se limite a áudio e vídeo.

Embora o elemento canvas HTML5 , com a ajuda de
sua API JavaScript, permita criar animações e assim
por diante, você ainda pode incorporar animações em
Flash no
da mesma forma que antes - usando o objeto

elemento. Apesar das melhorias que a mídia HTML5
traz, o Flash ainda tem o seu lugar.
480 Capítulo 17
Considerando
Direitos Digitais
Gestão (DRM)
Uma coisa que você sem dúvida notará com
toda essa incorporação de arquivos de áudio e
vídeo é o fato de que as URLs dos arquivos de
origem estão disponíveis para qualquer um baixar
e “roubar” seu conteúdo – assim como imagens
incorporadas e HTML, Os arquivos de origem
JavaScript e CSS são.
Não há nada que você possa fazer sobre isso.
O HTML5 não fornece nenhum método para

proteger seu conteúdo de mídia de forma
alguma, embora possa fornecer no futuro.
Portanto, se você está preocupado em proteger

seus arquivos de mídia, por enquanto não use
multimídia nativa HTML5 ou substituto
Métodos Flash mostrados neste capítulo,
porque o DRM precisa que o arquivo de mídia seja
incorporado e as ferramentas DRM já estejam
incorporadas ao material de origem.

A Para incorporar animação Flash, defina o tipo

Incorporando Flash MIME como application/x-shockwave-flash.
Animação <cabeça>
<title>Incorporar filme Flash</title>
O software Adobe Flash permite criar animações, filmes </head>
e outras mídias amplamente utilizadas na Web. O <corpo>
plugin que o acompanha era frequentemente usado <tipo de objeto = "aplicativo/x-shockwave-
para incorporar vídeo e áudio em uma página da Web. ÿ flash" data="http://www.sarahsnotecards
Mas o Flash foi e é usado para mais do que isso. Desde
ÿ .com/catalunyalive/minipalau.swf" ÿ
largura="300" altura="240">
<param name="movie" value="http://
as animações geralmente são criadas usando Adobe ÿ www.sarahsnotecards.com/catalunyalive/
Flash e, embora não sejam exibidas em dispositivos ÿ minipaulau.swf" />
como iPads e iPhones, ainda há ocasiões em que você </objeto>
</body>
decide usá-las.
Você viu anteriormente como o Adobe Flash é usado

para incorporar áudio e vídeo como alternativa
para navegadores mais antigos usando um player
substituto do Flash baixado. Aqui você verá como
incorporar uma animação real do Adobe Flash
Arquivo SWF (A e B).
B A animação Flash é incorporada na página usando

o elemento object .
482 Capítulo 17
Para incorporar animação Flash:
1. Digite <objeto para iniciar o objeto

elemento.
2. Digite type="aplicativo/x-shock
wave-flash" para indicar o tipo MIME para
animações em Flash.
3. Digite data="nomedoarquivo.swf", onde

filename.swf é o nome e o local da animação
Flash em seu servidor.
4. Especifique as dimensões da sua animação
ção com largura = "w" altura = "h", onde
w e h são valores em pixels.
5. Digite > para finalizar a abertura da tag do objeto .

value="filename.swf" / >, onde
filename.swf corresponde ao que você
usou na etapa 3.
7. Digite </object> para completar o objeto.
Esta técnica é baseada no artigo

“Flash Satay” de Drew McLellan em A List
Apart (www.alistapart.com/articles/flashsatay).
Drew descobriu uma maneira de usar

pequenos filmes de referência para ajudar as
animações em Flash a serem transmitidas corretamente
com essa técnica. Veja seu artigo para detalhes.
Muitas pessoas usam uma combinação da tag

object e da tag embed para inserir animação Flash em
uma página da Web, ambas agora válidas em HTML5.
Para obter mais detalhes, pesquise “incorporar Flash”
no site da Adobe (www.adobe.com).

Incorporação
Vídeo do youtube
O YouTube (e outros serviços) agora oferece
um servidor onde você pode enviar seus
arquivos de vídeo (que tendem a ser de tamanho
considerável) e disponibilizá-los aos visitantes.
Para incorporar vídeo do YouTube:
1. Acesse o YouTube e veja o vídeo que

deseja usar (www.youtube.com).
2. Copie o código do filme da barra de
endereço. Ele vem logo após v= e continua
até o primeiro e comercial (&).
3. Siga as instruções para incorporar Flash
na seção “Para incorporar animação
Flash”. Nos dois locais onde você deve
inserir a URL da animação em Flash, digite
http://www.youtube.com/v/
código do filme, onde moviecode é o
que você copiou da barra de endereço
na etapa 2.
Quando você pega o código de um filme

do You-Tube, ele vem depois de v=. Mas
quando você constrói sua URL para fazer
referência ao filme, você usa v/.
484 Capítulo 17
Usando
vídeo com Canvas
Outra grande vantagem de ter multimídia nativa com
HTML5 é que ela pode funcionar
com muitos outros novos recursos e
funcionalidades que acompanham ou estão
relacionadas ao HTML5.
Uma das novidades é a tela

elemento.
O elemento canvas e sua API JavaScript

correspondente permitem desenhar e animar objetos
em suas páginas da Web.
Você também pode usar a API em conjunto com o

vídeo HTML5, porque o vídeo
elemento pode ser tratado como qualquer outro
Elemento HTML e, portanto, acessível
para tela.
Com a API JavaScript, você pode capturar imagens

de um vídeo em reprodução e redesenhá-las no
elemento canvas como uma imagem, permitindo, por
exemplo, fazer capturas de tela do vídeo.
Você pode manipular pixels de imagem individuais por

meio da API e, como pode criar imagens em tela
a partir do seu vídeo, isso também permite
manipular os pixels do vídeo. Por exemplo, você
pode convertê-los todos em tons de cinza.
Isso lhe dá apenas uma pequena ideia do que o

canvas pode fazer com o elemento de vídeo , e
uma discussão completa sobre isso está fora do
escopo deste livro. Para mais informações sobre o
canvas e sua API JavaScript, consulte a seção “Mais
recursos” no final
deste capítulo.

Acoplamento de
vídeo com SVG
Outra tecnologia que as pessoas começaram a
prestar mais atenção com o surgimento do HTML5
é o SVG (Scalable Vector Graphics).
O SVG existe há muito tempo (desde 1999), mas

o HTML5 traz consigo o elemento svg , que permite que
definições SVG sejam incorporadas na própria página
da Web.
SVG permite que formas e gráficos sejam definidos

em XML, que o navegador interpreta e usa para
desenhar as formas reais.
Tudo o que a definição SVG contém é um
um monte de instruções sobre como e o que
desenhar.
Os gráficos produzidos pelo SVG também são

baseados em vetores, e não em raster. Esse
significa que eles são bem dimensionados, porque o

navegador simplesmente usa as instruções de desenho
para desenhar a forma no tamanho necessário. Os
gráficos raster contêm dados de pixel e, se você
quiser redesenhar a imagem em um tamanho maior
que o original, não haverá dados de pixel suficientes
para o novo tamanho, causando perda na qualidade da
imagem.
Uma discussão completa sobre SVG está fora do

escopo deste capítulo, mas é mencionada aqui para
que você saiba que o vídeo pode ser usado em
conjunto com definições de SVG. As formas
criadas pelo SVG podem ser usadas para mascarar
vídeos, ou seja, para mostrar apenas o vídeo subjacente
através da forma (um círculo, por exemplo).
Existem também vários filtros SVG
que você pode aplicar ao vídeo HTML5, como conversão

em preto e branco, desfoques gaussianos e
saturação de cores. Para obter mais informações sobre
SVG, consulte a próxima seção, “Recursos adicionais”.
486 Capítulo 17
Recursos adicionais
Este capítulo abordou apenas o básico da
multimídia HTML5. Há muito mais para
aprender, então aqui estão alguns recursos
que você pode conferir quando quiser.
Recursos online
n “Vídeo na Web” (http://
diveinto .html5doctor.com/video.html)
n Vídeo HTML5 (http://html5video.org)

n “WebVTT e legendas de vídeo”
(www .iandevlin.com/blog/2011/05/html5/
legendas webvtt e vídeo)
n “Tela HTML5: o básico”
(http://dev.opera.com/articles/view/
html-5-canvas-o-básico)
n “Aprendendo SVG” (http://my.opera.com/
tagawa/blog/learning-svg)
Livros
e Ian Devlin. Multimídia HTML5:
Desenvolver e Projetar. Peachpit Press,
2011. (http://html5multimedia.com)
n Shelley Powers. Mídia HTML5. O'Reilly
Mídia, 2011.
e Silvia Pfeiffer. O guia definitivo para vídeo
HTML5. Apress, 2010.

Esta página foi intencionalmente deixada em branco

18
Tabelas
Estamos todos familiarizados com dados tabulares em nosso
vidas diárias. Ele assume muitas formas, como Neste capítulo

dados financeiros ou de pesquisas, calendários de
eventos, horários de ônibus ou horários de TV. Na Estruturando Tabelas 490
maioria dos casos, essas informações são Abrangendo Colunas e Linhas 494
apresentadas em colunas ou cabeçalhos de linhas,
juntamente com os próprios dados.
O elemento table — junto com seus elementos filhos

— é descrito neste capítulo. Vou me concentrar na
estruturação e estilo básicos da tabela . As tabelas
HTML podem ser bastante complexas, embora você
provavelmente tenha poucas ocasiões para
implementá-las, a menos que tenha um site rico
em dados. Os links abaixo mostram o código
exemplos de estruturas de tabelas complexas e enfatize
como tornar as tabelas acessíveis:
n “Traga as mesas”, de Roger

Johansson (www.456berastreet.com/
arquivo/200410/bring_on_the_tables/)
n “Tabelas de dados acessíveis” por Roger Hud-son
(www.usability.com.au/resources/
tabelas.cfm)
n “Técnicas para HTML acessível
Tabelas” por Stephen Ferg (www.ferg.org/
seção508/accessible_tables.html)
Estruturando Tabelas A Cada linha é marcada por um elemento tr . Esta

tabela muito simples possui uma linha que contém os
cabeçalhos (os elementos ) e mais três linhas com
O tipo de informação que você coloca em uma
células de dados (os elementos td ). Se você incluir uma
planilha geralmente é adequado para apresentação legenda, ela deverá ser o primeiro elemento dentro da
em uma tabela HTML. tabela (a legenda também pode incluir p e outros
elementos de texto).
No nível mais fundamental, uma tabela
elemento é composto por linhas de células. Cada ...
<corpo>
linha (tr) contém células de cabeçalho (th) ou de
<tabela>
dados (td) , ou ambas. Você também pode
<caption>Finanças trimestrais de ÿ 1962-1964
fornecer uma legenda para a tabela se achar (em milhares)</caption>
que isso ajudará os visitantes a entendê-la melhor . <tr>
Além disso, o atributo scope – também <th escopo="col">1962</th>
opcional, mas recomendado – informa leitores <th escopo="col">1963</th>

<th escopo="col">1964</th>
de tela e outros dispositivos assistivos
</tr>
que a th é o cabeçalho de uma tabela col- <tr>
umn (quando escopo="col"), de uma linha da <td>US$ 145</td>
tabela (quando escopo="linha") e mais (veja a <td>US$ 167</td>
<td>US$ 161</td>
última dica) A.
</tr>
Por padrão, os navegadores exibem tabelas apenas <tr>
na largura que suas informações exigem dentro <td>US$ 140</td>
<td>US$ 159</td>
do espaço disponível na página B. Como seria de
<td>US$ 164</td>
esperar, você pode alterar a formatação da tabela </tr>
com CSS, como demonstrarei em breve. <tr>
<td>US$ 153</td>
<td>US$ 162</td>
<td>US$ 168</td>
</tr>
<tr>
<td>US$ 157</td>
<td>US$ 160</td>
<td>US$ 171</td>
</tr>
</tabela>
</body>
</html>
B Por padrão, o texto está em negrito, o texto da legenda

está centralizado e a largura da tabela é igual ao seu
conteúdo.
490 Capítulo 18
C Eu defini explicitamente as seções da tabela A tabela de A está faltando alguma coisa, no

com thead, tbody e tfoot. Em seguida, adicionei um entanto. Como você sabe o que cada linha de
th no início de cada linha; aqueles em tbody e tfoot dados representa? Seria mais fácil saber se a
têm scope="row" para indicar que são cabeçalhos
de linha. tabela tivesse cabeçalhos ao lado
cada linha também. Adicioná-los é
...
simplesmente uma questão de adicionar th como
<corpo>
<tabela>
o primeiro elemento em cada linha. E enquanto
<caption>Finanças trimestrais de ÿ 1962-1964 os cabeçalhos das colunas têm escopo =
(em milhares)</caption> "col", cada linha que precede um td recebe escopo = "linha" C.
<thead> 
<tr> Também usei C como uma oportunidade para
<th scope="col">Trimestre</th> introduzir alguns outros elementos específicos da
<th escopo="col">1962</th> definição de tabelas: thead, tbody e tfoot.
<th escopo="col">1963</th> O elemento thead marca explicitamente uma
<th escopo="col">1964</th> linha ou linhas de cabeçalhos como a seção do
</tr>
</thead>
cabeçalho da tabela. O elemento tbody envolve
<tbody> 
todas as linhas de dados. O elemento tfoot
<tr> marca explicitamente uma linha ou linhas como
<th scope="row">Q1</th> a seção do rodapé da tabela. Você pode usar
<td>US$ 145</td>
tfoot para cálculos de colunas, como em C,
<td>US$ 167</td>
<td>US$ 161</td> ou para repetir os títulos de uma tabela longa,
</tr> como em uma programação de trem (alguns
<tr> navegadores também podem imprimir os
<th scope="row">Q2</th> elementos tfoot e thead em cada página se
<td>US$ 140</td>
uma tabela tiver várias páginas). ). Os
<td>US$ 159</td> elementos thead, tfoot e tbody não afetam o
<td>US$ 164</td> layout e não são obrigatórios (embora eu
</tr> recomende usá-los), exceto que tbody é
... Linhas Q3 e Q4 ... obrigatório sempre que você inclui um thead ou
</tbody> tfoot. Você também pode direcionar estilos com todos os três.
<tfoot> 
<tr>
<th escopo="row">TOTAL</th>
<td>$595</td>
<td>$648</td>
<td>$664</td>
</tr>
</tfoot>
</tabela>
</body>
</html>
Tabelas 491
Como você viu B, as tabelas podem parecer um D Esta folha de estilo simples adiciona uma borda a
pouco comprimidas por padrão. Com algum CSS cada célula de dados e preenchimento no cabeçalho e
nas células de dados. Ele também formata a legenda
básico aplicado D, você pode adicionar espaço nas e o conteúdo da tabela. Sem colapso de fronteiras: colapso;
células para espalhar as coisas (via definido na tabela, um espaço apareceria entre a
borda de cada td e a borda de seu td adjacente (a
preenchimento), adicionar bordas para indicar
configuração padrão é border-collapse: Separate;).
os limites das células (via borda) e formatar Você também pode aplicar bordas aos elementos ,
texto, tudo para melhorar a compreensão de sua tabela E. conforme mostrado em “Ampliando colunas e linhas”.
Para estruturar uma tabela: corpo {

fonte: 100% arial, helvética, serifa;
1. Digite <tabela>.
}
2. Se desejar, digite <caption>caption
conteúdo</caption>, onde legenda mesa {
colapso da fronteira: colapso;
o conteúdo descreve sua tabela.
}
3. Se desejar, antes do primeiro elemento tr da
seção que deseja criar, digite <thead>, legenda {
tamanho da fonte: .8125em;
<tbody> ou <tfoot>, conforme apropriado.
intensidade da fonte: Negrito;
margem inferior: 0,5em;
4. Digite <tr> para definir o início de }
uma fila.
º,
5. Digite <th scope="scopetype"> para iniciar td {
uma célula de cabeçalho (onde tamanho da fonte: .875em;
preenchimento: 0,5em 0,75em;
scopetype é col, row, colgroup ou
}
rowgroup) ou digite <td> para definir o
início de uma célula de dados. td {
borda: 1px sólido #000;
6. Digite o conteúdo da célula.
}
7. Digite </th> para completar uma célula de cabeçalho ou </
td> para preencher uma célula de dados. pé {
estilo da fonte: itálico;
8. Repita as etapas 5 a 7 para cada célula da linha. intensidade da fonte: Negrito;
}
9. Digite </tr> para completar a linha.
492 Capítulo 18
10. Repita as etapas 4 a 9 para cada linha da

seção.
11. Se você iniciou uma seção na etapa 3,

feche a seção com </thead>, </tbody> ou
</tfoot>, conforme apropriado.
12. Repita as etapas 3 a 11 para cada seção.
Observe que uma tabela pode ter apenas
um thead e um tfoot , mas pode ter
vários elementos tbody .
13. Para finalizar a tabela digite </table>.
Se uma tabela for o único elemento além de

uma figcaption aninhada em um elemento
figure , omita a legenda e descreva a tabela
com a legenda fig (veja “Criando uma
Figura” no Capítulo 4). Para esclarecer,
E Agora a tabela tem cabeçalhos para colunas e não aninhe a legenda da figura na tabela, mas na figura,
linhas e possui uma linha com totais de coluna, delimitada como sempre.
por um elemento tfoot . O estilo de nossa borda,

preenchimento de célula, conteúdo de legenda e Embora não seja mostrado no exame CSS
conteúdo tfoot também é exibido. ple D, você pode definir um plano de fundo,
uma largura e muito mais em sua folha de estilos
para os elementos table, td ou th . Resumindo,
a maior parte do texto e outras formatações
usadas para estilizar outros elementos HTML
também se aplicam a tabelas (consulte
“Ampliando Colunas e Linhas” para outro
exemplo). Você pode notar pequenas diferenças
de exibição entre os navegadores, especialmente o Internet Explorer
Você pode atribuir o atributo scope a um th

que é o cabeçalho de um grupo inteiro de colunas
(scope="colgroup") ou de um grupo inteiro de
linhas (scope="rowgroup"). Veja um exemplo
deste último na próxima seção.
Tabelas 493
Abrangendo R: Indiquei que o Celebrity Hoedown será exibido

nas terças e quartas-feiras às 20h, aplicando
Colunas e Linhas colspan="2" ao td que contém o programa. Da
mesma forma, adicionei rowspan="2" ao td
contendo o Filme da Semana, pois tem duração de
Você pode abranger um th ou td em mais de uma duas horas. Observe também que Time th tem
coluna ou linha com os atributos colspan e escopo = "rowgroup", porque é o cabeçalho de
cada cabeçalho no grupo de cabeçalhos de linha
rowspan , respectivamente. O número que você diretamente abaixo dele.
atribui aos atributos especifica o número de
células que eles abrangem (A e B). ...
<corpo>
<tabela>
Para abranger uma célula
<caption>Programação de TV</caption>
em duas ou mais colunas: <thead> 
<tr>
1. Quando você chegar ao ponto em que precisa
<th scope="rowgroup">Tempo</th>
definir a célula que abrange mais de uma <th scope="col">Segunda-feira</th>
coluna, digite <td seguido de <th scope="col">Terça</th>
um espaço. <th scope="col">Quarta</th>
</tr>
2. Digite colspan="n">, onde n é igual </thead>
o número de colunas que a célula deve <tbody> 
período.
<tr>
<th scope="row">20h</th>
3. Digite o conteúdo da célula. <td>Concurso de estrelas</td>
<td colspan="2"> Casa de celebridades ÿ </
4. Digite </td>.
td>
5. Preencha o restante da tabela conforme </tr>
<tr>
descrito em “Estruturação de Tabelas”. Se
você criar uma célula que abranja duas
<td>Hardy, tem, tem</td>
colunas, precisará definir uma célula a menos <td>O que tem para o almoço?</td>
nessa linha; se você criar uma célula que <td rowspan="2">Filme da Semana ÿ </td>
abranja três colunas, precisará definir duas
células a menos nessa linha; e assim por diante. </tr>
<tr>
<td>Curandeiros, Wheelers & ÿ
Revendedores</td>
<td>É um crime</td>
</tr>
</tbody>
</tabela>
</body>
</html>
494 Capítulo 18
Para abranger uma célula

em duas ou mais linhas:
1. Quando você chegar ao ponto em que precisa

definir a célula que abrange mais de uma linha,
digite <td seguido por um
espaço.
2. Digite rowspan="n">, onde n é igual ao número

de linhas que a célula deve abranger.
3. Digite o conteúdo da célula.

B Pode ter sido um pouco difícil dizer olhando
no código, mas quando visualizado no navegador 4. Digite </td>.
fica claro como colspan e rowspan afetam a
exibição da tabela. Também estilizei a tabela com CSS. 5. Preencha o restante da tabela conforme
A folha de estilo está disponível no site do livro em descrito em “Estruturação de Tabelas”. Se você
www.bruceontheloose.com/htmlcss/examples/.
definir uma célula com rowspan igual a 2,
não será necessário definir a célula
correspondente na próxima linha; se você
definir uma célula com extensão de linha de
3, não será necessário definir as células
correspondentes nas próximas duas linhas; e assim por diante.
Cada linha de uma tabela deve ter o mesmo

número de células definido. As células que se
estendem pelas colunas contam com tantas
células quanto o valor do seu atributo colspan .
Cada coluna de uma tabela deve ter o

mesmo número de células definido. As células
que se estendem pelas linhas contam com
tantas células quanto o valor de seu atributo rowspan .
Tabelas 495
Esta página foi intencionalmente deixada em branco

19
Trabalhando com scripts
Enquanto o HTML define o conteúdo da sua

página Web e o CSS define a sua apresentação, o Neste capítulo
JavaScript define um comportamento especial.
Carregando um script externo 499
Você pode escrever programas JavaScript simples
Adicionando um script incorporado 502
para mostrar e ocultar conteúdo, ou pode
escrever programas mais complicados que carreguem Tratamento de eventos JavaScript 503
dados e atualizem sua página dinamicamente.
Você pode direcionar áudio e vídeo HTML5 personalizados
controles de elementos e criar jogos baseados
em navegador que usam a tela do HTML5
elemento. E você pode escrever aplicativos
Web completos que aproveitem alguns dos
recursos mais poderosos do HTML5 e tecnologias
relacionadas (são tópicos avançados, por isso
não são abordados neste livro).
Como você pode ver, o JavaScript tem uma grande

variedade de possibilidades e seu uso explodiu.
Bibliotecas JavaScript como jQuery (jquery.com),
MooTools (mootools.net), YUI (yuilibrary.com) e outras
tornaram mais fácil adicionar interatividade simples e
comportamento sofisticado às páginas, ao mesmo tempo
que as ajudam a se comportar de forma consistente
em todos os navegadores. Destes, o jQuery é o mais
amplamente utilizado, principalmente porque os iniciantes
acham mais fácil aprendê-lo, possui boa documentação
on-line e uma grande comunidade por trás dele.
Os fornecedores de navegadores gastaram um

tempo considerável fazendo com que seus navegadores
processassem JavaScript significativamente mais
rápido do que suas versões de apenas alguns anos atrás.
O JavaScript também funciona em tablets e navegadores
móveis modernos, embora, por motivos de desempenho,
você deva ser esperto quanto ao carregamento de páginas
nesses dispositivos.
Infelizmente, JavaScript é um tópico amplo e próprio,

por isso não o abordaremos neste livro. Nisso
capítulo, vou explicar como inserir scripts, uma vez criados,

em seus documentos HTML. Também darei alguns
conselhos básicos sobre como fazer isso de uma forma
que minimize o impacto no tempo de renderização da
sua página e darei uma rápida olhada nos manipuladores
de eventos.
498 Capítulo 19
A O atributo src do elemento script faz referência Carregando um

à URL do script. Na maioria das vezes, é melhor carregar
os scripts bem no final da página, logo antes da tag final
</body> . Você também pode carregar scripts no
Script Externo
elemento principal B da sua página, mas isso pode
afetar a rapidez com que sua página é exibida. Consulte Existem dois tipos principais de scripts—
a barra lateral “Práticas recomendadas de script e aqueles que você carrega de um arquivo externo (em
desempenho” para obter mais informações.
formato somente texto) e aqueles que estão
<!DOCTYPEhtml> incorporados em sua página (abordados na próxima
<html lang="pt"> seção). É o mesmo conceito das folhas de estilo
<cabeça>
externas e incorporadas.
<meta charset="utf-8" />
<title>Carregando um script externo</title> E assim como acontece com a adição de folhas de
<link rel="stylesheet" href="css/base.css" /> estilo às suas páginas, geralmente é melhor
</head>
carregar scripts de um arquivo externo A do
<corpo>
... Todo o seu conteúdo HTML está aqui ...
que incorporá-los em seu HTML. Você colhe
alguns dos mesmos benefícios, pois um único
<script src="behavior.js"></script> arquivo JavaScript pode ser carregado por cada
</body> página que precisar dele. Você pode editar
</html>
um script em vez de atualizar scripts semelhantes em HTML individu
Páginas.
B Este exemplo mostra um script carregado no Seja carregando um script externo ou

cabeçalho . Ele fica depois do elemento link ,
incorporando um script, você usa o script
portanto não bloqueará o carregamento do arquivo
elemento.
CSS antes. Consulte a barra lateral “Práticas
recomendadas de script e desempenho” para saber por
que você deseja minimizar a frequência de carregamento de scripts do head.carregar um script externo:
Para
<!DOCTYPEhtml>
Digite <script src="script.js"></ script>, onde
<html lang="pt">
script.js é o local no servidor e o nome do
<cabeça>
arquivo externo
<title>Carregando um script externo</title> roteiro. Coloque cada elemento de script
 diretamente antes da tag final </body> sempre
<link rel="stylesheet" href="base.css" /> que possível A, em vez de no cabeçalho do documento
<script src="behavior.js"></script> elemento B.
</head>
<corpo> continua na próxima página
</body>
</html>
Trabalhando com Scripts 499

Sua página pode carregar vários arquivos

JavaScript e conter vários scripts incorporados
(consulte A em “Adicionando um script
incorporado”). Por padrão, os navegadores irão
carregar (quando necessário) e executar scripts na
ordem em que aparecem no seu HTML. Consulte a
barra lateral para saber por que evitar vários scripts quando possível.
Navegadores que não entendem

JavaScript (reconhecidamente raro) ou desabilitado
pelo usuário irá ignorar seu arquivo JavaScript.
Portanto, certifique-se de que sua página não
dependa de JavaScript para fornecer aos usuários
acesso ao seu conteúdo e experiência básica.
Para manter seus arquivos organizados, é comum

para colocar seus arquivos JavaScript em uma
subpasta (js e scripts são nomes populares). Os
valores do seu atributo src precisariam refletir isso,
assim como qualquer URL que aponte para um recurso.
Por exemplo, se o arquivo em A estivesse em uma
pasta chamada assets/js/, você poderia digitar <script
src="assets/js/behavior.js"></script>.
(Esse é apenas um exemplo; existem outras maneiras
de representar a URL. Consulte “URLs” no Capítulo 1.)
O arquivo JavaScript nos exemplos (A

e B) é chamado behavior.js, mas você pode
especificar outros nomes de arquivo válidos,
desde que tenham a extensão .js .
Tecnicamente, existe uma terceira maneira

de adicionar JavaScript a uma página: scripts
embutidos. Um script embutido é um pequeno
pedaço de JavaScript atribuído a determinados
atributos de elemento diretamente em seu HTML.
Hesito em mencioná-los, exceto para salientar que
você deve evitar usá-los, assim como evitaria folhas de estilo inline.
Assim como as folhas de estilo inline misturam
HTML e CSS, os scripts inline entrelaçam
inextricavelmente seu HTML e JavaScript, em
vez de mantê-los separados de acordo com as práticas recomendadas.
500 Capítulo 19
Práticas recomendadas de script e desempenho

Uma discussão completa das melhores práticas relativas a scripts e desempenho de páginas está além do escopo deste
livro, mas abordarei alguns pontos de alto impacto.
Primeiro, ajuda entender como um navegador lida com scripts. À medida que uma página é carregada, por padrão,
o navegador baixa (para scripts externos), analisa e executa cada script na ordem em que aparece no seu HTML. Durante
o processamento, o navegador não baixa nem renderiza qualquer conteúdo que apareça após o elemento de script – nem
mesmo texto. Isso é conhecido como comportamento de bloqueio.
Isso vale tanto para scripts incorporados quanto externos e, como você pode imaginar, pode realmente afetar a velocidade
de renderização da sua página, dependendo do tamanho do seu script e das ações que ele executa.
A maioria dos navegadores faz isso porque seu JavaScript pode incluir código do qual outro script se baseia, código que
gera conteúdo imediatamente ou código que de outra forma altera sua página. Os navegadores precisam levar tudo isso em
consideração antes de terminar a renderização.
Então, como você evita isso? A técnica mais fácil para tornar seu JavaScript não bloqueador é colocar todos os elementos
de script no final do seu HTML, logo antes da tag final </body> . Se você passou um tempinho visualizando fontes em
sites de outras pessoas, sem dúvida também viu scripts carregados no elemento head . Fora dos casos ocasionais em
que isso possa ser necessário, é considerada uma prática ultrapassada que você deve evitar sempre que possível. (Um
caso em que isso é necessário é carregar o shiv HTML5, conforme descrito no Capítulo 11.) Se você carregar scripts do
cabeçalho, coloque-os depois de todos os elementos de link que carregam arquivos CSS (novamente, por motivos de
desempenho).
Outra maneira rápida de acelerar o carregamento do script é combinar seu JavaScript em um único arquivo (ou no menor
número possível) e reduzir o código. Normalmente, o código minificado não possui quebras de linha, comentários ou
espaços em branco extras (entre outras possíveis diferenças do código não minificado). Imagine escrever o código em uma
longa linha sem nunca pressionar Return ou Enter.
Você pode usar ferramentas como as seguintes para reduzir seus scripts:
. Google Closure Compiler: http://

code.google.com/closure/compiler/ (download e documentação) http://closure-
compiler.appspot.com (versão online da ferramenta)
. Compressor YUI: http://

developer.yahoo.com/yui/compressor/ (download e documentação) http://refresh-sf.com/yui/
(versão online não oficial da ferramenta)
Cada um reduzirá o tamanho do arquivo, mas os resultados variarão de script para script. Geralmente, é mais rápido
para um navegador carregar um arquivo do que dois (ou mais), mesmo que o arquivo único seja maior que o tamanho
combinado dos arquivos individuais (a menos que o arquivo seja muito maior).
Esses são dois métodos comuns e poderosos, mas apenas arranham a superfície do que é possível. Para
discussões aprofundadas sobre métodos de carregamento de scripts e otimização, recomendo Even Faster Web
Sites (O'Reilly Media, 2009) de Steve Souders, bem como seu site, www.stevesouders.com. Esteja avisado: algumas
das discussões ficam um pouco técnicas.

Adicionando um A Um script incorporado não possui um src

atributo. Em vez disso, o código está na página. Se você
incorporar um script, faça-o diretamente antes do </body>
Script incorporado tag final sempre que possível. Também é possível
incorporar um script no headB, mas é menos
Existe um script incorporado em seu desejável do ponto de vista de desempenho.
documento HTML, da mesma forma que uma
<!DOCTYPEhtml>
folha de estilos incorporada. Um script
<html lang="pt">
incorporado está contido em um elemento de <cabeça>
script A. Incorporar um script não é o <meta charset="utf-8" />
método preferido (consulte “Carregando <title>Adicionando um script incorporado</title>
um script externo”), mas às vezes é necessário. <link rel="stylesheet" href="css/base.css" />
</head>
<corpo>
Para adicionar um script incorporado: ... Todo o seu conteúdo HTML está aqui ...
1. No seu documento HTML, digite <script>.

<roteiro>
2. Digite o conteúdo do script. /*
Seu código JavaScript vai aqui
3. Digite </script>. */
</script>
Cada elemento de script é </body>
</html>
processado na ordem em que aparece
no HTML, seja um script incorporado ou
externo (consulte “Carregando um script externo”).
B Este exemplo mostra um script incorporado no
Mesmo que o elemento script exija cabeçalho. Ele aparece após o elemento link para que
o arquivo CSS carregue mais rápido. Consulte a barra
uma tag final (</script>), você não pode
lateral “Práticas recomendadas de script e desempenho”
incorporar código entre ele e a tag inicial
para saber por que você deseja minimizar a frequência de
quando um atributo src estiver presente (veja incorporação de scripts no head.
“Carregando um Script Externo”). Em outras palavras, <script
src="behavior.js">Alguma função em <!DOCTYPEhtml>
aqui</script> é inválido. Qualquer script <html lang="pt">
O elemento só pode carregar um script <cabeça>
externo com src ou incorporar um script e <meta charset="utf-8" />
não ter um src.
<title>Carregando um script externo</title>

<link rel="stylesheet" href="base.css" />
<roteiro>
/*
Seu código JavaScript vai aqui
*/
</script>
</head>
<corpo>
</body>
</html>
502 Capítulo 19
Eventos JavaScript
Na introdução deste capítulo, observei que mergulhar
no JavaScript estava além do escopo do livro. No
entanto, quero dar uma pequena olhada nos eventos
JavaScript para que você tenha uma noção básica do
que o Java-Script pode fazer por você.
Você pode escrever JavaScript para responder a

eventos específicos e predefinidos que o visitante
ou o navegador acionam. A lista a seguir é apenas
uma pequena amostra dos manipuladores de eventos
disponíveis quando você escreve scripts. O HTML5
apresenta vários outros, muitos dos quais giram em
torno de eventos relacionados ao áudio e ao vídeo.
elementos. Alguns dispositivos com tela sensível ao toque possuem
também entrou em ação, com manipuladores de

eventos especiais baseados em toque.
Observe que “mouse” nesta lista significa qualquer

“dispositivo apontador”. Por exemplo,
onmousedown ocorre se um visitante usar uma caneta
digital, um mouse real ou um dispositivo semelhante.
n desfocado. O visitante deixa um elemento

que estava anteriormente em foco (veja onfocus).
n em mudança. O visitante modifica o valor ou conteúdo

do elemento. Isso é mais comumente usado em
campos de formulário (consulte o Capítulo 16
para obter mais informações sobre formulários).
n clique. O visitante clica no ícone específico

área fiada ou pressiona a tecla Return ou Enter
enquanto está focado nela (como em um link).
n ondblclick. O visitante clica duas vezes

a área especificada.
n em foco. O visitante seleciona, clica ou acessa o

elemento especificado.
n onkeydown. O visitante pressiona

em uma chave enquanto estiver no elemento especificado.

n ao pressionar a tecla. O visitante pressiona e

solta uma tecla enquanto está no elemento
especificado.
n onkeyup. O visitante solta uma tecla após

digitar o elemento especificado.
n carregar. O navegador termina de carregar a

página, incluindo todos os arquivos externos
(imagens, folhas de estilo, JavaScript e assim
por diante).
n onmousedown. O visitante pressiona o

botão do mouse sobre o elemento especificado.
n onmousemove. O visitante move o

cursor do mouse.
n onmouseout. O visitante move o

passe o mouse para longe do elemento especificado
depois de passar por cima dele.
e passe o mouse. O visitante aponta o

mouse no elemento.
n onmouseup. O visitante solta o botão

do mouse após clicar no elemento (o
oposto de onmousedown).
n onreset. O visitante clica no formulário
botão de reinicialização ou pressiona a tecla
Return ou Enter enquanto está focado no botão.
n selecione. O visitante seleciona um
ou mais caracteres ou palavras no
elemento.
n ao enviar. O visitante clica no formulário

botão enviar ou pressiona a tecla Return ou Enter
enquanto está focado no botão.
Você pode ver uma lista completa de manipuladores

de eventos HTML5 em http://dev.w3.org/html5/
spec-author-view/global-attributes.html.
Os manipuladores de eventos baseados em toque que alguns
dispositivos touchscreen (como smartphones e

tablets) incluem touchstart, touchend, touchmove e
muito mais (https://
dvcs.w3.org/hg/webevents/raw-file/tip/
touchevents.html).
504 Capítulo 19
20
Teste e depuração
Paginas web
Então, você escreveu uma página totalmente nova
e a acessou em seu navegador apenas para Neste capítulo
descobrir que ela não se parece com o que você esperava.
Experimentando algumas técnicas de depuração 506
Ou não é exibido. Ou talvez pareça ótimo em
seu navegador padrão, mas quando você ou Verificando as coisas fáceis: Geral 508
seus clientes verificam em outros, parece até
Verificando as coisas fáceis: HTML 510
engraçado.
Verificando as coisas fáceis: CSS 512
Entre HTML, CSS e a infinidade de navegadores
Validando Seu Código 514
(especialmente os mais antigos) e plataformas, é
fácil ter problemas aqui e ali. Este capítulo irá Testando sua página 516
alertá-lo sobre alguns erros comuns e também
Quando as imagens não aparecem 519
ajudá-lo a eliminar sua própria variedade
Ainda preso? 520
cultivada localmente.
Algumas dessas técnicas de depuração parecerão

bastante básicas, mas os problemas com páginas
da Web também costumam ser bastante básicos.
Antes de procurar um grande problema, certifique-
se de não ter nenhum problema pequeno. Vou mostrar
como na primeira seção.
Assim que seu código estiver correto, você deve

testar exaustivamente seu site em alguns
navegadores, em uma ou mais plataformas, para ver
se cada página funciona da maneira que você
deseja (veja a seção “Testando sua página” e o
barra lateral “Quais navegadores você deve testar?”).
Tentando alguns R Comentei a seção intermediária deste código para

ver se é o culpado. Observe que muitos editores de
HTML e CSS incluem destaque de sintaxe, que é a
Técnicas de depuração codificação automática por cores de elementos,
seletores e similares. Isso pode ajudar na sua depuração.
Aqui estão algumas técnicas testadas e comprovadas Digite incorretamente o nome de uma propriedade CSS,
para resolver problemas de uma página da Web. por exemplo, e o editor não a mostrará na cor
esperada: uma dica de que não é válida.
n Verifique primeiro as coisas fáceis.
...
n Seja observador e metódico.
n Trabalhe de forma incremental. Faça pequeno .entrada {

borda direita: 2px tracejado #b74e07;
alterações e teste após cada alteração.
margem: 0,5em 2em 0;
Dessa forma, você poderá identificar a origem de um }
problema, caso ele ocorra.
.entrada h2 {
n Ao depurar, comece com o que você sabe que funciona. tamanho da fonte: 1,25em;
Só então você deve adicionar as partes duras pedaço altura da linha: 1;
por pedaço— }
testar a página em um navegador após cada adição –
/*
até encontrar a origem do problema.
.contínuo,
.data de entrada {
alinhamento de texto: certo;
n Use o processo de eliminação para descobrir quais
}
partes do seu código estão causando problemas.
Por exemplo, você pode comentar metade do código .data de entrada {
para ver se altura da linha: 1;
margem: 0 1em 0 0;
o problema está na outra metade A. Em seguida,
preenchimento: 0;
comente uma porção menor da metade ofensiva e
posição: relativa;
assim por diante, até encontrar o problema. (Consulte topo: -1em;
“Adicionando comentários” no Capítulo 3 e }
“Adicionando comentários às regras de estilo” no
.introdução {
Capítulo 7.)
margem: -5px 0 0 110px;
n Tenha cuidado com erros de digitação. Muitos }
*/
problemas desconcertantes podem acabar sendo
simples erros de digitação - por exemplo, você .foto {
escreveu o nome de uma classe de uma maneira flutuar: esquerda;
em seu HTML, mas de uma maneira diferente em seu CSS. altura: 75px;
largura: 100px;
n Em CSS, se você não tiver certeza se o }
o problema é com a propriedade ou com o seletor,
.foto a {
tente adicionar uma declaração bem simples ao seu
margem: 0;
seletor, como color: red;
preenchimento: 0;
ou borda: 1px vermelho sólido; (ou escolha }
...
506 Capítulo 20
uma cor de site incomum, como rosa se vermelho

faz parte do seu design). Se o elemento ficar
vermelho, o problema está na sua propriedade; caso
contrário, o problema está no seu seletor
(supondo que você não tenha outro seletor mais
específico ou que venha depois do atual).
n Faça uma pausa. Às vezes você pode conseguir

muito mais feito em quinze minutos
depois de uma caminhada de uma hora do que você
teria se tivesse trabalhado durante essa hora.
Também resolvi problemas na minha cabeça
enquanto tirava breves sonecas.
n Teste as alterações em seu HTML ou CSS

diretamente no navegador usando uma ou mais
barras de ferramentas do desenvolvedor à sua
disposição. Ou inspecione o código com essas
ferramentas para tentar localizar o problema.
(Consulte a barra lateral “Ferramentas de desenvolvedor do navegador”
Ferramentas de desenvolvedor de navegador
Os navegadores incluem ferramentas de depuração ou as disponibilizam como extensões. Os recursos de muitas

ferramentas são semelhantes. O recurso ao qual você retornará continuamente é a capacidade de alterar CSS ou HTML e
ver isso afetar sua página imediatamente. Isso permite testar rapidamente as alterações antes de incorporá-las ao seu código.
A seguir está um resumo das ferramentas usadas com mais frequência para cada navegador:
. Chrome: Ferramentas para desenvolvedores (http://code.google.com/chrome/devtools/docs/overview.html).
. Firefox: O complemento Firebug extremamente popular (http://getfirebug.com). Além disso, desenvolvedor web
(http://chrispederick.com/work/web-developer/) é um tipo de ferramenta um pouco diferente, mas é muito útil. Também está
disponível para Chrome no mesmo link.
. Internet Explorer: IE8+ possui ferramentas de desenvolvedor (http://msdn.microsoft.com/en-us/ie/aa740478) integradas. Para IE6
e IE7, você pode instalar a barra de ferramentas de desenvolvedor do Internet Explorer (www.microsoft.com/
baixar/en/details.aspx?id=18359).
. Ópera: Libélula (www.opera.com/dragonfly/).
. Safari: Web Inspector (http://developer.apple.com/technologies/safari/developer-tools.html).

Documentação e vídeos mostrando como usar muitas dessas ferramentas estão disponíveis online.
Veja exemplos do Firebug e do Web Inspector em ação em “Checking the Easy Stuff: HTML” e “Checking the Easy Stuff:
CSS”, respectivamente.
Teste e depuração de páginas da Web 507

Verificando o Fácil
Coisas: Geral
Embora a diferença que você vê entre os
navegadores possa ser devido a algum bug obscuro do
navegador ou a alguma nova técnica que você
está usando, geralmente é apenas algo simples.
Todos, desde novatos a especialistas, cometem erros
simples e ocasionais que os atrapalham. Por exemplo, é
fácil pensar que a origem de um problema está no
código e gastar muito tempo depurando-o, apenas para
descobrir que você está alterando um arquivo, mas
carregando e visualizando outro em seu servidor!
Muitas das sugestões a seguir se aplicam ao teste do

seu site a partir do URL do site em
seu servidor.
Para verificar as coisas fáceis em geral:

n Valide seu código conforme descrito em “Validando seu
código”. Este é um ótimo lugar para começar, porque
você pode eliminar a sintaxe de codificação e
erros relacionados como a causa do problema que
está percebendo.
n Certifique-se de ter carregado o arquivo que você

quero testar.
n Certifique-se de ter carregado o arquivo no local ao

qual ele pertence.
508 Capítulo 20
n Certifique-se de ter digitado o URL que

corresponde ao arquivo que deseja testar.
Ou se você tentou navegar para a página a partir
de outra página, certifique-se de que o URL que
você codificou no link para a página corresponde
ao nome do arquivo e à localização.
n Certifique-se de ter salvo o arquivo—

incluindo as mudanças mais recentes—
antes de carregá-lo.
n Certifique-se de ter carregado todos os arquivos

auxiliares – CSS, imagens, músicas, vídeos e
assim por diante.
n Certifique-se de que as letras maiúsculas e

minúsculas do seu URL correspondam
exatamente às letras maiúsculas e minúsculas dos
nomes dos arquivos. (A propósito, esse é um
dos motivos pelos quais recomendo usar apenas
letras minúsculas; isso reduz a margem de erro
ao digitar URLs, tanto para você quanto para
seus visitantes.) E certifique-se de não usar
espaços nos nomes de arquivos (use em vez disso,
hífens).
n Se você desabilitou algum navegador

recursos, como suporte a JavaScript,
durante testes anteriores, certifique-se de não
ter esquecido de reativá-los.
n Certifique-se de que o problema não seja o

culpa do navegador. A maneira mais
fácil de fazer isso é testar a página em
outro navegador.
Nas próximas duas seções, direi como verificar

as coisas fáceis em HTML e CSS.

A Você consegue ver onde estão os problemas?

Verificando o Fácil Escrevi src incorretamente e incluí um tipo de unidade
Material: HTML nos valores de largura e altura . Os validadores HTML
sinalizarão esses tipos de erros, economizando o tempo
de tentar localizá-los em outro lugar, caso você não
Às vezes o problema está no seu HTML. perceba seus erros de digitação.
<img scr="woody.jpg" width="200px"

Para verificar as coisas fáceis em HTML:
ÿ height="150px" alt="Woody, o gato" />
n Um ou dois simples erros de digitação podem ser
fáceis de ignorar A. Certifique-se de ter
B A versão corrigida mostra o atributo src escrito
digitado tudo corretamente e de ter atribuído
corretamente e removi o px dos valores de largura e altura .
valores válidos aos atributos B.
Use um dos validadores HTML para
<img src="woody.jpg" width="200"
exponha-os para que você possa corrigi-los
ÿ height="150" alt="Woody, o gato" />
rapidamente (consulte “Validando seu código”).
n Tenha cuidado com o aninhamento de elementos.

C Se o valor de um atributo contém aspas simples, você pode
Por exemplo, se você abrir <p> e depois usar
simplesmente colocá-lo entre aspas duplas, como de costume.
<em>, certifique-se de que o final </em> venha
antes do final </p>. <img src="jungle.jpg" width="325" height="275"
ÿ alt="Selva de Llumi" />
n Se caracteres acentuados ou símbolos especiais
bols não estão sendo exibidos corretamente,
certifique-se de que <meta charset="utf-8" /> D Se o valor de um atributo contiver aspas duplas, use
(ou a codificação de caracteres correta se referências de caracteres ao redor do texto citado dentro do
valor.
for diferente de UTF-8) apareça logo após o
início do elemento head do documento e <img src="cookie-the-cat.jpg" width="250" ÿ
certifique-se de que seu editor de texto esteja height="200" alt="O biscoito está
configurado para salvar seus arquivos HTML na dizendo: ÿ "Chega!"" />
mesma codificação. Se ainda estiver com
problemas, tente usar a referência de caractere apropriada.
n Certifique-se de que os valores dos atributos estejam entre
citações retas, não encaracoladas. O valor de um

atributo pode conter aspas simples se o valor
estiver entre aspas duplas C, o que é a norma. Se
o valor em si
contém aspas duplas, use referências de
caracteres para as aspas internas D.
510 Capítulo 20
E Não inclua uma tag final em elementos void, como img. Os n Certifique-se de que todos os elementos apropriados
validadores HTML sinalizarão este exemplo como tenham tags de início e fim. E não use tags de
um erro.
início e fim separadas para elementos void
<img src="jungle.jpg" width="325" height="275" ÿ (vazios) E. (Tecnicamente, os navegadores podem

alt="Selva de Llumi"></img> renderizar os elementos corretamente se você
omitir a tag final ou incluir uma em um elemento void,
mas tome cuidado.)
n Use as ferramentas de desenvolvedor do navegador

F com Firebug para inspecionar a estrutura do documento
instalado no Firefox, você
pode clicar com o botão
conforme ela aparece depois que o navegador a
direito (ou clicar com analisou F e compare-a com o aninhamento de
a tecla Control
elementos que você esperava G.
pressionada no Mac) no
conteúdo e Isso pode ajudar a identificar a localização de uma tag
escolher Inspecionar malformada, de um elemento não fechado ou de um
elemento. Isso
elemento que você fechou cedo demais. (Consulte a
exibe no Firebug a estrutura subjacente do
conteúdo G. barra lateral “Ferramentas de desenvolvedor do navegador”.)
G Ao inspecionar o parágrafo com o Firebug, você

pode ver que o Firefox estruturou o HTML como
<p>Nós <fm>realmente temos um problema aqui</fm>.</p>
quando encontrou o erro de código inH.
H Este elemento em contém um erro de digitação na tag inicial.

Quando um navegador como o Firefox analisa o HTML, ele tenta
entender o erro e altera a estrutura subjacente do documento ao
exibir a página, conforme mostrado em G. Os validadores HTML
também sinalizarão esse erro.
<p>Temos <fm>realmente</em> um problema aqui.

ÿ </p>

Ops . Pode ser difícil abandonar o hábito de

Verificando o separar propriedades e valores com o sinal de igual.
Coisas fáceis: CSS

p{
Embora a sintaxe CSS seja bastante direta, ela tamanho da fonte=1,3em;
apresenta algumas armadilhas comuns, }
especialmente se você estiver mais acostumado a escrever HTML.
Um validador CSS sinalizará erros de sintaxe como
B Muito melhor. Sempre use dois pontos entre a
os discutidos nesta seção, portanto, valide suas
propriedade e o valor. Não importa se você adiciona
folhas de estilo antes de vasculhar seu CSS em espaços extras antes e depois dos dois pontos, mas é
comum incluir um após os dois pontos.
busca de erros.
p{
Para verificar as coisas fáceis em CSS: tamanho da fonte: 1,3em;
}
n Certifique-se de separar as propriedades de
seus valores com dois pontos (:), e não um
sinal de igual (como você faz em HTML) C Outro erro. Você deve colocar um e apenas um ponto
(A e B). e vírgula entre cada par propriedade/valor.
Aqui, falta um e um extra.
n Certifique-se de preencher cada propriedade/
par de valores (uma declaração) com ponto e p{
vírgula (;). Certifique-se de que não haja ponto- tamanho da fonte: 1,3em estilo da fonte: itálico;; ÿ
espessura da fonte: negrito;
e-vírgula extra (C e D).
}
n Não adicione espaços entre os números e suas
unidades (E e F).
D O erro é mais fácil de detectar quando cada propriedade/
n Não se esqueça de fechar o aparelho. O par de valores ocupa sua própria linha, porque os
pontos e vírgulas não se perdem em um mar de
n Certifique-se de usar um valor aceito. Algo propriedades, valores e dois pontos.
como estilo de fonte:
nenhum; não vai funcionar, já que o valor /* Ainda errado, mas mais fácil de detectar */
p{
“none” para esta propriedade é chamado de
tamanho da fonte: 1,3em;;
normal. Você pode encontrar uma lista de estilo da fonte: itálico
propriedades e valores CSS no Apêndice B intensidade da fonte: Negrito;
(veja o site do livro). }
/* Aqui está a versão correta */

p{
tamanho da fonte: 1,3em;
estilo da fonte: itálico;
intensidade da fonte: Negrito;
}
512 Capítulo 20
E E mais um erro. Nunca coloque espaços n Não se esqueça da tag final </style> para folhas de
entre o número e a unidade. estilo incorporadas.
p{ n Certifique-se de vincular o HTML

tamanho da fonte: 0,8275 em; documento para o arquivo CSS adequado e que o
} URL aponta para o arquivo desejado.
n Observe os espaços e a pontuação

F Isso funcionará. Observe que o espaço entre os entre os seletores.
dois pontos e o valor é opcional (mas comum).
n Certifique-se de que o navegador suporta o que você
p{ está tentando fazer, especialmente com CSS3,
tamanho da fonte: .8275em; porque o suporte do navegador ainda está evoluindo
} à medida que o CSS3 amadurece. Consulte o
Apêndice B (no site do livro) para URLs
relacionadas à verificação do suporte do navegador
para propriedades e valores específicos. Um
validador CSS não informará se um navegador
específico oferece suporte a um recurso CSS, mas
indicará se você digitou um seletor, propriedade
ou valor que não existe em CSS.
n Use as ferramentas de desenvolvedor do navegador

para inspecionar as regras de estilo conforme
G Eu inspecionei as <h1>Entradas recentes</
analisadas pelo navegador - bem como os estilos
h1> com o Web Inspector do Safari. O CSS aplicado
ao elemento é exibido no painel à direita. Ele mostra de elemento atualmente computados - para destacar
uma linha através de uma configuração de tamanho rapidamente qual código não está sendo analisado
de fonte para indicar que ela foi substituída por
conforme esperado ou para ver como as regras de
outra regra (a listada acima). Este resultado é o que
eu queria neste caso, mas você pode usar esta técnica especificidade foram aplicadas G. ( Consulte a
para descobrir por que um estilo pode não ter sido barra lateral “Ferramentas de desenvolvedor do navegador”.)
aplicado conforme esperado. Você também pode editar
as regras no painel direito para testar diferentes CSS.

Validando Seu Código

Uma ótima maneira de encontrar erros em uma página A
é executá-lo através de um validador B. Um validador
HTML compara seu código com as regras da linguagem,
exibindo erros ou avisos para quaisquer inconsistências
que encontrar. Ele irá alertá-lo sobre erros de sintaxe;
elementos, atributos e valores inválidos; e aninhamento
impróprio de elementos C. Ele não pode dizer se você
marcou seu conteúdo com os elementos que melhor o
descrevem, então ainda cabe a você escrever HTML
semântico (veja “HTML Semântico: Marcação com
Significado” no Capítulo 1).
Os validadores CSS funcionam de forma semelhante.

R Esse texto à direita da imagem não deveria
Você não é obrigado a fazer com que suas páginas ser tão grande. Já examinei meu CSS para
descartar que ele venha de uma configuração de
passem pelos validadores sem erros antes de colocá-
tamanho de fonte involuntariamente grande . Qual é o
las na Web. Na verdade, a maioria dos sites apresenta problema?
alguns erros. Além disso, o validador CSS do W3C
marcará os prefixos de fornecedores usados em nomes
de propriedades como erros, mas isso não significa que
você deva remover os prefixos de fornecedores
de suas folhas de estilo (saiba mais sobre prefixos de
fornecedores no Capítulo 14).
Os navegadores são construídos para lidar com muitos

tipos de erros (e ignorar alguns outros) e exibir sua
página da melhor maneira possível. Portanto, mesmo
que sua página apresente um erro de validação, B Colei o URL que desejo verificar no
você poderá não ver a diferença. Outras vezes, o erro Campo de endereço. Também selecionei a opção
afeta diretamente a renderização ou o comportamento Mostrar fonte (está desmarcada por padrão), para que
meu código-fonte HTML apareça abaixo de quaisquer
de uma página. Portanto, use os validadores para erros detectados pelo validador, com as partes erradas
manter seu código o mais livre de erros possível. do HTML destacadas.
Consulte “Verificando as coisas fáceis: HTML” e

“Verificando as coisas fáceis: CSS” para exemplos de
erros detectados pelos validadores.
Para validar seu código:

1. Primeiro verifique seu HTML com
http://html5.validator.nu (B e C) ou http://
validator.w3.org do W3C. Veja as duas primeiras
dicas para obter mais informações.
514 Capítulo 20
2. Corrija quaisquer erros de HTML sinalizados, salve

as alterações e, se necessário, carregue o
arquivo novamente em seu servidor.
Em seguida, repita o passo 1.
3. Você pode verificar erros de CSS com

http://jigsaw.w3.org/css-validator/. Certifique-se
de selecionar CSS nível 3 na lista
Menu suspenso Perfil se sua folha de estilos
incluir qualquer CSS3 D. Caso contrário, o
validador sinalizará mais erros do que sua folha de
estilos realmente contém.
O validador do W3C (http://validator.w3 .org/)

usa o mecanismo de validação de http://
html5.validator.nu/, então use o que preferir.
As mensagens de erro do W3C são mais fáceis de
ler, mas não destacam as partes erradas do código-
fonte HTML.
C O erro encontrado na Linha 9 é o problema— Você pode validar seu HTML inserindo o URL
em vez de uma tag final </h1> , usei outra tag inicial A, fazendo upload do arquivo HTML ou colando o
<h1> por engano. Os outros erros são causados HTML no validador. Com os métodos de upload de
pelo primeiro erro, então, depois de corrigir isso, a arquivo ou copiar e colar, você pode verificar os
página estará livre de erros. arquivos sem carregá-los em seu servidor.
Um erro de HTML pode causar vários erros em um

resultados do validador. Por exemplo, uma tag final
ausente pode acionar muitas mensagens de erro C.
Corrija a tag final e todos os erros subsequentes
desaparecerão. Comece do início, corrigindo
alguns erros de cada vez e revalide imediatamente o
arquivo para ver se outros problemas foram resolvidos.
HTML5 é bastante tolerante sobre como

você formata certas partes do seu código. Por
exemplo, não importa se você fecha elementos
vazios como img, então ambos <img src="iguana.jpg"
alt="Mary Anna, a Iguana" /> e <img
src="iguana.jpg" alt="Mary Anna, a
Iguana"> são válidos. Os validadores não dirão se o
seu código é consistente nessas áreas.
Se quiser ter certeza de que seu código é
D O validador usa como padrão o perfil CSS consistente, você pode executar cada página HTML
nível 2.1. Selecione CSS nível 3 se sua folha por meio do HTML Lint (http://lint.brihten.com/
de estilo contiver CSS3. Caso contrário, o validador html/). Possui opções para verificar se os
exibirá mais erros, pois os recursos do CSS3 não elementos vazios estão fechados, as tags de início
fazem parte do CSS 2.1.
e fim estão em minúsculas, os atributos estão em minúsculas e muito

Testando sua página

Mesmo que seu código seja validado, sua página ainda
pode não funcionar da maneira que você deseja. A. Ou
pode funcionar corretamente em um navegador, mas
não no próximo. É importante testar sua página em
vários navegadores e plataformas (consulte a barra lateral
“Quais navegadores você deve testar?”).
Para testar suas páginas HTML:

1. Valide seu HTML e CSS (veja
“Validando Seu Código”) e faça as alterações
necessárias.
2. Abra um navegador e escolha Arquivo >

Abrir arquivo. Encontre a página da Web que
R Esta página é validada, mas não se parece em nada
deseja testar e clique em Abrir. A página aparece com o que deveria. Qual é o problema B?
no navegador.
3. Percorra a página inteira e certifique-se de que ela B O problema é o link para o arquivo CSS – o arquivo
esteja exatamente como você deseja. Por exemplo: se chama estilos.css, e aqui estou linkando para
style.css. O navegador não consegue encontrar o
CSS e, portanto, exibe a página errada A. Depois de
corrigir o nome do arquivo no código, a folha de estilos é carregada.
>A formatação está como você deseja?
<!DOCTYPEhtml>
>Cada URL em seus links aponta para a página <html lang="pt">
<cabeça>
ou ativo adequado? (Você pode testar os
URLs ativando os links e vendo se a coisa
<title>Mary Anna, a Iguana</title>
certa acontece.) <link rel="stylesheet" href= ÿ "css/
style.css" />
>O seu arquivo CSS está referenciado
</head>
corretamente (A a C)?
<corpo>
>Todas as suas imagens aparecem? Eles estão
...
colocados e alinhados corretamente?
4. Sem fechar a página no </body>

navegador, abra o documento HTML ou CSS </html>
apropriado e faça as alterações necessárias.
5. Salve as alterações.
6. Volte para o navegador e atualize

ou recarregue para ver as alterações.
7. Repita as etapas 3 a 6 até ficar satisfeito com sua

página da Web. Não desanime se forem
necessárias várias tentativas.
516 Capítulo 20
Revalite o código para ter certeza de que não

introduziu novos erros.
8. Começando pela etapa 2, execute o

mesmo procedimento de teste em outros
navegadores até que você esteja satisfeito e pense
que sua página está pronta para ser publicada em seu site.
9. Carregue os arquivos no servidor.
10. Retorne ao navegador, digite o URL da sua página

na barra de endereço e pressione Return ou
Enter. A página aparecerá no navegador.
C Agora que o link para o CSS foi corrigido, a
página é exibida corretamente.
11. Com sua página no servidor, vá
através de sua página novamente para ter certeza
de que está tudo bem. Não se esqueça de testá-
lo também em dispositivos móveis, caso os
visitantes acessem seu site neles.
Eu recomendo testar a versão local do seu site

cuidadosamente antes de enviar seus arquivos para o
servidor. Depois de carregados, teste-os completamente
novamente, mas no seu servidor—
independentemente de quantos testes você fez em sua versão
local durante o desenvolvimento — porque essa é a
versão que seus visitantes verão.
Novamente, se puder, teste seu HTML

documentos em vários navegadores em vários
plataformas (veja a barra lateral “Quais navegadores você
deve testar?”). Você nunca sabe qual navegador (ou
computador) seus visitantes usarão.
Consulte “Construindo uma página que se adapta

às consultas de mídia” no Capítulo 12 para obter
informações sobre testes de navegadores de dispositivos móveis.
Se o seu código HTML em vez da sua página for

exibido no navegador, certifique-se de que o seu arquivo
tenha uma extensão .html ou .htm (e não uma como .txt).
Às vezes não é sua culpa - especialmente

com estilos. Certifique-se de que um navegador seja
compatível com o recurso com o qual você está tendo
problemas antes de assumir que o problema está no seu
código. Consulte os Apêndices A e B (no site do livro)
para links para recursos que contêm informações
sobre o suporte do navegador para recursos HTML e
CSS, respectivamente.

Quais navegadores você deve testar?
Geralmente, a maioria das pessoas que desenvolvem sites os verificam nos seguintes navegadores:
. Versão mais recente do Chrome. O Chrome se atualiza automaticamente no seu computador. Um novo
lançamento ocorre uma vez a cada seis semanas. Baixe o Chrome em www.google.com/chrome.
. Firefox 3.6+. O Firefox tem um cronograma de lançamento rápido, como o Chrome, embora as atualizações não sejam automáticas.
mático. O Firefox já tem várias versões além da versão 3.6, então a 3.6 não será uma prioridade por muito mais tempo. Baixe o
Firefox em www.firefox.com.
. Internet Explorer 7+. Baixe o IE em http://windows.microsoft.com/en-US/internet-explorer/

downloads / ou seja.
. Safári 5+. Na maioria dos casos, limite seus testes à versão Mac. Embora o Safari esteja disponível
no Windows, ele tem uma base de usuários muito pequena, por isso não vale a pena testá-lo.
Baixe o Safari em www.apple.com/safari/.
. Ópera 11+. A Opera tem uma pequena quota de mercado em muitas partes do mundo, mas também tem excelentes
Suporte e ferramentas HTML5. Baixe o Opera em www.opera.com/.
Os recursos do navegador explodiram nos últimos anos devido ao HTML5, CSS3, mecanismos JavaScript aprimorados e outras
tecnologias. A maioria dos navegadores listados aqui renderizarão seu CSS de forma semelhante (as exceções envolvem
principalmente CSS3). O Internet Explorer 7 e 8 são muito mais antigos e, portanto, mais sujeitos a diferenças (e bugs). Portanto, não
há problema se o seu site parecer um pouco diferente no IE7 e no IE8 em comparação com os navegadores modernos.
E o Internet Explorer 6? Há anos que tem sido uma pedra no sapato de designers e desenvolvedores por causa de suas inúmeras
peculiaridades e bugs. Felizmente, a sua quota de mercado diminuiu significativamente (ver www.ie6countdown.com). Hoje em dia,
é menos comum os proprietários de sites fazerem um esforço especial para que seus sites se comportem no IE6, mas tudo depende
do público-alvo do site. Algumas grandes corporações ainda não estão dispostas a abandoná-lo completamente, mas as pessoas
geralmente se afastaram dele e você terá pouco a ganhar gastando muita energia no IE6 com seus sites. Mas conheça seu público.
Algumas áreas do mundo, como partes da Ásia (especialmente a China), ainda têm uma grande base de usuários do IE6. Além
disso, algumas grandes organizações usam o IE6 como navegador padrão.
É um pouco desafiador ter acesso a todos esses navegadores e plataformas. Consulte o artigo de Addy Osmani para obter ideias sobre
como testar suas páginas em vários navegadores, especialmente na variedade de versões do Internet Explorer: http://
coding.smashingmagazine.com/2011/09/02/reliable-cross-browser-test ing -parte-1-internet-explorer/. Além disso, amigos e familiares
podem ajudá-lo a testar suas páginas, caso tenham navegadores que você não possui. Se você estiver com pouco tempo ou
recursos e precisar restringir seus testes, verifique suas páginas nas versões mais recentes do Chrome e Firefox e no IE7+, se possível.
O mercado de navegadores avança rapidamente: no momento em que você ler isto, as pessoas poderão estar testando versões mais
recentes desses navegadores. Ainda assim, se você seguir o princípio do aprimoramento progressivo, seus sites poderão oferecer uma
experiência simples em navegadores mais antigos e aprimorada em navegadores modernos.
Com isso em mente, o Yahoo! introduziu o conceito de Suporte Graduado ao Navegador (http://yuilibrary.com/
yui/docs/tutorials/gbs/), que se aplica aos testes do YUI, seu framework JavaScript e CSS (www.yuilibrary.com). A ideia é categorizar os
navegadores em níveis de escolaridade, que definem o que se espera deles durante os testes. Você pode adotar a abordagem deles
e categorizar os navegadores, conforme apropriado, para o seu projeto.
O Google adota uma abordagem diferente com o Google Apps, oferecendo suporte às duas versões mais recentes da maioria dos
navegadores (http://googleenterprise.blogspot.com/2011/06/our-plans-to-support-modern-browsers.html ). Da mesma forma, as
necessidades do seu projeto podem variar.
518 Capítulo 20
R O nome do arquivo da imagem é iguana.jpg, mas no

HTML ela é referenciada incorretamente como Iguana .jpg
Quando imagens
(com I maiúsculo). Como resultado, ele não é exibido
quando você verifica a página do seu servidor B. Não apareça
... Pequenos x vermelhos, ícones de imagem quebrados,
<corpo> texto alternativo ou nada - todos esses são sinais de

<h1>Mary Anna, a Iguana</h1> que suas imagens não estão carregando corretamente
(A e B). É uma chatice se o que você realmente
<p><img src="Iguana.jpg" width="220" height= ÿ queria era a foto de uma iguana!
"165" alt="Mary Anna, a Iguana" /> Lá ÿ era uma
vez uma iguana...</p>
</body> Para corrigir imagens ausentes:
</html>
n Primeiro, verifique se o nome do arquivo do
a imagem no servidor corresponde exatamente
ao nome que você referenciou na img
elemento, incluindo letras maiúsculas e
minúsculas e a extensão A.
n Não inclua espaços nos nomes dos arquivos. Consulte

“Nomes de arquivos” no Capítulo 1.
n Certifique-se de que o URL da imagem esteja correto

no atributo src do elemento img . Um teste fácil é
colocar uma imagem no mesmo diretório da página
HTML. Então você só precisará do nome de arquivo
e da extensão adequados no elemento img ,
mas nenhuma informação de caminho. Se a
B A página pode parecer boa em seu computador se não
imagem aparecer, provavelmente o problema estava
for exigente com letras maiúsculas e minúsculas. Mas
quando a página é publicada no servidor, que diferencia no caminho.
maiúsculas de minúsculas, a imagem não pode ser No entanto, não é uma boa prática manter as
encontrada e o texto alternativo é exibido.
imagens no mesmo diretório dos arquivos HTML,
pois seu site ficará rapidamente desorganizado.
Portanto, após o teste, remova a imagem do
diretório da página HTML e corrija o caminho src
que aponta para ela. Consulte “URLs” no Capítulo 1.
n Se a imagem aparecer quando você visualiza sua

página no computador, mas não quando você
carrega a página no servidor, certifique-se
de ter carregado a imagem no servidor.
n Você salvou a imagem como PNG, JPEG ou GIF?

Nesse caso, todos os navegadores irão exibi-lo,
o que não é verdade para BMP ou TIFF. Consulte
o Capítulo 5 para obter mais informações.

Ainda preso?
Não pense que estou sendo condescendente quando
sugiro que você faça uma pausa. Às vezes, a melhor
coisa que você pode fazer para resolver um problema é
deixá-lo de lado por um minuto. Quando você voltar, a
resposta pode estar bem na sua cara. Se não for,
deixe-me oferecer estas sugestões adicionais.
1. Verifique novamente se há erros de digitação. Revalite

seu código (consulte “Validando seu código”).
2. Verifique primeiro as peças fáceis. Verifique o que

você acha que conhece muito bem antes de
investigar as coisas menos familiares em busca do
problema.
3. Simplifique o problema. Volte para a versão mais

recente da página que funcionou corretamente.
(Relacionado a isso, faça cópias de sua página à
medida que avança na construção, para que
você tenha versões para as quais voltar, se
necessário.) Em seguida, teste a página à medida
que adiciona cada novo elemento, pouco a
pouco.
4. Para recursos vinculados à sua página

para isso, digite o URL desse arquivo CSS,
imagem, JavaScript ou mídia diretamente na barra
de endereço do navegador para ter certeza de que
ele existe onde você espera.
5. Leia este capítulo novamente – você pode ter perdido

alguma coisa na primeira vez ou isso pode
desencadear uma ideia.
6. Existem inúmeros sites onde você pode
buscar soluções ou pedir orientação.

Stack Overflow (www.stackoverflow.com) e
SitePoint (www.sitepoint.com/forums/forumdis
play.php?40-design-your-site) são apenas dois
exemplos. Você pode encontrar outros pesquisando
online.
520 Capítulo 20
21
Publicando seu
Páginas na web
Depois de terminar sua obra-prima e estar pronto para
apresentá-la ao público, você deverá transferir suas Neste capítulo
páginas para o servidor host da Web para que as
pessoas possam acessá-las. Obtendo seu próprio nome de domínio 522
Encontrando um host para seu site 523
Você também pode perguntar ao seu host ou provedor 525

Transferindo arquivos para o servidor
de serviços de Internet (ISP) sobre a melhor maneira de
enviar seus arquivos. Normalmente, eles têm um
conjunto de instruções que permitem saber como se
conectar aos servidores e
onde fazer upload de arquivos.
Certifique-se de testar suas páginas cuidadosamente antes

e depois de publicá-las. Para obter mais detalhes, consulte o
Capítulo 20.
Obtendo o seu próprio

Nome do domínio
R Apenas algumas empresas são
Antes que os visitantes possam ver seu site, você precisa registradores credenciados de nomes de
domínio (esta visão e a abaixo são de
de um nome de domínio para associar a ele A. Você pode
www.namecheap.com, sem endosso implícito).
registrar seu próprio nome de domínio e então encontrar Você pode usar um de seus sites para ver se o
um host para servir seu site a qualquer pessoa que visite nome de domínio desejado está disponível ou pode verificar no site de um
o domínio em um navegador (consulte “Encontrando um
host para o seu site”). Se você decidir mudar seu host
da Web (ou se eles fecharem), você poderá mover seu
domínio para o servidor de outro host da Web e todos
os seus URLs permanecerão exatamente os mesmos.
Para obter seu próprio nome de domínio:

1. Aponte seu navegador para um registrador de
domínio (consulte www.internic.net/alpha.html
para obter uma lista) para ver se o domínio desejado
está disponível B. (Muitos hosts da Web também
permitem que você pesquise em seus sites por
domínios disponíveis.)
2. Depois de encontrar um nome de domínio, registre-

o você mesmo (mais comum) ou registre-o
através do host que você usará. As cobranças variam
de registrador para registrador, mas cerca de US$
10 por ano para um domínio .com não é incomum
(outras extensões podem ter um preço diferente).
Alguns hosts da Web oferecem registro de domínio

como parte de uma taxa de hospedagem com desconto.
Consulte a barra lateral “Conectando

seu domínio e seu host da Web” na
próxima seção para obter uma configuração
importante necessária para fazer seu site ser
exibido quando alguém visitar seu URL.
B Se o nome estiver disponível, você poderá registrá-

lo por meio do site de registro de terceiros
onde o verificou ou registrá-lo por meio de
um host da Web. (E agora você sabe que o
domínio www.catalancats.com muito útil pode ser seu!)
522 Capítulo 21
Encontrando um
Seu ISP como host da web
Se você tiver acesso à Internet, talvez já
host para seu site
tenha uma pequena quantidade de espaço
A menos que você tenha seu próprio servidor,
na Web através do seu ISP. Pode não ser
suficiente para todo o seu site, mas
provavelmente terá que pagar alguém para
certamente é suficiente para você se hospedar seu site. Os hosts da Web fornecem
acostumar a colocar páginas na Web. uma parte de seu servidor para os arquivos do seu
Peça detalhes ao seu ISP. No entanto, site e fornecem outros serviços, como permitir
lembre-se de que esses tipos de espaços que você crie endereços de e-mail associados a
de hospedagem normalmente não permitem seu nome de domínio (como seunome@
que você coloque seu site em um nome de domínio exclusivo.seudominio.com).
Em vez disso, eles estão em um subdomínio
ou subdiretório do domínio do ISP, como
Existem centenas de empresas que fornecem
www.someisp.com/seu-site/ em vez de hospedagem de sites. A maioria cobra uma taxa
www.seudomínio.com. Em outras palavras, se mensal que depende dos serviços que oferece.
você tem ambições profissionais para o seu site, Alguns oferecem hospedagem gratuita na Web
não gostaria que ele fosse hospedado no espaço em troca de publicidade em seu site.
gratuito que seu ISP pode fornecer. Embora você possa procurar um host na Internet,
recomendo conversar com amigos para ver se
eles usam um host de sua preferência - ou talvez
o autor de um blog em que você confia tenha
anotado qual empresa ele ou ela usa como host.
Ao considerar um anfitrião, há uma série de

coisas – além do preço – que você deve ter em
mente.
n Quanto espaço em disco eles permitirão que

você tenha para o seu site? Não pague mais
do que você precisa. Dito isto, normalmente
até as contas mais básicas terão bastante
espaço para o seu site.
Lembre-se que os arquivos HTML ocupam
muito pouco espaço, enquanto as imagens,
arquivos de áudio e vídeos ocupam quantidades
cada vez maiores.
Publicando suas páginas na Web 523

n Quanto de transferência de dados (largura de banda)

por mês suas contas permitem? Isso representa
o tamanho total dos dados – HTML, CSS,
Conectando seu domínio e
Seu host
imagens, arquivos de mídia e assim por
Depois de registrar um domínio e encontrar
diante – que eles servirão aos visitantes, em
um host da Web, uma etapa importante é
vez de quanto eles permitirão que você
necessária para uni-los: você deve apontar seu
armazene em seus servidores. Portanto, se você
domínio para o host da Web para que o site
espera que os visitantes acessem muitos carregue quando os visitantes digitarem a URL
arquivos grandes do seu site, você precisará do site.
de uma cota de transferência mensal maior.
Para fazer isso funcionar, você configura o que
n Eles têm planos voltados para sites com muito tráfego, é conhecido como servidor de nomes associado
para garantir que o site não trave? com seu domínio. Seu host da Web fornece
as informações do servidor de nomes para usar
na configuração.
n Quantas caixas de correio você pode criar para o seu
A configuração real é feita em um de dois
domínio? (As empresas de hospedagem geralmente
locais, dependendo de onde você registrou seu
permitem bastante.)
domínio (consulte “Obtendo seu próprio
n A conta permite que você hospede nome de domínio”). Se você o registrou com
mais de um domínio ou é necessária uma conta um registrador de domínio, faça login em sua
separada para cada site? conta com ele e defina as informações do servidor
de nomes para o seu domínio (seu registrador
n Que tipo de suporte técnico eles oferecem? É por
de domínio fornecerá instruções). Se você
telefone, por e-mail ou por chat online? Quanto
registrou seu domínio por meio de seu host
tempo eles levarão para retornar para você? Além da Web, faça login em sua conta para atualizar
disso, eles têm muitas informações de suporte as configurações.
disponíveis em seus sites? (Você provavelmente pode
verificar a qualidade desse conteúdo antes de se
Não se preocupe se tudo isso parecer um
tornar um cliente.) pouco confuso. Seu host da Web e registrador
de domínio (se diferente) fornecerão instruções
n Com que frequência eles fazem backup dos sobre como fazer isso e geralmente fornecerão
ajuda prática se você precisar.
dados em seus servidores (caso haja algum
problema)? Outro ponto a ter em mente: quando você
altera as configurações do servidor de nomes,
n Que tipo de linguagem do lado do servidor
normalmente leva de 24 a 48 horas (72 no
e pacotes de software vêm com a conta? Eles
máximo) para que a atualização se propague
usam PHP, MySQL, WordPress ou outros pela Web. Mas esta mudança não ocorre ao
recursos avançados? mesmo tempo em todos os lugares.
n Eles oferecem relatórios de análise da Web que informam Portanto, se você atualizou o servidor de nomes
do seu domínio (e carregou os arquivos do seu
quantas pessoas visitaram seu site, bem como
site conforme descrito em “Transferindo
outros dados úteis?
arquivos para o servidor”), seus amigos
poderão acessar seu site sem problemas de
onde moram, mesmo que você não veja
imediatamente (ou vice-versa). Seu site deve
aparecer para todos em pouco tempo.
524 Capítulo 21
Transferindo
arquivos para o servidor
Para que outras pessoas na Internet vejam suas
páginas, você deve carregá-las no servidor do seu
host. Uma maneira fácil de fazer isso é com um cliente
A Para inserir informações sobre FTP como o FileZilla (http://filezilla-project.org), que é
um novo servidor, selecione Arquivo
gratuito para Windows, Mac OS X e Linux (veja
> Gerenciador de Site na janela
principal do FileZilla. Site Manager é dicas para outros clientes FTP).
onde você configura os detalhes da
conexão FTP para cada site.
Muitos editores de páginas da Web também incluem
recursos de FTP, para que você possa publicar páginas
diretamente a partir daí, em vez de usar um programa
como o FileZilla.
Normalmente, o seu host da Web envia por e-mail

informações de conexão FTP para você depois que
você se inscreve em uma conta de hospedagem. (Entre
em contato com eles se não as recebeu.) Assim que
tiver essas informações, você pode configurar a conexão
do servidor e salvá-la com um nome
(A a C) para fácil acesso sempre que desejar publicar
arquivos (ou baixá-los do servidor do seu site).

B Quando você clica no botão Novo Site no
Gerenciador de Sites, um nome temporário aparece
em Meus Sites.
C Substitua o nome temporário por um nome de sua

preferência e configure os detalhes da conexão na
guia Geral. O botão Conectar salva as informações
e estabelece imediatamente uma conexão
com o servidor. O botão OK salva apenas as
informações.

Em seguida, conectando-se ao seu servidor D

e a transferência de arquivos (E e F) são
simples.
Observe que o FileZilla parece diferente no Mac

OS e Windows, mas as interfaces são configuradas
de forma muito semelhante (as figuras mostram uma D Agora que as informações de conexão do seu
mistura de sistemas operacionais). Exceto quando site estão salvas no Site Manager, você pode
indicado, as etapas para usá-los são idênticas. conectar-se ao servidor FTP do seu host da Web
sem precisar digitar tudo novamente todas as vezes.
No Mac ou Windows, retorne ao Site Manager
(através do ícone do servidor ou do menu em A),
Para definir as propriedades de um novo site FTP: selecione seu site na lista e selecione Connect C.
Alternativamente no Windows, como mostrado na
1. Escolha Arquivo > Gerenciador de Site no figura inferior aqui, você pode ativar o seta para baixo
ao lado do ícone do servidor (na extremidade
menu principal A do FileZilla.
esquerda) e escolha o nome do seu site no menu exibido. FileZilla se conect
servidor.
2. Na janela Gerenciador de Site, clique no botão
Botão Novo Site B. Um nome temporário para seu
site aparece em Meus Sites.
3. Digite um nome para o site (substituindo o nome

temporário). Não precisa ser igual ao seu nome de
domínio; é apenas um rótulo. Siga as informações
fornecidas pelo seu host para preencher os campos
apropriados na guia Geral. No mínimo, isso
geralmente envolve inserir a URL do host, escolher E À direita da janela, selecione o diretório de
destino do servidor. À esquerda da janela, navegue
Normal para a opção Tipo de logon e inserir seu
até o diretório do seu computador que contém os
nome de usuário e senha (geralmente criados arquivos que você deseja enviar. Em seguida,
quando você configura a conta) C. clique com o botão direito no arquivo ou pasta que
deseja enviar para o servidor e selecione Carregar.
4. Depois de terminar de indicar o

detalhes da conexão, clique no botão Conectar
para salvar as informações e
conecte-se ao seu servidor imediatamente ou
clique no botão OK para salvar as informações e
conectar-se mais tarde C.
F A pasta recém-transferida aparece no quadro do
lado direito da janela. Siga o mesmo processo para
todos os arquivos e pastas que deseja transferir para o
seu site. Ou, para transferir vários de uma vez,
selecione vários arquivos ou pastas e clique com o
botão direito para selecionar Carregar.
526 Capítulo 21
Para transferir arquivos para

o servidor com FileZilla:
1. Abra o FileZilla.
2. Selecione a seta para baixo ao lado do
ícone do servidor (na extrema esquerda, logo
abaixo do menu principal). Em seguida,
escolha o nome do seu site no menu que
G Escolha Servidor >
Desconectar quando terminar. exibe D. O FileZilla estabelecerá uma conexão
com o seu servidor.
3. No lado direito da janela, navegue até o diretório

do servidor para o qual deseja fazer upload
dos arquivos.
4. No lado esquerdo da janela, navegue até o diretório

do seu computador que contém os arquivos que
você deseja carregar.
5. Clique com o botão direito no arquivo ou pasta desejada em

no quadro esquerdo e escolha Upload no menu
que aparece E. Os arquivos são transferidos F
(isso levará mais tempo para arquivos grandes,
como vídeos). Você também pode transferir
arquivos na outra direção (veja a primeira dica).
6. As atualizações do seu site já estão no ar.

Navegue em seu site em www.seudominio.tld
(onde seudominio.tld é o domínio que você
registrou; .tld é o domínio de nível superior,
que será .com, a menos que você tenha
registrado um domínio com uma extensão
diferente) para garantir que tudo esteja
funcionando corretamente. Edite qualquer um
dos arquivos em seu computador conforme
necessário e carregue-os em seu servidor seguindo
as etapas 3 a 5 (talvez seja necessário executar
a etapa 2 novamente se já tiver passado muito tempo).
Repita esta etapa até que o site esteja como
você pretende.
7. Feche o FileZilla ou escolha Servidor >

Desconecte-se do menu principal assim que
terminar de transferir os arquivos G.

Você também pode transferir arquivos do seu site

servidor para o seu computador. Para fazer isso,
clique com o botão direito nos arquivos ou
pastas no quadro direito e escolha Baixar no menu que aparece.
FileZilla é apenas um dos muitos clientes

FTP disponíveis. Alguns outros populares para
Mac OS X são CyberDuck (gratuito, http://
cyberduck.ch), Transmit (www.panic.com/transmit)
e Fetch (http://fetchsoftworks.com). O Mac OS
X também possui capacidade FTP integrada
(consulte http://osxdaily .com/2011/02/07/ftp-from-
mac/). Pesquise online por “cliente FTP” para
encontrar mais para Windows e Mac. Todos
eles funcionam de forma semelhante, mas alguns têm mais recursos do que outros.
Ao transferir arquivos e pastas, eles são

copiados para a pasta de destino. O local de origem
mantém sua versão dos ativos.
Seu programa FTP pode solicitar (o

FileZilla) para ter certeza de que deseja
sobrescrever um arquivo ou pasta se você transferir
um que o destino já contenha. Cada cliente FTP é
diferente, portanto é possível que ele não peça sua
permissão. Experimente em um arquivo de teste
para saber como seu cliente FTP lida com tal situação.
URLs relativos em seu código são

mantidos quando você transfere uma pasta para o servidor.
Se o seu site não carregar quando você o visitar

URL, podem ser algumas coisas. Primeiro,
verifique se você carregou os arquivos no
diretório apropriado. Muitas vezes, suas páginas
pertencem a um diretório chamado public_html,
www ou algo semelhante. As instruções do
seu host devem especificar o local adequado;
pergunte a eles se não tiver certeza. Se você tiver
os arquivos no lugar certo e o site ainda não
aparecer, o problema pode ser as configurações
do servidor de nomes do seu domínio (consulte
a barra lateral “Conectando seu domínio e seu host da web”).
Se você carregou uma nova versão de

um arquivo em seu servidor, mas não vê a
alteração ao visitar seu site, limpe o cache do
navegador e verifique a página novamente.
Pesquise a seção de Ajuda do navegador se não
tiver certeza de como limpar o cache.
Você pode redimensionar a janela da maioria dos FTP

clientes mostrem mais (ou menos) arquivos por vez.
Basta clicar e arrastar o canto inferior direito.
528 Capítulo 21
Índice
/*, */, usando para comentários CSS, 182 : (dois alinhando

pontos) versus sinal = (igual), 205 ; (ponto e elementos verticalmente, texto
vírgula), usando com propriedades CSS, 205 , usando 322, 268–269
para comentários HTML, 97 3D, posicionando elementos atributo alternativo , 157
em, 318–319 320 e acima, 351 texto alternativo, 157

âncoras. Veja também links
criando, 172–173, 175–177
A vinculando a, 174
um elemento. Ver âncoras imagens animadas, salvamento, 151
Formato de arquivo de áudio AAC, 468 Link Maker da Apple, 177
elemento abbr , 118–119 ARIA (Aplicativos ricos para Internet acessíveis), 88–91.
abreviações, explicação, 118–119 URLs

Veja também função de formulário
absolutos versus relativos, 21–23 acessibilidade.

de acessibilidade ,
91 funções de referência, 88–89
Veja também ARIA (Acessível Rico
definição de role="banner" , 89
Aplicativos de Internet) e defensores dos leitores de
tela, 91 definição de role = "complementar" , 90 definição
de role = "contentinfo" , 90 definição de role =
explicaram, 11
Mídia HTML5, 467 links "principal" , 89 definição de role =
ativos , 230 : "navegação" , 89 resultados de teste de leitor

de tela, 90 especificações, 91 funções de
pseudoclasse ativa, 231
elemento de endereço referência
ARIA. Veja papéis marcantes
definindo informações de contato com, 102–103 usando
com elemento de artigo , 70 versus ids, 284-285
Adobe Fireworks, 153, 155 sobreposição com elementos HTML5, 88
Adobe Photoshop, 153–155 recomendação, 90
localização de tamanhos de elementos de estilo com, 284–285
imagem, 159 elemento de artigo , 68–71

elemento de endereço , 70
maquetes, 359
filhos de, 15
dimensionamento de imagens, 161 ::after pseudoelemento, 229
Índice 529
elemento de artigo (continuação) atributo de

conteúdo em, 9 reprodução automática de
exemplos, 70–71 áudio em loop , 472 atributo de
elemento de rodapé , 70 controles , 472 fontes de áudio, múltiplas,
aninhamento, 474–475 informações de contato do autor, adição, 102–103
69 aninhamento de atributo de
conteúdo, 9 fornecendo informações de contato, 102– áudio de reprodução automática , 471–472
103 versus elemento de seção , 69, 73, 283 atributo de vídeo, 454–457
Caracteres ASCII, 16
elementos laterais , 75–79 B
exemplos, 78–79 elemento b , 111
versus elemento de figura , 77 redefinição de, 111
restrições, 77 como
versus elemento forte , 110 escolha
barra lateral, 76–77 de cor de fundo, 297
tecnologias assistivas, 54. Consulte também leitores de tela substituto, 391
imagens de fundo
Ateÿ, Faruk, 377
controlando anexação de,
seletores de atributos, 232–235. Veja também
295 múltiplas, 388 repetindo, 294
seletores
especificando a
valores de atributos, entre aspas, 510 atributos
posição de, 295
usando, 294 propriedades de fundo ,
conteúdo de, 14
262–263, 296
valores numéricos, 15
–297 propriedade de anexo de fundo , 295 propriedade de
valores, 14–15
cor de fundo , 296, 388–389 propriedade de imagem
áudio
de fundo , 294, 388–389 propriedade de posição de fundo ,
Flash e substituto de hiperlink, 478–479
295, 297, 388–389
Fallbacks de Flash, 476–477
fallbacks de hiperlink, 475
atributos de áudio
propriedade de repetição de fundo , 294, 388–389 planos de
reprodução
fundo. Veja também aplicação de fundos gradientes, alteração
automática, 471
388–389, alteração 294–
controles,
297 para texto, criação 260–
471 loop, 471
263, múltiplo 297, site BART 388,
silenciado, 471 pré-
editor de texto
BBEdit 329,
carregamento, 471, 473
download, elemento
src, 471 controles de áudio, 470 elemento de áudio , 471
bdi 29 , ordem lógica 139–141, ordem visual 140 ,
formatos de arquivo de áudio
140
AAC, 468
MP3, 468
MP4, 468 elemento bdo , 139–141
Ogg Vorbis, 468 tipo
ordem lógica, 140
de atributo , 474 ordem visual, 140
WAV, 468
Beaird, Jason, 27 ::antes
arquivos de áudio
do pseudoelemento, 229
adicionando páginas da Web, 469–470 Bester, Michael, 196
atributo de pré-carregamento , 471, 473 elementos de nível de bloco, 7
Índice 530
links em nível de bloco, 168–170 elemento canvas , usando com vídeo,

elemento blockquote , 113–115 485 valor de capitalização , usando com text-transform,
aninhamento com elementos q , 115 270
como raiz de seccionamento, legendas, criação de figuras, 104–105 Cascading

115 elemento de Style Sheets (CSS). Consulte codificação de
corpo , 44 aplicação caracteres CSS (Cascading Style
de formatação em negrito, Sheets), especificando, 16 caracteres, leitura
248–249 remoção, 248 da direita para a esquerda, declaração 139–141

BOM, recurso da Web para, 32 @charset , usando com estilo
propriedades de borda, configuração, planilhas, 199
312 estilo de borda, definição, caixas de seleção, criação, 440

cromada
311 propriedade de imagem de
borda , 313 propriedade de raio de borda , 376, Ferramentas para
378–381 bordas desenvolvedores, 507 verificação de sites, 518
adicionando às imagens, 156 círculos, criando com raio de borda, 380 citações,
cores, 311 indicando, 112 elemento de
exclusão de imagens, configuração citação , 112
156, atalhos 311– Clark, Keith, 351
313, 312–313 Clarke, Andy, atributo
larguras, 311 de classe 351 . Consulte também pseudoclasses
Boston Globe, modelo atribuindo a elementos, 92–94 versus
de caixa 332, propriedade atributos de id , 94 versus
box-shadow 292–293 , 384–386 seletores de id , 220

elemento br nomenclatura,
codificação, 133 94 selecionando elementos por, 218–220
uso com propriedade de espaço em branco , 267 usando com microformatos, 92–94
ferramentas de desenvolvedor de navegador propriedade clara , usando com floats, 308–310 cliente
Ferramentas para desenvolvedores do Chrome, 507

lado vs. lado do servidor, 421
Firebug para Firefox, 507 Editor de texto Coda, 29

código
Internet Explorer, 507
Ópera Libélula, 507 recuo, 5
Safari Web Inspector, 507 marcações, 128

navegadores validação, 508, 514–515
recursos, 518 elemento de código ,
compatibilidade, 375 128 codecs, 452
consideração em layouts, 276–277 folhas dois pontos (:) versus sinal de igual (=), 205
de estilo padrão, 7 localização cores, configuração, 258–259. Consulte também Cores CSS
de tamanhos de imagem, 158 Gerador de gradiente do ColorZilla, 393
Suporte graduado ao navegador, 518 comentários, 282. Consulte também Comentários HTML
estilos de elementos HTML5, 286–289 suporte adicionando regras de estilo, 182–183
para, 448 testes, 518 condicional, 351
visualização compactação de arquivos,
de páginas da Web, 37–38 177 comentários condicionais, 351

informações de contato, adição, 102–103
containers
C
criação, 84–87
data do calendário, especificando, 107
envolvendo conteúdo, 84–85
Camén, Kroc, 466
Índice 531
contente. Veja também conteúdo de texto CSS1, introdução de, 8

separando da apresentação, 276 sindicalizados, CSS3
57 planos de fundo, compatibilidade

controles de navegador 388–389, 375
atributo de áudio, 471–472 sombras projetadas, 382–387
atributo de vídeo, 454–456 combinador geral de irmãos, 226 fundos
cantos gradientes, 390–393 elementos de opacidade,
elíptico, 394–395 polyfills para aprimoramento
arredondamento 380, 378–381 progressivo, 376–377
Coyier, Chris, 322
Licenças Creative Commons, 152 arredondamento de cantos de elementos, 378–381
CSS (folhas de estilo em cascata) prefixos de fornecedores, 373–374
combinador de irmãos adjacentes, 226 regras Gerador CSS3, 374
de colisão, 184–187 comentários Seletores CSS3, recurso para, propriedade
para regras de estilo, 182–183 regras de estilo, do cursor 239

181 código CSS, valor automático ,
visualização, 212 cores CSS, 323 valor de mira , 323 valor

190. Consulte também HSL colorido, 193– padrão , 323
196 valor de movimento , 323
HSLA, 193-196 valor do ponteiro , 323

RGB, 191 valor de progresso , 323
RGBA, 192–196 valor de texto , 323
Erros de CSS, verificação, 515 valor de espera , 323
Propriedades CSS valor de redimensionamento
números simples, 189 x , 323 cursores, alteração, 323
cores hexadecimais, 191 valor marcadores personalizados. Veja também marcadores
herdado , 188 exibindo, 405

comprimentos, 188– URLs (Localizadores Uniformes de Recursos), 405
189 porcentagens, 188–189 usando, 404–405
valores predefinidos, 188 Cliente FTP CyberDuck, 528
URLs, 190
usando ; (ponto e vírgula) com, 205 D
Redefinição de CSS, começando a folha de estilo atributo datahora , 106–108
principal com, 290
técnicas de depuração
Truques CSS, 395 verificação de HTML, destaque
Solução de problemas de CSS de sintaxe 510–511, página padrão 506–
suporte ao navegador, 513 507, especificação, 33–34. Veja também páginas HTML;
chaves, 512 paginas web
declarações, 512 estilos padrão. Consulte também
ferramentas de normalização de estilos,
desenvolvedor, 513 vinculação de redefinição de 290–291,
documentos HTML, 513 pares página default.htm 290–291,
propriedade/valor, 512 33 termos de definição,
pontuação, 513 separação de propriedades de 120 del elemento, 124–127
valores, 512 espaços, exclusão, bordas de imagens, 156 lista de
512–513 </style> tag final, descrição (dl). Veja também criação de listas,
513 valores, 512 414–415
Índice 532
elementos dt e dd , 413 grupos Local de drible, 376

nome-valor, 412 aninhamento, DRM (Digital Rights Management), 481 sombras
415 projetadas
Devlin, Ian, 467, 487 adicionando elementos, 384–387
elemento dfn (definição), 120 adicionando texto, 382–383
Gerenciamento de direitos digitais (DRM), 481 atributo navegação suspensa, usando listas aninhadas para,
desabilitado , 447 propriedade 411
de exibição , 324 valor de Dunham, Ethan, 360-361
bloco , 325 valor

embutido , 325 valor de E
bloco embutido , 325 edição de páginas da Web, 35

nenhum valor, 325 edições, anotação, 124–127
elemento div Simulador Móvel Elétrico para Windows, 347
aplicação de estilos a, 85 caixa de elemento
práticas recomendadas, controlando a aparência de, 293
86 exemplos, 87 posicionamento, 293
como contêiner genérico, 84–87 versus elementos, 13–14. Veja também pseudoelementos adicionando
elemento span , 85 estruturação preenchimento, 304–305 alinhando verticalmente,
de páginas com, 279 conteúdo 322 ancestrais, 221 aplicando
circundante, 84 uso com JavaScript, estilos a grupos de,
85 dl (lista de descrição). Veja 236–237 valor automático para largura, 300 conteúdo
também criação de listas, 414–415 elementos de, 13 descendentes, 221 exibindo,
dt e dd , 413 324–326 vazio, 13
final e tags iniciais, 511
grupos nome-valor, 412 tags finais, 13 flutuantes, 306–
aninhamento, 415 310
DOCTYPE
formatação, 93 ocultação, 324–
insensibilidade a maiúsculas 326 nomeação
e minúsculas, 45 renderização em com classes ou IDs, 92–
navegadores, 45 para documento XHTML 94 aninhamento, 15
Strict, 45 declaração <!DOCTYPE html> , 4, 24 deslocamento em fluxo
esboço do documento, 50–55 natural, 314–315 sobreposição com funções de
algoritmo, 57 referência, 88
tecnologias assistivas, 54 semântica posicionamento absoluto , 316–317
explícita, 53 hierarquia h1-h6 , posicionamento em 3D, 318–319
51 leitores de tela, 54 arredondamento de cantos, 378–381 seleção
elementos de seccionamento, com base no irmão adjacente, 226
51–52, 55 estrutura de documento, inspeção, seleção com base em ancestrais, 222–223
511 document.createElement(), 287 documentos. seleção com base em atributos, 232–235 seleção com
Veja também documentos HTML; Rede base no filho, 224–226 seleção com base nos pais, 223–
224 seleção com base no tipo, 217 seleção por classe ou
final de id, 218–220 seleção por contexto, 221–226 seleção
páginas, 5 por nome, 216–217
salvamentos,
35 estruturações, 278
nomes de domínio
conectando-se ao host da Web, 524

obtendo, 522
Índice 533
elementos (continuação) Buscar cliente FTP, 528

selecionando as primeiras letras de, elementos fieldset , 426–427 elemento
228 selecionando as primeiras figcaption , 104–105 elemento figura
linhas de, 227 selecionando partes versus elemento
de, 227–229 definindo altura ou largura, 298– aparte , 77 usando, 104–105
301 espaço e barra, 13 especificando figuras, criando,
grupos de, 236–237 tags de início e fim, 104–105 extensões de arquivo,
511 tag inicial, 13 estilos em usando com editores de texto, 32 nomes de arquivo
navegadores,
286–289 digitação de nomes de, 14 traços entre palavras, 19, 24 extensões,
void, 13, 511 19 nome de
arquivo, marcação, 128
cantos elípticos, criação, elemento 380 extensões .htm e .html , 19, 30–31 minúsculas, 19,
em , 110 valores de 24
cálculo para recuos, 265 versus i, 110–111 esquema de arquivos ,
20 uploads de arquivos, permitindo 442

versus mark, 117 arquivos
usando com parágrafos, 10 caixas escolher codificação para, 32

de e-mail, criando, 432–433 scripts compactação, 177
incorporados, adicionando, 502 folhas de ocultação, 34
estilo incorporadas, criando, 202–203 emuladores, usando nomeação, 36
com dispositivos móveis, 347 codificação, escolhendo organização, 36
arquivos, 32 tags finais, incluindo em transferência para servidores, 525–528
elementos, 13 fontes da Web .eot (Embedded visualização, 35
OpenType), 354 sinais de igual (=) versus dois pontos (:), FileZilla, transferindo arquivos para o servidor com, 527 letras
205 manipuladores de eventos. Consulte scripts miúdas, especificando, 132
externos de eventos JavaScript, carregamento, 499 Firebug para Firefox, 212, 507
folhas de estilo externas. Veja também Firefox, verificando sites em,
os benefícios das folhas de estilo, 200 alteração, 200 518 ::sintaxe da primeira letra ,
criação, 198–199 229 :: sintaxe da primeira linha , 229
@importar regras Firmman, Maximiliano, 351
em, 207 importar, 199 Animação em Flash, incorporação, 482–483
vincular a, 199–201 regras, Player alternativo de Flash, 463
201 Alternativos de flash
áudio, 476–477 e
substituto de hiperlink para áudio, 478–479 e substituto
URLs em, 201 de hiperlink para vídeo, 465–466 vídeo, propriedade
flutuante 464–465
F
método clearfix , 310
árvores genealógicas, criação de páginas da Web, 15
Faulkner, Steve, 91, 168 valor esquerdo , 306
ícones favoritos valor nenhum , 307

método overflow , 310 valor
adicionando a sites, 162–163
economizando, 163 direito , 306 usando
Featherstone, Derek, 168 propriedade clara com, 308–310 links de foco ,

230 nomes de pasta,
Ferg, Stephen, 489
letras minúsculas, 24
Índice 534
pastas restrições, 81 uso

nomenclatura, com elemento de artigo , 70 uso com
36 organização de arquivos, role="contentinfo", 81 links de rodapé,
36 subpastas, 36 colocação de elementos de navegação , 65 rodapés,
usando, 370 criação, 80–83 dados de
declarações de fontes, combinando, 257 formulário, envio por e-mail, 424–425 elementos de
famílias de fontes formulário
nomenclatura, para atributo, 435

configuração desabilitação, 447
364, 243 arquivos de fontes, organização em atributo id , 435
pastas, 370 nomes de fontes organização, 426–427
genérico, 245 saída, 448
com caracteres não-ASCII, 243 usando atributo title, 435 atributos
aspas com, 243 tamanho de de entrada de formulário, 428
fonte partes de formulário, rotulagem, 434–
% unidade, 250, 251–252, 254 435 elemento de formulário , 419
filho do elemento, unidade formulários
254 em , 251–252, 254 criando, 419–420

unidade ex , atributo desabilitado , 447
254 elemento pai, tipo de elemento fieldset , 426–427
unidade 254 pt , método get , 442
unidade 253 px , campos ocultos, 443
unidade 250–254 elemento de legenda , 426–427
rem , configuração 254, 250–254 processamento, 421–423
Font Squirrel, 355–356, 358, 366 valores de recurso para, 448
fonte, configuração de tudo, 256–257 segurança, 423
Serviço Fontdeck, 356 envio com imagens, 446 valores
Recurso @font-face , 355, 360–364 fracionários, indicando, 142–143
regra, Clientes FTP
sintaxe 360, CyberDuck, 528

uso 360, 370 Buscar, 528
propriedade font-family , 243–244, 247 fontes. ArquivoZilla, 525–528
Veja também fontes da Web redimensionando janelas de, 528
padrões, 244 Transmitir, 528
especificando, 244–245 Sites FTP, definindo propriedades para, 526
serviço Fonts.com, 356
FonteShop, 356 G
Site Fontspring, 361 estilo de Gallagher, Nicolas, 123, 290
fonte: itálico, 247 propriedade Gasston, Peter, criação
variante de fonte , 271 peso da de 334 contêineres
fonte: negrito, 248 peso da genéricos, elemento
fonte: normal, 248 div 84–87 , 84–87
Página inicial do Food Sense, elemento de Formato GIF
rodapé 330–331 , 80–83 colorido,
conteúdo de, 81 149 imagens,
exemplos, 82–83 148 sem perdas, 151
colocação de, 81 transparência, 151
Índice 535
Google Apps, 518 campos ocultos
Google Closure Compiler, 501 Google criação, 443

WebFonts, 356 Graded Browser atributo somente leitura , 443
Support, 518 fundos gradientes, 390– ocultação de
393. Veja também gerador de gradiente de planos de arquivos, 34 destaque de texto,
fundo, 393 títulos 116–117 página inicial, especificação,
de agrupamento, 58–59 33–34 host, localização de sites, 523–524
seletores, links instantâneos , 230
237 grupos de : pseudoclasse hover , atributo
elementos, 231 href
especificando, 236–237 começando com #, 172
valores em, 15
H Cores HSL e HSLA, 193–196 HSL
Formatos de arquivo de vídeo H.264, Color Picker, 194–195
cabeçalho 452 h1 , usando, extensões .htm e .html , 19, 30–31
9 elementos h1-h6 , 48 HTML
tamanhos de, 49 verificação,
usando consistentemente, 49, 55 marcação

Conversor de vídeo HandBrake, 452 recuo 514, 6 semântica, 6,
deslocado, criação, 265 hasLayout, 24 tags de início e fim,
395 elemento head validação 511,

código HTML 515, visualização,
39 comentários HTML. Veja também comentários
explicado, 44
código de recuo aninhado, 45 adição, 96–97
elemento de cabeçalho , 61–63, 279 restrições, 97
cabeçalhos sintaxe, 97
criação, 61–63 documentos HTML, início, 24. Veja também documentos
versus títulos, 63 elemento

Elementos HTML
de navegação , 63
restrições, 63 uso, nível de bloco, 7
63 títulos, exibições, 6–8
282 adição de ids embutidos,

7 formulários HTML. Ver formulários
a, 49 criação, 48–49
agrupamento, 58–59 HTML Lint,
versus cabeçalhos, 63 marcação HTML 515, componentes, 24. Consulte
atributo lang in, 49 em também

marcação de páginas HTML. Veja também página
mecanismos de pesquisa,
padrão;
49 uso, 9, 48 altura:
Páginas da Web acima da tag
propriedade
inicial <body> , 4
versus altura mínima ,
páginas básicas, 3
configuração 300, atributo de
retornos de carro, 3
vídeo de altura 298–
DOCTYPE, 4, 24 documentos
299 , 454 cores hexadecimais, 191
finais, 5
elemento hgroup , 58–59
fundamentos, 43
formato hh:mm:ss , 108
títulos h1 , 9
títulos, 9
imagens, 9 links, 10
Índice 536
organização em pastas, 370 seleção com base nos pais, 223–224 seleção com base
parágrafos, 10 no tipo, 217 seleção por classe ou id,
semântica, 9–10 testes, 218–220 seleção por contexto, 221–226 seleção
516–517 conteúdo de por nome, 216–217 seleção das primeiras
texto, 3, 5 elemento de letras de, 228 seleção das primeiras
título , 4 linhas de, 227 seleção partes de, 227–
Valores de atributos de solução 229 configuração de altura ou largura,
de problemas de HTML, 510 298–301 espaço e barra, 13 grupos de
formatação de caracteres, especificação de, 236–237 tags de início e fim,
aninhamento de 510 elementos, 511 tag de início, 13 estilos em
510 erros de navegadores, 286–289 digitação de nomes
digitação, 510 tags finais </ de, 14 vazios , 13, 511
html> , 5 elementos html , 45
HTML5
DOCTYPE, 45
códigos de formatação, 515

novos recursos de formulários, 448 Páginas HTML5. Veja também páginas da Web
Outliner, conteúdo seção do corpo , 44
de 52 frases, 7 semântica, seção da cabeça , 44
8–9 inicial, 43–44
“HTML5 Canvas: The Basics”, 487 elementos HTML5 shiv, 287 HTML5
HTML5, 13–14. Veja também pseudo- Video, 487 html5.js,

elementos download, 289. Veja também
adicionando preenchimento, 304–305 alinhando Faca HTML5
verticalmente, 322 ancestrais, esquema http , 20

221 aplicando estilos https://, usando, 431–432
a grupos de, 236–237 valor automático para largura, Hudson, Roger, 489
300 conteúdo de, 13 descendentes, substitutos de hiperlink de
221 exibindo, 324– áudio, 475
326 vazio, 13 tags de vídeo, 461–462
final e início, 511 tag final, 13

flutuante, EU
306–310 formatação, 93 eu elemento, 111

ocultação, 324– redefinição de, elemento
326 nomeação com 111 versus em , 110 ícones,
classes ou IDs, 92– adição para sites, 162–163
94 aninhamento, 15 atributo de identificação
deslocamento em fluxo natural, 314–315 versus atributo de classe , 94

sobreposição nomeando elementos com, 92–94
com papéis de referência, 88 posicionamento selecionando elementos por, 218–220 id vs.
absoluto, 316–317 posicionamento em 3D, seletores de classe , 220
318–319 arredondamento de cantos, 378–381 ids versus papéis de referência ARIA, 284–285 editores de
seleção com base no irmão adjacente, imagem
226 seleção com base em ancestrais, 222– Fogos de artifício da Adobe, 153
223 seleção com base em atributos, 232–235 seleção com Adobe Photoshop, 153 escolhas,
base no filho, 224–226 153 dimensionamento
de imagens com, 161
Índice 537
tamanho da imagem, especificando, iPad

158–159 imagens, 17. Veja também imagens renderização, 345
de pôster adicionando páginas de teste para, 347
bordas, 156 adicionando iPhone
páginas, 9 texto suporte para consultas de mídia, 341
alternativo, 157 páginas de teste para, 347
animação, 151 cores, 149 Irlandês, Paulo, 377
Licenças Creative Commons, 152 ISP, usando como host da Web,
excluindo bordas de, 156 formato, 523 itálico, criando, 246–247
148 obtenção,
152 J.
Formato GIF, 148, 151 Adição de

incluindo em páginas HTML, 9 JavaScript a páginas da Web, 499–500
inserções em páginas, 156 document.createElement(), 287 scripts
formato JPEG, 148, 150 embutidos, 500
ausentes, 519 bibliotecas, 498
pixels, 149 biblioteca Modernizr, 287
formato PNG, 148, 151 polyfills para aprimoramento progressivo, 376–
salvamento, 154–155, 377
519 dimensionamento com Eventos JavaScript
navegadores, 160 dimensionamento onblur, 503
com editor de imagens, 161 tamanho onchange, 503
e resolução , 149– onclick, 503
150 velocidade, 150– ondblclick, 503
151 transparência, 151 em foco, 503
solução de problemas, 519 onkeydown, 503
usando para enviar onkeypress, 504
formulários, 446 onkeyup, 504
elemento img , usando, 9 regras onload, 504
@import em folhas de onmousedown, 504
estilo externas, 207 no elemento de estilo , onmousemove, 504
206 !important, marcação onmouseout, 504
de estilos com, 207 recuo código, 5, 45 travessões passar o mouse, 504
adicionando, onmouseup, 504
265 removendo, 265 onreset, 504
página padrão index.html , 33–34 onselect, 504
elementos embutidos, ao enviar, 504
7 scripts embutidos, manipuladores baseados em
500 estilos embutidos, aplicação, toque, 504
elemento 204–205 ins , 124–127 touchend, 504 touchmove, 504
sombra inserida, criando, 385 toquestart, 504
Internet Explorer Leitor de tela JAWS, 91
Ferramentas de desenvolvedor, 507 Jehl, Scott, 348
Filtro gradiente, 195–196 Johansson, Rogério
reconhecendo CSS, 287 “Traga as mesas”, 489 @font-
verificando sites, 518 iOS face code, 370
Simulator, 347
Índice 538
Johnston, Jasão, 377 vinculando imagens em miniatura, 177

Formato JPEG, 148, 150 links, 17. Veja também âncoras
biblioteca jQuery JavaScript, 498 ativas, 230
Jogador JW, 463 nível de bloco, 168–170
mudança de aparência, 230 criação,
K 167–170 definição, 10
elemento kbd , 129 definição de
Keith, Jeremy, 332 regras para, 231 designação
kerning, especificando, 264 para navegação, 65 destino, 166 foco,
-khtml- prefixo, 373 230
Beijo, Jason, 91
Kissane, Erin, 27 pairar, 230
rótulos, 166, 170
eu
Mnemônico LVFHA, 231
marcação de grupos de links com, 399
elemento de rótulo
aninhamento no elemento nav ,
exemplo de, 14
64 abertura,
usando com formulários,
171 seleção com base em estados, 230–231
434 papéis de referência
estruturação em elementos ul e ol , 65 atributo
versus ids, 284–285
de destino , 171
sobreposição com elementos HTML5, 88
visitados, 230
recomendação, 90
encapsulamento no elemento nav , 66 –67
elementos de estilo com, 284–285
conteúdo da lista, posicionamento de,
atributo lang , 43 em
400 elementos de item de lista (li) ,
títulos, 49 usando
numeração de lista 398–400, início,
com elemento q , 114 layout
tipo de lista 403, escolha, 399
com estilos. Consulte também abordagens
listas. Veja também dl (listas de descrição); listas aninhadas
de estilos, cor de fundo 277–
escolhendo marcadores, 401–402
278, imagens de fundo 296,
criação, 398–400
propriedades de fundo 294–295, modelo
marcadores personalizados, 404–
de caixa 296–297, 292–293
405 exibição sem marcadores, 402
marcadores suspensos, 406
navegadores, 276–277
recuo, 400
conteúdo e apresentação, 276 layouts
aninhamento,
elásticos,
400 ordenado (ol), 398–400
278
direção do conteúdo da direita para a
fixo, 277
esquerda, 400 valor
fluido, 277-278
inicial , 403 não ordenado (ul),
A Liga dos Tipos Móveis, 355-356
398–400 atributo de
“Aprendendo SVG”,
valor , 403 propriedades de estilo de lista ,
elemento de legenda 487,
configuração, 407 propriedade de tipo
espaçamento entre letras 426–427,
de
configuração, 264 elementos li (item da
estilo de lista , 401 atributo de áudio de loop , 471
lista), quebra de linha 398–400,
atributo de vídeo, 454
criação, 133, altura da linha 137,
valor minúsculo , usando com transformação de texto,
configuração, espaçamento entre linhas 255, fixação, 123
270
Índice 539
M Mobile Boilerplate, 347, 350 ferramentas

de codificação móvel, 346
esquema mailto , 20
dispositivos móveis, suporte HTML5 e CSS3 para, 351 design
Marcotte, Ethan, valor
“mobile
automático
first”, 332 telefones celulares. Veja
de margens 331 , configuração
também estilo básico de design da Web responsivo, 340
302–303 em torno dos elementos, valores de
construção
configuração 302–303 para, 301
de linha de base para,
elemento de marca , 116–117
341–342 construção para desktop, 342
marcadores. Veja também marcadores personalizados
construção de sites para, 328–332
escolhendo para listas, 401
páginas de teste em, 347 janela de
controlando suspensão, 406 valor
visualização do Mobile Safari,
interno , 406 valor
335 biblioteca Modernizr JavaScript, 287,
externo , 406
348, 377 fonte monoespaçada, renderização, 129 biblioteca
marcação, definida, 1, 6. Consulte também elemento matemático
JavaScript MooTools, 498 prefixo -moz- , 373,
de marcação HTML , 129
378–379 formato de arquivo de áudio MP3,
elemento mathML , 129
468
propriedade max-width , configuração, 299
McLellan, Drew, 483
MP4
@media at-rule, usando folhas de estilo, 208–209 consultas de mídia
formato de arquivo de áudio,
construindo páginas
468 formatos de arquivo de vídeo,
com adaptação, 349–350 encadeamento de recursos e
452 prefixo -ms- , 373
valores, 336 conteúdo e HTML, 340–341
arquivos multimídia, obtenção, 480 recursos
declarações em regras, 338 definição, 336–
multimídia, 487 silenciados
337 implementação de design, 341–
342 layout em evolução,

atributo de áudio, 471
343–346 exemplos, 334–336, 344–345 recurso:
atributo de vídeo, 454
par de valores, 335 recursos de, 333–
Minhas Fontes, 356
334
N
iPhone 4, parte elemento de navegação , 64–67
nos cabeçalhos, 63
lógica 351, largura
mínima de 335 e largura máxima, 348 aninhamento de links, 64
Navegador Opera Mobile 11, 351 estilos colocação de links de rodapé, 65

restrições, 65
de renderização no Internet Explorer, sintaxe 348, porção
de tipo 334–336, recurso atributo de função , 64
de largura 335 , 338 usando com leitores de tela, 65 links de

empacotamento, 66–67 navegação
fontes de mídia, elemento de origem , 460 folhas de com teclado,
estilo específicas de mídia, 208–209 metaelemento , 170 marcação, 64–67 Neal,
339 Jonathan, 123, 290,
elemento medidor
466 listas aninhadas. Veja também listas
versus elemento de progresso , 143

usando, 142–143 navegação suspensa, 411 :
Meyer, Eric, 290 min pseudoclasse hover , seletores

411, estilo 409, 408–
de altura versus altura, 300
Conversor de vídeo Miro, 452 411
Índice 540
nenhum valor, usando com text-transform, recursos online (continuação)

270 normalize.css, 123, 290– formulários, 428
291 Editor de texto Notepad, usando, Google Apps, 518
28–30 Leitor de tela NVDA, 91 Compilador de fechamento do Google, 501
Fontes da Web do Google, 356
O Suporte graduado ao navegador, 518
Formatos de arquivo de vídeo Ogg Theora, 452 fundos gradientes, gerador de
Formato de arquivo de áudio Ogg Vorbis, 468 gradiente 392, 393
ol (lista ordenada) Freio de mão, 452
Números arábicos, 409 hasLayout, 395
criando, 398–400 tipos Formulários HTML, 428
de marcadores, 402 HTML Lint, 515
usando com links, 65 “Tela HTML5: o básico”, 487
evento onblur JavaScript, 503 evento Vídeo HTML5, 487

Novos recursos do HTML5, 448
onchange JavaScript, 503 evento onclick
JavaScript, 503 evento ondblclick Simulador iOS, 347
JavaScript, 503 Eventos JavaScript, 504
Apresentação “One Web”, 332 evento Bibliotecas JavaScript, 498
onfocus JavaScript, 503 evento Biblioteca jQuery JavaScript, 498
onkeydown JavaScript, 503 evento Jogador JW, 463
onkeypress JavaScript, 504 evento onkeyup A Liga dos Tipos Móveis, 355-356
JavaScript, 504 recursos online “Aprendendo SVG,” 487

Reinicialização de Meyer, 290
320 e superior, 351 Conversor de vídeo Miro, 452
Criador de links da Apple, 177 Boilerplate móvel, 347, 350 dispositivos
Especificação ARIA, 91
móveis, 351 design “mobile
BOM, first”, 332
compatibilidade de 32 navegadores,
Modernizr, 287, 348, 377
375 ferramentas de desenvolvedor de navegador, 507 Biblioteca JavaScript MooTools, 498
Editor de texto Coda, 29 multimídia, 487
valor de colapso para visibilidade, 326 MyFonts, 356
Gerador de gradiente do ColorZilla, 393 normalizar css, 123
comentários condicionais, 351 Apresentação “Uma Web”, 332
Licenças Creative Commons, 152 Linguagem do lado do servidor PHP, 422
Verificação de erros CSS, 515 polyfills, 377
Truques CSS, 395 ProtoFluido, 347
Gerador CSS3, 374 idiomas da direita para a esquerda,
Seletores CSS3, 239 141 script showform.php , 420
ferramentas de SitePoint, 520
desenvolvedor, 507 Electric Mobile Simulator para Estouro de pilha, 520
Windows, 347 manipuladores Editor de texto sublime, 29

estruturas de tabela, 489
de eventos, 504 Firebug para
Firefox, 212 Font Squirrel, 355–356, 358, 366 editores de texto, 29
serviço Fontdeck, 356 serviço TextMate, 29
Fonts.com, 356 FontShop, 356 TextWrangler, 28
Fontspring, 361 Serviço Typekit, 356–357, 359 código de

validação, 515
Índice 541
recursos online (continuação) vídeo, -sufixo direito , 305

487 -sufixo superior , 305
conversores de vídeo, 452 construções de página
“Vídeo para todos”, 466 informação, 60
Gerador de vídeo para todos, 466 layout, 60
“Vídeo na Web”, 487 semântica, 60
Espécime de fonte da Web, 357 páginas. Veja páginas HTML; Parágrafos de
Serviço WebINK, 356 páginas da
WebVTT (faixas de texto de vídeo da Web), 467 Web por
“WebVTT e legendas de vídeo,” 487 elemento, 10
Wufoo, 448 elementos em , 10
Vídeo do YouTube, 484 inspeção, 511
Compressor YUI, 501 marcação, 10 início,
Biblioteca YUI JavaScript, 498 100–101 pais e filhos, 15 caixas
evento JavaScript onload , 504 evento de senha, criação, 431 senhas, proteção,
JavaScript onmousedown , 504 evento 431 padrões, localização, 433
JavaScript onmousemove , 504 evento Pfeiffer, Silvia, 487
JavaScript onmouseout , 504 evento Photoshop , 153–155
JavaScript onmouseover , 504 evento localização de tamanhos
JavaScript onmouseup , 504 evento de imagem, 159 maquetes, 359
JavaScript onreset , 504 evento imagens em
JavaScript onselect , 504 evento escala, 161 linguagem
JavaScript onsubmit , 504 opacidade, PHP do lado do servidor, 421–423 frases,
configuração de elementos, 394–395 citações, 114 pixels, 149
Ópera valor de
Dragonfly, 507 sites espaço reservado, representação, 129 espaços
de verificação, 518 lista reservados versus rótulos, 434 arquivo
ordenada (ol) player.swf , 463 plug-ins,
Algarismos arábicos, 409 18, 451 formato
criação, 398–400 tipos PNG, 148
de marcadores, 402 uso transparência alfa, 151 cores,
com links, 65 149
algoritmo de contorno, 57 sem perdas,
elementos de formulário de saída , 151 polyfills, usando para aprimoramento progressivo,
448 overflow, tratamento por navegadores, 320–321 376-377
valor automático da posição: absoluta, 316 posição:

propriedade fixa, 317 posição: relativa,
overflow , 320 valor 314–316 posição: estática, 317
oculto , 320 valor de rolagem , 320 posicionamento, relativa, 314–
valor visível , 320–321 315 imagens de pôster, especificando
para vídeos, 457. Veja também o atributo de vídeo do pôster
P de imagens ,
454 Powers, Shelley, 487 pré-
elemento p , usando, 100
elemento, 130–131
marcação relacionada à
preenchimento adicionando elementos, 304–305 -
matemática, 129 usando com
sufixo inferior, 305
propriedade de espaço em branco , 267
-sufixo esquerdo , 305
Índice 542
atributo de Resig, João, 287

áudio de pré-carregamento , recursos
471, 473 atributo de vídeo, 454, 458 320 e superior, 351
imprimir, fino, 132 Criador de links da Apple, 177
elemento de progresso Especificação ARIA, 91
versus elemento medidor , 143 BOM,
usando, 144–145 compatibilidade de 32 navegadores,
aplicação de aprimoramento 375 ferramentas de desenvolvedor de navegador, 507
progressivo, 330–331 Editor de texto Coda, 29
Site de drible, 376 valor de colapso para visibilidade, 326
usando polyfills para, 376–377 Gerador de gradiente do ColorZilla, 393
pronúncia, indicando, 138 ProtoFluid, comentários condicionais, 351
baixando, 347 pseudoclasses, 229 . Veja Licenças Creative Commons, 152
também atributo de classe : ativo, 231 Verificação de erros CSS, 515
Truques CSS, 395
:passar o mouse, 231 Gerador CSS3, 374
pseudo-elementos. Veja também elementos ::depois, Seletores CSS3, 239
229 ::antes, 229 ferramentas de desenvolvedor, 507
Simulador Móvel Elétrico para Windows, 347
::primeira letra, 229 manipuladores de eventos, 504
::primeira linha, 229 Firebug para Firefox, 212
atributo pubdate , 106–107 Esquilo Fonte, 355–356, 358, 366
especificando, 109 Serviço Fontdeck, 356
usando com tempo, 109 Serviço Fonts.com, 356
FonteShop, 356
P Fontspring, 361
elemento q , 114–115 formulários, 428
citações Google Apps, 518
delimitando valores de atributos, 510 usando Compilador de fechamento do Google, 501
com nomes de fontes, 243 frases de Fontes da Web do Google, 356
citação, Suporte graduado ao navegador, 518
114 texto, 113– fundos gradientes, gerador de

115 gradiente 392, 393
Freio de mão, 452
R hasLayout, 395
Formulários HTML, 428
gradientes radiais, 391
botões de opção HTML Lint, 515
“Tela HTML5: o básico”, 487
criando, 436–437 atributo
Vídeo HTML5, 487
de nome , 436
Novos recursos do HTML5, 448
atributo de valor , 436–437
Simulador iOS, 347
atributo somente leitura , usando com campos ocultos, 443
Eventos JavaScript, 504
referências, indicando, 112
Bibliotecas JavaScript, 498
expressões regulares, uso de, 433
Biblioteca jQuery JavaScript, 498
posicionamento relativo, 314–315
URLs relativos Jogador JW, 463
A Liga dos Tipos Móveis, 355-356
versus URLs absolutos, 21–23 usando,
“Aprendendo SVG,” 487
169
Reinicialização de Meyer, 290
Índice 543
recursos (continuação) Cor RGBA, atributo de

Conversor de vídeo Miro, 452 função 193–196 , usando com elemento nav , 64
Boilerplate móvel, 347, 350 definição de role="banner" , 89
dispositivos móveis, 351 definição de role="complementar" , 90
design “primeiro móvel”, 332 role="contentinfo," usando com elemento de
Modernizr, 287, 348, 377 rodapé , 81
Biblioteca JavaScript MooTools, 498 definição de role="contentinfo" , 90
multimídia, 487 role="main," usando com elemento article , 69 role="main"
MyFonts, 356 definição, 89 role="navigation"
normalize css, 123 definição, 89 elemento rp , 138–139
apresentação “One Web”, 332 elemento rt , 138–139
linguagem PHP do lado do servidor, 422 elemento ruby , 138–139
polyfills, 377
ProtoFluid, 347
idiomas da direita para a esquerda, S
141 script showform.php , 420 elemento s , 126–127
SitePoint, 520 Safári
Stack Overflow, 520 verificando sites em, 518
Sublime Text editor, 29 Inspetor da Web, 507
estruturas de mesa, 489 elemento samp , 129
editores de texto, 29 salvando
TextMate, 29 imagens animadas, 151
TextWrangler, 28 alterações em documentos, 35
Serviço Typekit, 356–357, código de favicons, 163
validação 359, vídeo 515, arquivos como UTF-8, 45
conversores imagens, 154–155, 519
de vídeo 487, 452 Páginas da web, 30–32
“Vídeo para todos”, 466 Acoplamento de gráficos vetoriais
Gerador de vídeo para todos, 466 escaláveis (SVG) com vídeo, 486
“Vídeo na Web”, 487 Fontes da web, 354
Espécime de fonte da Web, 357 dimensionamento
Serviço WebINK, 356 de imagens com
WebVTT (faixas de texto de vídeo da Web), 467 navegador, 160 com editor
“WebVTT e legendas de vídeo,” 487 de imagens, 161 com
Wufoo, 448 Photoshop, 161 leitores de
Vídeo do YouTube, 484 tela, 12, 54 disponibilidade de, 91
Compressor YUI, 501 MANDÍBULAS, 91
Biblioteca JavaScript YUI, 498 suporte de função de referência, 91

Script respond.js , 348, 351 Web elemento de navegação , 65
design responsivo, 331–332, 341–342. NVDA, 91
Consulte também telefones VozOver, 91
celulares definindo estilos para pontos de práticas recomendadas
interrupção, layout baseado para elementos de
em grade 343, imagens e script , 501 comportamento
mídia 331, consultas de mídia de bloqueio, 501
331, larguras de 331, 343 pixels, 343, 346 processamento, 502 </script>
atributo invertido , 400 end tab, 502 atributo src , 499
Cor RGB, 191
Índice 544
práticas recomendadas de script, 501 remoção de

scripts versaletes, 271
adicionando incorporados, 502 uso, 271
Compilador de fechamento do Google, elemento pequeno , 8, 132
501 carregando externo, 499 Sneddon, Geoffrey, 52
Compressor YUI, 501 Snook, Jonathan, código fonte
otimização de mecanismo de pesquisa (SEO), 12 254, salvando, 40
elemento de seção elemento de origem
versus elemento artigo , 69, 73, 283 exemplo, 74 atributo de mídia , 460
terminologia, 50 atributo de tipo , 460
usando, 72–74 usando com múltiplas mídias, 460 usando
usando com com elemento de vídeo , 461–462 controle de
role="main", 69
seções, definindo, 72–74 servidor espaçamento, 264 fixação
seguro, usando, 431 entre linhas, 123 elemento span
Seddon, Ryan, 377 caixas versus elemento
de seleção div , 85 usando, 134 spans,
criação, 438–439 opções criação, 134–
de agrupamento, 439 elemento 135
de opção , 438–439 elemento de atributo src
seleção , 438 atributo de áudio, 471
tamanho , 438–439 conteúdos, 15
seletores. Veja também seletores de atributos vídeos, 454, 460
combinação, 238–239 Stack Overflow, recursos da Web, 520
construção, 214–215 ordem de empilhamento, especificando, 315,
agrupamento, 237 317 tags iniciais, incluindo em elementos, 13
semântica tachado, aplicando, 126 elemento
acessibilidade, 11 forte , 110
exibição de HTML, 12 elemento versus b , elemento
importância de, 11–12 110 versus i , 110 versus
leitores de tela, 12 ponto marca, 117
e vírgula (;), uso com propriedades CSS, 205 SEO (otimização aninhamento,
de mecanismo de pesquisa), 12 servidor, 110 elemento de estilo , regras @import in, 206
transferência de arquivos para, 525–528 lado do regras de
servidor vs. lado, 421 estilo adicionando comentários, 182–183
Sexton, Alex, 377 em cascata, 185–187
calços, usando para aprimoramento progressivo, construção, 181
376-377 criação, 237
script showform.php , download, barra lateral 420, blocos de declaração, 181
além de, 76–77 simuladores, uso herança, 185-186
com dispositivos móveis, 347 SitePoint, 520 localização de, 187
seletores, 181
sites especificidade, 186–187
HTML 5 Outliner, 52 folhas de estilo. Consulte também folhas de estilo externas
carregamento, alternativas, 210–211
528 planejamento, declaração @charset , 199
26 esboço, 26–27 redefinição de CSS, 290
Índice 545
folhas de estilo (continuação) estruturação, 490–493

incorporadas, 202–203 elemento tbody , 491
externas, 198–200 links elemento td , 490
para, 201 elemento tpé , 491
específicas de mídia, 208–209 elemento thead , 491
nomenclatura, elemento tr , 490
199 organização em pastas, 370 atributo target , 171 cabines
estilos persistentes, 210 telefônicas, criação, 432–433 termos, definição, 120
estilos preferenciais, 210–211 navegadores de teste, 518
renderização de títulos em, 7
estilos . Consulte também estilos padrão; layout com estilos
Páginas HTML, 516–517
aplicação a grupos de elementos, 236–237 localização de, versões locais de sites, 517 técnicas
206–207 estilos-480.css, de teste que habilitam
estilos em, 333 subelemento , 121–122 recursos do navegador, 509 uploads de
editor de texto sublime, 29 arquivos, 508–509 salvamento
botão enviar de arquivos, 509
Entrada de URL,
elemento de botão , 445 código de validação 509, 508
criando, 444–445 com texto
imagem, 444 rotulagem, adição de sombras projetadas, 382–383

445 par nome/ alinhamento, 268–269
valor, 445 subscritos, criando, alternância, 157
121–122 elemento sup , 121–122 decoração, 272–273 exclusão,
sobrescritos, criando, 121–122 124 ênfase, 110
destaque, 116–117
SVG (Scalable Vector Graphics) acoplamento inserção, 124 marcação
com vídeo, 486 importante, 110
Fontes da Web, 354 anotação de imprecisões, 124–
conteúdo distribuído, gerenciamento de, 57 destaque de 127 citação, 113–115 removendo
sintaxe, uso, 39, 506 decorações, 273
usando pré-formatado, 130–131
T
áreas de texto
Tecla Tab, pressionando, 170
elementos de tabela , 489 cols, 441
tabelas criação, 441
bordas para células de dados, 492 caracteres máximos, 441 maxlength,
texto de legenda , 490 441 linhas, 441
células, 490 fundo de
atributo colspan , 494–495 figcaption, texto, alteração, 260–263 caixas de texto
493 cabeçalhos, 490

preenchimento, atributo autofocus , 430 criação,
492 linhas, 490 428–430 atributo
atributo maxlength , 430 atributo name ,
rowspan , 494–495 atributo de 428 atributo placeholder ,
escopo , 490, 493 abrangendo 429–430 atributo obrigatório , 429
colunas e linhas, 494–495
Índice 546
caixa de texto, alteração, conteúdo recursos, 520

de texto 270, 16–17. Veja também editores de arquivos de salvamento,
texto de conteúdo 509 técnicas, 520
escolhendo codificação, 32 entrada de URL,
extensões padrão, 32 usando, 509 código de validação,
28–29 propriedade 508 fontes TrueDoc Web, 354
de decoração de texto , 272–273 fontes .ttf (TrueType) Web, 354, 359 serviço
Editor TextMate, 29–30 Typekit, 356–357, 359 erros de digitação,
escolha de formato correção, 510–511
somente texto,
32 salvar páginas da Web, 30 EM
propriedade text-shadow , 382–383 você elemento, 136

propriedade text-transform , 270 Uggedal, Eivind, 350 ul (lista
Download do não ordenada)
TextWrangler, 28 usos, criando, 398–400 usando
28 imagens com links, 65
em miniatura, vinculação, 177 tempo, Ullman, Larry, 422
especificação, 106–109 elemento Unicode, 16
de tempo , 106–107 valor maiúsculo , usando com transformação de texto,
restrições, 109 270
usando com pubdate, atributo Caixas de URL, criação, 432–433
de título 109
URLs (Uniform Resource Locators), 20–23 absoluto
adicionando elementos, 95 versus relativo, 21–23 criação, 175–177
versus elemento título , 95 esquema de arquivo ,
usando com elemento abbr , 118 20
usando com elemento dfn , 120 esquema http , 20
elemento title , 4 letras minúsculas, 170
melhores práticas, 47 esquema mailto , 20
mensagens principais, esquema, 20
47 posicionamentos, nome do servidor, 20
46 restrições, 47 barras finais, 20 usando citação
caracteres especiais, 47 versus e citação com, 114 visitas, 528
atributo de título , 95 títulos
instruções de entrada do usuário, marcação, 129

criação, 46–47 Escolha de codificação
comprimento de, UTF-8, 32
46 usando como texto vinculado, salvando arquivos, 45
46 rótulos de dicas de ferramentas,
adição, 95 evento touchend JavaScript, EM
504 evento touchmove JavaScript, 504

código de validação, elemento var
evento touchstart JavaScript, 504 solução de
514–515 , 129 prefixos
problemas
de fornecedor, 373–374 valor de
CSS, 512–513
linha de base da propriedade de
habilitando recursos do navegador, 509
alinhamento vertical , 322
uploads de arquivos, 508–509
valor inferior , 322 valor
HTML, 510–512
médio , 322
imagens, 519
subvalor , 322
Índice 547
propriedade vertical-align (continuação) super recursos de

valor, 322 valor inferior viewports de, 339
do texto , 322 valor superior do meta elemento, 339
texto , 322 valor superior , propriedade de visibilidade , 324
322 vídeo valor de recolhimento , 326
valor oculto , 326
adição a páginas da Web, 453 links visitados , 230
adição com substitutos de Flash, 463–466 visitantes, permitindo upload de arquivos, 442
atributo de reprodução automática , Visscher, Sjoerd, 287

455–456 Leitor de tela VoiceOver, 91
livros, 487 atributo de controles , elementos vazios, omitindo tags finais de, 511
455–456 acoplamento com SVG (Scalable Vector
Gráficos), 486 EM
incorporação do YouTube, 484 WAI-ÁRIA. Consulte ARIA (Aplicativos Ricos para Internet
substitutos de hiperlink, 461–462 Acessíveis)
looping, 457 Formato de arquivo de áudio WAV, 468
fontes múltiplas, 459 elemento wbr , 137
elemento de objeto para substitutos de Flash, 463–466 Designer de Web. Consulte Web design responsivo
recursos on-line, 487 Web Font Specimen, 357 fontes
atributo preload , 454 evitando da Web. Veja também fontes
pré-carregamento, 458 especificando
formatação em negrito, suporte
imagens de pôster, 457 usando com
a navegador 366–369,
elemento canvas , 485 arquivo demo.html 355,
atributos de vídeo
download 358–359, 358–
reprodução automática,
359 .eot (OpenType incorporado), 354
454–456 reprodução automática recursos de, 354
e loop, 457 controles, 454–456
tipos de arquivo,
altura, 454 loop,
354 localização, 356–
454 357 recurso @font-face , 355
silenciado,
incorporação em páginas da Web, 361–362
454 pôster, 454
formatação em itálico, 366–369
pré-carregamento,
questões legais, 355
454 src, 454, 460
gerenciamento de tamanhos de
largura, 454
arquivo, 365–
elemento de vídeo , usando com elemento de origem ,
369 qualidade,
461–462
357 renderização,
formatos de arquivo de vídeo
357 auto-hospedagem, 356 serviços, 356–357, 370
convertendo entre, 452 H.264, estilo, subconjunto
452 MP4, 452
365–369, 365–366 .svg
Ogg Theora,
(gráficos vetoriais escaláveis), 354 TrueDoc,
452 WebM, 452–453, 354
455, 457
.ttf (TrueType), 354, 359
“Vídeo para todos”, 466 usando, 362–364
Gerador de vídeo para todos, 466 usando para manchetes,
“Vídeo na Web”, 487
369 .woff (formato de fonte aberta da Web), 354
Comando Exibir fonte, usando, 39
Índice 548
Hospedeiro Recursos da Web (continuação)

conexão ao domínio, 524 busca de Electric Mobile Simulator para Windows, 347 manipuladores
sites, 523–524 Web Open Font de eventos, 504 Firebug
Format (.woff), 354 páginas da Web. Veja para Firefox, 212 Font Squirrel,
também página padrão; documentos; Artigo de páginas HTML 355–356, 358, 366 serviço Fontdeck, 356
versus elementos serviço Fonts.com, 356
de seção , 283 FontShop, 356 Fontspring, 361
recursos relacionados ao plano de fundo, 261 formulários, 428
entradas de blog, 283 Google Apps, 518
comentários, 282 Google Closure
componentes, 24 Compiler, 501 Google
contêineres, 279 WebFonts, 356 Graded Browser Support,
conteúdo, 24 518 fundos gradientes, 392
criação, 28–29 divs, gerador de gradiente, 393 HandBrake,
279 452 hasLayout, 395 formulários
edição, 35 HTML, 428
árvores genealógicas,
15 referências de arquivo, 1
elemento de rodapé , 279
elemento de cabeçalho , HTML Lint, 515
279 elementos de título, 282 “Tela HTML5: o básico”, 487
HTML, 2 Vídeo HTML5, 487
marcações, marcação Novos recursos do HTML5, 448
283, 1 Simulador iOS, 347
conteúdo de ordenação, Eventos JavaScript, 504
salvamento 282, Bibliotecas JavaScript, 498
estrutura 30–32, 279–283 Biblioteca jQuery JavaScript, 498
conteúdo de texto, 1, 16–17 Jogador JW, 463
visualização em navegadores, 37–38 A Liga dos Tipos Móveis, 355-356
Recursos da web “Aprendendo SVG,” 487
320 e superior, 351 Reinicialização de Meyer, 290
Criador de links da Apple, 177 Conversor de vídeo Miro, 452

Especificação ARIA, 91 Boilerplate móvel, 347, 350 dispositivos
BOM, móveis, 351 design “mobile
compatibilidade de 32 navegadores, first”, 332
375 ferramentas de desenvolvedor de navegador, 507 Modernizr, 287, 348, 377
Editor de texto Coda, 29 Biblioteca JavaScript MooTools, 498
valor de colapso para visibilidade, 326 multimídia, 487
Gerador de gradiente do ColorZilla, 393 MyFonts, 356
comentários condicionais, 351 normalizar css, 123
Licenças Creative Commons, 152 Apresentação “Uma Web”, 332
Verificação de erros CSS, 515 Linguagem do lado do servidor PHP, 422
Truques CSS, 395 polyfills, 377
Gerador CSS3, 374 ProtoFluido, 347
Seletores CSS3, 239 idiomas da direita para a esquerda,
ferramentas de desenvolvedor, 507 141 script showform.php , 420
Índice 549
Recursos da Web (continuação) Vídeos WebM

SitePoint, 520 reprodução automática e loop,
Estouro de pilha, 520 457 atributo de reprodução
Editor de texto sublime, 29 automática , 456 atributo de controles , 455
estruturas de tabela, 489 descrito, 454 sem
editores de texto, 29 controles, 453
TextMate, 29 WebVTT (faixas de texto de vídeo da Web), 467
TextWrangler, 28 “WebVTT e legendas de vídeo,” 487
Serviço Typekit, 356–357, código de propriedades de espaço em branco, configuração,
validação 359, vídeo 515, largura 266–267:
487 propriedade propriedade
conversores de vídeo, 452 automática ,
“Vídeo para todos”, 466 configuração 300, atributo de vídeo
Gerador de vídeo para todos, 466 de largura 298–299 , 454 .woff (formato de
“Vídeo na Web”, 487 fonte aberta da Web), 354 processadores de texto,
Espécime de fonte da Web, 357 evitando o uso de, espaçamento de
Serviço WebINK, 356 29 palavras, configuração, 264 Wroblewski, Lucas, 332, 351
WebVTT (faixas de texto de vídeo da Web), 467
“WebVTT e legendas de vídeo,” 487 X
Wufoo, 448 Documento XHTML estrito, DOCTYPE para, 45
Vídeo do YouTube, 484
Compressor YUI, 501 E
Biblioteca JavaScript YUI, 498
Vídeo do YouTube, incorporação, 484
Sites
Compressor YUI, 501
HTML 5 Outliner, 52
Biblioteca JavaScript YUI, 498
carregamento,
Formato AAAA-MM-DD , 108
528
planejamento, 26 esboço, 26–27
COM
Serviço WebINK, prefixo

propriedade do índice z , 315, 317–319
356 -webkit- , 373, 378–379
Índice 550
Referência HTML
Nas páginas seguintes, você encontrará uma lista Elementos e atributos que possuem novos ou
dos elementos e atributos HTML significado adicional de acordo com HTML5 foi
descrito neste livro. Cada elemento tem marcado com um asterisco (*).
uma breve descrição e uma lista anotada de seus
Os novos recursos do HTML5 não são suportados
atributos associados.
em alguns navegadores mais antigos. Para
HTML5 introduziu uma série de novos obter informações adicionais sobre o que
navegadores suportam esses recursos,
elementos e atributos, e também redefiniu alguns recomendamos que você consulte
elementos cujo uso
caniuse.com e findmebyip.com/litmus.
o W3C havia desencorajado na especificação Também é possível usar JavaScript para
(X)HTML anterior. Novos elementos e atributos do detectar muitos desses novos recursos,
HTML5 foram
usando bibliotecas como Modernizr (www.modernizr.com).
marcado na coluna Versão com um “5”.
TABELA A.1 Elementos e Atributos HTML

Descrição do elemento/atributo(s) Versão
--A maioria dos ELEMENTOS-- Os seguintes atributos podem ser usados com a maioria dos elementos HTML
chave de acesso Para adicionar um atalho de teclado a um elemento
ar-* Para associar valores de atributos de acessibilidade especificados por WAI-ARIA 5
aula Para identificar um conjunto de elementos para aplicar estilos a eles
contenteditable Para tornar o conteúdo de um elemento editável 5
menu contextual Para identificar um menu contextual para um elemento (o valor deve ser igual ao atributo 5
id de um elemento de menu )
dados-* Para armazenar dados personalizados que são privados da página ou aplicativo 5
tabela continua na próxima página

Tabela A.1 continuação
você Para especificar a direção do texto do elemento
arrastável Para tornar um elemento arrastável 5
ponto de largada Para identificar um elemento como um local onde elementos arrastáveis podem ser soltos 5
evento Para associar um elemento a um script (o evento é um espaço reservado para o nome
real do evento)
escondido Para indicar que um elemento ainda não é relevante ou não é mais relevante 5
eu ia Para identificar um elemento específico para que ele possa ser vinculado, estilizado ou
programado com JavaScript
apenas Para especificar o idioma em que um elemento é escrito
papel Para fornecer informações adicionais a dispositivos assistivos sobre a função de um elemento 5
conforme definido por WAI-ARIA
corretor ortográfico Para indicar se o conteúdo de um elemento deve ter sua ortografia e gramática verificadas 5
estilo Para adicionar informações de folhas de estilo locais
índice de tabulação Para definir a ordem em que a tecla Tab conduz o visitante pelos elementos
título Para rotular elementos com dicas de ferramentas
a Para criar links e âncoras
href Para especificar o URL de uma página ou o nome de uma âncora para onde um link vai
hreflang Para especificar o idioma do recurso vinculado 5
meios de comunicação Para descrever a mídia para a qual o documento de destino foi definido 5
rel Para identificar a natureza do link

*
alvo Para especificar a janela ou iframe onde um link deve abrir
tipo Para anotar o tipo MIME de um recurso

*
abreviatura Para explicar o significado de abreviaturas e siglas
endereço Para identificar informações de contato do artigo ou órgão mais próximo

ancestral do elemento
área Para especificar as coordenadas dos mapas de imagem
chave de acesso Para adicionar um atalho de teclado a uma região específica do mapa
tudo Para fornecer informações sobre uma área
coordenadas Para fornecer as coordenadas de uma área em um mapa de imagem
href Para especificar o URL de destino de um link em uma área de um mapa de imagem
hreflang Para especificar o idioma do recurso vinculado 5
A2 Apêndice A
meios de comunicação
Para descrever a mídia para a qual o documento de destino foi definido 5
rel Para identificar o tipo de link
forma Para especificar a forma de uma área em um mapa de imagem

*
alvo Para especificar a janela ou iframe onde um link deve abrir
artigo Para identificar uma composição independente em uma página que é, em princípio, 5
distribuível ou reutilizável de forma independente
aparte Para identificar uma seção de uma página que consiste em conteúdo 5
tangencialmente relacionado ao conteúdo ao seu redor
áudio Para incorporar som ou áudio em uma página 5
Reprodução automática Para dizer ao navegador para começar a reproduzir o arquivo de áudio assim que possível 5
controles Para dizer ao navegador para fornecer controles para o elemento de áudio 5
origem cruzada Para definir credenciais de solicitação de origem cruzada 5
laço Para dizer ao arquivo de áudio para recomeçar sem interrupção ao chegar ao fim 5
grupo de mídia Para associar vários arquivos de mídia 5
silenciado Para controlar o estado padrão da saída de áudio 5
pré-carregamento Para especificar se o navegador pode começar a baixar o arquivo de áudio antes que o 5
visitante comece a reproduzi-lo
fonte Para identificar o URL do arquivo de áudio a ser reproduzido 5
*
b Para identificar um trecho de texto para o qual a atenção está sendo atraída para
fins utilitários, sem transmitir qualquer importância extra e sem implicar uma voz ou humor
alternativo
base Para especificar o URL base da página
href Para especificar o URL a ser usado para gerar URLs relativos
*
alvo Para especificar o destino padrão para os links na página
bdi Para identificar uma extensão de texto que deve ser isolada do seu entorno para fins de 5
formatação de texto bidirecional
você Para especificar a direção do texto 5
bdo Para formatar explicitamente a direção do texto de seu conteúdo
você Para especificar a direção do texto
bloco de citação Para identificar uma seção citada de outra fonte
citar Para fornecer o URL da fonte
corpo Para incluir a área de conteúdo principal de uma página
br Para criar uma quebra de linha
Referência HTML A3
botão Para criar botões
auto-foco Para especificar que o botão deve ser focado assim que a página for carregada 5
desabilitado Para indicar que o elemento não está disponível no estado atual
forma Para associar o elemento a um formulário do qual não faz parte 5
formação Para substituir o atributo action do formulário 5
tipo de forma Para substituir o atributo enctype do formulário 5
método de formulário Para substituir o atributo de método do formulário 5
formnovalidate Para substituir o atributo novalidate do formulário 5
formuláriotarget Para substituir o atributo de destino do formulário 5
nome Para identificar os dados enviados com um botão ou para identificar o próprio botão
(talvez para uma função JavaScript)
tipo Para usar o botão em um elemento de formulário
valor Para especificar os dados que devem ser enviados quando o botão é clicado
tela Para fornecer aos scripts uma tela de bitmap dependente da resolução para 5
renderização de gráficos em tempo real
largura altura Para especificar o tamanho da tela 5
rubrica Para criar uma legenda para uma tabela
citar Para marcar o texto como uma citação
código Para marcar texto como código de computador
coluna Para unir colunas de uma tabela em um grupo não estrutural
período Para especificar o número de colunas em um grupo de colunas
grupo de grupos Para unir colunas de uma tabela em um grupo de colunas estruturais
período Para especificar o número de colunas em um grupo de colunas
comando Para representar um comando que o usuário pode invocar, como definir um comando 5
de teclado
verificado Para indicar o estado verificado do comando (se o tipo de comando for “checkbox” ou “radio”) 5
desabilitado Para indicar que o comando não está disponível no estado atual 5
ícone Por fornecer uma imagem que representa o comando 5
rótulo Para mostrar o nome do comando ao usuário 5
grupo de rádio Para identificar os botões de opção que serão alternados quando o comando for alternado 5
(se o tipo de comando for “rádio”)
tipo Para indicar o tipo de comando 5
A4 Apêndice A
lista de dados Para conter um grupo de elementos de opção que representam um conjunto predefinido de 5
opções para outro controle de formulário
dd Para marcar uma definição em uma lista
detalhes Para criar um widget de divulgação a partir do qual o visitante pode obter informações 5
ou controles adicionais
Para especificar se o elemento está aberto ou fechado por padrão 5

abrir
do Para marcar texto excluído
citar Para fazer referência a um URL que explica a alteração
data hora Para especificar a hora e a data da alteração
dfn Para especificar a instância definidora de um termo
título Para fornecer a definição do termo
divisão Para dividir uma página em seções de nível de bloco
dl Para criar uma lista de definições
dt Para marcar um termo a ser definido em uma lista

*
em Para marcar texto com ênfase em ênfase
*
Embutir Para adicionar multimídia
fonte Para especificar o URL de um arquivo multimídia
tipo Para identificar o tipo MIME do arquivo multimídia
largura altura Para especificar o tamanho do reprodutor multimídia incorporado
conjunto de campos Para agrupar um conjunto de elementos de formulário
desabilitado Para desabilitar todos os controles de formulário no conjunto de campos 5
nome Para fornecer ao conjunto de campos um nome para uso posterior 5
figcaption Para identificar uma legenda ou legenda para o conteúdo de sua figura pai 5
elemento
figura Para identificar conteúdo que é referenciado no fluxo principal do documento, mas que 5
poderia ser movido para outro lugar sem afetar o fluxo do documento
rodapé 5
Para identificar um rodapé para o corpo, seção, artigo ou elemento lateral ancestral mais próximo
forma Para designar um formulário para coletar dados para envio
aceitar-charset Para identificar a codificação de caracteres a ser usada no envio do formulário (o padrão é o
conjunto de caracteres da página)
Ação Por fornecer a URL do script que irá processar os dados do formulário
Referência HTML A5
autocompletar Para evitar que o navegador forneça/lembre valores de preenchimento automático quando o 5
atributo estiver definido como “off” (o padrão é “on”; ou seja, o preenchimento automático
é permitido por padrão)
tipo de código Para garantir que os arquivos sejam enviados ao servidor no formato adequado
método Para especificar como os dados devem ser enviados ao servidor
nome Para fornecer um nome ao formulário para uso posterior
novalidar Por permitir que o formulário seja enviado sem validação 5
*
alvo Para identificar a janela alvo ou iframe do envio do formulário
h1, h2, h3, h4, h5, h6 Para criar títulos
cabeça Para criar a seção head , que contém informações sobre a página, incluindo título, autor,
palavras-chave, folhas de estilo e scripts
cabeçalho Para identificar um grupo de conteúdo introdutório ou auxílio à navegação 5
hgrupo Para identificar o título de uma seção quando um título tem vários níveis 5
*
horas
Para identificar uma quebra temática no nível do parágrafo
HTML Para identificar um documento de texto como um documento HTML
manifesto Para especificar um manifesto de cache do aplicativo usado quando a página está offline 5
*
eu
Para marcar um trecho de texto com voz ou humor alternativo ou que esteja de outra forma
deslocado da prosa normal de uma maneira que indique uma qualidade de texto diferente
*
iframe Para criar um contexto de navegação aninhado
nome Para especificar o nome do iframe, a ser usado como destino
caixa de areia 5
Para especificar restrições adicionais ao conteúdo do iframe, por motivos de segurança
desatado Para especificar se o iframe deve parecer parte da página que o contém 5
fonte Para especificar o URL da página inicial
srcdoc Para especificar o URL da página inicial 5
largura altura Para especificar o tamanho do iframe
imagem Para inserir imagens em uma página
tudo Por oferecer texto alternativo que será exibido caso a imagem não seja exibida e que seja para
usuários de dispositivos assistivos
origem cruzada Para permitir que imagens de sites de terceiros (que permitem acesso de origem cruzada) sejam
usadas com o elemento canvas
ismapa Para indicar que o elemento fornece acesso a um mapa de imagem do lado do servidor (o
elemento deve ser descendente de um elemento a )
A6 Apêndice A
fonte Para especificar o URL de uma imagem
mapa de uso Para especificar o mapa de imagem do lado do cliente que deve ser usado com a imagem
referenciada
largura altura Para especificar o tamanho de uma imagem para que a página carregue mais
rapidamente ou para dimensionar
entrada Para criar elementos de formulário
aceitar Para informar ao navegador quais tipos de arquivos serão aceitos se o tipo de entrada
for “arquivo”
tudo Para fornecer uma alternativa textual se o tipo de entrada for “imagem”
autocompletar Para evitar que o navegador forneça/lembre valores de preenchimento automático quando o 5
atributo estiver definido como “off” (o padrão é “on”; ou seja, o preenchimento
automático é permitido por padrão)
auto-foco Para especificar que a entrada deve ser focada assim que a página for carregada 5
verificado Para marcar um botão de opção ou caixa de seleção por padrão
nome do diretório Para identificar a direção do texto inserido 5
desabilitado Para indicar que a entrada não está disponível no estado atual
formação Para substituir o atributo action do formulário 5
tipo de forma Para substituir o atributo enctype do formulário 5
método de formulário Para substituir o atributo de método do formulário 5
formnovalidate Para substituir o atributo novalidate do formulário 5
formuláriotarget Para substituir o atributo de destino do formulário 5
lista Para associar a entrada a um datalist 5
máximo, mínimo Para indicar o intervalo de valores permitido do elemento de entrada 5
comprimento máximo Para especificar o número máximo de caracteres que podem ser inseridos em um elemento
de entrada
múltiplo Para especificar se o usuário pode inserir mais de um valor 5
nome Para identificar dados coletados por um elemento
padrão Para fornecer uma expressão regular na qual o valor do elemento de entrada é verificado 5
espaço reservado Por fornecer uma dica para ajudar na entrada de dados 5
somente leitura Para evitar que os visitantes alterem certos elementos do formulário
obrigatório Para identificar que o elemento não deve ficar em branco para enviar o formulário (não 5
permitido quando o tipo de entrada é “oculto”, “imagem” ou alguns tipos de botão)
Referência HTML A7
tamanho Para especificar o comprimento de uma caixa de texto ou senha
fonte Para especificar o URL de uma imagem ativa
Para controlar a granularidade e especificidade dos valores permitidos 5

etapa
*
tipo Para especificar se um elemento do formulário é uma caixa de texto, caixa de senha,
botão de opção, caixa de seleção, campo oculto, botão enviar, botão redefinir, imagem ativa,
caixa de data/hora, caixa numérica ou caixa colorida; para selecionar entre uma faixa de
valores; ou para inserir um número de telefone, endereço de e-mail ou conjunto de termos
de pesquisa
valor Para especificar os dados padrão em um elemento de formulário

*
largura altura Para especificar as dimensões da entrada (permitido apenas quando o tipo de entrada for
“imagem”)
ins Para marcar um acréscimo ao documento
citar Para fazer referência a um URL que explica a alteração
data hora Para especificar a hora e a data da alteração
KBD Para marcar a entrada do usuário
geração de chaves Para gerar um par de chaves pública e privada 5
auto-foco Para especificar que o elemento keygen deve ser focado assim que a página for carregada 5
Para gerar um desafio para acompanhar o par de chaves 5

desafio
desabilitado Para indicar que o elemento não está disponível no estado atual 5
Para identificar o tipo de par de chaves a ser gerado 5

Tipo de chave
nome Para identificar os dados coletados 5
rótulo Para rotular elementos de formulário
para Para especificar a qual elemento do formulário o rótulo pertence
lenda Para rotular conjuntos de campos
que
Para criar um item de lista
*
valor Para determinar o valor inicial do item da lista (se for filho de um ol)
link Para vincular a uma folha de estilo externa ou outro recurso externo
href Para especificar o URL do recurso
Para especificar o idioma do recurso vinculado 5

hreflang
meios de comunicação Para definir os tipos de mídia e/ou recursos de mídia direcionados de uma folha de estilo
rel Para identificar o tipo de link
A8 Apêndice A
tamanhos Para identificar o tamanho do ícone referenciado (para uso somente quando o rel 5
atributo é “ícone”)
título Para rotular uma folha de estilo alternativa ou outro recurso
tipo Para anotar o tipo MIME de um recurso (obrigatório apenas se o tipo de link não for
“text/css”)
mapa Para criar um mapa de imagem do lado do cliente
nome Para nomear um mapa para que possa ser referenciado posteriormente
marca Para destacar texto para fins de referência devido à sua relevância em outro 5
contexto
matemática Para incorporar MathML na página 5

*
cardápio Por conter uma lista de comandos
rótulo Para rotular o menu 5
Para identificar o tipo de menu utilizado: “contexto”, “lista” (padrão) ou “barra de 5

tipo
ferramentas”
meta Para associar vários tipos de metadados à página
conjunto de caracteres Para identificar a codificação de caracteres da própria página 5
contente Para adicionar informações extras sobre a própria página
http-equivalente Para criar saltos automáticos para outras páginas, definir a linguagem de script padrão e
declarar a codificação de caracteres
nome Para identificar informações extras sobre a página
metro Para representar uma medição dentro de um intervalo conhecido 5
Para especificar um intervalo de valores como “alto” ou “baixo” 5

alto, baixo
máximo, mínimo Para identificar os valores máximo e mínimo permitidos 5
ótimo Para identificar o valor ideal 5
valor Para indicar o valor atual do medidor (obrigatório) 5
não são Para identificar uma seção de uma página vinculada a outras páginas ou a partes da 5
página
noscript Por fornecer alternativas aos scripts
objeto Para incorporar objetos em páginas da Web
dados Para identificar a origem do arquivo multimídia a ser incorporado
nome Para identificar o objeto (por exemplo, para que possa ser programado)
tipo Para anotar o tipo MIME do objeto
Referência HTML A9
tipo deve corresponder Para indicar que o recurso especificado no atributo data do objeto deve ter o
mesmo tipo MIME identificado no atributo type do objeto (permitido apenas se os
dados e o tipo do objeto forem especificados)
mapa de uso Para indicar se o objeto possui um mapa de imagem associado
largura altura Para especificar as dimensões da caixa do objeto
olá Para criar listas ordenadas
invertido Para especificar se a lista é decrescente (. . . , 3, 2, 1) 5
começar
*
Para especificar o valor inicial do primeiro item da lista
*
tipo Para especificar o tipo de numerais que devem iniciar cada item da lista
grupo de opções Para agrupar um conjunto de elementos de opção sob um rótulo comum dentro de um
elemento selecionado
rótulo Para rotular o grupo de opções
opção Para criar as opções individuais em um elemento select ou datalist
rótulo Para especificar como a opção deve aparecer no menu
selecionado Para fazer com que uma opção de menu seja selecionada por padrão em um formulário em branco
valor Para especificar o valor inicial de uma opção de menu
saída Para representar o resultado de um cálculo 5
para Para criar uma associação explícita entre o resultado de um cálculo e os valores 5
incluídos no cálculo
p Para criar um parágrafo
parâmetro Para definir propriedades de um objeto
nome Para identificar o tipo de propriedade
valor Para definir o valor da propriedade nomeada
pré Para representar um bloco de texto pré-formatado
progresso Para identificar o progresso da conclusão de uma tarefa 5
máx. Deve ser um número de ponto flutuante válido maior que zero (se presente) 5
valor Deve ser um número de ponto flutuante válido igual ou maior que zero (e menor ou 5
igual ao valor do atributo max , se estiver presente)
q Para citar passagens curtas de outra fonte
citar Por fornecer o URL da fonte da cotação
A10 Apêndice A
rp Para fornecer parênteses em torno de um componente de texto Ruby de uma 5

anotação Ruby em navegadores que não suportam anotações Ruby
rt Para marcar o componente de texto Ruby de uma anotação de texto Ruby 5
rubi Por permitir que o texto seja marcado com anotações Ruby 5
*
é Para identificar texto que não é mais preciso ou não é mais relevante
amostra Para representar uma amostra de saída de um programa ou sistema de computação
roteiro Para adicionar scripts “automáticos” a uma página
assíncrono Para influenciar o carregamento e a execução do script 5
conjunto de caracteres Para especificar o conjunto de caracteres, um script externo é escrito em
adiar Para influenciar o carregamento e a execução do script
fonte Para fazer referência a um script externo

*
tipo Para especificar a linguagem de script em que o script está escrito (necessário
apenas se o tipo de script não for “text/javascript”)
seção Para identificar uma seção de um documento 5
selecione Para criar controle de formulário para seleção em um conjunto de opções
auto-foco Para especificar que o elemento select deve ser focado assim que a página for carregada 5
múltiplo Por permitir que os usuários escolham mais de uma opção no menu
nome Para identificar os dados coletados pelo menu
obrigatório Para identificar que o usuário deve selecionar uma das opções para enviar o formulário 5
(o primeiro elemento da opção filho deve ser um espaço reservado ou um valor vazio)
tamanho Para especificar o número de itens inicialmente visíveis no menu (e para exibir o menu
como uma lista)
*
pequeno Para representar comentários laterais, como letras pequenas
fonte Para identificar vários recursos de mídia alternativos em um elemento de áudio ou vídeo 5
Para definir credenciais de solicitação de origem cruzada 5

origem cruzada
meios de comunicação Para identificar o tipo de mídia pretendido do recurso 5
fonte Para identificar o URL do arquivo de áudio ou vídeo a ser reproduzido 5
tipo Para anotar o tipo MIME de um recurso 5

*
período Para agrupar conteúdo em um elemento que não possui significado semântico
intrínseco
*
forte Por indicar forte importância do conteúdo do elemento
Referência HTML A11

estilo Para incorporar informações de estilo em uma página
meios de comunicação
Para indicar a finalidade de uma folha de estilo
escopo Para aplicar estilos apenas aos descendentes do elemento pai 5
*
tipo Para indicar o tipo MIME de uma folha de estilo (obrigatório apenas se o tipo de estilo não
for “text/css”)
sub Para criar subscritos
resumo Para identificar um resumo, legenda ou legenda para o conteúdo de seu elemento 5
de detalhes pai
e aí? Para criar sobrescritos
SVG Para incorporar gráficos vetoriais escaláveis na página 5
mesa Para criar tabelas
corpo Para identificar o corpo da tabela; em contraste com o cabeçalho (thead) ou rodapé (tfoot)
td, o Para criar células regulares e de cabeçalho, respectivamente, em uma tabela
colspan Para abranger uma célula em mais de uma coluna
Expansão de linha Para abranger uma célula em mais de uma linha
escopo Para identificar a quais linhas, colunas, grupos de linhas ou grupos de colunas um th se
aplica
área de texto Para criar áreas de entrada de blocos de texto em um formulário
auto-foco Para especificar que a área de texto será focada assim que a página for carregada 5
nome do diretório Para identificar a direção do texto inserido 5
comprimento máximo Para especificar o número máximo de caracteres que podem ser inseridos em uma área de
texto
nome Para identificar os dados coletados com o bloco de texto
espaço reservado Por fornecer uma dica para ajudar na entrada de dados 5
somente leitura Para proteger o conteúdo de uma área de texto
obrigatório Por indicar que o elemento não deve ficar em branco para o envio do formulário 5
linhas, colunas Para especificar o número de linhas e colunas no bloco de texto
enrolar Para especificar o uso de soft ou hard wraps quando o conteúdo do campo é enviado 5
pé, cabeça Para identificar o rodapé e a área do cabeçalho de uma tabela
A12 Apêndice A
tempo Para especificar uma data, uma hora ou ambas 5
data hora Para fornecer uma versão legível por máquina da hora ou data expressa no texto do elemento 5
Para especificar a data e hora de publicação do artigo ancestral ou elemento do corpo do 5

publicar
elemento
título Para criar o título da página (obrigatório)
tr Para criar linhas em uma tabela
acompanhar Para especificar faixas de texto temporizadas externas para o áudio ou vídeo pai 5
elemento
padrão Para indicar qual faixa é o padrão 5
tipo Para identificar se a faixa contém “legendas”, “legendas”, “descrições”, “capítulos” ou 5

“metadados”
rótulo Para fornecer um nome legível pelo usuário para a faixa 5
fonte Para identificar o URL dos dados da faixa 5
Para identificar o idioma dos dados da faixa 5

srclang
*
em
Para exibir uma extensão de texto com uma anotação não textual desarticulada, embora
explicitamente renderizada
ul Para criar listas não ordenadas
era Para marcar texto como nome de variável
vídeo Para incorporar vídeos, filmes e arquivos de áudio legendados 5
Para dizer ao navegador para começar a reproduzir o arquivo de vídeo assim que possível 5
Reprodução automática
controles Para informar ao navegador para fornecer controles para o elemento de vídeo 5
Para definir credenciais de solicitação de origem cruzada 5

origem cruzada
Para dizer ao arquivo de vídeo para recomeçar sem interrupção ao chegar ao fim 5
laço
Para associar vários arquivos de mídia 5

grupo de mídia
silenciado Para controlar o estado padrão da saída de áudio 5
Para especificar o URL de uma imagem para usar como espaço reservado enquanto a mídia 5
poster
é carregada ou em caso de erro ao carregar
Para especificar se o navegador pode começar a baixar o arquivo de mídia antes que o 5
pré-carregamento
visitante comece a reproduzi-lo
fonte Para identificar o URL do arquivo de vídeo a ser reproduzido 5
Para especificar as dimensões do vídeo 5

largura altura
wbr Para identificar um local apropriado para inserir uma quebra de linha em uma palavra sem 5
hifenização
Referência HTML A13

B
Propriedades e
valores CSS
Este livro não cobre todas as propriedades A Tabela B.2 é uma referência aos seletores CSS
definidas nas especificações da Cascading Style e combinadores que identificam itens
Sheet. Em vez disso, concentro-me nas introduzido em CSS3. A Tabela B.2 é derivada
propriedades que são suportadas por pelo menos um do módulo seletor CSS3 em
navegador. www.w3.org/TR/css3-selectors/ e é protegido por
direitos autorais © World Wide Web Consortium
A Tabela B.1 foi projetada como uma referência
(Instituto de Tecnologia de Massachusetts, Institut
rápida para muitas propriedades CSS comuns ou
National de Recherche en Informa-
úteis e seus valores permitidos. eu também tenho
tick e Automatics, Universidade Keio).
indica o valor padrão ou inicial de cada propriedade,
Todos os direitos reservados.
os elementos aos quais ela pode ser aplicada, se
a propriedade é herdada ou não e a que A Tabela B.3 cobre os valores de cores introduzidos em
porcentagens se referem se podem ser utilizadas. A CSS3: HSL, HSLA e RGBA.
Tabela B.1 é derivada das especificações completas
A Tabela B.4 mostra a sintaxe para definir
em www.w3.org/
gradientes em CSS.
TR/CSS21/propidx.html e é protegido por direitos
A Tabela B.5 aborda a sintaxe para consultas de
autorais © World Wide Web Consortium (Massa-
mídia, que podem ser usadas para direcionar estilos
chusetts Institute of Technology, Institut National
em tipos de mídia específicos (como tela ou
de Recherche en Informatique et en Automatique,
impressão) , bem como para detectar outros recursos
Keio University). Todos os direitos reservados.
de mídia (dimensões, orientação do dispositivo e
assim por diante).
Muitas das propriedades aceitam comprimento,
A Tabela B.6 apresenta a sintaxe para incorporar
porcentagem ou cor para valores.
fontes usando a regra @font-face .
Para obter mais informações sobre incorporação de fontes Os prefixos do fornecedor que você provavelmente usará
ding, consulte o Capítulo 13. Para obter um encontramos são:
exemplo de sintaxe @font-face “à prova de balas”,

-moz- (Firefox e outros navegadores que usam
consulte www.fontspring.com/blog/
Mecanismo de renderização da Mozilla)
corrigindo problemas de face de fonte ie9.
-webkit- (Chrome, Safari e outros navegadores
CSS3 é uma especificação em evolução e os
que usam o mecanismo de renderização WebKit)
navegadores continuam a ser atualizados com
suporte adicional para vários módulos dentro da
-o- (Ópera)
especificação. Os fabricantes de navegadores
também introduzem novos recursos próprios ou -ms- (Internet Explorer 8 e posterior)
implementar recursos CSS3 que são apenas padrões Para obter mais informações sobre quais navegadores
propostos. Felizmente, o CSS oferece uma maneira
suporta quais propriedades e valores CSS3, consulte
segura de fazer isso: prefixos de fornecedores. Isso
www.quirksmode.org/css/
permite que diferentes navegadores suportem
content.html, http://caniuse.com e http://
implementações experimentais de uma forma que não
findmebyip.com/litmus. Além disso, você pode testar o
interfira nas implementações de outros navegadores
suporte do navegador para muitos desses recursos
e não substitua o que quer que se torne o padrão-
usando bibliotecas JavaScript como Modernizr
(www.modernizr.com).
versão personalizada da propriedade (por exemplo,
Espero que você ache esta informação útil.
usando -webkit-box-shadow em vez de box-
shadow).
Propriedades e valores CSS
Tabela B.1 Propriedades e Valores CSS
Valores de propriedade Descrição e Notas
fundo Para alterar a cor de fundo e a imagem dos elementos.

qualquer combinação dos o valor inicial depende das propriedades individuais; não herdado;
valores para anexo de fundo, porcentagens permitidas para posição de fundo
cor de fundo, imagem de fundo, Para exibir diversas imagens de fundo, separe os valores de
repetição de fundo e/ou fundo combinados com uma vírgula; se você estiver
posição de fundo, ou herdar especificando uma cor de fundo, ela deverá ser incluída como parte
do último plano de fundo.
anexo de fundo Para determinar se e como as imagens de fundo devem rolar.

rolar , fixar ou herdar valor inicial: rolagem; não herdado
Se você estiver exibindo diversas imagens de plano de fundo,
poderá aplicar um valor de anexo de plano de fundo separado a
cada uma, separando os valores com vírgulas.
cor de fundo Para definir apenas a cor de fundo de um elemento.

seja uma cor, transparente ou herdada valor inicial: transparente; não herdado
B2 Apêndice B
Tabela B.1 continuação
imagem de fundo Para definir apenas a imagem de fundo de um elemento.

um URL, um gradiente CSS (consulte a Tabela B.4), valor inicial: nenhum; não herdado
nenhum ou herdar
Para exibir várias imagens de fundo, separe os valores da imagem com uma
vírgula.
posição de fundo Para definir a posição física de uma imagem de fundo especificada.
uma ou duas porcentagens ou comprimentos

(ou uma porcentagem e um comprimento) ou uma valor inicial: 0% 0%; se for definido um único percentual, ele será utilizado para
parte superior, central ou inferior e/ou uma a posição horizontal, e o valor inicial da vertical será definido como 50%; se
esquerda, central ou direita, ou use herdar apenas uma palavra-chave for usada, o valor inicial da outra será central; aplica-
se a elementos de nível de bloco e substituídos; não herdado; as porcentagens
referem-se ao tamanho da própria caixa
Se estiver exibindo diversas imagens de plano de fundo, você poderá aplicar

um valor de posição de plano de fundo separado a cada uma, separando
os valores com vírgulas.
fundo de repetição Para determinar como e se as imagens de fundo devem ser lado a lado.
um de repetir, repetir-x, repetir-y, não

repetir ou herdar valor inicial: repetir; não herdado
Se você estiver exibindo diversas imagens de plano de fundo, poderá aplicar

um valor de repetição de plano de fundo separado a cada uma,
separando os valores com vírgulas.
tamanho de fundo Para especificar o tamanho das imagens de fundo.

uma ou duas porcentagens ou comprimentos, ou valor inicial: automático; não herdado
automático, ou usar cobertura ou conter
Se estiver exibindo diversas imagens de plano de fundo, você poderá
aplicar um valor de tamanho de plano de fundo separado a cada uma,
separando os valores com vírgulas.
fronteira Para definir todos os aspectos de uma fronteira em todos os lados de um elemento.
qualquer combinação dos valores de o valor inicial depende das propriedades individuais; não herdado
largura da borda, estilo da borda e/ou cor,
ou herdar
Cor da borda Para definir apenas a cor da borda em um ou mais lados de um elemento.
de uma a quatro cores, transparente ou herdado
valor inicial: propriedade color do elemento ; não herdado
raio da fronteira Para dar cantos arredondados a uma caixa.

valor inicial: 0; não herdado
raio da borda superior direita, Para definir os valores do raio da borda para apenas um canto da caixa.
raio da borda inferior direita, raio
da borda inferior esquerda, raio valor inicial: 0; não herdado
da borda superior esquerda
Nota: versões mais antigas do Firefox usam uma sintaxe
diferente para cantos individuais: -moz-border-radius-topright,
-moz-border-radius-bottomright, -moz-
border-radius-bottomleft e -moz-border-
radius-topleft .
Propriedades e valores CSS B3

espaçamento entre fronteiras Para especificar a quantidade de espaço entre as bordas de uma tabela.
um ou dois comprimentos ou herdar
valor inicial: 0; pode ser aplicado apenas a elementos de tabela;
herdado
estilo de borda Para definir apenas o estilo de uma borda em um ou mais lados de um
elemento.
um a quatro dos seguintes valores: nenhum,
pontilhado, tracejado, sólido, duplo, ranhura , valor inicial: nenhum; não herdado
cume, inserção, início, herdar
borda superior, borda direita, borda inferior, Para definir todas as três propriedades de borda de uma só vez em apenas
borda esquerda um lado de um elemento.
qualquer combinação de um único valor para o valor inicial depende de valores individuais; não herdado
largura de borda, estilo de borda e/ou cor, ou
use herdar
cor da borda superior, cor da borda direita, Para definir apenas a cor da borda em apenas um lado de um elemento.
cor da borda inferior, cor da borda esquerda
uma cor ou herdar valor inicial: o valor da propriedade color ; não herdado
estilo borda superior, estilo borda direita, Para definir apenas o estilo da borda em apenas um lado de um elemento.
estilo borda inferior, estilo borda esquerda
um de nenhum, pontilhado, tracejado, valor inicial: nenhum; não herdado
sólido, duplo, ranhura, crista, inserção, início
ou herdar
largura da borda superior, largura da borda Para definir apenas a largura da borda em apenas um lado de um elemento.
direita, largura da borda inferior, largura da borda esquerda
um de fino, médio, grosso ou de comprimento valor inicial: médio; não herdado
largura da borda Para definir a largura da borda em um ou mais lados de um elemento.

um a quatro dos seguintes valores: fino, médio,
grosso ou comprimento valor inicial: médio; não herdado
fundo Para definir a distância que um elemento deve ser deslocado da borda inferior
uma porcentagem, comprimento, automático do elemento pai.
ou herança valor inicial: automático; não herdado; as porcentagens referem-se à altura do
bloco que contém
Sombra da caixa Para adicionar uma ou mais sombras projetadas a uma caixa. Os valores
inserção opcional seguida por dois a quatro de comprimento referem-se (em ordem) a: posição à direita da caixa
valores de comprimento, seguidos por uma cor (valores negativos, posição à esquerda), posição abaixo da caixa (valores
negativos, posição para cima), raio de desfoque (valores negativos não são
permitidos) e propagação distância (valores negativos fazem com que a
sombra se contraia). Cada valor de box-shadow subsequente deve ser
separado de seu antecessor por uma vírgula.
valor inicial: nenhum; herdado
claro Para evitar que os elementos se envolvam em um ou ambos os lados dos

elementos flutuantes.
um de nenhum, esquerda, direita, ambos ou herdar
valor inicial: nenhum; só pode ser aplicado a elementos de nível
de bloco; não herdado
B4 Apêndice B
grampo Para exibir apenas uma parte de um elemento.

um de auto, rect ou herdar valor inicial: automático; aplica-se apenas a elementos absolutamente
posicionados
cor
Para definir a cor do texto de um elemento.
uma cor ou herdar valor inicial: cor do pai, algumas cores são definidas pelo navegador; herdado
cursor
Para definir a forma do cursor.
um entre automático, mira, padrão, ponteiro, progresso , movimento, valor inicial: automático; herdado
redimensionamento eletrônico, redimensionamento ne ,
redimensionamento nw , redimensionamento n,
redimensionamento se, redimensionamento sw, redimensionamento
s, redimensionamento w, texto, espera, ajuda, um URL ou herdar
mostrar Para determinar como e se um elemento deve ser exibido.

um de embutido, bloco, bloco embutido, item valor inicial: geralmente embutido ou em bloco; não herdado
de lista, execução, compacto, tabela,
tabela embutida, grupo de linha de tabela, grupo
de cabeçalho de tabela, grupo de rodapé de
tabela, linha de tabela, tabela- grupo de colunas,
coluna de tabela, célula de tabela, legenda de
tabela, rubi, base de rubi, texto de rubi, grupo de
base de rubi, grupo de texto de rubi, nenhum, herdar
flutuador
Para determinar para qual lado do elemento pai um elemento irá flutuar.
um entre esquerda, direita, nenhum, herdar
valor inicial: nenhum; não pode ser aplicado a elementos posicionados ou conteúdo
gerado; não herdado
Fonte
Para definir pelo menos a família e o tamanho da fonte e, opcionalmente, o estilo,
se desejar, qualquer combinação dos valores para variante, espessura e altura da linha do texto.
estilo de fonte, variante de fonte e o valor inicial depende das propriedades individuais; herdado;
espessura da fonte seguida pelo tamanho da percentagens permitidas para valores de tamanho de fonte e altura
fonte necessário, um valor opcional de linha; font-size e font-family são necessários para a fonte
para altura da linha e a família de fontes também imóvel para trabalhar
necessária , ou use herdar
família de fontes Para escolher a família de fontes do texto.

um ou mais nomes de fontes entre aspas seguidos por valor inicial: depende do navegador; herdado
um nome de fonte genérico opcional ou use herdar
tamanho da fonte
Para definir o tamanho do texto.
um tamanho absoluto, um tamanho relativo, um valor inicial: médio; o valor calculado é herdado; as porcentagens
comprimento, uma porcentagem ou herança referem-se ao tamanho da fonte do elemento pai
estilo de fonte Para deixar o texto em itálico.

normal , itálico, oblíquo ou herdado valor inicial: normal; herdado
variante de fonte
Para definir texto em versalete.
normal , small-caps ou herdado valor inicial: normal; herdado

espessura da fonte Para aplicar, remover e ajustar a formatação em negrito.
normal , negrito, mais negrito, mais claro, 100, 200, valor inicial: normal; os valores numéricos são considerados palavras-chave
300, 400 , 500 , 600 , 700, 800, 900 ou herdar e não inteiros (não é possível escolher 150, por exemplo); herdado
altura Para definir a altura de um elemento.

um comprimento, uma porcentagem, automático valor inicial: automático; pode ser aplicado a todos os elementos, exceto elementos
ou herança embutidos não substituídos, colunas de tabela e grupos de colunas; não herdado
esquerda
Para definir a distância que um elemento deve ser deslocado da borda esquerda de
um comprimento, uma porcentagem, automático seu elemento pai.
ou herança valor inicial: automático; só pode ser aplicado a elementos posicionados;
não herdado; as porcentagens referem-se à largura do bloco que contém
espaçamento entre letras Para definir a quantidade de espaço entre as letras.

normal , um comprimento ou herdar valor inicial: normal; herdado
altura da linha Para definir a quantidade de espaço entre as linhas do texto.

normal , um número, um comprimento, uma valor inicial: normal; herdado; as porcentagens referem-se ao tamanho da fonte
porcentagem ou herdar do próprio elemento
estilo de lista Para definir um marcador de lista (normal ou personalizado) e sua posição.
qualquer combinação dos valores para tipo o valor inicial depende dos valores iniciais dos elementos individuais; só pode ser
de estilo de lista, posição de estilo de lista e/ou aplicado a elementos de lista; herdado
imagem de estilo de lista ou use herdar
imagem de estilo de lista Para designar um marcador personalizado para uma lista.
um URL, nenhum ou herdado valor inicial: nenhum; só pode ser aplicado a elementos de lista; substitui
o tipo de estilo de lista; herdado
posição de estilo de lista Para determinar a posição do marcador de uma lista.

dentro , fora ou herdar valor inicial: fora; só pode ser aplicado a elementos de lista; herdado
tipo de estilo de lista Para definir um marcador de lista.

disco , círculo, quadrado, decimal, romano valor inicial: disco; só pode ser aplicado a elementos de lista; não usado se o
inferior, romano superior, alfa inferior, alfa superior, tipo de estilo de lista for válido; herdado
nenhum ou herdar
margem Para definir a quantidade de espaço entre um ou mais lados da borda de um
um a quatro dos seguintes: comprimento, elemento e seus elementos pai e/ou irmão.
porcentagem ou automático ou herdar o valor inicial depende do navegador e do valor da largura; não herdado; as
porcentagens referem-se à largura do bloco que contém
margem superior, margem direita, Para definir a quantidade de espaço entre apenas um lado da borda de um elemento
margem inferior, margem esquerda e seus elementos pai e/ou irmão.
um comprimento, uma porcentagem, automático valor inicial: 0; não herdado; as porcentagens referem-se à largura do bloco
ou herança que contém; os valores para margem direita e margem esquerda
podem ser substituídos se a soma da largura, margem direita e margem
esquerda forem maiores que o bloco que contém o elemento pai
B6 Apêndice B
altura máxima, largura máxima Para definir a altura e/ou largura máxima de um elemento, respectivamente.
um comprimento, uma porcentagem, nenhum ou

herdar valor inicial: nenhum; não pode ser aplicado a elementos inline ou elementos
de tabela; não herdado; as porcentagens referem-se à altura/
largura do bloco contendo
altura mínima, largura mínima Para definir a altura e/ou largura mínima de um elemento, respectivamente.
um comprimento, uma porcentagem ou herdar

valor inicial: 0; não pode ser aplicado a elementos inline ou elementos de tabela;
não herdado; as porcentagens referem-se à altura/largura do bloco que contém
opacidade Para tornar um elemento translúcido ou invisível.

qualquer valor decimal de 0,0 (totalmente valor inicial: 1; não herdado
transparente) a 1,0 (totalmente opaco)
órfãos Para especificar quantas linhas de um elemento podem aparecer sozinhas no

um número inteiro ou herdado final de uma página.
valor inicial: 2; só pode ser aplicado a elementos de nível de bloco; herdado;

somente para uso com mídia impressa
transbordar Para determinar para onde o conteúdo extra deve ir caso não caiba na área de
conteúdo do elemento.
visível , oculto, rolagem, automático ou herdado
valor inicial: visível; só pode ser aplicado a elementos de nível de bloco e
substituídos; não herdado
preenchimento Para especificar a distância entre um ou mais lados da área de conteúdo de um

elemento e sua borda.
um a quatro comprimentos ou porcentagens, ou
herdar o valor inicial depende do navegador; não herdado; as porcentagens referem-se
à largura do bloco que contém
preenchimento superior, preenchimento Para especificar a distância entre um lado da área de conteúdo de um elemento e
sua borda.
direito, preenchimento inferior, preenchimento esquerdo
um comprimento, uma porcentagem ou herdar valor inicial: 0; não herdado; as porcentagens referem-se à largura do bloco
que contém
quebra de página depois, quebra de página antes Para especificar quando as quebras de página devem ou não ocorrer.
sempre , evitar, automático, direita, esquerda ou valor inicial: automático; só pode ser aplicado a elementos de nível de
herdar bloco; não herdado; somente para uso com mídia impressa
quebra de página dentro Para evitar que quebras de página dividam um elemento entre páginas.
evitar , automático ou herdar

valor inicial: automático; só pode ser aplicado a elementos de nível de
bloco; herdado; somente para uso com mídia impressa
posição Para determinar como um elemento deve ser posicionado em relação ao fluxo
do documento.
estático , relativo, absoluto, fixo ou herdado
valor inicial: estático; não herdado
certo Para definir a distância que um elemento deve ser deslocado da borda direita de
um comprimento, uma porcentagem, automático seu elemento pai.
ou herança valor inicial: automático; só pode ser aplicado a elementos
posicionados; não herdado; as porcentagens referem-se à largura do
bloco que contém

layout de mesa Para escolher o algoritmo que deve ser usado para determinar as larguras das
células.
um de fixo, automático ou herdado
valor inicial: automático; não herdado
alinhamento de texto Para alinhar texto.

um entre esquerda, direita, centro, justificar, o valor inicial depende do navegador e da direção de escrita; só pode ser
uma string ou herdar aplicado a elementos de nível de bloco; herdado
decoração de texto Para decorar texto (principalmente com linhas).

qualquer combinação de sublinhado, sublinhado, valor inicial: nenhum; não herdado
linha e piscar, ou nenhum ou herdar
recuo de texto Para definir a quantidade de espaço, a primeira linha de um parágrafo deve ser
recuada.
um comprimento, uma porcentagem ou herdar
valor inicial: 0; só pode ser aplicado a elementos de nível de bloco; herdado; as
porcentagens referem-se à largura do bloco que contém
estouro de texto Para especificar como o excesso de texto deve ser tratado quando não está visível.
um clipe, reticências ou "string"
valor inicial: clipe
sombra de texto Para adicionar uma ou mais sombras ao texto de um elemento. Os valores
dois a quatro valores de comprimento, seguidos por de comprimento referem-se (em ordem) a: posição à direita do texto (valores
uma cor negativos, posição à esquerda), posição abaixo da caixa (valores negativos,
posição para cima), raio de desfoque (valores negativos não são permitidos)
e propagação distância (valores negativos fazem com que a sombra se
contraia). Cada valor de sombra de texto subsequente deve ser separado de seu
antecessor por uma vírgula.
valor inicial: nenhum; herdado
transformação de texto Para definir a capitalização do texto de um elemento.

capitalizar , maiúsculas, minúsculas, nenhuma ou valor inicial: nenhum; herdado
herdar
transformar Para transformar a forma, tamanho ou orientação de um elemento.

nenhuma ou uma lista de funções de transformação valor inicial: nenhum; não herdado; funções de transformação são aplicadas
(matriz, tradução, traduçãoX , traduçãoY, na mesma ordem em que são listadas
escala, escalaX, escalaY, rotação, inclinação,
inclinaçãoX, inclinaçãoY)
origem da transformação Para definir a origem de quaisquer transformações aplicadas a um

elemento.
uma ou duas porcentagens ou comprimentos (ou uma
porcentagem e um comprimento) ou uma parte superior, valor inicial: 50% 50%; não herdado; aplica-se apenas a elementos de nível de
central ou inferior e/ou uma esquerda, central ou bloco e de nível inline; as porcentagens referem-se ao tamanho da caixa do elemento
direita
transição Para definir um efeito de transição em um elemento.

uma abreviatura separada por espaço para definir (em o valor inicial depende do imóvel individual; aplica-se a todos os elementos,
ordem) propriedade de transição, duração de incluindo os pseudoelementos :before e :after ; a ordem dos valores é
transição, função de tempo de transição e atraso importante para esta propriedade
de transição
B8 Apêndice B
propriedade de transição Para identificar as propriedades CSS definidas em um elemento que deve ter uma
nenhuma, todas ou uma lista separada por vírgulas de transição aplicada a ele.
propriedades CSS valor inicial: todos; não herdado; aplica-se a todos os elementos,
incluindo os pseudoelementos :before e :after
duração da transição Para definir o tempo que uma transição leva para ser concluída.
um valor de tempo em segundos ou milissegundos valor inicial: 0s (zero segundos); não herdado; aplica-se a todos os elementos,
função de tempo de transição Para descrever como os valores intermediários usados durante uma transição
devem ser calculados.
facilidade, linear, facilidade de entrada,
facilidade de saída, facilidade de entrada, bezier cúbico (número, valor inicial: facilidade; aplica-se a todos os elementos, incluindo os
número, número, número) pseudoelementos :before e :after
atraso de transição Para definir quando uma transição começará.

um valor de tempo em segundos ou milissegundos valor inicial: 0s (zero segundos); não herdado; aplica-se a todos os elementos,
principal Para definir a distância que um elemento deve ser deslocado da borda superior do
um comprimento, uma porcentagem, automático elemento pai.
ou herança valor inicial: automático; só pode ser aplicado a elementos
posicionados; não herdado; as porcentagens referem-se à altura do bloco
que contém
alinhamento vertical Para alinhar elementos verticalmente.

linha de base , sub, super, superior, texto valor inicial: linha de base; só pode ser aplicado a elementos de células de tabela
superior, meio, inferior, texto inferior, uma porcentagem, e de nível inline; não herdado; as porcentagens referem-se à propriedade line-
um comprimento ou herdar height do elemento
visibilidade Para ocultar elementos sem retirá-los do fluxo do documento.

visível , oculto, recolhido ou herdado
valor inicial: herdar, o que torna o fato de não ter sido herdado um ponto discutível
espaço em branco Para especificar como os espaços em branco devem ser tratados.
normal , pré, nowrap, pré-embrulhado, pré-alinhado valor inicial: normal; só pode ser aplicado a elementos de nível de bloco;
ou herdado herdado
viúvas Para especificar quantas linhas de um elemento podem aparecer sozinhas no

um número inteiro ou herdado topo de uma página.
valor inicial: 2; só pode ser aplicado a elementos de nível de bloco; herdado;

somente para uso com mídia impressa
largura Para definir a largura de um elemento.

um comprimento, uma porcentagem, automático valor inicial: automático; não pode ser aplicado a elementos embutidos, linhas de
ou herança tabela ou grupos de linhas; não herdado; as porcentagens referem-se à largura do
bloco que contém
espaçamento entre palavras Para definir a distância entre as palavras.

normal , um comprimento ou herdar valor inicial: normal; herdado
índice z Para definir a profundidade de um elemento em relação aos

seja automático, um número inteiro ou herdar elementos sobrepostos.
valor inicial: automático; só pode ser aplicado a elementos

posicionados; não herdado

Seletores CSS
Tabela B.2 Seletores CSS

Padrão Significado CSS3? Tipo de seletor
* Seletor universal
qualquer elemento
E
um elemento do tipo E Seletor de tipo
E[foo] um elemento E com um atributo “foo” Seletor de atributos
E[foo="barra"] um elemento E cujo valor do atributo “foo” Seletor de atributos

é exatamente igual a “bar” (as aspas são
opcionais)
E[foo~="barra"] um elemento E cujo valor do atributo “foo” Seletor de atributos

é uma lista de valores separados
por espaços em branco, um dos quais é
exatamente igual a “bar” (as aspas são
opcionais)
E[foo^="barra"] um elemento E cujo valor do atributo “foo” Seletor de atributos Y

começa com “bar” (as aspas são opcionais)
E[foo$="barra"] um elemento E cujo valor do atributo “foo” Seletor de atributos Y

termina com “bar” (as aspas são
opcionais)
E[foo*="barra"] um elemento E cujo valor do atributo “foo” Seletor de atributos Y

contém “bar” em algum lugar dentro
dele (as aspas são opcionais)
E[foo|="en"] um elemento E cujo atributo “foo” Seletor de atributos

tem uma lista de valores separados por hífen
começando (da esquerda) com “en” (as
aspas são opcionais)
E: raiz um elemento E, raiz do documento Pseudoclasse estrutural Y
E: enésimo filho (n) um elemento E, o enésimo filho de seu Pseudoclasse estrutural Y

pai
E: enésimo último filho (n) um elemento E, o enésimo filho de seu Pseudoclasse estrutural Y
pai, contando a partir do último
E: enésimo do tipo (n) um elemento E, o enésimo irmão de seu Pseudoclasse estrutural Y

tipo
E:nth-last-of-type(n) um elemento E, o enésimo irmão de seu Pseudoclasse estrutural Y

tipo, contando a partir do último
E:primeiro filho um elemento E, primeiro filho de seu pai Pseudoclasse estrutural
E: último filho um elemento E, último filho de seu pai Pseudoclasse estrutural Y
E: primeiro do tipo um elemento E, primeiro irmão de seu tipo Pseudoclasse estrutural Y
E: último do tipo um elemento E, último irmão de seu tipo Pseudoclasse estrutural Y
E: filho único um elemento E, filho único de seu pai Pseudoclasse estrutural Y
B10 Apêndice B
Padrão Significado CSS3? Tipo de seletor
E: somente do tipo um elemento E, único irmão de seu tipo Pseudoclasse estrutural Y
E: vazio um elemento E que não possui filhos Pseudoclasse estrutural Y

(incluindo nós de texto)
E:link, E:visitado um elemento E sendo a âncora de Vincular pseudoclasses

origem de um hiperlink cujo destino ainda
não foi visitado (:link) ou já foi visitado
(:visited)
E:focus, E:hover, um elemento E durante certas ações do Pseudoclasses de ação do usuário

E: ativo usuário
E: alvo um elemento E sendo o alvo do URI de Pseudoclasse alvo Y

referência
E: longo (fr) um elemento do tipo E na linguagem “fr” :lang() pseudoclasse
E:enabled, E:disabled um elemento E da interface do usuário que é O elemento Y UI indica pseudoclasses

habilitado ou desabilitado
E: verificado um elemento E da interface do usuário que O elemento Y UI indica pseudoclasses

está marcado (por exemplo, um botão de opção
ou caixa de seleção)
E::primeira linha a primeira linha formatada de um :: pseudoelemento de primeira linha

elemento E
E::primeira letra a primeira letra formatada de um elemento :: pseudoelemento de primeira

E letra
E::antes conteúdo gerado antes de um elemento ::antes do pseudoelemento

E
E::depois conteúdo gerado após um elemento E ::depois do pseudoelemento
E. aviso um elemento E que possui uma classe de Seletor de classe

"aviso"
E#meuid um elemento E com um ID igual a “myid” Seletor de ID
E:não(s) um elemento E que não corresponde a Pseudoclasse de negação Y

seletores simples (por exemplo,
input:not(.warning))
SE um elemento F descendente de um Combinador descendente

elemento E
E>F um elemento F filho de um elemento E Combinador infantil
E+F um elemento F imediatamente precedido por Combinador de irmãos adjacentes

um elemento E
E~F um elemento F precedido por um Y Combinador geral de irmãos

elemento E

Valores de cores CSS
Tabela B.3 Valores de cores CSS
Valor da cor Descrição e Notas
rgb (valor vermelho, valor verde, Modelo de cores RGB (vermelho, verde, azul)
valor azul)
os valores podem ser um número de 0 a 255 ou uma porcentagem (mas não uma
combinação de números e porcentagens)
rgb(0, 0, 0) e rgb(0%, 0%, 0%) são pretos
rgb(255, 255, 255) e rgb(100%, 100%, 100%) são brancos
rgba (valor vermelho, valor verde, Modelo de cores RGB, além de transparência alfa
valor azul, alfa)
os valores das cores são iguais aos da sintaxe RGB
o quarto parâmetro, alfa, é um decimal maior ou igual a 0,0 (transparência total) e
menor ou igual a 1,0 (opacidade total)
hsl(valor de matiz, valor de saturação, Modelo de cores HSL (matiz, saturação, luminosidade)
valor de luminosidade)
o valor da tonalidade é expresso como o ângulo de um círculo colorido (um número
de 0 a 360); 0 e 360 = vermelho, 120 = verde, 240 = azul, com outras cores
representadas entre
o valor de saturação é expresso em percentagem; 0% é cinza e 100% é a saturação
total da cor
o valor da luminosidade é expresso em porcentagem; 0% é preto, 100% é branco e

50% é “normal”
hsla(valor de matiz, valor de saturação, Modelo de cores HSL, além de transparência alfa
valor de luminosidade, alfa)
os valores das cores são iguais aos da sintaxe HSL
o quarto parâmetro, alfa, é um decimal maior ou igual a 0,0 (transparência
total) e menor ou igual a 1,0 (opacidade total)
B12 Apêndice B
Gradientes
CSS3 oferece dois estilos de gradiente, gradiente linear e gradiente radial, que podem ser
usados como valores para as propriedades de fundo e imagem de fundo .
Tabela B.4 Gradientes

Estilo gradiente* Valores Notas
gradiente linear ([origem,] origin especifica o canto da caixa e pode por padrão, os gradientes lineares
cor [parar], cor [parar] [, ser uma combinação de palavras-chave se originam na parte superior central
cor [parar]]*) superior, esquerda, inferior, direita e central da caixa
por exemplo: ou valores percentuais (originários do canto por padrão, o navegador

superior esquerdo) em relação ao tamanho da caixa tenta distribuir as cores
gradiente linear (inferior
o primeiro valor da cor refere-se à cor no início do uniformemente no gradiente
esquerda, #fff, #f00 30%, #000)
gradiente; a última cor se apenas duas cores
resulta em um gradiente, originado no valor refere-se ao final do gradiente; você pode
canto inferior esquerdo da caixa forem especificadas, as paradas
ter qualquer número de cores no gradiente padrão serão 0% e 100%
e terminando no canto superior
direito; começa com branco, que se
torna vermelho em 30% do gradiente, stop especifica a localização da cor no gradiente
que então termina em preto e pode ser um comprimento ou uma porcentagem
relativa ao comprimento de todo o gradiente
gradiente radial ([origem,] origin especifica o canto da caixa e pode por padrão, os gradientes radiais
[forma-ou-tamanho-ou-ambos,] ser uma combinação de palavras-chave se originam do centro da caixa
cor [parar], cor [parar] [, superior, esquerda, inferior, direita e central
cor [parar]]*) ou valores percentuais (originários do canto por padrão, a palavra-chave size é
por exemplo: superior esquerdo) em relação ao tamanho da caixa definida para conter
a forma pode ser especificada como círculo por padrão, o navegador
gradiente radial (30% 30%,
círculo no canto mais próximo, #fff, ou elipse por padrão; a forma preenche as tenta distribuir as cores
dimensões da caixa (assim como uma elipse, a
#000) uniformemente no gradiente
menos que a caixa seja quadrada)
resulta em um gradiente originado em se apenas duas cores
30% do canto superior esquerdo tamanho pode ser uma palavra-chave: lado forem especificadas, as paradas
mais próximo, canto mais próximo, padrão serão 0% e 100%
da caixa, irradiando como um círculo
até atingir o canto mais próximo da lado mais distante, canto mais distante, conter, cobrir
caixa; começa com branco no centro size também pode definir explicitamente as dimensões
do círculo e termina com preto na borda de um gradiente radial usando um valor de comprimento
externa (ou dois valores de comprimento, se você quiser
definir os comprimentos horizontal e vertical separadamente)
o primeiro valor da cor refere-se à cor no início do
gradiente; a última cor
valor refere-se ao final do gradiente; você pode
ter qualquer número de cores no gradiente
stop especifica a localização da cor no gradiente

e pode ser um comprimento ou uma porcentagem
relativa ao comprimento de todo o gradiente
*
Versões anteriores do WebKit (o mecanismo de renderização usado no Chrome e Safari) usavam uma sintaxe
diferente para gradientes. Para obter mais informações sobre esta sintaxe, consulte www.webkit.org/blog/1424/css3-gradients/.

Consultas de mídia
Uma consulta de mídia avalia tipos e recursos de mídia e é uma expressão lógica verdadeira ou falsa. Na sintaxe
padrão, use e para testar vários recursos juntos e use vírgulas para testar grupos separadamente. Por
exemplo, screen and (max-width:800px) será verdadeiro se o tipo de mídia for screen e a área de exibição
não for maior que 800 pixels, mas screen,
(max-width:800px) será verdadeiro se qualquer um dos valores for verdadeiro.
A tabela a seguir descreve recursos que podem ser detectados usando consultas de mídia e os valores em
relação aos quais esses recursos são testados. Consultas de mídia podem ser especificadas como parte de
uma regra @import , em um atributo de mídia do elemento HTML <link> ou como uma regra @media .
Tabela B.5 Consultas de mídia

Recurso Descrição e Notas
largura, a largura, largura mínima ou largura máxima da área de exibição de destino do dispositivo de
largura mínima, saída
largura máxima
aplica-se a: mídia visual e tátil
um comprimento
altura, a altura, altura mínima ou altura máxima da área de exibição de destino do dispositivo de
altura mínima, saída
altura máxima aplica-se a: mídia visual e tátil
um comprimento
largura do dispositivo, a largura, largura mínima ou largura máxima da superfície de renderização do dispositivo de
largura mínima do saída
dispositivo, largura máxima do dispositivo
um comprimento
altura do dispositivo, a altura, altura mínima ou altura máxima da superfície de renderização do dispositivo de saída
altura mínima do
dispositivo, altura máxima do dispositivo aplica-se a: mídia visual e tátil
um comprimento
orientação a orientação é retrato quando o valor do recurso de altura é maior ou igual ao valor do recurso
retrato ou paisagem de largura ; caso contrário, a orientação é paisagem
aplica-se a: mídia bitmap
proporção de a proporção, proporção mínima ou proporção máxima entre o valor do recurso de largura e
aspecto, proporção o valor do recurso de altura
mínima, proporção máxima aplica-se a: mídia bitmap
uma proporção (por exemplo, 4/3 ou 16/9)
proporção do dispositivo, a proporção, proporção mínima ou proporção máxima entre o valor do recurso de largura do
proporção mínima do dispositivo, dispositivo e o valor do recurso de altura do dispositivo
proporção máxima do dispositivo aplica-se a: mídia bitmap
uma proporção (por exemplo, 4/3 ou 16/9)
cor, cor o número, número mínimo ou número máximo de bits por componente de cor do
mínima, cor dispositivo de saída; o valor é 0 se o dispositivo não for um dispositivo colorido
máxima
um número inteiro aplica-se a: mídia visual
B14 Apêndice B
Recurso Descrição e Notas
índice de cores, o número, número mínimo ou número máximo de entradas na tabela de pesquisa de
índice mínimo de cores do dispositivo de saída; o valor é 0 se o dispositivo não usar uma tabela de
cores, índice máximo de cores pesquisa de cores
monocromático, o número, número mínimo ou número máximo de bits por pixel em um buffer de
min-monocromático, quadro monocromático; o valor é 0 se o dispositivo não for um dispositivo
max-monocromático monocromático
resolução, a resolução, resolução mínima ou resolução máxima do dispositivo de saída (ou seja,
resolução mínima, a densidade de pixels); resolução (não resolução mínima ou resolução máxima)
resolução máxima nunca detecta um dispositivo com pixels não quadrados
um valor de resolução aplica-se a: mídia bitmap
(por exemplo, 300 dpi ou 118 dpcm)
Varredura
o processo de digitalização de dispositivos de saída de TV
progressivo ou entrelaçado aplica-se a: mídia de TV
grade se o dispositivo é grade ou bitmap; o valor é 1 se o dispositivo de saída for baseado

0 ou 1 em rede (por exemplo, um terminal TTY); caso contrário, o valor será 0; esta consulta
de mídia também pode ser expressa sem um valor (por exemplo, @media grid)
Incorporação de fonte CSS
Tabela B.6 Incorporação de fontes CSS (@font-face)
Sintaxe Descrição e Notas
@Tipo de letra { início da regra
família de fontes: "nome da fonte"; definição da família de fontes, que pode então ser referenciada como um
valor da propriedade font-family
src: url("caminho/para/font.ext") identificação do arquivo (ou arquivos) fonte da fonte; ao especificar

format("tipo de formato"); várias fontes, separe cada valor com uma vírgula
o formato deve ser opentype incorporado para arquivos .eot, woff para
arquivos .woff, truetype para arquivos .ttf e svg para arquivos .svg
estilo da fonte: valor; especificação do estilo da fonte incorporada, usando a mesma sintaxe
da propriedade font-style
peso da fonte: valor; especificação do peso da fonte incorporada, usando a mesma sintaxe
da propriedade font-weight
} fechamento da regra

Três maneiras de QUICK's Tar T

A sempre popular série Visual QuickStart Guide está agora disponível em três
formatos para ajudá-lo a “Começar a trabalhar rapidamente!”
Guias visuais de início rápido

A série Visual QuickStart Guide mais vendida está
disponível nos formatos de livro e e-book (ePub e PDF) para
pessoas que preferem a experiência de aprendizagem clássica.
Início rápido do vídeo

Os Video QuickStarts oferecem o imediatismo do streaming
de vídeo para que você possa dominar rapidamente um
novo aplicativo, tarefa ou tecnologia. Cada Video
QuickStart oferece mais de uma hora de instruções e gráficos
ricos para demonstrar os principais conceitos.
Guia de início rápido visual aprimorado

Disponíveis em seu computador e tablet, os Guias de início
rápido visual aprimorados combinam o e-book com instruções de
início rápido em vídeo para oferecer a você o melhor dos
dois formatos e a melhor experiência de aprendizado multimídia.
Visite-nos em: Peachpit.com/VQS
V i S ual Q ui CKS ta rt G ui DE
Acesso on-line ilimitado a todos os vídeos e

livros da Peachpit, Adobe Press, Apple
Training e New Riders, bem como
conteúdo de outras editoras líderes, incluindo:
O'Reilly Media, Focal Press, Sams, Que,
Total Training, John Wiley & Sons, Course
Tecnologia PTR, Class on Demand, VTC e muito mais.
Não é necessário compromisso de tempo ou

contrato! inscreva-se por um mês ou
um ano. tudo por US$ 19,99 por mês
Inscreva-se hoje
pêssegopit.com/creativeedge
Junte-se a
Caroço de pêssego
Equipe de afiliados!
Você ama nossos livros e você

adoro compartilhá-los com seus colegas e amigos...
por que não ganhar algum $$ fazendo isso!
Se você tem um site, blog ou até mesmo uma página no

Facebook, pode começar a ganhar dinheiro colocando um
link do Peachpit na sua página.
Se um visitante clicar nesse link e comprar algo no pêssegopit.com,

você ganha comissões* sobre todas as vendas!
Cada venda que você fizer em nosso site lhe renderá

uma comissão. Tudo que você precisa fazer é postar um
anúncio e nós cuidaremos do resto.
Inscreva-se e comece!
É rápido e fácil de aplicar.
Para saber mais acesse:
http://www.peachpit.com/affiliates/
*Válido para todas as vendas de livros, e-books e vídeos em www.Peachpit.com

HTML5 e CSS3 - Guia Prático e Visual (7 Edição) - 474-606

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML5 e CSS3 - Guia Prático e Visual (7 Edição) - 474-606

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Páginas. Adicionando vídeo com substitutos de Flash 463

Algumas dessas páginas multimídia da Web podem Fornecendo acessibilidade 467

Áudio em loop 472

Adicionando áudio com substitutos de Flash 476

Como a população da Web é tão diversificada,

Plug-ins de e os formatos de arquivo que ele suporta. Inicialmente, a

terceiros e tornar-se nativo— um para áudio e outro para vídeo —

muitos sistemas de usuários. A utilidade do HTML5 e da mídia nativa

Tal como acontece com qualquer conjunto de padrões,

Vídeo, Áudio e Outros Multimídias 451

Formatos de arquivo de vídeo

n MP4 (H.264) usa a extensão de arquivo .mp4 ou .m4v

n WebM usa a extensão de arquivo .webm

e é compatível com Firefox 4+, Chrome 6+, Opera

Você precisa fornecer seu vídeo em

O Google abandonará o suporte para MP4

Convertendo entre formatos de arquivo

A Especificando um único vídeo WebM sem

Para adicionar um único

1. Obtenha seu recurso de vídeo.

Tanto a Apple quanto a Microsoft adotaram e

Vídeo, Áudio e Outros Multimídias 453

Como você pode ver, há vários atributos, o que lhe

TABELA 17.1 Atributos de vídeo

Reprodução automática Inicia automaticamente a reprodução do vídeo assim que possível.

laço Reproduz o vídeo em loop.

altura A altura do vídeo em pixels.

nenhum não carrega nada.

metadados carrega apenas os metadados do vídeo (por exemplo, duração e dimensões).

A Adicionando um único arquivo de vídeo WebM, desta vez

<video src="paddle-steamer.webm" O pequeno exemplo de código em “Adicionando um único

O atributo de controles informa ao navegador

continua na próxima página

Vídeo, Áudio e Outros Multimídias 455

Cada navegador tem seu próprio conjunto de padrões

controles, que parecem muito diferentes entre

O exemplo a seguir ilustra como você pode usar

Para adicionar controles a um vídeo:

Para adicionar reprodução automática a um vídeo:

1. Obtenha sua fonte de vídeo.

2. Digite <video src="myVideo.ext"

D Os controles de vídeo no Chrome

F Os controles de vídeo no Internet Explorer 9

G Um único vídeo WebM configurado para ser reproduzido automaticamente durante o

A Um único vídeo WebM configurado para ser reproduzido automaticamente

Você simplesmente usa a reprodução automática e o loop

Para adicionar reprodução automática e repetir um vídeo:

1. Obtenha sua fonte de vídeo.

2. Digite <video src="myVideo.ext"

Para especificar uma imagem de pôster para

1. Obtenha sua fonte de vídeo.

2. Digite <video src="myVideo.

Vídeo, Áudio e Outros Multimídias 457

Para instruir o navegador a

2. Digite <video src="myVideo.ext"

B Um vídeo com pré-carregamento definido como

R Duas fontes são definidas aqui para o vídeo: um

Basicamente, o elemento source permite definir mais

Qualquer número de elementos de origem pode

Para especificar duas fontes

1. Obtenha suas fontes de vídeo (duas desta

3. Digite <source src="myVideo.mp4"