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

Machine Translated by Google
4
Texto
A menos que um site tenha muitos vídeos ou galerias

de fotos, a maior parte do conteúdo das páginas da Neste capítulo
Web é texto. Este capítulo explica quais semânticas
Iniciando um novo parágrafo 100
HTML são apropriadas para diferentes tipos de
texto, especialmente (mas não exclusivamente) para Adicionando informações de contato do autor 102
texto dentro de uma frase ou frase.
Criando uma Figura 104
Por exemplo, o elemento em é projetado especificamente
Especificando hora 106
para indicar texto enfatizado, e o objetivo do elemento
cite é citar obras de arte, filmes, livros e muito mais. Marcando Texto Importante e Enfatizado 110
Indicando uma citação ou referência 112
Os navegadores normalmente estilizam muitos Citando Texto 113

elementos de texto de maneira diferente do texto
Destacando texto 116
normal. Por exemplo, os elementos em e cite estão
em itálico. Outro elemento, o código, projetado Explicando abreviaturas 118
especificamente para formatar linhas de código de um Definindo um Termo 120

script ou programa, é exibido em uma fonte monoespaçada
Criação de sobrescritos e subscritos 121
por padrão.
Observando edições e textos imprecisos 124
A aparência do conteúdo é irrelevante quando
decidir como marcá-lo. Portanto, você não deve Código de marcação 128
usar em ou citar apenas porque deseja colocar o texto 130

Usando texto pré-formatado
em itálico. Esse é o trabalho do CSS.
Especificando letras miúdas 132
Em vez disso, concentre-se na escolha de elementos
Criando uma quebra de linha 133
HTML que descrevam o conteúdo. Se, por padrão,
um navegador o estilizar como você faria com CSS, isso é Criando períodos 134
apenas um bônus. Caso contrário, basta substituir a Outros elementos 136

formatação padrão pelo seu próprio CSS.
Começando um novo R Não é de surpreender que p seja um dos elementos HTML

usados com mais frequência.
Parágrafo ...
<corpo>
O HTML não reconhece os retornos ou
outros espaços em branco extras inseridos <artigo>
em seu editor de texto. Para iniciar um novo <h1>Antoni Gaudí</h1>
parágrafo em sua página da Web, você usa <p>Muitos turistas são atraídos
para ÿ Barcelona para ver a obra de Antoni Gaudí
o elemento p (A e B).
ÿ arquitetura incrível.</p>
Para começar um novo parágrafo: <p>Barcelona comemorou o 150º

aniversário do nascimento de Gaudí em
1. Digite <p>.
ÿ 2002.</p>
2. Digite o conteúdo do novo
parágrafo. <h2>La Casa Milà</h2>
<p>O trabalho de Gaudí foi essencialmente
3. Digite </p> para finalizar o parágrafo. útil. ÿ <span lang="es">La Casa Milà é ÿ um
prédio de apartamentos e pessoas reais ÿ
moram lá.</p>
<h2>A Sagrada Família</h2>

<p>O Templo Expiatório da ÿ Sagrada Família,
de nome complicado e curiosamente
inacabado, é o edifício ÿ mais visitado
de Barcelona.</p>
</artigo>
</body>
</html>
100 Capítulo 4
Você pode usar estilos para formatar parágrafos com

uma fonte, tamanho ou cor específica (e muito mais).
Para obter detalhes, consulte o Capítulo 10.
Para controlar a quantidade de espaço entre

linhas, consulte “Definindo a altura da linha” no
Capítulo 10. Para controlar a quantidade de espaço após
um parágrafo, consulte “Definindo as margens ao redor
de um elemento” ou “Adicionando preenchimento ao redor
de um elemento”, ambos no Capítulo 11 .
Você pode justificar o texto do parágrafo ou alinhá-

lo à esquerda, à direita ou ao centro com CSS (consulte
“Alinhando texto” no Capítulo 10).
B Aqui você vê a renderização padrão típica de parágrafos.

Tal como acontece com todos os elementos de conteúdo,
você tem controle total sobre a formatação com CSS.
Texto 101
Adicionando Autor A Esta página possui dois elementos de endereço :

um para o autor do artigo e outro em um rodapé no
Informações de contato nível da página para as pessoas que mantêm a
página inteira. Observe que o endereço do artigo
contém apenas informações de contato. Embora as informações
Você pode pensar que o elemento de endereço básicas sobre Tracey Wong também estejam no rodapé do artigo ,
serve para marcar um endereço postal, mas não é estão fora do endereço
elemento.
(exceto em uma circunstância; veja as dicas).
Na verdade, não existe um elemento HTML ...
explicitamente projetado para esse propósito. <corpo>
Em vez disso, o endereço define as informações

<artigo>
de contato do autor, das pessoas ou da organização <h1>Museu é inaugurado à beira-mar</h1>
relevante para uma página HTML (geralmente <p>O novo museu de arte não apenas apresenta
aparecendo no final da página, se aparecer) ou ÿ uma série de obras contemporâneas à ÿ
parte de uma página, como dentro de um relatório ou cidade, mas também faz parte de um esforço
maior de desenvolvimento ÿ na orla marítima.</p>
uma notícia (A e B).
... [resto do conteúdo da história] ...
Para fornecer as 
informações de contato do autor:
<rodapé>
1. Se desejar fornecer informações de contato do <p>Tracey Wong escreveu para <cite>
autor de um artigo, coloque o cursor nesse ÿ The Paper of Papers</cite> desde que ÿ
recebeu seu mestrado em história da arte,
artigo. Como alternativa, coloque o cursor dentro
há três anos.</p>
do corpo (ou, mais comumente, no rodapé <endereço>
do nível da página ) se desejar fornecer Envie um e-mail para ela em <a href="mailto:
informações de contato do autor para a página ÿ traceyw@thepaperofpapers.com"> ÿ
como um todo. traceyw@thepaperofpapers.com ÿ </a>.
2. Digite <endereço>. </endereço>

</footer>
3. Digite o endereço de e-mail do autor, um link para
</artigo>
uma página com informações de contato e
breve.

4. Digite </address>.
<rodapé>
<p><small>© 2011 O Artigo da ÿ
Papers, Inc.</small></p>
<endereço>
Tem alguma dúvida ou comentário sobre o site ÿ ? <a
href="site-feedback.html">
ÿ Entre em contato com nossa equipe da Web</a>.
</endereço>
</footer>
</body>
</html>
102 Capítulo 4
Na maioria das vezes, as informações

de contato assumem a forma do endereço de e-
mail do autor ou de um link para uma página
com mais informações de contato. As
informações de contato poderiam muito bem
ser o endereço postal do autor, caso em que seria válido marcá-lo
Mas se você estiver criando a página Fale
conosco para sua empresa e quiser incluir os
locais dos seus escritórios, seria incorreto
codificá-los com o endereço.
endereço pertence ao ancestral do

elemento de artigo mais próximo ou ao corpo da
página se o endereço não estiver aninhado
em um artigo. É comum colocar o endereço em
um elemento de rodapé ao anotar as informações
B O elemento de endereço é renderizado em itálico por de contato do autor para a página A.
padrão.
Um endereço em um artigo fornece
informações de contato do autor desse
artigo A, não para quaisquer artigos aninhados
nesse artigo, como comentários de usuários.
O endereço pode conter apenas

informações de contato do autor e nada mais,
como a data da última modificação do documento ou do artigo .
Além disso, o HTML5 proíbe aninhar qualquer
um dos seguintes elementos dentro do
endereço: h1–h6, artigo, endereço, aparte,
rodapé, cabeçalho, hgroup, nav e seção.
Consulte o Capítulo 3 para saber mais

sobre os elementos do artigo e do rodapé .
Texto 103
Criando uma Figura A Esta figura possui uma imagem de gráfico, embora
mais de uma imagem ou outros tipos de conteúdo
(como uma tabela de dados ou vídeo) também sejam
Como você bem sabe, é uma convenção comum
permitidos. O elemento figcaption não é obrigatório,
no mundo da impressão associar figuras a texto. mas deve ser o primeiro ou o último elemento de uma
Uma figura pode ser um gráfico, um gráfico, uma figura se você incluí-lo. Uma figura não possui um estilo
padrão além de começar em sua própria linha nos
foto, uma ilustração, um segmento de código e
navegadores modernos B.
assim por diante. Você já viu isso em jornais,
revistas, reportagens e muito mais. Ora, este ...
mesmo livro tem figuras na maioria das páginas. <corpo>
<artigo>
Antes do HTML5, não havia um elemento projetado <h1>Receita de 2011 por setor</h1>
para essa finalidade, então os desenvolvedores ... [conteúdo do relatório] ...
criaram soluções por conta própria, muitas vezes

<figura>
envolvendo o elemento div não-semântico e
<figcaption>Figura 3: Receita de 2011 ÿ por
nada ideal . O HTML5 muda isso com figure e setor</figcaption>
figcaption. Por definição, uma figura é um
conteúdo independente (com uma legenda <img src="chart-revenue.png" ÿ
width="180" height="143" alt= ÿ "Gráfico de
opcional) referido pelo conteúdo principal do seu
receitas: Roupas 42%, ÿ Brinquedos 36%,
documento (A e B). A figcaption opcional é a
Alimentos 22%" />
legenda ou final de uma figura e pode aparecer </figura>
no início ou no final do conteúdo A da figura.
<p>Como ilustra a Figura 3, ... </p>
... [mais conteúdo do relatório] ...

</artigo>
Para criar uma figura e
uma legenda de figura: </body>
</html>
1. Digite <figura>.
2. Opcionalmente, digite <figcaption> para iniciar a

legenda da figura.
3. Digite o texto da legenda.
4. Digite </figcaption> se você criou uma legenda

nas etapas 2 e 3.
5. Crie sua figura adicionando código para imagens,

vídeos, tabelas de dados e assim por diante.
6. Se você não incluiu uma legenda

antes do conteúdo da sua figura , opcionalmente
siga as etapas 2 a 4 para adicionar uma após
o conteúdo.
7. Digite </figura>.
104 Capítulo 4
Normalmente, a figura faz parte do conteúdo

que se refere a ela A, mas também pode estar em
outro lugar da página ou em outra página, como em
um apêndice.
O elemento de figura pode incluir vários

conteúdos. Por exemplo, Um
poderia incluir dois gráficos: um para receitas e outro
para lucros. Tenha em mente, porém, que
independentemente de quanto conteúdo uma figura
tem, apenas uma figcaption é permitida.
Não use a figura simplesmente como um meio

de incorporar todas as instâncias de conteúdo
independente no texto. Muitas vezes, o elemento
aparte pode ser apropriado (veja “Especificando um
aparte” no Capítulo 3).
O elemento figure é conhecido como raiz

de seção em HTML5, o que significa que pode ter
títulos h1–h6 (e, portanto, seu próprio contorno), mas
eles não contribuem para o esboço do documento.
Isso é muito diferente de seccionar conteúdo. Consulte
“Compreendendo o esboço do documento HTML5” no
B A figura com o gráfico e a legenda aparece Capítulo 3.
dentro do texto do artigo . Seria simples
estilizar a figura com CSS para que, por exemplo, Você não pode usar a figcaption opcional
ela tivesse uma borda e o texto do artigo a envolvesse. elemento, a menos que esteja em uma figura com outro
contente.
o texto da figcaption não precisa começar com

“Figura 3” ou “Anexo B”. Poderia muito bem ser uma
breve descrição do conteúdo, como uma legenda de foto.
Se você incluir uma legenda de figura, ela deverá

ser o primeiro ou o último elemento da figura.
Texto 105
Especificando hora R Como é apropriado, o atributo datetime e o texto

do elemento time refletem a mesma data, embora
possam ser escritos de forma diferente um do outro
Você pode marcar uma hora precisa ou uma data do
(veja C para mais exemplos). Este elemento de
calendário com o elemento tempo . Este elemento tempo representa a data em que o artigo foi
é novo no HTML5. (Consulte a barra lateral publicado, pois o atributo pubdate está incluído.
“Compreendendo o formato de data e hora ” para ...
obter mais detalhes sobre o sistema de datas do calendário.) <corpo>
Um dos usos mais comuns do tempo é indicar a
<artigo>
data de publicação de um elemento de artigo . Para <cabeçalho>
fazer isso, inclua o pubdate <h1>Cheetah e Gazelle fazem amigos
atributo. O elemento de tempo com pubdate rápidos ÿ </h1>
representa a data de publicação do elemento <p><time datetime="2011-10-15"
de artigo ancestral mais próximo A. Você também ÿ pubdate="pubdate">15 de
outubro ÿ 2011</time></p>
pode registrar a data e hora dos comentários </header>
enviados pelo leitor de um artigo com hora, data e
hora e data de publicação, assumindo que ... [conteúdo do artigo] ...
cada comentário esteja agrupado em um elemento </artigo>
de artigo aninhado no artigo ao qual o o
</body>
comentário está relacionado (veja o Exemplo 2 da </html>
barra lateral em “Criando um Artigo” no Capítulo 3).
Você pode representar o tempo com o tempo

elemento de várias maneiras (A e C).
O conteúdo de texto opcional dentro do tempo (ou
seja, <time>texto</time>) aparece na tela
como uma versão legível por humanos (B
e D) do valor de data e hora opcional, legível por
máquina .
B A data de publicação do artigo aparece

abaixo do título. A versão do conteúdo de texto do
elemento time é exibida, não a data e hora
valor.
106 Capítulo 4
C O elemento tempo pode ser utilizado de Para especificar uma hora

diversas maneiras. A forma mais simples (o primeiro precisa, data do calendário ou ambos:
exemplo) não possui um atributo datetime . Mas
fornece a data e a hora no formato válido, 1. Digite <time para iniciar um elemento de tempo .
conforme exigido quando a data e hora é
omitida. Os três principais exemplos contêm hora 2. Se desejar, digite datetime="time" onde a hora é
e/ou data com texto dentro do tempo, que será representada no formato aprovado (veja a
exibido na tela D. Sugiro que você sempre inclua barra lateral “Compreendendo o formato
esta forma legível da hora, pois, atualmente, os
navegadores não exibirão um valor caso contrário B . datetime ”).
... 3. Se o horário representa a publicação

<corpo> data de um artigo ou da página inteira, digite
pubdate="pubdate" ou pubdate.
<p>O trem chega às <time>08:45</time>
ÿ e <time>16:20</time> em ÿ
<time>10/04/2012</time>.</p> 4. Digite > para completar a tag inicial.
5. Se desejar que a hora seja exibida no

<p>Começamos nossa descida do pico do ÿ
Everest em <time datetime="1952-06-12T11: ÿ navegador, digite um texto que reflita a hora, a
05:00">12 de junho de 1952 às 11h05 ÿ </ data ou ambas (veja a primeira dica sobre o
time></p> formato de texto permitido).
<p>Eles fizeram a reserva do jantar ÿ para

6. Digite </time>.
<time datetime="2011-09-20T18: ÿ
30:00">hoje à noite às 18h30</time>.</p>
Se você omitir o atributo datetime , o conteúdo
do texto deverá estar em conformidade com o formato
<p>A festa de lançamento do disco será no dia
válido de data ou hora. Em outras palavras, o
<time ÿ datetime="2011-12-09"></time>.</p>
primeiro exemplo em C não poderia ser codificado como <p>O trem
chega às <hora>8h45</time> e
</body>
</html> <time>16h20</time> em <time>outubro
4 de janeiro de 2012</time>.</p>. No entanto, ao
incluir data e hora, você está livre para representar a
data ou hora no conteúdo do texto como desejar,
como visto no segundo e terceiro exemplos de C.
Não use o tempo para marcar datas ou

horários imprecisos, como “meados de 1900”, “logo
depois da meia-noite”, “última parte da Renascença”
ou “início da semana passada”.
Sempre inclua uma versão em texto da hora e

da data dentro do elemento de hora se quiser que ela
seja exibida em sua página. Se estiver faltando, os
navegadores devem exibir texto baseado no valor de
data e hora , mas falta muito suporte no momento
em que este livro foi escrito D.
continua na página 109
D Os primeiros três parágrafos mostram uma hora.

A última não (veja a última dica).
Texto 107
Compreendendo o formato data e hora

A hora do elemento de tempo é baseada em um relógio de 24 horas com um deslocamento de fuso horário opcional em relação
ao UTC (Tempo Universal Coordenado). O atributo datetime fornece a data e a hora em um formato legível por máquina, que
simplifiquei neste exemplo inicial:
AAAA-MM-DDThh:mm:ss
Por exemplo (hora local):
03-11-2011T17:19:10
Isso significa “3 de novembro de 2011, 10 segundos após as 17h19, horário local”. T separa a data (AAAA-MM-DD) e a hora
(hh:mm:ss) e, se você incluir uma hora, os segundos serão opcionais. (Você também pode fornecer o tempo em
milissegundos no formato hh:mm.sss. Observe o período antes dos milissegundos.)
Se desejar, você pode representar seu tempo em um contexto global. Adicione um Z no final e o fuso horário será UTC.
Por exemplo (horário global em UTC):
03-11-2011T17:19:10Z
Ou você pode especificar um deslocamento de fuso horário em relação ao UTC omitindo Z e precedendo o deslocamento
com – (menos) ou + (mais).
Por exemplo (hora global com deslocamento do UTC):
03-11-2011T17:19:10-03:30
Isso significa “3 de novembro de 2011, 10 segundos após as 17h19, horário padrão de Newfoundland
(são menos três horas e meia do UTC)”. Uma lista de fusos horários por deslocamentos UTC está
disponível em http://en.wikipedia.org/wiki/List_of_time_zones_by_UTC_offset.
Se você incluir data e hora, não será necessário o conjunto completo de informações que acabei de descrever, como mostram os
exemplos em C. Tecnicamente falando, as datas no elemento tempo são baseadas no calendário gregoriano proléptico (como
você deve saber, o calendário gregoriano é o sistema de calendário civil internacionalmente aceito e de uso comum hoje).
Como tal, o HTML5 recomenda que você não o use para datas pré-gregorianas (é provável que isso não seja um problema
para o seu conteúdo, mas apenas para que você saiba). Tem havido muita discussão sobre essa limitação, mas é um assunto
complicado.
Leia http://dev.w3.org/html5/spec-author-view/the-time-element.html para obter mais informações e exemplos, ou
www.quirksmode.org/blog/archives/2009/04/making_time_saf.html para uma explicação extensa de alguns dos problemas.
108 Capítulo 4
Se você usar o tempo com o pubdate para indicar

data de publicação de um artigo , é comum, mas
não obrigatório, colocá-lo no elemento de cabeçalho ou
rodapé do artigo
elemento. Independentemente disso, certifique-se de que
esteja aninhado em algum lugar do artigo relevante.
Se um elemento de tempo com o pubdate

O atributo não possui um elemento de artigo como ancestral,
ele representa a data e hora de publicação de toda a página.
Você pode especificar pubdate como
<hora de publicação></hora>
ou <time pubdate="pubdate"></time>.
No entanto, se você incluí-lo, datetime
ou uma versão de conteúdo de texto da época é
necessário A.
O formato legível por máquina do atributo

datetime (consulte a barra lateral “Compreendendo o formato
datetime ”) permite a sincronização de datas e horas entre
aplicativos da Web.
No momento em que este livro foi escrito, nenhum
navegador exibia o valor de data e hora (B e D).
Você não pode aninhar um elemento de tempo

dentro de outro.
Texto 109
Marcando texto A A primeira frase tem forte e em, enquanto a segunda

tem apenas em . Se <em>sob qualquer
importante e enfatizado circunstâncias</em> fossem marcadas como

<strong>sob quaisquer circunstâncias</
strong>, teria maior importância do que o texto
O elemento forte denota texto importante, contido no forte ao redor.
enquanto em transmite ênfase. Você pode
...
usá-los individualmente ou em conjunto
<corpo>
conforme o seu conteúdo exigir (A e B).
<p><strong>Aviso: não se aproxime dos ÿ
Para marcar texto importante: zumbis <em>sob nenhuma circunstância</em>. ÿ
</strong> Eles podem <em>olhar</em>
1. Digite <forte>.
ÿ amigável, mas isso é só porque eles querem ÿ
2. Digite o texto que deseja marcar como comer seu braço.</p>
importante.
</body>
3. Digite </strong>. </html>
Para enfatizar o texto:

1. Digite <em>.
2. Digite o texto que deseja enfatizar.
3. Digite </em>.
Não use os elementos b e i como

B Os navegadores normalmente exibem texto forte em
substituições para forte e em, respectivamente. negrito e texto em itálico. Se ele é filho de um
Embora possam parecer semelhantes em um elemento forte (ver a primeira frase em A), seu
navegador, seus significados são muito o texto estará em itálico e em negrito.
diferentes (veja a barra lateral “Os elementos b e i : redefinidos em
HTML5").
Você pode aninhar texto forte dentro de

uma frase que também esteja marcada com forte. Se
você fizer isso, a importância do texto forte aumenta
cada vez que ele é filho de outro texto forte.
O mesmo se aplica ao nível de ênfase do texto em
aninhado em outro em. Por exemplo, “devido até 17
de novembro” é marcado como mais importante
semanticamente do que o outro sinal forte.
texto nesta frase: <p><strong>Lembre-se
que as inscrições devem ser <strong>devidas até
17 de novembro </strong>.</strong></p>.
Você pode estilizar qualquer texto como

negrito ou itálico com CSS, bem como substituir o
estilo padrão do navegador de elementos como forte e em
B. Para obter detalhes, consulte “Criando Itálico”
e “Aplicando Formatação em Negrito” no Capítulo 10.
110 Capítulo 4
Se você teve experiência

com HTML antes do HTML5, você
deve saber que os elementos b e i : redefinidos em HTML5
texto fortemente representado com ênfase
mais forte do que o texto em . Em HTML5, no entanto, em
HTML5 foca na semântica, não na apresentação de um elemento. Os elementos b e i são hold- é o único elemento
que (o
HTML, quando eram usados para deixar o texto em negrito ou itálico indica
CSS ênfase, desde
não o fazia e oos primeiros
forte mudoudias do
para
importância.
ainda existe). Eles caíram em desuso no HTML 4 e no XHTML 1 devido à sua natureza de apresentação. Os
codificadores foram incentivados a usar forte em vez de b e em em vez
[Iniciar delateral]
barra i. Acontece, porém, que em e strong
nem sempre são semanticamente apropriados. O HTML5 resolve isso redefinindo b e i.
[fim da barra lateral]

Algumas convenções tipográficas na publicação tradicional passam despercebidas pela semântica HTML disponível.
Entre eles estão alguns nomes científicos em itálico (por exemplo, “O Ulmus america-cana é a árvore do estado de
Massachusetts.”), veículos nomeados (por exemplo, “Nós montamos o Expresso do Oriente.”) e idiomas
estrangeiros (para o inglês). frases (por exemplo, “O casal exibiu uma alegria de viver contagiante.”). Esses termos não
estão em itálico para dar ênfase, apenas estilizados de acordo com a convenção.
Em vez de criar vários novos elementos semânticos (e turvar ainda mais as águas) para abordar casos como
estes, o HTML5 assume uma postura prática, tentando se contentar com o que está disponível: em para todos os níveis
de ênfase, forte para importância, e b e i para os casos através das rachaduras.
A noção é que embora b e i não tenham significado semântico explícito, o leitor reconhecerá que uma
diferença está implícita porque diferem do texto circundante. E você ainda pode alterar a aparência de
negrito e itálico com CSS. HTML5 enfatiza que você usa b e i
apenas como último recurso, quando outro elemento (como forte, em, citar e outros) não funcionar.
O elemento b em resumo
HTML5 redefine o elemento b desta forma:

O elemento b representa 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, como palavras-chave em um
resumo de documento, nomes de produtos em uma revisão, palavras acionáveis em software interativo
baseado em texto ou um lede de artigo.
Por exemplo:
<p>O <b>XR-5</b>, também apelidado de <b>Extreme Robot 5</b>, é o melhor robô que já ÿ
testamos.</p>
O elemento b é renderizado em negrito por padrão.
O elemento i em resumo
HTML5 redefine o elemento i desta forma:

O elemento i representa um trecho de texto em uma voz ou humor alternativo, ou de outra forma deslocado
da prosa normal de uma maneira que indica uma qualidade diferente de texto, como uma designação
taxonômica, um termo técnico, uma frase idiomática de outro idioma, um pensamento, ou um nome de navio
em textos ocidentais.
aqui estão alguns exemplos:
<p>A <i lang="la">Ulmus americana</i> é a árvore do estado de Massachusetts.</p>
<p>O <i>Expresso do Oriente</i> começou a operar em 1883.<p>
<p>O casal exibiu uma <i lang="fr">joie de vivre</i> que era contagiante.<p>
O elemento i é exibido em itálico por padrão.
Texto 111
Indicando uma R O elemento cite é apropriado para marcar títulos de

obras de arte, músicas, filmes e livros.
citação ou referência ...
Use o elemento cite para uma citação ou referência
<p>Ele ouviu <cite>Abbey Road</cite>
referência a uma fonte. Os exemplos incluem ÿ enquanto assiste <cite>A Hard Day's
o título de uma peça, roteiro ou livro; o nome Night ÿ </cite> e lê <cite>The Beatles ÿ
de uma música, filme, foto ou escultura; um Anthology</cite>.
concerto ou turnê musical; uma
<p>Quando
especificação; um jornal ou documento jurídico; e mais (A e B). foi ao Louvre, ele descobriu ÿ
que <cite>Mona Lisa</cite> também é
conhecida ÿ como <cite lang="it">La Gioconda</cite>.</p>
Para citar uma referência:
...
1. Digite <citar>.
2. Digite o nome da referência.
3. Digite </cite>.
Para casos em que você está

citando a fonte citada, use o blockquote
ou q elementos, conforme o caso, para marcar
o texto citado (ver “Citar Texto”). Para ser
claro, a citação é apenas para a fonte, não
para o que você está citando.
B O elemento cite é renderizado em itálico por padrão.
HTML5 e uso do elemento cite para nomes

Em meio a muitas divergências por parte da comunidade de desenvolvimento, o HTML5 declara
explicitamente que usar cite para uma referência ao nome de uma pessoa é inválido, embora versões
anteriores do HTML permitissem isso e muitos desenvolvedores e designers o usassem dessa forma.
A especificação HTML 4 fornece o seguinte exemplo (alterei os nomes dos elementos de maiúsculas para
minúsculas):
Como disse Harry S. Truman,

<q lang="en-us">A responsabilidade termina aqui.</q>
Além de casos como esse, os sites costumam usar citações para o nome de visitantes que deixam
comentários em postagens de blogs e artigos (o tema padrão do WordPress também o faz).
Muitos desenvolvedores deixaram claro que pretendem continuar a usar citações em nomes associados
a aspas em suas páginas HTML5 porque o HTML5 não fornece uma alternativa que considerem
aceitável (ou seja, os elementos span e b ). Jeremy Keith defendeu veementemente o caso em http://
24ways.org/2009/incite-a-riot/.
112 Capítulo 4
Uma citação em bloco pode ser tão curta ou longa quanto

você precisar. Opcionalmente, inclua o atributo cite –
Citando Texto
que não deve ser confundido com o elemento cite
Existem dois elementos especiais para
mostrado no primeiro parágrafo – para fornecer a
localização do texto citado. No entanto, os navegadores marcar o texto citado de uma fonte. O elemento
não exibem as informações do atributo de citação B. blockquote representa uma citação (geralmente
(Veja a segunda dica para uma recomendação relacionada.) mais longa, mas não necessariamente) que fica
... sozinhaA e é renderizada em sua própria linha
<corpo> por padrãoB. Enquanto isso, o elemento q é para
citações curtas, como aquelas dentro de uma
<p>Ele gostou desta seleção de <cite>As ÿ Aventuras frase C (na próxima página).
de Huckleberry Finn</cite> de ÿ Mark Twain:</p>
Os navegadores devem incluir q
texto do elemento entre aspas específicas do
<blockquote cite="http://www.marktwain ÿ idioma automaticamente, mas o Internet Explorer
books.edu/the-adventures-of-huckleberry ÿ
-finn/"> não suportava isso até o IE8. Alguns navegadores
<p>Dissemos que não há casa melhor que

também apresentam problemas com aspas
uma ÿ jangada, afinal. Outros lugares parecem aninhadas. Não deixe de ler as dicas para
tão apertados e sufocantes, mas uma aprender sobre alternativas ao uso do elemento q .
jangada não . Você se sente muito livre e ÿ
confortável e confortável em uma jangada.</p>
</blockquote> Para citar um bloco de texto:
1. Digite <blockquote para iniciar uma cotação
<p>Isso o lembrou de sua própria juventude explorando
em bloco.
ÿ o condado à beira do rio.</p>
2. Se desejar, digite cite="url", onde url
</body> é o endereço da fonte do
</html>
citar.
3. Digite > para completar a tag inicial.
4. Digite o texto que deseja citar,

arredondando-o com parágrafos e outros
elementos conforme apropriado.
5. Digite </blockquote>.
B Os navegadores normalmente recuam o texto das

aspas por padrão. Historicamente, os navegadores não
exibiam o valor do atributo cite (veja a segunda dica para
uma recomendação relacionada). O elemento cite , por
outro lado, é suportado por todos os navegadores e
normalmente é renderizado em itálico, conforme
mostrado. Todos esses padrões podem ser substituídos por CSS.
Texto 113
Para citar uma frase curta: C Adicione o atributo lang ao elemento q se o texto
citado estiver em um idioma diferente do padrão
1. Digite <q para começar a citar uma palavra da página (conforme especificado pelo atributo lang
ou frase. no elemento html ).
2. Se desejar, digite cite="url", onde url ...

é o endereço da fonte do
<corpo>
citar.
<p>E então ela disse: <q>Você leu <cite>High
3. Se o idioma da cotação for diferente do idioma
Tide in ÿ Tucson</cite> de ÿ Barbara Kingsolver ?
padrão da página (conforme especificado É inspirador.</q></p>
pelo atributo lang no HTML
elemento), digite lang="xx", onde xx é o <p>Ela tentou novamente, desta vez em francês:
ÿ <q lang="fr">Você leu o livro ÿ <cite>High
código de duas letras para o idioma em que a
Tide in Tucson</cite> de ÿ Kingsolver? É
citação estará. Este código é suposto
inspirador.</q></p>
para determinar o tipo de aspas que serão
usadas (“” para inglês, «» para muitos </body>
idiomas europeus e assim por diante), embora </html>
o suporte do navegador para esta renderização

possa variar.
4. Digite > para completar a tag inicial.
5. Digite o texto que deverá ser citado.
6. Digite </q>.
Embora seja permitido, evite colocar

texto diretamente entre as tags
blockquote inicial e final . Em vez disso, coloque-o em p
ou outros elementos semanticamente
apropriados dentro da citação.
Você pode usar o atributo opcional cite

em blockquote e q para fornecer uma URL para
a fonte que você está citando. Infelizmente, os
navegadores tradicionalmente não apresentam a citação
URL para os usuários B, portanto, não é o
atributo mais útil por si só. Conseqüentemente,
se você incluir citação, recomendo que repita a
URL em um link (o elemento a ) em seu
conteúdo, permitindo que os visitantes o
acessem. De forma menos eficaz, você poderia expor o valor da citação via JavaScript.
114 Capítulo 4
O elemento blockquote é conhecido como

uma raiz de seção em HTML5, o que
significa que pode ter títulos h1–h6 (e,
portanto, seu próprio esboço), mas eles não
contribuem para o esboço do documento. Isso
é muito diferente de seccionar conteúdo.
Consulte “Compreendendo o esboço do documento HTML5” no
O elemento q é inválido para uma citação

que se estende além de um parágrafo.
Certifique-se de não usar q simplesmente

Os navegadores D devem adicionar aspas duplas ao redor porque deseja colocar aspas em uma palavra
dos elementos q (e aspas simples ao redor dos elementos q ou frase. Por exemplo, <p>Toda vez que ouço
aninhados ) automaticamente. Conforme mostrado a palavra <q>soja</q>, pulo de alegria.</p>
aqui, o Firefox faz isso, mas nem todos os navegadores é impróprio porque “soja” não é uma citação de um
fazem isso (por exemplo, versões mais antigas do Internet Explorer). fonte.
Você pode aninhar elementos

blockquote e q . Por exemplo, <p>O conto
começou, <q>Quando ela era criança, ela
diria: <q>Olá, estranho!</q> para
todos por quem ela passou.</q></p>. Os
elementos q aninhados devem ter
automaticamente as aspas apropriadas – em
inglês, as aspas externas devem ser duplas
e as internas devem ser simples – mas o
suporte do navegador varia. Como as
citações externas e internas são tratadas de forma diferente na
atribua a q conforme necessário (C e D).
Devido a problemas entre navegadores com

q D, muitos (provavelmente a maioria)
codificadores optam por simplesmente
digitar as aspas apropriadas ou usar entidades
de caracteres em vez do elemento q . Em
seu artigo detalhado “Citando e citando com
<blockquote>, <q>, <cite> e o atributo cite ”
no HTML5 Doctor, Oli Studholme discute isso
e muito mais, como uma série de opções
para estilizar aspas com o elemento q e
informações de suporte do navegador relacionadas (http://html5
blockquote-q-cite/).
Texto 115
Destacando texto R Embora a marca possa ter seu uso mais difundido nos
resultados de pesquisa, aqui está outro uso válido dela.
A frase “15 minutos” não estava destacada nas instruções da
Todos nós já usamos um marcador em algum momento
embalagem. Em vez disso, o autor deste HTML usou a marca
ou outro. Talvez tenha sido quando estudava para destacar a frase como parte da história. A renderização
para uma prova ou estava fechando um contrato. Seja padrão do texto da marca no navegador varia B.
qual for o caso, você usou o marcador para marcar

palavras-chave ou frases relevantes para uma tarefa. ...
<corpo>
HTML5 replica isso com a nova marca

<p>Então, voltei e li as instruções ÿ para ver o que
elemento. Pense na marca como uma versão
havia feito de errado. Eles ÿ disseram:</p>
semântica de um marcador. Em outras palavras, o
importante é que você esteja anotando certas palavras;
como eles aparecem é irrelevante. <blockquote>
<p>Retire a bandeja da caixa. Fure o invólucro
Estilize seu texto com CSS como desejar (ou não), mas
várias vezes com um ÿ garfo e cozinhe
use mark apenas quando for pertinente. em fogo alto por <mark>15 ÿ minutos</
mark>, girando até a metade ÿ do tempo.</p>
Não importa quando você usa a marca, é para chamar

</blockquote>
a atenção do leitor para um determinado segmento de
texto. Aqui estão alguns casos de uso para isso: <p>Achei que ele tinha me dito <em>cinquenta</em>. Não
é de admirar que tenha explodido no meu micro-ondas.</p>
n Para destacar um termo de pesquisa quando ele
aparece em uma página de resultados de pesquisa </body>
ou em um artigo. Quando as pessoas falam sobre </html>
marca, este é o contexto mais comum. Suponha
que você tenha usado o recurso de pesquisa de
um site para procurar “painéis solares”. Os
resultados da pesquisa ou cada artigo resultante
poderiam usar <mark>painéis solares</mark>
para destacar o termo ao longo do texto.
n Chamar a atenção para parte de uma citação que não

foi destacada pelo autor em sua forma original (A
e B).
n Para chamar a atenção para um fragmento de

código (C e D).
B Navegadores com suporte nativo da marca

O elemento exibe um fundo amarelo atrás do texto por
padrão. Os navegadores mais antigos não o fazem, mas você
pode instruí-los a fazer isso com uma regra simples em sua
folha de estilos (veja as dicas).
116 Capítulo 4
C Este exemplo usa marca para chamar a atenção para um Para destacar o texto:
segmento de código.
1. Digite <marca>.
...
2. Digite a palavra ou palavras às quais você
<corpo>
quero chamar a atenção.
<p>É uma má prática usar um nome de classe que ÿ 3. Digite </mark>.

descreva a aparência de um elemento, como ÿ como
a parte destacada do CSS abaixo:
<pré> O elemento mark não é o mesmo que
<código> ou em (que representa ênfase) ou forte (que
<mark>.greenText</mark> { representa importância). Ambos são abordados
cor verde; neste capítulo também.
}
</código> Como mark é novo em HTML5,
</pré> navegadores mais antigos não renderizam uma cor
de fundo por padrão B e D. Você pode instruí-los
</body> a fazer isso adicionando mark { background-color:
</html> amarelo; } para sua folha de estilo.
Certifique-se de não usar a marca

simplesmente para dar ao texto uma cor de fundo
ou outro tratamento visual. Se tudo o que você
procura é um meio de estilizar o texto e não há
um elemento HTML semântico adequado para
envolvê-lo, use o elemento span (abordado neste
capítulo) e estilize-o com CSS.
D Este código marcado com uma marca é destacado.
Texto 117
Explicando A Use o atributo opcional title para fornecer a versão

expandida de uma abreviatura. Alternativamente, e
Abreviações provavelmente de preferência, você pode colocar
a expansão entre parênteses após a abreviatura.
Ou misture e combine. A maioria das pessoas estará
As abreviações são abundantes, seja como Jr., MD familiarizada com palavras como laser e mergulho,
ou até mesmo o bom e velho HTML. Você pode portanto, marcá-las com abbr e fornecer títulos não é
realmente necessário, mas fiz isso aqui para fins de
usar o elemento abbr para marcar abreviações
demonstração.
e explicar seu significado (A a C).
Você não precisa agrupar todas as abreviações ...
em abbr, apenas quando achar que seria útil <corpo>
para os visitantes receberem o significado
<p>A <abbr title="National Football ÿ League">NFL</
expandido.
abbr> prometeu uma <abbr ÿ title="amplificação de
luz por ÿ emissão estimulada de radiação">
Para explicar abreviações:
ÿ show de laser</abbr> às 21h após cada ÿ jogo
1. Digite <abbr.
noturno.</p>
2. Opcionalmente, em
<p>Mas isso não é nada comparado ao que a ÿ
seguida digite title="expansion", onde expansion
<abbr>MLB</abbr> (Liga Principal ÿ Beisebol)
são as palavras que representam a fez. Eles deram de graça
abreviatura. ÿ <abbr title="autocontido debaixo d'água
ÿ aparelho respiratório"> equipamento de mergulho</

3. Digite >.
abbr> ÿ durante períodos de chuva.</p>
4. Em seguida, digite a própria abreviatura.
</body>
5. Por fim, finalize com </abbr>. </html>
6. Opcionalmente, digite um espaço
e (expansão), onde expansão são as
palavras que representam a abreviatura.
118 Capítulo 4
É prática comum incluir uma abreviação

expansão da viagem (através de título ou parênteses)
apenas na primeira vez que aparece na página A.
Uma expansão de abreviatura entre

parênteses é a maneira mais explícita de descrever
uma abreviatura, tornando-a disponível para o maior
conjunto de visitantes A. Por exemplo, usuários em
dispositivos com tela sensível ao toque, como
smartphones e tablets, podem não conseguir passar o
mouse sobre um elemento abreviado para veja uma
dica de ferramenta de título . Portanto, se você fornecer
B Quando as abreviaturas possuem um atributo de título , o
uma expansão, considere colocá-la entre parênteses sempre que possível.
Firefox e o Opera chamam a atenção para elas com um
sublinhado pontilhado. (Você pode instruir outros navegadores a
Se você usar uma abreviatura no plural
fazerem o mesmo com CSS; veja as dicas.) Em todos os
navegadores, exceto o IE6, quando os visitantes passam o
forma, faça a expansão no plural também.
mouse sobre uma abreviatura, o conteúdo do título do elemento
é mostrado em uma dica de ferramenta. Como uma dica visual para usuários com
visão, navegadores como Firefox e Opera exibem
abreviatura com uma borda inferior pontilhada se tiver
um título B. Se você quiser replicar esse efeito em
todos os navegadores (exceto IE6), adicione o seguinte
para sua folha de estilo: abbr[title] { border-bottom: 1px
pontilhado #000; }. Os navegadores fornecem o título
conteúdo do atributo como uma dica de ferramenta C ,
independentemente de o abbr ser estilizado com uma borda.
Se você não vir a borda inferior pontilhada em sua

abreviação no Internet Explorer 7, tente ajustar a altura
C O Chrome e alguns outros navegadores exibem o título da linha CSS do elemento pai
das abreviações como uma dica de ferramenta, mas propriedade (ver Capítulo 10).
não exibem a abreviatura em si de forma diferente,
a menos que você mesmo aplique algum CSS. O IE6 não suporta abbr, então você não verá
uma borda ou dica de ferramenta, apenas o texto. Se
você realmente deseja estilizar abbr no IE6, você
pode colocar document.createElement('abbr'); em um
arquivo JavaScript direcionado ao IE6 antes do seu
CSS. Eu digo para pular isso e deixar o IE6 ser uma
exceção neste caso. (Consulte o Capítulo 11 para saber
mais sobre document.createElement no que se refere
ao estilo de elementos que são novos no HTML5 no IE8
e versões anteriores.)
O HTML tinha um elemento de acrônimo antes

do HTML5, mas os desenvolvedores e designers
muitas vezes ficavam confusos com a diferença entre
uma abreviatura e um acrônimo, então o HTML5
eliminou o elemento de acrônimo em favor de abbr.
para todas as instâncias.
Texto 119
Definindo um Termo Observe que embora o pleonasmo apareça duas

vezes no exemplo, dfn marca apenas o segundo,
porque foi quando defini o termo (ou seja, é a
O elemento dfn marca o único local no documento
instância definidora). Da mesma forma, se eu
onde você define um termo. Os usos subsequentes do usasse o pleonasmo posteriormente no documento,
termo não são marcados. não o colocaria em dfn porque já o defini. Por
padrão, os navegadores estilizam o texto dfn de
Você envolve dfn apenas em torno do termo que está
maneira diferente do texto normal B. Além disso,
definindo, não em torno da definição A. você não precisa usar o elemento cite toda vez que
usar dfn, apenas quando fizer referência a uma fonte.
É importante onde você coloca o dfn em relação à
sua definição. HTML5 afirma: “O parágrafo, ...
grupo de lista de descrição ou seção que é o <corpo>
ancestral mais próximo do elemento dfn também
deve conter a(s) definição(ões) para o termo <p>O competidor foi solicitado a soletrar
ÿ "pleonasmo". Ela solicitou a definição ÿ e foi
dado pelo elemento dfn informada de que <dfn>pleonasmo</dfn>
elemento." Isso significa que o dfn e sua definição ÿ significa "uma palavra ou expressão
devem estar próximos um do outro. Este é o caso redundante" ÿ (Ref: <cite><a href=" http://dictionary.
tanto de A quanto do exemplo dado na terceira ÿ reference.com/browse/pleonasm" rel=
ÿ "external">dictionary.com</a></cite>).</p>
dica; o dfn e sua definição estão no mesmo parágrafo.
</body>
</html>
Para marcar a instância
definidora de um termo:
1. Digite <dfn>.
2. Digite o termo que deseja definir.
3. Digite </dfn>.
Você também pode usar dfn em uma lista de

definições (o elemento dl ). Consulte o Capítulo 15. B O elemento dfn é renderizado em itálico por padrão
em alguns navegadores (Firefox, neste caso), assim
Se você quiser direcionar os usuários para a definição
como cite, mas não em navegadores baseados em
instância de um termo, você pode adicionar um id ao Webkit, como Safari e Chrome. Você pode torná-los
consistentes adicionando dfn { font-style: italic; } para
dfn e vinculá-lo a partir de outros pontos do site.
sua folha de estilo (veja os Capítulos 8 e 10).
dfn também pode incluir outro
elemento de fraseado como abbr, quando apropriado.
Por exemplo, <p>Um <dfn><abbr title=
"Junior">Jr.</abbr></dfn> é um filho com o
mesmo nome completo do pai.</p>.
HTML5 diz que se você usar o atributo opcional

title em um dfn, ele deverá ter o mesmo valor que o
termo dfn . Como na dica anterior, se você aninhar um
único abbr no dfn e o dfn não tiver nenhum nó de
texto próprio, o título opcional deverá estar apenas no
abbr .
120 Capítulo 4
Um uso do elemento sup é indicar notas de

rodapé. Coloquei as notas de rodapé no rodapé do
Criação de
artigo , em vez de na página como um todo,
porque elas estão associadas. Também vinculei cada sobrescritos e subscritos
número de nota de rodapé do texto à sua nota de
Letras ou números elevados ou
rodapé no rodapé para que os visitantes possam acessá-los com mais facilidade.
Observe também que o atributo title nos links ligeiramente rebaixados em relação ao corpo do
fornece outra dica.
texto principal são chamados de sobrescritos e
... subscritos, respectivamenteA. HTML inclui
<corpo> elementos para definir os dois tipos de
texto. Os usos comuns para sobrescritos
<artigo>
incluem marcação de símbolos de marcas
<h1>Catalães famosos</h1>
registradas, expoentes e notas de rodapé B. Subscritos são comuns
<p>Quando eu estava na sexta série, ÿ
notação química.
tocava violoncelo. Tinha um ÿ
professor na escola que sempre ÿ me
perguntava se eu sabia quem era
"Pablo ÿ Casals". Na época não o fiz ÿ
(embora tenha conhecido Rostropovich uma
vez ÿ em um show). Na verdade, o ÿ nome
verdadeiro de Pablo Casals era <i>Pau</i>
Casals, sendo Pau ÿ o equivalente catalão de Pablo
ÿ <a href="#footnote-1" title="Ler
ÿ nota de rodapé"><sup>1</sup></a>.</p>
<p>Além de ser um ÿ violoncelista

incrível, Pau Casals é lembrado ÿ neste país
por seu apaixonado ÿ discurso contra a
proliferação nuclear ÿ nas Nações Unidas <a
href=
ÿ "#footnote-2" title="Ler
ÿ nota de rodapé"><sup>2</sup></a>
que ÿ ele começou dizendo "Eu sou catalão.
ÿ A Catalunha é uma nação oprimida."</p>
<rodapé>
B Infelizmente, os elementos sub e sup
<p><sup>1</sup> Significa Paulo prejudicam o espaçamento entre linhas.
em ÿ inglês.</p> Observe que há mais espaço entre as linhas 4 e 5
<p><sup>2</sup>Em 1963, creio.</p> do primeiro parágrafo e as linhas 2 e 3 do segundo
</footer> do que entre as demais linhas. Um pouco de
</artigo> CSS vem em socorro; consulte a barra lateral
“Corrigindo o espaçamento entre linhas ao usar sub
ou sup” para saber como consertar isso. Você
</body>
</html> também pode alterar o tratamento dos sobrescritos
vinculados para que um sublinhado não apareça muito
longe do texto sobrescrito.
Texto 121
Para criar sobrescritos ou subscritos:

1. Digite <sub> para criar um subscrito ou
<sup> para criar um sobrescrito.
2. Digite os caracteres ou símbolos que
representam o subscrito ou sobrescrito.
3. Digite </sub> ou </sup>, dependendo do
que você usou no passo 1, para
completar o elemento.
A maioria dos navegadores reduz automaticamente

o tamanho da fonte do texto subscrito ou sobrescrito em
alguns pontos.
Os sobrescritos são a maneira ideal de marcar

certas abreviações de línguas estrangeiras, como Mlle
para Mademoiselle em francês ou 3a para ter-cera em
espanhol, ou números como 2º e 5º.
Um uso adequado de subscritos é escrever

moléculas químicas como H20. Por exemplo, <p>Estou
com sede. Eu poderia por favor
toma um copo de H<sub>2</sub>O?</p>.
Caracteres super e subscritos suavemente

estragar o espaçamento uniforme entre as linhas B. Veja
a barra lateral para uma solução.
122 Capítulo 4
Corrigindo o espaçamento entre linhas ao usar sub ou sup

Os elementos sub e sup tendem a alterar a altura da linha entre as linhas do texto B. Felizmente, você pode
corrigir isso com um pouco de CSS.
O código a seguir vem do excelente normalize.css de Nicolas Gallagher e Jonathan Neal (http://
necolas.github.com/normalize.css/). Eles não inventaram o método a seguir; eles o pegaram emprestado
de https://gist.github.com/413930 e removeram os comentários do código. O segundo link do GitHub inclui uma
explicação completa do que esse CSS faz, então recomendo que você dê uma olhada. Também recomendo
verificar normalize.css, que você pode usar em seus próprios projetos. Ele ajuda você a obter uma linha de
base consistente para renderização em todos os navegadores e está completamente documentado (consulte
“Redefinindo ou normalizando estilos padrão” no Capítulo 11).
/*
* Impede que sub e sup afetem a altura da linha em todos os navegadores
* essência.github.com/413930
*/
sub,
e aí {
tamanho da fonte: 75%;
altura da linha: 0;
posição: relativa;
alinhamento vertical: linha de base;
}
e aí {
superior: -0,5em;
}
secundário {
inferior: -0,25em;
}
Pode ser necessário ajustar um pouco esse CSS para nivelar a altura das linhas, dependendo do tamanho
da fonte do seu conteúdo, mas isso deve ser, pelo menos, um bom começo. Você aprenderá como criar
folhas de estilo e como adicionar esse CSS ao seu site no Capítulo 8.
Texto 123
Um item (a bicicleta) foi adicionado a esta lista de

Observando edições e presentes desde que foi publicada anteriormente, e
Texto impreciso os itens comprados foram removidos, conforme observado
pelos elementos del . Você não é obrigado a usar del
cada vez que você usa ins, ou vice-versa. Os
Às vezes você pode querer indicar edições de navegadores diferenciam o conteúdo de cada elemento
conteúdo que ocorreram desde o visualmente por padrão B.
versão anterior da sua página ou marque texto que ...
não seja mais preciso ou relevante. <corpo>
Existem dois elementos para anotar edições: o
elemento ins representa o conteúdo que foi <h1>Lista de desejos de presentes de caridade</h1>
adicionado e o elemento del marca o conteúdo

<p>Por favor, considere doar um ou mais ÿ dos
que foi removido (A
seguintes itens para o ÿ centro comunitário da vila:</p>
através de D). Você pode usá-los juntos ou
individualmente.
<ul>
Enquanto isso, o elemento s anota conteúdo que
<li><del>2 mesas</del></li>
não é mais preciso ou relevante (não é para edições) <li>1 quadro-negro</li>
(E e F). <li> <del> 4 <abbr>OLPC</abbr>
(um ÿ laptop por criança )
Para marcar uma edição
<li><ins>1 bicicleta</ins></li>
envolvendo texto recém-inserido: </ul>
1. Digite <ins>.
</body>
2. Digite o novo conteúdo. </html>
3. Digite </ins>.
Para marcar uma edição

envolvendo texto excluído:
1. Coloque o cursor antes do texto ou elemento

mento que você deseja marcar como excluído.
2. Digite <del>.
3. Posicione o cursor após o texto ou elemento
mento que você deseja marcar como excluído.
4. Digite </del>.
B Os navegadores normalmente exibem uma linha

texto excluído e sublinhado o texto inserido. Você pode
alterar esses tratamentos com CSS.
124 Capítulo 4
C Tanto del quanto ins são raros, pois podem envolver tanto conteúdo de fraseado (“inline” no jargão pré-HTML5) quanto
blocos de conteúdo, como mostrado aqui. No entanto, a renderização padrão do navegador varia D.
...
<corpo>
<h1>Lista de desejos de presentes de caridade</h1>
<del>
<p>Por favor, considere doar um ou mais dos seguintes itens para o centro ÿ comunitário da vila :</p>
</del>
<ins>
<p>Observe que todos os presentes foram comprados.</p> <p>Muito
obrigado <em></em> por suas generosas doações!</p>
</ins>
<del>
<ul>
<li><del>2 mesas</del></li> <li>1
quadro-negro</li> <li><del>4
<abbr>OLPC</abbr> (um laptop por criança) XO laptops</del></li> <li><ins>1 bicicleta</ins></li>
</ul>
</del>
</body>
</html>
D A maioria dos navegadores, como o Chrome (à esquerda), exibe del e ins agrupados em blocos de conteúdo por padrão,
conforme esperado. Ou seja, refletem que partes inteiras do conteúdo foram excluídas ou inseridas. No momento em que
este livro foi escrito, o Firefox não; ele apenas renderiza as linhas para frases de texto del e ins dentro de outros elementos.
Consulte a barra lateral “Obtendo del e ins para exibição consistente” para saber como corrigir isso.
Texto 125
Para marcar texto que não é E Este exemplo mostra uma lista ordenada (o antigo
mais preciso ou relevante: elemento) dos horários dos shows. Os horários para os
quais a disponibilidade de ingressos não é mais relevante
1. Coloque o cursor antes do texto que você foram marcados com o elemento s . Você pode usar s em
qualquer frase, não apenas no texto dos itens da lista (li
deseja marcar como não mais preciso ou
elementos), mas não em torno de um parágrafo inteiro ou
relevante. outro elemento de “nível de bloco” como você pode fazer com del
e ins.
2. Digite <s>.
...
3. Posicione o cursor após o texto que deseja
marcar. <corpo>
4. Digite </s>. <h1>Horários de hoje</h1>
<p>Os ingressos estão disponíveis nos seguintes

Tanto del quanto ins suportam dois atributos: ÿ horários hoje:</p>
citar e data e hora. O atributo cite (não o mesmo
que o elemento cite ) serve para fornecer uma URL <ol>
para uma fonte que explica por que uma edição <li><ins>14h (este programa acabou de ser adicionado!)
foi feita. Por exemplo, <ins cite="http:// ÿ </ins></li>
www.movienews.com/ticket-demand-
<li><s>17h</s> ESGOTADO </li>
high.html">14h (este programa apenas <li><s>20h30</s> ESGOTADO </li>
adicionado!)</ins>. Use o atributo datetime para </ol>
indicar a hora da edição. (Consulte “Especificando
a hora” para saber mais sobre o formato aceitável </body>
de data e hora .) Os navegadores não exibem os </html>
valores atribuídos a nenhum desses atributos,
portanto, seu uso não é generalizado, mas
sinta-se à vontade para incluí-los para adicionar contexto. ao seu conteúdo.
Os valores podem ser extraídos com JavaScript
ou um programa que analisa sua página.
F O elemento s é renderizado como um tachado por

padrão nos navegadores.
126 Capítulo 4
Use del e ins sempre que quiser informar

Obtendo del e ins para exibição seus visitantes sobre a evolução do seu
conteúdo. Por exemplo, você frequentemente os
Consistentemente
verá usados em um tutorial de desenvolvimento
Os navegadores renderizam conteúdo em nível de bloco ou design Web para indicar informações
del e ins inconsistentemente. A maioria exibe aprendidas desde que foram postadas inicialmente,
um tachado para del e um sublinhado enquanto mantém a cópia como originalmente
para ins em todo o conteúdo aninhado como representava a integridade. O mesmo se aplica a blogs, sites de notíc
esperado, mas pelo menos o Firefox não D.
O texto marcado com o elemento ins
geralmente é sublinhado B. Como os links também
Você pode corrigir isso com as seguintes regras costumam ser sublinhados (se não no seu site,
* pelo menos em muitos outros), isso pode
CSS explícitas (cada elemento significa que
dentro de del e ins recebe o tratamento): confundir os visitantes. Você pode querer usar
estilos para alterar como as passagens inseridas
(ou links) são exibidas (veja o Capítulo 10).
do * {
decoração de texto: O texto marcado com o elemento del
geralmente é riscado B. Por que não
ÿ passagem de linha;
simplesmente apagá-lo e pronto? Depende do
} contexto do seu conteúdo. Riscar torna mais
fácil para os usuários com visão saber o que
ins * { mudou. (Além disso, os leitores de tela
decoração de texto: sublinhado; poderiam anunciar que o conteúdo foi removido,
mas seu apoio para fazê-lo tem faltado
}
historicamente.)
Consulte o Capítulo 8 se não tiver certeza de como
adicionar este CSS a uma folha de estilo. Use apenas del, ins e s para seu valor
semântico. Se desejar sublinhar ou riscar o
texto apenas por motivos cosméticos, você pode
fazê-lo com CSS (consulte “Decoração de texto”
no Capítulo 10).
HTML5 observa que “O elemento s não é

apropriado ao indicar edições de documentos;
para marcar um trecho de texto como removido de
um documento, use o elemento del .” Você pode
achar a distinção um pouco sutil às vezes.
Cabe a você decidir qual é a escolha semântica
adequada para o seu conteúdo.
Texto 127
Código de marcação A O elemento code indica que o texto é um código ou

um nome de arquivo. Também é renderizado como um
fonte monoespaçada por padrão B. Se o seu código
Se o seu conteúdo contiver exemplos de código,
precisar exibir sinais < ou > , use o < e > entidades
nomes de arquivos ou nomes de programas, o código de caracteres em vez disso, respectivamente. Aqui, a segunda
instância do código demonstra isso. Se você usasse < e >, o
elemento é para você (A e B). Para mostrar um
navegador trataria seu código como um elemento HTML, não
bloco de código independente (fora de uma frase), como texto.
envolva o elemento de código com um pré- elemento
para manter sua formatação (consulte “Usando texto ...
pré-formatado” para obter um exemplo). <corpo>
<p>A função <code>showPhoto()</code> ÿ

Para marcar código ou nome de arquivo: exibe a foto em tamanho real da ÿ miniatura
em nossa lista de carrossel <code><ul
1. Digite <código>.
id= ÿ "thumbnail"></code> .< /p>
2. Digite o código ou nome do arquivo.
<p>Este exemplo de abreviação CSS aplica
3. Digite </code>.
uma ÿ margem a todos os lados dos
parágrafos: ÿ <code>p { margin: 20px; }</
código>. Dê uma olhada em <code>base.css</
Você pode alterar a fonte padrão com
espaçamento único aplicada ao código B com code> para ver ÿ mais exemplos.</p>
CSS (consulte o Capítulo 10).
</body>
</html>
B O texto do elemento de código até se parece com código

por causa da fonte padrão monoespaçada.
128 Capítulo 4
Outros elementos de computador e relacionados: kbd, samp e var

Os elementos kbd, samp e var são pouco usados, mas você pode ter a oportunidade de aproveitá-los em seu conteúdo. Vou explicar
cada um brevemente.
O elemento kbd
Use kbd para marcar instruções de entrada do usuário.
<p>Para fazer login na demonstração:</p>

<ol>
<li>Digite <kbd>tryDemo</kbd> no campo Nome de usuário</li>
<li><kbd>TAB</kbd> no campo Senha e digite <kbd>demoPass</kbd></li>
<li>Clique em <kbd>RETURN</kbd> ou <kbd>ENTER</kbd></li>
</ol>
Assim como o código, o kbd é renderizado como uma fonte monoespaçada por padrão.
O elemento amostra
O elemento samp indica uma amostra de saída de um programa ou sistema.
<p>Depois que o pagamento foi efetuado, o site retornou uma mensagem dizendo: ÿ <samp>Obrigado
pelo seu pedido!</samp></p>
samp também é renderizado como uma fonte monoespaçada por padrão.
O elemento var
O elemento var representa uma variável ou valor de espaço reservado.
<p>Einstein é mais conhecido por <var>E</var>=<var>m</var><var>c</var><sup>2</sup>. ÿ </p>
var também pode ser um valor de espaço reservado no conteúdo, como uma planilha Mad Libs na qual
você colocaria ÿ <var>adjetivo</var>, <var>verbo</var> e assim por diante.
var é renderizado em itálico por padrão.
Observe que você pode usar matemática e outros elementos MathML em suas páginas HTML5 para marcação avançada relacionada
à matemática. Consulte http://dev.w3.org/html5/spec-author-view/mathml.html para obter mais informações.
Texto 129
Usando pré-formatado R O elemento pre é ideal para texto que contém espaços
e quebras de linha importantes, como o trecho de código
Texto CSS mostrado aqui. Observe também o uso do elemento
code para marcar partes de código ou texto relacionado
ao código fora do pré (consulte “Marcando código” para
Normalmente, os navegadores recolhem todos os obter mais detalhes).
retornos e espaços extras e quebram
automaticamente as linhas de acordo com ...
<corpo>
o tamanho da janela. O texto pré-formatado
permite manter e exibir as quebras de linha e
<p>Adicione isto à sua folha de estilo se desejar
espaçamentos originais inseridos no texto. É ÿ exibir uma borda pontilhada abaixo do elemento
ideal para exemplos de código de computador ÿ <code>abbr</code> sempre que ele tiver ÿ um
A, embora você também possa usá-lo para texto atributo <code>title</code> .</p>
(olá, arte ASCII!).
<pré>
<código>
Para usar texto pré-formatado: abr[título] {
borda inferior: 1px pontilhado #000;
1. Digite <pré>.
}
</código>
2. Digite ou copie o texto que desejar
</pré>
para exibir como está, com todos os espaços,
retornos e quebras de linha necessários. A
</body>
menos que seja código, não marque o texto </html>
com nenhum HTML, como elementos p .
3. Digite </pre>.
B Observe que o recuo e as quebras de linha são mantidos

no pré- conteúdo.
130 Capítulo 4
O texto pré-formatado normalmente é

Considerações de exibido com uma fonte monoespaçada como Courier
ou Courier New B. Você pode usar CSS para
apresentação com pré
alterar a fonte, se desejar (consulte o Capítulo 10).
Esteja ciente de que os navegadores normalmente
desativam a quebra automática de palavras Se o que você deseja exibir, como um
do conteúdo dentro de um pré, portanto, se for exemplo de código em um tutorial, contém
muito largo, poderá afetar seu layout ou forçar elementos HTML, você terá que substituir cada <
e > ao redor do nome do elemento com seus
uma barra de rolagem horizontal. A regra CSS a
entidades de caracteres apropriadas, < e >
seguir permite o agrupamento em pré em muitos
respectivamente (veja “Código de Marcação”
navegadores, mas não no Internet Explorer 7 e anteriores.
para ver um exemplo). Caso contrário, o
pré { navegador poderá tentar exibir esses elementos.
Certifique-se de validar suas páginas para ver se
espaço em branco: pré-envoltório; você aninhou elementos HTML no pré quando
não deveria (veja “Validando seu código” no Capítulo 20).
}
Por falar no assunto, na maioria dos casos não O elemento pré não é um atalho para
recomendo que você use o espaço em branco: evitar marcar seu conteúdo com semântica
pré; Declaração CSS em um elemento adequada e estilizar sua apresentação com
como div como um substituto para pre, CSS. Por exemplo, se você quiser postar um
artigo de notícias que escreveu em um
porque o espaço em branco pode ser
crucial para a semântica do elemento incluído processador de texto, não basta copiá-lo e colá-
lo em um pré , porque você gosta do
conteúdo, especialmente código, e apenas pré
espaçamento do jeito que está. Em vez disso,
sempre o preserva. (Além disso, se o usuário tiver envolva seu conteúdo em p (e outros elementos
desabilitado o CSS em seu navegador, a de texto relevantes) e escreva CSS para controlar o layout conforme
formatação será perdida.)
pre, como um parágrafo, sempre é exibido
Consulte a cobertura CSS começando no
em uma nova linha por padrão B.
Capítulo 7. A formatação de texto, em particular, é
discutida no Capítulo 10.
Texto 131
Especificando letras miúdas A O elemento pequeno denota breves avisos legais em

ambos os casos mostrados. O segundo é um aviso
de direitos autorais contido em um rodapé no nível da
De acordo com o HTML5, pequeno representa
página, uma convenção comum.
comentários secundários, como letras miúdas, que
“normalmente apresentam isenções de ...
responsabilidade, advertências, restrições legais ou <corpo>
direitos autorais. Às vezes, letras pequenas também são
<p>Faça seu pedido agora para receber frete
usadas para atribuição ou para satisfazer requisitos de grátis. ÿ <small>(Algumas restrições podem ser
licenciamento.” small destina-se a breves porções de aplicadas.) ÿ </small></p>
texto embutido, não a textos que abrangem vários
parágrafos ou outros elementos (A e B). ...
<rodapé>
Para especificar letras miúdas: <p><small>© 2011 A Super ÿ Loja.
Todos os direitos reservados. ÿ </
1. Digite <pequeno>.
small></p>
2. Digite o texto que representa um documento legal </footer>
isenção de responsabilidade, nota, atribuição e assim por diante.
</body>
3. Digite </small>. </html>
Certifique-se de usar pequeno apenas porque

cabe no seu conteúdo, não porque você deseja reduzir
o tamanho do texto, como acontece em alguns navegadores B.
Você sempre pode ajustar o tamanho com CSS (até
mesmo aumentando, se desejar). Consulte
“Configurando o tamanho da fonte” no Capítulo 10 para obter mais informações.
small é uma escolha comum para marcar o

aviso de direitos autorais da sua página (A e B).
Destina-se a frases curtas como essa, portanto, não B O elemento pequeno pode ficar menor que
envolva avisos legais longos, como as páginas de texto normal em alguns navegadores, mas o tamanho
Termos de Uso ou Política de Privacidade. Devem visual não importa se você deve marcar seu conteúdo
ser marcados com parágrafos e outras semânticas, com ele.
conforme necessário.
132 Capítulo 4
R O mesmo endereço aparece duas vezes, mas eu

os codifiquei de maneira um pouco diferente para fins de
Criando uma quebra de linha
demonstração. Lembre-se de que os retornos em seu código
Os navegadores quebram automaticamente o texto
são sempre ignorados, portanto, ambos os parágrafos são
exibidos da mesma maneira B. Além disso, você pode codificar de acordo com a largura do bloco ou janela que contém
br como <br /> ou <br> em HTML5. o conteúdo. É melhor deixar o conteúdo fluir assim
...
na maioria dos casos, mas às vezes você desejará
<corpo> forçar uma quebra de linha manualmente.

Você consegue isso com o elemento br .
<p>Rua Ferroviária Norte 53 <br />
Com certeza, usar br é uma tática de último recurso
Okotoks, Alberta <br />
Canadá T1Q 4H5</p> porque mistura apresentação com HTML em vez
de deixar todo o controle de exibição para seu CSS.
<p>53 North Railway Street <br /> Okotoks, ÿ Por exemplo, nunca use br
Alberta <br /> Canadá T1Q 4H5</p> para simular o espaçamento entre parágrafos.
Em vez disso, marque os dois parágrafos com p
</body>
</html> elementos e defina o espaçamento entre os dois com
a propriedade CSS margin .
Então, quando br pode ficar bem? Bem, o elemento br

é adequado para criar quebras de linha em poemas,
em endereços (A e B) e ocasionalmente em outras
linhas curtas de texto que devem aparecer uma após a
outra.
Para inserir uma quebra de linha:
Digite <br /> (ou <br>) onde a quebra de linha deve

ocorrer. Não existe fim separado br
tag porque é conhecida como vazia
elemento (ou vazio) ; falta conteúdo.
B Cada elemento br força o subsequente Digitar br como <br /> ou <br> é

conteúdo para uma nova linha. perfeitamente válido em HTML5.
Os estilos podem ajudá-lo a controlar

o espaço entre as linhas de um parágrafo
(consulte “Definir a altura da linha” no
Capítulo 10) e entre os próprios parágrafos
(consulte “Definir as margens em torno de um elemento” no Ca
O microformato hCard
(http://microformats.org/wiki/hcard) é “para
representar pessoas, empresas,
organizações e lugares” de uma maneira
semântica que seja legível por humanos e máquinas. Você pod
para representar um endereço em vez do
exemplo fornecido A.
Texto 133
Criando períodos R Neste caso, quero especificar o idioma de uma

parte do texto, mas não existe um elemento HTML
cuja semântica seja adequada para “La Casa Milà” no
O elemento span , como div, não tem absolutamente contexto de uma frase. O h1 que contém “La Casa
nenhum significado semântico. A diferença é que Milà” antes do parágrafo é semanticamente
span é apropriado apenas para uma palavra ou apropriado porque o texto é o título do conteúdo
que se segue. Então, para o título, simplesmente
frase, enquanto div é para blocos de conteúdo (veja
adicionei o atributo lang ao h1
“Criando Containers Genéricos” no Capítulo 3). em vez de envolver o texto do título
desnecessariamente para esse propósito.
span é útil quando você deseja aplicar qualquer um ...

dos itens a seguir a um trecho de conteúdo para o <corpo>
qual o HTML não fornece um elemento semântico

apropriado: <h1 lang="es">La Casa Milà</h1>
n Atributos, como class, dir, id, <p>O trabalho de Gaudí foi essencialmente
lang, title e mais (A e B) útil. ÿ <span lang="es">La Casa Milà é ÿ um
prédio de apartamentos e <em>pessoas reais
n Estilização com CSS ÿ </em> more lá.</p>
n Comportamento com JavaScript
</body>
Como span não tem significado semântico, use-o </html>
como último recurso quando nenhum outro elemento
mento servirá.
134 Capítulo 4
Para adicionar períodos:
1. Digite <span.
2. Se desejar, digite id="nome", onde nome
identifica exclusivamente o conteúdo estendido.
3. Se desejar, digite class="nome", onde

nome é o nome da classe que o
conteúdo estendido pertence.
4. Se desejar, digite outros atributos (como
dir, lang ou title) e seus valores.
B O elemento span não possui estilo padrão.
5. Digite > para completar a tag start span .
6. Crie o conteúdo que deseja conter
no intervalo.
7. Digite .
Um span não tem formatação padrão B,

mas assim como acontece com outros elementos
HTML, você pode aplicar a sua própria formatação
com CSS (veja os Capítulos 10 e 11).
Você pode aplicar um atributo de classe e de id

ao mesmo elemento span , embora seja mais comum
aplicar um ou outro, se for o caso. A principal
diferença é que class é para um grupo de elementos,
enquanto id é para identificar elementos individuais
e únicos em uma página.
Os microformatos costumam usar span para

anexar nomes de classes semânticas ao conteúdo como
uma forma de preencher as lacunas onde o HTML não
fornece um elemento semântico adequado. Você pode
aprender mais sobre eles em http://microformats.org.
Texto 135
Outros elementos
Esta seção cobre outros elementos que
você pode incluir em seu texto, mas que normalmente

têm menos ocasiões de uso ou têm suporte limitado ao
navegador (ou ambos).
O elemento você
Assim como b, i, s e small, o elemento u foi redefinido
em HTML5 para desassociar
afasta-o de seu passado como um elemento não-

semântico e de apresentação. Naquela época, o
elemento u servia para sublinhar o texto. Agora, é para
anotações não articuladas. HTML5 define
é assim:
O elemento u representa uma extensão de texto

com uma anotação não textual desarticulada,
embora explicitamente renderizada, como rotular
o texto como sendo um nome próprio em texto
chinês (uma marca de nome próprio chinês) ou
rotular o texto como sendo escrito
incorretamente.
Aqui está um exemplo de como você pode usar você

para anotar palavras com erros ortográficos:
<p>Quando eles <u class="spelling">

ÿ receberam</u> o pacote, eles o
colocaram ÿ junto com <u
class="spelling">lá ÿ </u> outros com a
intenção ÿ de abri-los tudo mais tarde.</p>
A classe é totalmente opcional e seu valor (que
pode ser o que você quiser) não é renderizado com o
conteúdo para indicar explicitamente um erro ortográfico.
Mas você pode usá-lo para estilizar palavras com
erros ortográficos de maneira diferente (embora você
ainda seja renderizado como texto sublinhado por
padrão). Ou você pode adicionar um título
atributo com uma nota como “[sic]”, uma convenção em
alguns idiomas para indicar um erro ortográfico.
136 Capítulo 4
Use u somente quando um elemento como cite, em ou

mark não se adequar à semântica desejada.
Além disso, é melhor alterar seu estilo se o texto for
confundido com o texto vinculado, que também é
sublinhado por padrãoA.
O elemento wbr
HTML5 apresenta um primo do br chamado wbr.
Representa “uma oportunidade de quebra de linha”.

A Assim como os links, os elementos u são
sublinhados por padrão, o que pode causar confusão, a Use-o entre palavras ou letras em uma frase longa e
menos que você altere um ou ambos com CSS. ininterrupta (ou, digamos, um URL) para indicar onde ele
poderia quebrar, se necessário, para ajustar o texto no
espaço disponível de forma legível. Portanto,
diferentemente de br, wbr não força uma quebra de linha,
apenas permite que o navegador saiba onde pode forçar
uma quebra de linha, se necessário.
Aqui estão alguns exemplos:
<p>Eles gostavam de dizer:

"FriendlyFleasandFireFlies<wbr />
ÿ FriendlyFleasandFireFlies<wbr />
ÿ FriendlyFleasandFireFlies<wbr />
"
ÿ
o mais rápido que podiam, repetidamente
ÿ acabou.</p>
<p>O site favorito dele é este<wbr

/>é<wbr />um<wbr />realmente<wbr
/>realmente<wbr />longurl.com.</p>
Você pode digitar wbr como <wbr /> ou <wbr>.
Como você deve ter adivinhado, não encontrará muitas
ocasiões para usar o wbr.
Além disso, o suporte do navegador é inconsistente
no momento em que este livro foi escrito. Embora wbr
funciona nas versões atuais do Chrome e Firefox, o
Internet Explorer e o Opera simplesmente o ignoram.
Texto 137
Os elementos ruby, rp e rt
Uma anotação Ruby é uma convenção em
idiomas do Leste Asiático, como chinês e japonês,
normalmente usada para mostrar a pronúncia de
caracteres menos conhecidos. Esses
B Um navegador compatível exibirá o texto Ruby acima da
pequenos caracteres anotativos aparecem acima base (ou possivelmente na lateral), sem parênteses.
ou à direita dos caracteres que eles anotam. Eles
são frequentemente chamados simplesmente de rubi
ou rubi, e os caracteres rubi japoneses são
conhecidos como furigana.
O elemento ruby , bem como seu rt e rp

elementos filhos, é o mecanismo do HTML5 para
adicioná-los ao seu conteúdo. rt especifica
os caracteres Ruby que anotam os caracteres
C Agora, a marcação Ruby para “Pequim” conforme vista em
base. O elemento opcional rp permite exibir um navegador compatível.
parênteses ao redor do texto Ruby em
navegadores que não suportam Ruby.
O exemplo a seguir demonstra essa estrutura

com cópia de espaço reservado em inglês para
ajudá-lo a entender a organização das
informações no código e em um navegador de
suporteB. A área para texto Ruby está destacada:
<rubi>
base <rp>(</rp><rt> caracteres ruby
ÿ </rt><rp>)</rp>
base <rp>(</rp><rt> caracteres ruby
ÿ </rt><rp>)</rp>
</ruby>
Agora, um exemplo do mundo real com os dois
Caracteres básicos chineses para “Pequim” e os
caracteres rubi que os acompanham C:
<rubi>
ÿ <rp>(</rp><rt>ÿÿÿ</rt><rp>) ÿ </
rp>
ÿ <rp>(</rp><rt>ÿÿÿ</rt><rp>) ÿ </
rp>
</ruby>
138 Capítulo 4
Você pode ver como os parênteses são importantes

para navegadores que não suportam Ruby D. Sem
eles, o texto base e Ruby seriam executados juntos,
obscurecendo o
mensagem.
D Um navegador que suporta Ruby ignora o rp
parênteses e apenas apresenta o conteúdo rt B
e C. No entanto, um navegador que não suporta No momento em que este artigo foi escrito,
Ruby exibe o conteúdo rt entre parênteses, como apenas Safari 5+, Chrome 11+ e todas as versões do
visto aqui.
Internet Explorer tinham suporte básico a Ruby (mais uma
razão para usar rp em sua marcação). O complemento
HTML Ruby Firefox (https://addons.mozilla .org/en-US/
firefox/addon/6812) fornece suporte para Firefox
enquanto isso.
Você pode aprender mais sobre caracteres Ruby

atores em http://en.wikipedia.org/wiki/
Ruby_personagem.
Os elementos bdi e bdo

Se suas páginas HTML alguma vez misturarem
caracteres da esquerda para a direita (como caracteres
latinos na maioria dos idiomas) e caracteres da direita
para a esquerda (como caracteres em árabe ou hebraico), o bdi
e elementos bdo podem ser de interesse.
Mas, primeiro, uma pequena história de

fundo. A direcionalidade básica do seu conteúdo
é padronizada da esquerda para a direita, a menos
que você defina o atributo dir no elemento html
como rtl. Por exemplo, <html dir="rtl" lang="he">
especifica que a direcionalidade básica do seu
conteúdo é da direita para a esquerda e o idioma base é o hebraico.
Assim como fiz com lang em vários exemplos ao

longo do livro, você também pode definir dir em
elementos da página quando o conteúdo se desvia da
configuração base da página. Então, se a base
fosse definida como inglês (<html lang="en">) e
você quisesse incluir um parágrafo em hebraico,
você marcaria como <p dir="rtl"
lang="ele">...</p>.
Texto 139
Com essas configurações definidas, o conteúdo será

exibido na direcionalidade desejada na maior parte
do tempo; O algoritmo bidirecional (“bidi”) do Unicode
se encarrega de descobrir isso.
O elemento bdo (“substituição bidirecional”) é para

aquelas ocasiões em que o algoritmo não exibe o
conteúdo conforme pretendido e você precisa
substituí-lo. Normalmente, esse é o caso quando
o conteúdo do
A fonte HTML está em ordem visual em vez de
ordem lógica.
A ordem visual é exatamente o que parece -

o conteúdo do código-fonte HTML está no
mesma ordem em que você deseja exibi-lo.

A ordem lógica é oposta para um idioma da direita para
a esquerda como o hebraico; o primeiro caractere que
vai da direita para a esquerda é digitado primeiro, depois
o segundo caractere (em outras palavras, aquele à
esquerda dele) e assim por diante.
De acordo com as práticas recomendadas, o Unicode

espera texto bidirecional em ordem lógica.
Portanto, se for visual, o algoritmo ainda inverterá
os caracteres, exibindo-os de forma oposta ao
pretendido. Se você não for capaz de alterar o texto
no código-fonte HTML para uma ordem lógica (por
exemplo, talvez ele venha de um banco de dados
ou feed), seu único recurso é envolvê-lo em um bdo.
Para usar o bdo, você deve incluir o atributo

dir e configurá-lo como ltr (da esquerda
para a direita) ou rtl (da direita para a esquerda)
para especificar a direção desejada.
Continuando nosso exemplo anterior de um
parágrafo em hebraico dentro de uma
página em inglês, você digitaria <p
lang= "he"><bdo dir="rtl">...</bdo></
p>. bdo é apropriado para frases ou
sentenças dentro de um parágrafo. Você não envolveria vários parágrafos.
140 Capítulo 4
O elemento bdi , novo no HTML5, é para casos

em que a direcionalidade do conteúdo é
desconhecida. Você não precisa incluir o
dir porque está definido como automático por
padrão. HTML5 fornece o seguinte exemplo,
que modifiquei ligeiramente:
Este elemento é especialmente útil

ao incorporar conteúdo gerado pelo
usuário com um conteúdo desconhecido.
direcionalidade.
Neste exemplo, os nomes de usuário

são mostrados junto com o número de
postagens que o usuário enviou.
Se o elemento bdi não for usado, o
nome de usuário do usuário árabe
acabaria confundindo o texto (o algoritmo
bidirecional colocaria os dois pontos e o
número “3” ao lado do
palavra “Usuário” em vez de ao lado do
palavra “postagens”).
<ul>
<li>Usuário <bdi>jcranmer</bdi>: ÿ
12 postagens.</li>
<li>Usuário <bdi>hober</bdi>: ÿ
5 postagens.</li>
<li>Usuário <bdi>ÿÿÿÿ>/bdi>:
ÿ 3 postagens.</li>
</ul>
Se você quiser saber mais sobre o assunto

de incorporar linguagens da direita para a
esquerda, recomendo a leitura do artigo
do W3C “Criando páginas HTML em árabe,
hebraico e outros scripts da direita para a esquerda” (www.w3.org/
Internacional/tutoriais/bidi-xhtml/).
Texto 141
O elemento medidor
O elemento medidor é outro que é novo
graças ao HTML5. Você pode usá-lo para indicar
um valor fracionário ou uma medida dentro
um intervalo conhecido. Ou, em linguagem simples,
é o tipo de indicador que você usa para resultados
de votação (por exemplo, “30% Smith, 37% Garcia,
33% Clark”), o número de ingressos vendidos (por
E Um navegador como o Chrome que suporta medidor
exemplo, “811 out de 850”), notas de testes numéricos
exibe o medidor automaticamente, colorindo-o com base
e uso de disco. nos valores dos atributos. Não exibe o texto entre <meter>
e </meter>.
HTML5 sugere que os navegadores poderiam renderizar
um medidor não muito diferente de um termômetro em seu
lado - uma barra horizontal com o valor medido
valor com cor diferente do valor máximo (a menos que
sejam iguais, é claro).
O Chrome, um dos poucos navegadores que oferece
suporte ao medidor até agora, faz exatamente
isso. E. Para navegadores sem suporte, você pode
estilizar o medidor até certo ponto com CSS ou aprimorá-lo.
ainda mais com JavaScript.
Embora não seja obrigatório, é melhor incluir

texto dentro do medidor que reflita o
F A maioria dos navegadores, como o Firefox, não
medição atual para navegadores sem suporte suporta medidor, então, em vez de uma barra colorida,
exibirem F. eles exibem o conteúdo do texto dentro do elemento medidor .
Você pode mudar a aparência com CSS.
Aqui estão alguns exemplos de medidores (como visto em
E e F):
<p>Status de conclusão do projeto: <meter

ÿ value="0.80">80% concluído</meter>
ÿ </p>
<p>Desgaste das pastilhas de freio do carro: <metro baixo=
ÿ "0,25" alto="0,75" ótimo="0"

ÿ value="0.21">21% usado</meter></p>
<p>Milhas percorridas durante a meia maratona:

ÿ <metro min="0" max="13,1" valor="4,5"
ÿ title="Milhas">4,5</meter></p>
medidor não possui unidades de medida definidas
claro, mas você pode usar o atributo title para
especificar o texto de sua escolha, como no último
exemplo. O Chrome exibe isso como uma dica de ferramenta E.
142 Capítulo 4
meter suporta vários atributos. O

atributo value é o único obrigatório. min e max
são padronizados como 0 e 1,0,
respectivamente, se omitidos. Os atributos
baixo, alto e ótimo trabalham juntos para dividir
a faixa em segmentos baixo, médio e alto.
ideal indica a posição ideal dentro da faixa,
como “0 desgaste das pastilhas de
freio” em um dos exemplos. Defina o valor
intermediário ideal se nem um valor baixo nem um valor alto
No momento em que este artigo foi escrito,

o medidor era compatível apenas com Chrome 11+
e Opera 11+. Isso explica parcialmente por que
você ainda não o vê muito na natureza. Sinta-se à
vontade para usá-lo, mas entenda que a maioria dos
navegadores renderizará o texto do medidor em
vez do medidor visual por padrãoF.
O estilo do medidor exibido por cada

navegador compatível pode variar.
Algumas pessoas experimentaram o estilo

CSS do medidor para navegadores compatíveis
e não compatíveis. Pesquise online por “medidor
de estilo HTML5 com CSS” para ver alguns dos
resultados (observe que alguns usam JavaScript).
O medidor não serve para marcar

medidas gerais, como altura, peso,
distância ou circunferência, que não têm
alcance conhecido. Por exemplo, você não pode fazer isso:
caminhou <meter value="4.5">4,5</meter>
milhas ontem.</p>.
Certifique-se de não confundir o uso do

medidor e dos elementos de progresso .
Texto 143
O elemento de progresso
O elemento progress é mais um dos novos
elementos do HTML5. Você usa isso para
uma barra de progresso, como a que você pode ver
em um aplicativo da Web, para indicar o progresso G Um navegador como o Chrome que suporta progresso
enquanto ele salva ou carrega uma grande quantidade exibe a barra de progresso automaticamente, colorindo-a com
de dados. base no valor. Não exibe o texto entre <progress> e </
progress>. O valor que
Tal como acontece com o medidor, os navegadores O atributo está definido como 0 neste exemplo, portanto,
toda a barra tem a mesma cor.
compatíveis exibem automaticamente uma barra de
progresso com base nos valores dos atributos G. E,
novamente, como o medidor, geralmente é melhor
incluir texto (por exemplo, “0% salvo”, conforme
mostrado no exemplo) dentro progress para
refletir o progresso atual dos navegadores mais
antigos para exibir H, mesmo que não seja obrigatório.
H O Firefox não suporta progresso, então em vez de uma barra
Aqui está um exemplo: colorida, ele exibe o conteúdo do texto dentro do elemento. Você
pode mudar a aparência com CSS.
<p>Aguarde enquanto salvamos seus
ÿ dados. Progresso atual: <progress ÿ
max="100" value="0">0% salvo
ÿ </progress></p>
Uma discussão completa sobre o progresso está
além do escopo deste livro, já que normalmente
I A barra de progresso no Chrome quando o valor
você atualizaria dinamicamente tanto o valor
O atributo é definido como 37 programaticamente
atributo e o texto interno com JavaScript à medida com JavaScript (ou diretamente no HTML), assumindo
que a tarefa avança (por exemplo, para indicar max="100".
que está 37% concluída). Os resultados visuais

são os mesmos, quer você faça isso com
JavaScript ou codifique-o no HTML, ou seja,
<progress max="100"
value="37">37% economizados</progress>I. É
claro que navegadores sem suporte o exibiriam
de forma semelhante ao H.
144 Capítulo 4
O elemento progresso suporta três

atributos, todos opcionais: max, value e
form. O atributo max especifica a quantidade total
de trabalho para a tarefa e deve
ser maior que 0. valor é o valor concluído em
relação à tarefa. Atribuir o formulário
atributo ao id de um elemento de formulário na
página se você deseja associar o progresso
elemento com um formulário no qual não está aninhado.
Aqui está uma pequena amostra de como

modificar um elemento de progresso com
JavaScript. Vamos supor que a barra tenha sido
codificada com um id de sua escolha, assim:
<progress max="100" value="0"

ÿ id="progressBar">0% salvo</progress>
JavaScript como o seguinte lhe daria acesso ao
elemento:
var barra = document.getElementById

ÿ ('progressBar');
Então você poderia obter ou definir o valor via barra.
valor conforme necessário. Por exemplo, bar.value =
37; iria defini-lo.
O elemento de progresso tem suporte

bastante sólido entre os navegadores modernos no
momento da redação deste artigo: Chrome 11+, Firefox
6+, Internet Explorer 10 (disponível apenas como uma
pré-visualização da plataforma no momento da redação deste artigo) e Opera
O Safari não suporta isso.
O estilo da barra de progresso exibida

por cada navegador compatível pode variar,
embora você mesmo possa estilizá-la até
certo ponto com CSS.
Texto 145
Esta página foi intencionalmente deixada em branco

5
Imagens
Criar imagens para a Web é um pouco

diferente de criar imagens para saída em Neste capítulo
papel. Embora as características básicas
das imagens da Web e das imagens Sobre imagens para a web 148
imprimíveis sejam as mesmas, seis Obtendo imagens 152

fatores principais as distinguem: formato, cor,
Escolhendo um editor de imagens 153
tamanho/resolução, velocidade, transparência
e animação. Este capítulo discutirá os Salvando suas imagens 154
aspectos importantes de cada um desses Inserindo imagens em uma página 156

seis fatores e explicará como usar esse
Oferecendo texto alternativo 157
conhecimento para criar as imagens mais eficazes para o seu site.
Especificando o tamanho da imagem 158
Depois de criar suas imagens, iremos inseri-
las em sua página web. Dimensionando imagens com o navegador 160
Dimensionando imagens com um editor de imagens 161
Adicionando ícones ao seu site 162

Sobre
imagens para a web
Vejamos os seis fatores que você deve ter
em mente ao criar imagens da Web.
Formatar
As pessoas que imprimem imagens em papel
não precisam se preocupar com o que seus leitores
usarão para ver as imagens. Você faz. A Web é
acessada todos os dias por milhões de Macs, PCs
A Fotografias coloridas devem ser salvas no formato
com Windows, telefones, tablets e outros tipos de JPEG ou PNG-24.
dispositivos. Os gráficos que você usa em sua
página da Web devem estar em um formato
que cada um desses sistemas operacionais
possa reconhecer. Atualmente, os três formatos
mais utilizados na Web são GIF, PNG e JPEG.
Os navegadores atuais podem visualizar todos os
três formatos de imagem.
Você deseja escolher um formato que ofereça a

melhor qualidade com o menor tamanho de arquivo.
O formato JPEG é bom para fotografias coloridas B Logotipos e outras imagens geradas por
porque lida com grandes quantidades de cores e computador ou com poucas cores são compactadas
é bem compactado, portanto, o tamanho do arquivo eficientemente com ZIP e, portanto, geralmente
salvas no formato PNG-8.
será pequeno A. É um formato com perdas,
portanto, você perde algumas das informações
originais da imagem ao salvá-la. como JPEG,
mas geralmente é um compromisso que vale a
pena, porque suas páginas carregam rapidamente.
Falaremos mais sobre isso na seção “Velocidade”.
Os formatos PNG e GIF são frequentemente
usados quando você salva arquivos como
logotipos com grandes quantidades de cores e
padrões sólidos ou quando precisa de
transparência. Os formatos PNG e GIF
compactam áreas de cores contínuas ou padrões
repetitivos melhor do que o formato JPEG. PNG é frequentemente
a melhor escolha, porque possui um algoritmo de
compactação melhor para tamanhos de arquivo
menores e possui suporte superior à
transparência (transparência alfa) B.
148 Capítulo 5
Cor
A maioria dos monitores de computador pode
exibir milhões de cores, mas nem sempre foi
assim. Alguns formatos de imagem possuem uma
paleta de cores limitada. Imagens GIF e PNG-8
podem ter apenas 256 cores, o que geralmente é
adequado para logotipos e ícones.
Fotografias e ilustrações complexas devem ser

salvas no formato JPEG ou PNG-24
formato, pois acomodam mais cores em uma única
imagem.
Tamanho e resolução
As imagens digitais são medidas em pixels.

Uma câmera digital de 3 megapixels pode tirar
C Esta imagem tem 2.048 pixels de largura. No Photoshop,
ele tem resolução de saída de 256 ppi e mede apenas fotos com 2.048 pixels de largura por 1.536 pixels
6 x 8 polegadas. Aqui no Firefox, sua resolução é de altura. Quão grande é isso? Depende.
determinada pelo monitor do visitante – cerca de 72 ppi – o
Se você imprimir a imagem em uma impressora
que significa que a imagem tem 28 polegadas de largura!
a 256 ppi (pixels por polegada), ela medirá 8 por
6 polegadas. Mas se você estiver usando essa
página na Web, o tamanho da imagem dependerá
da resolução do monitor do visitante, que
provavelmente será em torno de 86 ppi (e pode ser
tão baixa quanto 72 ou tão alta quanto 100 ou mais) ,
e assim a imagem poderia ser exibida em até 28 x
21 polegadas (cerca de 75 x 54 cm). C muito grande.
Talvez a melhor maneira de pensar no tamanho da

imagem seja em relação à página média da Web.
Como monitores com resolução de 1.024 pixels
de largura por 768 pixels de altura foram o
padrão por tanto tempo, os designers de páginas
da Web se acostumaram a manter suas páginas
com cerca de 960 pixels de largura, para que os
visualizadores pudessem ver todo o conteúdo
da página sem rolar horizontalmente.
D Esta imagem tem 500 pixels de largura, o que é cerca de
metade da largura de uma janela do navegador com 1024 Embora seja verdade que há cada vez mais
pixels de largura. pessoas que possuem monitores maiores
(atualmente, mais de 85% são maiores que
1024 x 768), isso não significa necessariamente
que as pessoas irão preencher esses monitores
maiores com um único navegador. janela.
Além de ter outros programas para consultar
(ou mesmo outro navegador
Imagens 149
windows), é complicado ler texto em um navegador

muito largo. Ainda assim, os designers tendem a
ampliar seus designs e a usar designs de largura
flexível que se expandem e contraem com a janela do
navegador do visitante.
Além disso, o uso de smartphones e tablets está

aumentando rapidamente, então você deve sempre
considerar o tamanho da tela e o download limitado
velocidades.
Observe que resolução pode significar um de dois
conceitos bastante distintos: o número real de pixels

em um monitor ou imagem (digamos, 640 x 480) e o
número de pixels em uma polegada desse monitor ou
imagem (digamos, 72 ou 86 ppi). Independentemente
disso, quanto maior a resolução, mais pixels. No papel,
os pixels podem adicionar detalhes ou tamanho. Na
tela, mais pixels sempre se traduzem em uma imagem
maior.
Velocidade
Outra diferença entre imagens da Web e imagens

impressas é que os visitantes precisam esperar o
download das imagens da Web.
(Imagine esperar que as fotos apareçam no seu jornal
matinal!)
Como você pode reduzir ao mínimo o tempo de

download? A maneira mais fácil é usar imagens
pequenas. Quanto maior for o tamanho do arquivo de
uma imagem, mais tempo levará para aparecer diante
dos olhos dos visitantes.
A segunda maneira de acelerar o tempo de download

é compactando a imagem. O JPEG é ótimo para reduzir
drasticamente o tamanho do arquivo de uma imagem,
mas o JPEG tem duas desvantagens principais.
Primeiro, sua compactação de informações ocupa
muito espaço e simplesmente não vale a pena para
imagens muito pequenas. Em segundo lugar, é
uma compactação com perdas – eliminando
detalhes permanentemente para economizar espaço.
A descompactação da imagem não restaurará os dados
perdidos. Se você planeja editar a imagem no futuro,
salve uma cópia em um formato descompactado (por
exemplo, PSD ou
150 Capítulo 5
TIFF) e salve-o apenas como JPEG depois de

fazer as edições finais.
PNG e GIF são formatos sem perdas, portanto

podem compactar suas imagens sem perder
qualidade. Imagens que possuem grandes áreas
de uma única cor, como logotipos, texto
renderizado e ilustrações, são melhores para
isso. PNG é compactado melhor que GIF.
Transparência
A transparência é importante por dois motivos.
Primeiro, você pode usá-lo para criar layouts
complexos, fazendo uma imagem se mover atrás
da outra. Em segundo lugar, você pode aproveitar
a transparência para dar à imagem um
contorno não retangular, adicionando interesse
visual às suas páginas. Tanto PNG quanto
GIF permitem transparência; JPEG não.
No formato GIF, um pixel pode ser transparente

ou não. PNG oferece suporte à transparência
alfa, um método de suporte à transparência
parcial e total. Isso significa que imagens
com fundos transparentes complexos
geralmente ficam melhores como PNG do que
como GIF, porque as bordas parecem suaves
em vez de irregulares.
Animação
Uma coisa que você não verá no papel tão cedo

são as imagens em movimento. Na Web,
eles estão por toda parte. Imagens animadas
podem ser salvas como GIFs, mas não como
JPEGs ou PNGs.
A animação dentro de uma imagem está se

tornando cada vez mais rara. A animação
geralmente é criada usando Flash, animações
CSS e JavaScript. Nos últimos anos, o uso do
Flash para animações na Web diminuiu
devido à falta de suporte do iOS para Flash e à
crescente capacidade de JavaScript e CSS.
Imagens 151
Obtendo imagens Licenças Creative Commons

Então, como você consegue uma imagem que Creative Commons (www.creativecom
pode usar em sua página da Web? Existem várias mons.org) é uma organização sem fins
maneiras. Você pode comprar ou baixar imagens lucrativos que desenvolveu um sistema de
prontas, digitalizar fotografias ou imagens desenhadas modelos de direitos autorais que permite aos
à mão com um scanner, usar uma câmera digital artistas compartilhar seu trabalho de maneiras
ou desenhar imagens do zero em um programa de específicas, sem abrir mão de todos os
edição de imagens como o Adobe Photoshop. Depois direitos sobre seu trabalho. Designers de sites,
músicos e fotógrafos são alguns dos muitos
de tê-los em seu computador, você poderá adaptá-los
artistas que usam licenças Creative Commons
para uso na Web.
para divulgar seu trabalho no mercado, sem medo
de que ele seja usado de uma forma com a
qual não concordam.
Para obter imagens:
O Flickr, o popular aplicativo de
n Você pode usar o Google para encontrar imagens compartilhamento de fotos da Web
na Web clicando no link Imagens acima da (www.flickr.com), pede a seus usuários que
caixa Pesquisar e digitando designem uma licença Creative Commons para cada foto que carregam.
critérios como de costume. Consulte a barra lateral O Flickr permite então que os visitantes pesquisem
“Licenças Creative Commons” para mais fotos de acordo com as licenças atribuídas a
eles. Pode ser um ótimo lugar para encontrar
informações sobre direitos autorais dessas
fotos para o seu site.
imagens.
Você também pode usar o Google para
n Geralmente, mesmo as imagens gratuitas encontradas
restringir pesquisas com base nos direitos de
na Web são restritas de uma forma ou de outra.
uso. (Clique em Pesquisa Avançada e escolha o
outro (veja a barra lateral “Licenças Creative opção desejada no menu suspenso Direitos
Commons”). As imagens que você compra geralmente de uso.)
podem ser usadas para qualquer finalidade (exceto
para revender as próprias imagens). Leia quaisquer
isenções de responsabilidade ou licenças com atenção.
n Muitas empresas vendem bancos de imagens

phy e imagens por um preço muito razoável.
Freqüentemente, eles têm várias versões de cada
imagem para diferentes finalidades e resoluções.
n Scanners e câmeras digitais são formas populares e

eficazes de criar suas próprias imagens.
152 Capítulo 5
Escolhendo um
Editor de imagem
Existem muitos programas de software diferentes que
você pode usar para criar e salvar imagens para a
Web. A maioria dos editores de imagens modernos
possui ferramentas especiais para criar imagens da
Web, que levam em consideração os fatores discutidos
anteriormente neste capítulo.
O padrão da indústria é sem dúvida o Photo-shop,

junto com seu primo, Abobe Fire-works
(www.adobe.com). O Fireworks é um programa
muito poderoso por si só.
Ambos estão disponíveis para Macintosh e Win-
baixos. Usei esses dois programas para ilustrar
algumas técnicas neste capítulo.
Deixe-me enfatizar, entretanto, que as estratégias

básicas para otimizar imagens para a Web são as
mesmas, independentemente do software escolhido.
Os nomes dos comandos podem ser ligeiramente
diferentes e pode haver mais ou menos etapas, mas
as ideias permanecem as mesmas.
mesmo.
Existem muitas alternativas ao Photo-shop,

incluindo Paint.NET (para Windows, www.getpaint.net)
e Acorn ou Pixelmator (para Mac, www.pixelmator.com).
Além disso, editores online como Photoshop.com e
Aviary.com estão se tornando cada vez mais capazes.
Sinta-se à vontade para usar qualquer programa com
o qual se sinta mais confortável.
Imagens 153
Salvando suas imagens

Agora que você criou suas imagens, é hora de salvá-
las. Este processo é um ato de equilíbrio entre a
qualidade visual da imagem e o tamanho do arquivo.
Você pode usar versões de teste do Photoshop e do

Fireworks se não tiver o software instalado no
computador.
Adobe Photoshop
A A caixa de diálogo Salvar para Web e Dispositivos, que
O Photoshop oferece o comando Salvar para mostra a imagem original (canto superior esquerdo) e três
Web e Dispositivos no menu Arquivo. Isso permite possíveis versões compactadas. Esta imagem tem muitas
cores planas, assim como texto, que devem ser mantidos
você compara visualmente a imagem original com
nítidos. Observe que o formato PNG-8 (canto inferior esquerdo)
até três versões que podem ser otimizadas enquanto compacta melhor a imagem, para pouco menos de 10K.
fica de olho em qualquer economia resultante no tamanho PNG-24, com mais cores disponíveis, tem 35K. JPEG em
do arquivo e no tempo de download. alta qualidade é enorme. Se você ajustar o JPEG para
qualidade média (não mostrado), ele ainda ficará grande e feio.
Para usar Salvar para do Photoshop

Comando Web e Dispositivos:
1. Abra o Photoshop e crie seu

imagem. Ou abra uma imagem existente e prepare-
a para publicação cortando, dimensionando e
editando-a.
2. Escolha Arquivo > Salvar para Web e Dispositivos.

A caixa de diálogo Salvar para Web e dispositivos
parece.
3. Clique na guia 2-Up para ver uma versão otimizada ou

clique na guia 4-Up para ver três.
B O JPEG (canto inferior esquerdo) oferece boa
qualidade de imagem com o menor tamanho de arquivo (63K).
A compactação PNG-8 deixa faixas na fotografia (canto
4. Clique em uma versão otimizada, se necessário.
inferior direito) e o tamanho do arquivo (114K) é quase o dobro
5. Escolha o formato desejado. do tamanho do JPEG. O PNG-24 (canto superior direito)
oferece uma imagem de alta qualidade, mas com um tamanho
Em geral, imagens criadas em um computador, de arquivo muito maior (322K).
incluindo logotipos, banners, arte de linha, texto

e qualquer gráfico com grandes áreas de uma
única cor e detalhes nítidos, devem ser salvas no
formato PNG-8 ou GIF A.
Imagens com tons contínuos, como fotografias,

devem ser salvas no formato JPEG ou PNG-24 B.
154 Capítulo 5
6. Ajuste as configurações adicionais que

apareça até obter o menor arquivo possível
com uma qualidade aceitável.
7. Clique em Salvar. Escolha um diretório e

nomeie o novo arquivo. Ele carregará
automaticamente a extensão do formato
selecionado (e, portanto, normalmente não
substituirá a imagem original).
Adobe Fireworks
O Photoshop foi projetado para uma variedade de usos,
enquanto o Fireworks foi projetado para criar
imagens para a Web (C e D). Ele costumava otimizar
PNGs com tamanhos de arquivo menores que o
Photoshop, mas a lacuna foi fechada.
C Observe que a imagem PNG-8 (canto inferior esquerdo) tem O Fireworks oferece uma opção extra de exportação
um tamanho de arquivo um pouco menor do que seu para PNGs de qualidade superior: o formato PNG-32.
equivalente no Photoshop. Os outros dois formatos, JPEG (canto
superior direito) e PNG-24 (canto inferior direito), são maiores.
Lembre-se que seu principal objetivo é

obtenha o menor tamanho de arquivo possível
enquanto mantém uma qualidade de imagem aceitável.
As imagens devem ser criadas em RGB, não

em CMYK (que é para impressão).
Se você não tiver certeza de qual formato

escolher, compare duas otimizações e veja qual
formato compacta melhor.
PNG-24 é um poderoso formato sem perdas

que pode ser usado tanto para imagens geradas por
computador quanto para imagens coloridas “naturais”.
Muitas vezes é melhor que PNG-8, mas não tão bom quanto JPEG.
Se você tiver uma imagem com os dois tipos de

conteúdo, poderá dividi-la em pedaços, compactá-los
separadamente e remontá-los com CSS; ou apenas
use um único formato e deixe-o dar o melhor de si.
D O Fireworks otimiza essa imagem significativamente melhor,
com tamanhos de arquivo menores para JPEG (canto inferior
esquerdo), PNG-8 (canto inferior direito) e PNG-24 (canto superior O comando Salvar para Web e Dispositivos cria
direito). Os tamanhos de arquivo JPEG e PNG-8 são metade do Photoshop! uma nova imagem e deixa a imagem original intacta –
a menos que você salve a nova imagem com o mesmo
nome e extensão e na mesma pasta da antiga.
Apenas as camadas visíveis de uma imagem são

salvas na versão otimizada.
Imagens 155
Inserindo imagens R O URL desta imagem, por conter apenas o nome do

arquivo e nenhum caminho, indica que a imagem está localizada
na mesma pasta desta página da Web.
em uma página
...
Você pode colocar todos os tipos de imagens em sua
<corpo>
página da Web, desde logotipos até fotografias.
As imagens colocadas conforme descrito aqui <h2>Mercado de Barcelona</h2>
aparecem automaticamente quando o visitante

<img src="cornermarket.jpg" />
acessa sua página, desde que o navegador esteja
configurado para visualizá-las.
<p>Esta primeira foto mostra uma das ÿ
barracas de frutas do Mercat de la Boquería, ÿ o
Para inserir uma imagem em uma página: mercado central que fica próximo ao ÿ Rambles. É
um lugar incrível, cheio ÿ de todo tipo de fruta,
1. Coloque o cursor no código HTML
carne, peixe ou ÿ o que você precisar. ÿ Levei
onde você deseja que a imagem apareça. muito tempo para criar coragem ÿ para realmente
tirar uma foto lá. Você ÿ pode dizer que sou meio
2. Digite <img src="image.url", onde
covarde, mas ÿ como eu morava lá, era meio ÿ
image.url indica a localização do arquivo de estranho. Você tira fotos do seu ÿ supermercado?
imagem no servidor. </p>
3. Digite um espaço e depois o /> final.
</body>
As imagens devem ser enviadas para o servidor
</html>
antes que os visitantes possam vê-los.
Não espere que seus visitantes esperem

muito para que sua página seja carregada e
visualizada. Teste (lembrando que você pode ter
uma conexão mais rápida que a dos visitantes).
Se você não pode esperar, eles também não. Uma
alternativa é criar miniaturas de imagens grandes e
deixar que os visitantes optem por visualizar as
imagens maiores através de um link.
B As imagens
Há um atributo de borda obsoleto
são alinhadas ao
(border="n", onde n é a largura em pixels) lado esquerdo da
que adiciona ou elimina uma borda ao redor das página para
imagens, especialmente a borda automática que corresponder ao
aparece ao redor das imagens usadas nos links. alinhamento do
Melhor ainda, você pode usar estilos para texto. Você
controlar este e todos os outros aspectos das imagens. pode alterar o
alinhamento
ou quebrar
o texto em torno
de uma imagem
usando propriedades CSS, como float
(veja “Fazendo
os Elementos
Flutuarem” no Capítulo 11).
156 Capítulo 5
R Embora o texto alternativo possa, teoricamente, ser tão

longo quanto você desejar, a maioria dos navegadores não
quebra linhas longas automaticamente. Portanto, é uma boa
Oferta
ideia mantê-lo com menos de 50 caracteres. Texto alternativo
... Embora as imagens sejam ótimas em uma
<corpo> tela grande com conexão rápida, elas podem
ser menos úteis – e francamente
<h2>Mercado de Barcelona</h2>
problemáticas – em computadores de mão,
telefones, com conexões lentas ou para cegos.
<img src="cornermarket.jpg" alt="Barraca de frutas
ÿ no Mercado" /> Você pode adicionar texto descritivo que
aparecerá se a imagem, por qualquer motivo,
<p>Esta primeira foto mostra uma das ÿ não aparecer. Esse mesmo texto também
barracas de frutas do Mercat de la Boquería, ÿ o será lido por leitores de tela.
mercado central que fica próximo ao ÿ Rambles. É
um lugar incrível, cheio ÿ de todo tipo de fruta,
Para oferecer texto alternativo
carne, peixe ou ÿ o que você precisar. ÿ Levei
muito tempo para criar coragem ÿ para realmente quando as imagens não aparecem:
tirar uma foto lá. Você ÿ pode dizer que sou meio
covarde, mas ÿ como eu morava lá, era meio ÿ 1. Dentro da tag img , após o atributo e valor
estranho. Você tira fotos do seu ÿ supermercado? src , digite alt=".
</p>
2. Digite o texto que deverá aparecer se, por
algum motivo, a própria imagem não
aparecer (A e B).
</body>
</html> 3. Digite ".
O atributo alt é obrigatório para todos os img

elementos em HTML5.
Leitores de tela como o JAWS podem ler

o texto alternativo em voz alta para que cegos ou
visitantes com deficiência visual podem ter uma ideia
do que se trata a imagem.
Se a imagem não for relevante para o não visual

usuários, o W3C sugere que você use alt="".
Imagens com legenda ou texto próximo que descreva
com precisão a imagem podem ter texto alternativo em
branco .
B No Internet Explorer, o texto alternativo aparece próximo a

uma pequena caixa com um x vermelho. Em outros
navegadores, o texto aparece sozinho.
Imagens 157
Especificando o tamanho da imagem
Às vezes, quando você carrega uma página da Web,

você vê o texto primeiro e, quando as imagens são
carregadas, alguns momentos depois, o texto salta para
acomodá-las. Isso acontece porque o tamanho da imagem
não está especificado no HTML.
Quando um navegador chega ao código HTML de uma

imagem, ele deve carregá-la para ver seu tamanho e quanto
espaço deve ser reservado para ela. Se você especificar as
dimensões da imagem, o navegador reservará o espaço
e poderá preencher o texto ao redor da imagem à medida
que ela carrega, para que seu layout permaneça estável A Clique com o botão direito na imagem no navegador para fazer
enquanto a página carrega. o menu pop-up contextual aparece. O navegador

oferecerá uma forma de inspecionar a imagem,
mostrar suas propriedades ou obter as dimensões.
Você pode usar seu navegador ou programa de edição
de imagens para obter as dimensões exatas de sua
imagem.
Os navegadores também esticam ou encolhem uma
imagem para caber no tamanho especificado em seu

HTML (ou CSS). Você pode usar isso a seu favor se
B Aparece uma caixa (sua aparência varia dependendo
quiser usar o mesmo arquivo de imagem em contextos
do navegador que você está usando) que mostra o tamanho
diferentes, mas tome cuidado ao atualizar seu código se da imagem em pixels.
editar o arquivo de imagem e alterar suas dimensões.
Para encontrar o tamanho da sua

imagem com seu navegador:
1. Clique com o botão direito na imagem. Um pop contextual

menu superior aparece A.
2. Escolha Propriedades ou Visualizar informações da

imagem (dependendo do seu navegador) A. Aparece
uma caixa que mostra as dimensões da sua imagem
em pixels B.
C No Photoshop, clique na barra de informações do documento

na parte inferior da janela do documento para ver as
propriedades da imagem. (Se a barra de informações do
documento não aparecer, aumente a janela um pouco mais.)
158 Capítulo 5
D Se você especificar a altura e largura exatas em Para encontrar o tamanho

pixels, o navegador não terá que perder tempo fazendo isso
da sua imagem com o Photoshop:
e exibirá a imagem mais rapidamente.
1. Abra a imagem no Photoshop.
...
2. Amplie a janela do documento
<corpo>
o suficiente para que a barra de informações do
<h2>Mercado de Barcelona</h2> documento fique visível na borda inferior esquerda
da janela.
<img src="cornermarket2.jpg" alt="Fruit Stamd ÿ in
Market" width="300" height="399" /> 3. Clique na barra de informações do documento. Um pequeno
aparece uma caixa com informações sobre a

<p>Esta primeira foto mostra uma das ÿ
imagem, incluindo seu tamanho C.
barracas de frutas do Mercat de la Boquería, ÿ o
mercado central que fica próximo ao ÿ Rambles. É
um lugar incrível, cheio ÿ de todo tipo de fruta, Para especificar o
carne, peixe ou ÿ o que você precisar. ÿ Levei tamanho da sua imagem em HTML:
muito tempo para criar coragem ÿ para realmente
tirar uma foto lá. Você ÿ pode dizer que sou meio 1. Determine o tamanho da sua imagem usando uma
covarde, mas ÿ como eu morava lá, era meio ÿ das técnicas descritas em “Para descobrir o
estranho. Você tira fotos do seu ÿ supermercado? tamanho da sua imagem com o navegador” ou
</p>
“Para descobrir o tamanho da sua imagem com
o Photoshop”.
2. Dentro da tag img , após o atributo src

</body>
</html> bute, digite width="x" height="y", usando os
valores encontrados na etapa 1 para especificar os
valores de x e y (a largura e a altura da sua
imagem) em pixels.
Os atributos de largura e altura não precisam

necessariamente refletir o tamanho real da imagem.
Se você tiver várias imagens do mesmo

tamanho, poderá definir a altura e a largura ao mesmo
tempo com estilos.
Você também pode encontrar o tamanho de

E Se você abrir uma imagem diretamente em um uma imagem em um navegador abrindo a imagem
navegador (é o Firefox para Windows), suas dimensões em sua própria janela. O tamanho é mostrado na barra de título E.
serão exibidas na barra de título.
No Photoshop ou no Fireworks, você
pode selecionar a imagem inteira e visualizar o painel
Informações para ver as dimensões da imagem.
Imagens 159
Dimensionando
imagens com o navegador
Você pode alterar o tamanho de exibição de uma
imagem apenas especificando uma nova altura e
largura em pixels (A a C). É melhor, entretanto,
exibir as imagens em seu tamanho original.
Os métodos que os navegadores usam para dimensionar

imagens não são tão avançados quanto os do Photoshop
ou de outros editores de imagens, então teste os resultados.
Para reduzir o tempo de carregamento, você pode

aumentar sua imagem ajustando a altura e a
largura em HTML ou CSS. Mas tenha cuidado:
R Com seu tamanho original de 440 por 341 pixels,
se você ampliar demais a imagem, ela poderá ficar
a imagem fica muito grande na página.
granulada e feia.
B Ajuste os atributos de altura e largura e certifique-

Para dimensionar uma imagem com o navegador: se de manter a mesma proporção. Neste caso,
dividimos a altura e a largura por dois.
1. Digite <img src="image.url", onde
image.url é o local no servidor da imagem. ...
<h1>Estupas</h1>
<img src="stupa.jpg" alt="Duas Stupas"
2. Digite width="x" height="y" onde x ÿ width="220" height="170" />
e y são a largura e a altura desejadas, <p>Essas estupas em Yunnan, China, são
respectivamente, em pixels, da sua imagem. ÿ monumentos budistas usados como local de
ÿ adoração.</p>
3. Adicione quaisquer outros atributos de ...
imagem conforme desejado e digite o /> final.
Você também pode usar um valor percentual

na etapa 2, em relação à janela do navegador (não
ao tamanho original da imagem).
Usando os atributos de largura e altura

é uma maneira rápida e suja de alterar a forma
como a imagem é exibida em uma página da Web.
Porém, como o arquivo em si não é alterado, o
visitante sempre é enganado. Imagens reduzidas
demoram mais para serem visualizadas do que
imagens realmente desse tamanho; imagens
ampliadas aparecem granuladas. Uma solução
melhor é usar seu editor de imagens para alterar o tamanho da imagem.
Você pode definir apenas a largura ou

apenas a altura e fazer com que o navegador ajuste
o outro valor proporcionalmente. C A imagem aparece com metade do tamanho original.
É importante observar, entretanto, que leva o mesmo
tempo para carregar como antes. Afinal, é o mesmo arquivo.
160 Capítulo 5
Dimensionando imagens
com um editor de imagens
A maioria das imagens é grande demais para uma página da Web.
Embora uma imagem destinada à impressão possa medir

1.800 pixels de largura (para imprimir a 300 dpi e ter 15
centímetros de largura), as imagens para páginas da Web
raramente devem ter mais de 600 pixels e, muitas vezes,
mais de 200.
Quando você precisar que as imagens sejam maiores,

encontre uma imagem original maior e reduza-a com um
R A fotografia original, tirada com as configurações
padrão da minha câmera digital, media 2.048 editor de imagens. Quando isso não for uma opção,
por 1.536 pixels, que (além de ser grande o aumentar a escala de uma imagem com um editor de
suficiente para quase quatro navegadores) pesava
imagens parece melhor do que usar o navegador.
impressionantes 211,3 K quando compactado como
JPEG de alta qualidade. Mas aumentará o tamanho do arquivo da imagem e o tempo
de carregamento da sua página.
Para dimensionar uma imagem com o Photoshop:
1. Na parte inferior direita do Save

Para a janela Web e Dispositivos, clique na caixa W
(Largura) ou na caixa H (Altura) na seção Tamanho da
imagem A.
2. Insira uma nova largura ou altura em pixels, ou uma

porcentagem, e pressione a tecla Tab para
redimensionar a imagem B.
3. Você pode continuar ajustando o tamanho
B Digite a nova largura, 400 pixels, no campo W ou para baixo até ficar satisfeito. A imagem não é
e clique em Aplicar. A imagem reduzida caberá reamostrada até que você pressione Salvar.
corretamente na página e levará apenas 1 segundo
para ser baixada a 768 Kbps (ou menos com uma
conexão mais rápida). Você também pode alterar o tamanho de
uma imagem antes de Salvar para Web e
Dispositivos usando o comando Tamanho da Imagem
no item de menu Imagem. Lembre-se de que a caixa
Resolução é irrelevante (refere-se à resolução de
saída, que é determinada na Web não por você ou
pelo Photoshop, mas sim pelo monitor do visitante).
Em vez disso, baseie o tamanho no número de pixels
da imagem. Você terá que selecionar a caixa
Reamostrar imagem para alterar o tamanho da imagem
(em oposição à resolução de saída).
Outra ótima maneira de reduzir o tamanho de

uma imagem serve para recortar áreas indesejadas.
Imagens 161
Adicionando ícones para

Seu site
Os Favicons, na vida real,
O pequeno ícone (associado a um site) que você vê são pequenos. Eles medem
nas barras de endereço, guias e marcadores é apenas 16 x 16 pixels.
conhecido como favicon , que é a abreviação de
ícone de favoritos. B A maioria dos navegadores exibirá seu favicon sem
este elemento de link se você nomear os arquivos
A Apple pede ícones maiores para as telas iniciais favicon.ico e apple-touch-icon.png e colocá-los na
de seus dispositivos (iPhone, iPod touch e raiz do seu site.
iPad); eles recomendam que o tamanho seja 114
...
pixels x 114 pixels. Não se preocupe em adicionar
<cabeça>
cantos arredondados sofisticados, sombra <meta charset="utf-8" />
projetada e brilho reflexivo; o sistema operacional <title>Podcasts de treinamento agrícola</title>
<link rel="ícone de atalho"
do dispositivo fará isso por você. O sistema
ÿ href="/favicon.ico" />
operacional Android também oferece suporte a
<link rel="apple-touch-icon" ÿ href="/
esses ícones.
apple-touch-icon.png" />
...
Para adicionar um ícone ao seu site: </head>
...
1. Crie uma imagem de 16 pixels por 16 pixels e
salve-a no formato ICO A. Você também
pode salvá-la nos formatos PNG e GIF.
2. Crie uma imagem de 114 pixels por 114 pixels

para dispositivos de toque e salve no formato
PNG.
3. Na seção principal do seu HTML5

documento, digite <link rel="shortcut
icon" href="favicon.ico" / >, onde
favicon.ico é o nome e a
localização do seu ícone no seu
servidor. Se sua imagem for um PNG, digite <link rel="icon"
type="image/png" href="favicon.
png" />. Se sua imagem for um
GIF, digite <link rel="icon" type="image/gif"
href="favicon.gif" />.
4. Na seção principal do seu documento HTML5,
digite <link rel="apple-touch-icon" href="/
apple-touch-icon.png"
/>, onde apple-touch-icon.png é o nome e a
localização do seu ícone no seu
servidor.
162 Capítulo 5
Os favicons geralmente devem ser

salvos no formato ICO (B e C). Existe um
plugin útil do Photoshop para criar ícones
no formato ICO feito pela Telegraphics
(www.telegraphics.com.au/sw/).
Você também pode criar favicons no PNG

e formatos GIF. Certifique-se de usar o tipo
MIME adequado para o tipo.
O Internet Explorer originalmente exigia o

arquivo favicon.ico a ser colocado no
diretório raiz do seu site. Este não é mais o
caso, embora os navegadores ainda procurem
lá se o elemento link não estiver presente.
C O favicon normalmente é usado na barra de endereço,

nos menus Favoritos e Marcadores e nas guias.
Como o navegador geralmente exibe seu ícone sobre cinza
ou outras cores, você pode tornar o fundo do seu ícone
transparente.
D O ícone apple-touch
é usado quando você
adiciona seu site à tela
inicial de dispositivos iOS a
partir do Safari.
Imagens 163

6
Ligações
Os links são a força vital da Web. Sem
neles, cada página existiria por si só, completamente Neste capítulo

desconectada de todas as outras.
A anatomia de um link 166
Criando um link para outra página da web 167
Criando Âncoras 172
Vinculando a uma âncora específica 174
Criando outros tipos de links 175

A anatomia de um link
Um link tem duas partes principais: um destino e um
rótulo. A primeira parte, o destino, é sem dúvida a
mais importante. Você o usa para especificar o que
acontecerá quando o visitante acionar o link. Você
pode criar links que vão para outra página, pular
dentro de uma página, mostrar uma imagem, baixar
arquivos, enviar uma mensagem de e-mail e muito
mais. Os links mais comuns, entretanto, conectam-
se a outras páginas da Web A e, às vezes, a locais
específicos em outras páginas da Web, chamados
de âncoras.
Os destinos são definidos escrevendo uma URL (ver
Capítulo 1) e geralmente só são visíveis para o
visitante na barra de status do navegador (em
navegadores de desktop).
A segunda parte do link é o rótulo, a parte que o

visitante vê em um navegador ou ouve em um leitor
de tela e depois ativa para
chegar ao destino. Pode ser um texto, uma
imagem ou ambos. Os navegadores normalmente
mostram o texto do rótulo sublinhado e em azul
por padrão. É fácil mudar isso com CSS.
Observe que é comum as pessoas dizerem que R Algumas de suas páginas podem ter links para muitas
um usuário clica em um link, um reflexo da outras páginas. Outras páginas podem ter apenas um link.
onipresença do mouse como meio de navegar nas E outros ainda podem não ter nenhum link.
páginas da Web. Sempre que possível, porém, evito
esse termo em favor de palavras como disparar e
ativar, para reconhecer as diversas maneiras pelas
quais os usuários interagem com os links. Por
exemplo, usuários com dispositivos touchscreen
(como a maioria dos smartphones e tablets) tocam
nos links, enquanto outros usuários móveis podem
ativar links por meio de um trackball.
Enquanto isso, alguns usuários navegam nas
páginas com o teclado, seja por preferência ou
necessidade; eles podem ter uma deficiência física
que dificulte ou impossibilite o uso de mouse,
caneta digital ou dispositivo similar. Esses usuários
normalmente acessam links (usando a tecla Tab para
avançar e Shift-Tab para retroceder) e, em seguida,
acionam-nos com a tecla Enter ou Return.
166 Capítulo 6
R Como há apenas um nome de arquivo (e nenhum caminho)

referenciado no atributo href , o arquivo Pioneer-valley.html
Criando um link para
deve estar no mesmo diretório desta página da Web que contém
o link. Caso contrário, o navegador não conseguirá encontrar
Outra página da web
Pioneer-valley.html
quando o usuário ativa o link. Se você tiver mais de uma página da Web,
provavelmente desejará criar links de uma página
...
para a próxima (A a D) e vice-versa. Você
<corpo>
também pode criar links para páginas de outros
<artigo> sites, sejam eles seus ou de criação de
<h1>Biscoito e Amadeirado</h1> terceiros (F a H).
<img src="img/cookiefora.jpg" width="143" ÿ Para criar um link

height="131" alt="Cookie" />
para outra página da Web:
<img src="img/woodygran.jpg" largura="202"
1. Digite <a href="page.html"> , onde
ÿ altura="131" alt="Woody" />
page.html é o URL da página da Web de
<p>Geralmente considerados os gatos ÿ destino.
mais doces e ainda mais independentes do
2. Digite o texto da etiqueta, ou seja, o texto que
ÿ <a href="pioneer-valley.html">
ÿ Pioneer Valley</a>, Cookie e Woody ÿ são
está destacado por padrão B e que
quando ativado levará o usuário para
consistentemente subestimados por ÿ
seus humildes humanos.</p> a página referenciada na etapa 1. Como
</artigo>
alternativa (ou além do texto do rótulo),
adicione um elemento img como rótulo.
</body>
</html> (Consulte A em “Criando outros tipos de
links” e também em “Vinculando imagens
em miniatura” nessa seção.)
3. Digite </a> para completar a definição do link.
B Quando um visitante aponta para um link (exibido C …a página associada a esse URL de destino é exibida
na maioria dos navegadores como texto azul sublinhado no navegador do usuário.
por padrão), o URL de destino é mostrado na barra de
status. Você pode alterar o estilo padrão com CSS. Se
um usuário ativar um link…
Ligações 167
Links em nível de bloco do HTML5 D Este tipo de link é inválido em versões anteriores do
HTML, mas o HTML5 permite isso.
HTML5 permite agrupar um link em torno de
praticamente qualquer tipo de elemento ou grupo de ...
elementos D. Os exemplos incluem parágrafos, listas, <corpo>
artigos inteiros e seções – praticamente qualquer

coisa, exceto conteúdo interativo, como outros links, <a href="girafa-escapes.html">
<hgrupo>
áudio, vídeo, elementos de formulário, iframes, e
<h1>Girafa escapa do zoológico</h1>
assim por diante. Testar suas páginas em um validador <h2>Animais em todo o mundo se alegram</h2>
HTML (veja “Validando seu código” no Capítulo 20) </hgrupo>
revelará quando você envolveu um link em torno de </a>
um elemento que não é permitido. ...

</body>
</html>
Esses links em nível de bloco, como são chamados não
oficialmente, são muito diferentes das versões anteriores
do HTML, que permitiam apenas vincular texto, imagens E Não exagere. Evite fazer o que é mostrado aqui, que é
e o que era conhecido como elementos inline . Ou seja, envolver um link em torno de uma grande parte do
os elementos que marcam frases de texto, como em, conteúdo. Embora o link funcione e seja HTML5 válido, um
leitor de tela pode ler todo o conteúdo mais de uma vez, e
forte, citação e similares (estes são categorizados até mesmo essa quantidade de conteúdo uma vez
como conteúdo de fraseado em HTML5). há mais informações de link do que um visitante
normalmente deseja ouvir. É melhor restringir o foco do seu
link ao conteúdo mais relevante.
O engraçado é que, embora os links em nível de bloco
...
não fossem permitidos nas especificações HTML
<corpo>
anteriores, os navegadores os suportavam de qualquer
maneira. Isso significa que você pode usá-los agora
<a href="pioneer-valley.html">
e eles funcionarão em navegadores mais antigos e <artigo>
modernos. Porém, use-os com cuidado (D e E). <h1>Biscoito e Amadeirado</h1>
<img src="img/cookiefora.jpg" largura= ÿ

Há algumas preocupações de acessibilidade a serem "143" altura="131" alt="Cookie" />
consideradas, particularmente relacionadas à forma
como diferentes leitores de tela tratam links em nível de bloco. <img src="img/woodygran.jpg" largura= ÿ
"202" altura="131" alt="Woody" />
Esses dois artigos, dos especialistas em acessibilidade
Derek Featherstone e Steve Faulkner, respectivamente,
<p>Geralmente considerados os gatos
discutem as questões com mais profundidade: http:// mais doces ÿ e ainda mais
simplyaccessible.com/article/ independentes ÿ de Pioneer Valley,
html5-block-links/ e www.paciellogroup .com/blog/ Cookie ÿ e Woody são
consistentemente ÿ subestimados por
2011/06/html5-accessibility- chops-block-links/.
seus humildes ÿ humanos.</p>
Eles aconselham colocar o conteúdo mais pertinente no </artigo>
início de um link e não colocar muito conteúdo em </a>
um link. Como observa Featherstone, os problemas de
...
acessibilidade são provavelmente temporários, à
</body>
medida que leitores de tela e navegadores alcançam
</html>
oficialmente o suporte a links em nível de bloco.
168 Capítulo 6
F Se estiver criando links para o site de outra pessoa, você terá que De modo geral, você desejará manter o estilo
usar uma URL absoluta, com http://, servidor, caminho completo e de link mais simples e tradicional mostrado no
nome de arquivo. O rel
primeiro exemplo A, mas saiba que links em
e os atributos title são opcionais, mas recomendo usar rel="external"
para indicar que um link aponta para um site diferente. (Veja o Capítulo nível de bloco criados de maneira inteligente
4 para aprender sobre o elemento cite .) também estão disponíveis para você.
... href significa referência de hipertexto.

<corpo>
Você pode alterar o estilo padrão do texto do
<artigo> rótulo (consulte o Capítulo 10) ou até mesmo usar uma
<h1>A Glória dos Gatos</h1> imagem como rótulo (consulte “Criando outros tipos de
links” neste capítulo).
<p><a href="http://en.wikipedia.org/
ÿ wiki/Gato" rel="external" title="Gato Como regra geral, use URLs relativos para links
ÿ entrada na Wikipedia">Gatos</a> são para páginas da Web em seu site e URLs absolutos para
ÿ companheiros maravilhosos. Seja uma ÿ links para páginas da Web em outros sites. Para mais
tampa de garrafa, um barbante longo ou suas detalhes, consulte “URLs” no Capítulo 1.
pernas, ÿ eles sempre encontram algo para
perseguir ÿ por aí.</p> Um link para uma página de outro site pode parecer
assim: <a href="http://www.site.com/
<p>Na verdade, os gatos são tão incríveis directory/page.html" rel="external"> Texto
que até ÿ têm <a href="http://www.catsthe do rótulo</a> (F a H). O rel
ÿ musical.com/" rel="external" O atributo é opcional, pois o link funciona da mesma
ÿ title="Site oficial do André forma sem ele. Descreve a relação entre a página que
ÿ Musical de Lloyd Webber">seu próprio contém o link e a página à qual você está vinculando. É
ÿ musical</a>. Foi inspirado no <cite>Old mais uma forma de melhorar a semântica do seu HTML.
Possum's Book of ÿ Practical Cats</cite>
de TS ÿ Eliot.</p> Os mecanismos de busca também podem aproveitar
</artigo> as informações. Uma lista em constante evolução de
valores rel é mantida em http://microformats.org/wiki/
</body> valores rel existentes.
</html>
G Assim como acontece com um link para uma página do seu site,
quando um visitante aponta para um link (exibido em azul, texto
sublinhado, por padrão) para outro site, o URL de destino é
mostrado na área de status e no texto do título , se especificado, é
exibido próximo ao link.
Se o visitante ativar um link ...
H. _ . .a página associada a esse URL de destino
é exibida no navegador do visitante.
Ligações 169
Especifique o caminho, mas omita o nome do arquivo Certifique-se de que cada página do seu site contenha
para vincular ao arquivo padrão de um diretório, navegação para as principais seções do seu site,
que normalmente é index.html: www.site.com/ incluindo a página inicial. Isso permite que os visitantes
diretório/. Omita também o caminho para vincular naveguem livremente em seu site, sejam eles diretamente
à página padrão (inicial) de um site: www.site.com. ou por meio de um link de outro site. Você nunca sabe
onde os visitantes entrarão em seu site. Pode ser por
Use todas as letras minúsculas em seus URLs, a meio de um link que “links diretos” para uma de
menos que esteja apontando para uma página ou nome suas páginas internas, então você normalmente desejará
de diretório que contenha letras maiúsculas. (Para permitir que eles acessem o resto do site a partir daí.
seus próprios sites, nomeie todas as pastas e arquivos
em letras minúsculas e corresponda aos URLs dos links de acordo.)
Para criar um link para um local específico em uma
Não deixe o rótulo do link muito longo. Se o página, use uma âncora (veja “Criando Âncoras” neste
rótulo fizer parte de uma frase, mantenha apenas as capítulo).
palavras-chave dentro da definição do link, com o
restante da frase antes e depois dos sinais de menor que Como observado na introdução deste capítulo,
e maior que do elemento a . você pode navegar por uma página com o teclado.
Cada vez que você pressiona Tab, o foco muda para o
Faça o que fizer, evite usar “Clique aqui” próximo link, controle de formulário ou mapa de imagem
como um rótulo. Infelizmente, esse tipo de texto conforme aparece no código HTML, que não é
vinculado é muito comum na Web e é ruim para a necessariamente o mesmo de onde aparece na tela,
usabilidade, a acessibilidade e para você, como porque o layout CSS de uma página pode ser diferente.
proprietário do site. Quando os usuários examinam O atributo tabindex do HTML permite alterar a
rapidamente os links de uma página (seja visualmente ou sequência de tabulação, mas desencorajo seu uso,
por meio de um leitor de tela), “clique aqui” carece de contexto (“Clique aqui?
porque é Por
umaquê?”).
prática desnecessária e desatualizada
Há pouco incentivo para ativar o link e depende da leitura na maioria dos casos. (Há certos casos em que isso é
do texto ao redor do link pelo visitante na esperança de útil, mas geralmente é quando você está aprimorando
que ele explique o propósito do link. Compreensivelmente, uma interação com JavaScript, um tópico um pouco
é mais provável que seu visitante o ignore. Além disso, avançado.) Em vez disso, tome cuidado ao marcar seu
conforme mencionado no início deste capítulo, a palavra conteúdo para que a sequência de tabulação seja lógica.
“clique” não se aplica à forma como todos os usuários Teste isso navegando em suas próprias páginas para
acionam links. ver se você gosta delas como usuário e ajuste o HTML de
Em vez disso, identifique o link usando as palavras-chave acordo.
que já existem no seu texto. Por exemplo, “Saiba mais
sobre nossa promoção” em vez de “Clique aqui para saber
mais sobre nossa promoção”.
170 Capítulo 6
O atributo alvo
É possível abrir um link em uma nova janela ou aba (dependendo do navegador), mas é considerado uma má prática, por
isso recomendo que você não faça isso. Existem alguns argumentos contra isso.
Primeiramente, a decisão de abrir um link em uma janela ou guia diferente deve ser do usuário, e não sua ou minha como
desenvolvedores de HTML. Caso contrário, estaremos ditando o comportamento de navegação em nome dos nossos usuários.
Também existem preocupações de usabilidade e acessibilidade. Usuários menos experientes podem ficar confusos quando
ativam um link e não veem os resultados exibidos na janela atual. Usar um navegador não é fácil para todos; Mostrei guias do
navegador para pessoas de várias idades que antes não tinham ideia de que poderiam ter mais de uma página aberta ao
mesmo tempo. Da mesma forma, os usuários de dispositivos assistivos, como leitores de tela, terão que negociar o
caminho até a nova janela ou guia, desde que esteja claro qual deles carregou o novo conteúdo.
Se tudo isso não convenceu você a evitar o carregamento de links em outras janelas e guias, ou se seu chefe ou cliente não
ouvir seu argumento fundamentado contra isso, veja como fazer: digite target="window"
na definição do link, onde janela é o nome da janela (de sua escolha) onde a página correspondente deve ser exibida.
Por exemplo, <a href="some-page.html" target="doodad">Alguma página</a> abre alguma página .html em uma
nova janela ou guia chamada doodad.
Se você direcionar vários links para a mesma janela (ou seja, usando o mesmo nome), todos os links serão abertos
na mesma janela. Ou, se você sempre quiser que um link abra em uma janela ou aba diferente (mesmo que você
tenha ativado o mesmo link mais de uma vez), use o nome predefinido do HTML, _blank, como em target="_blank".
Mas lembre-se, você não leu nada disso aqui.
Existe outro uso para target, que é abrir um link em um iframe. Você codifica o alvo
da mesma forma, exceto que seu valor deve corresponder ao id do iframe. Você raramente terá a oportunidade de usar
isso, especialmente porque os iframes geralmente são desencorajados (embora às vezes eles tenham seu lugar). Saiba
mais sobre o elemento iframe em https://developer.mozilla.org/en/HTML/Element/
iframe.
Embora os mapas de imagens não sejam abordados aqui, você deve saber que eles permitem adicionar um link para uma
ou mais regiões de uma única imagem. Você define a forma de cada área vinculada como retângulo, círculo ou polígono.
Codificadores menos experientes muitas vezes os utilizam indevidamente para criar navegação baseada em imagens, em
vez de usar técnicas preferidas, como texto HTML estilizado com CSS (ou com uma técnica de substituição de imagem
quando o CSS por si só não é suficiente). O apogeu dos mapas de imagens ocorreu anos e anos atrás, antes que essas
técnicas prevalecessem (ou mesmo fossem possíveis). Atualmente, você raramente vê mapas de imagens na prática, mas
ocasionalmente há casos de uso legítimos — por exemplo, uma imagem de um país, na qual você deseja definir links para
várias regiões, províncias ou estados. Você pode aprender mais sobre mapas de imagens pesquisando online por “mapas
de imagens HTML”.
Ligações 171
Criando Âncoras
Geralmente, a ativação de um link leva o usuário
ao topo da página da Web correspondente.
Se você quiser que o usuário vá para uma
seção específica da página da Web, crie uma
âncora e faça referência a essa âncora no link A.
Um valor href de cada link que começa com # ancora o elemento com o id correspondente (sem o #).
Por exemplo, <a href="#rising-action"> Rising Action</a> ancora-se em <h2 id="rising-action">Rising
Ação</h2>. Você pode aplicar um id a qualquer elemento, desde que qualquer id exista em uma página apenas uma vez (veja
“Nomeando elementos com uma classe ou id” no Capítulo 3). Este exemplo também oferece uma visão antecipada de uma lista não
ordenada (ul), de longe o tipo de lista usado com mais frequência na Web. (As listas são abordadas extensivamente no Capítulo 15.)
...
<corpo>
<h1>Frankie e Johnny</h1>
<cabeçalho>
<h2>Índice</h2>
<nenhum>
<ul>
<li> <a href="#intro"> Introdução</a></li>
<li> <a href="#main-characters"> Descrição dos personagens principais</a></li>
<li> <a href="#rising-action"> Ação crescente</a></li>
</ul>
</nenhum>
</header>
<artigo>
<h2 id="intro">Introdução</h2>
<p>Esta é a introdução. Se eu conseguisse pensar em coisas suficientes para escrever, poderia ocupar algumas ÿ
páginas, fornecendo todas as informações introdutórias que uma introdução deveria apresentar.</p>
<h2 id="main-characters">Descrição dos personagens principais</h2>

<p>Frankie e Johnny são os personagens principais. Ela está com ciúmes e parece ter uma razão para estar. ÿ Ele é um
desprezível e pagará o preço.</p>
<h2 id="rising-action"> Ação crescente</h2>

<p>É aqui que tudo começa a acontecer. Johnny sai, sem Frankie, sem nem mesmo ÿ dizer a ela para onde está indo. Ela
não está louca por isso, mas ela o deixa ir. Um tempo depois, ÿ ela fica com sede e decide ir até o bar da esquina tomar
uma cerveja. Conversando com o ÿ bartender, ela descobre que Johnny esteve lá com ninguém menos que Nellie Bly.
Furiosa, ela ÿ pega o ônibus para encontrá-lo.</p>
</artigo>
</body>
</html>
172 Capítulo 6
B O primeiro exemplo A foi mantido simples por Para criar uma âncora:
design, apenas para demonstrar a ancoragem básica.
No entanto, você poderia dar um passo adiante com a
1. Coloque o cursor na tag inicial de
semântica agrupando cada resposta em uma seção o elemento para o qual você deseja que o
elemento, colocando os ids neles em vez dos títulos. Isso os usuário vá.
denota como seções do artigo pai. E ainda outra maneira (não
mostrada) de marcar esse conteúdo seria tratar cada uma das 2. Digite id="nome-âncora", onde
respostas como seu próprio artigo , removendo o artigo pai e
nome da âncora é o texto que você usará
substituindo cada seção por um artigo. Depende apenas de como
você deseja descrever o significado do seu conteúdo (você pensa internamente para identificar aquela seção
nas respostas como um artigo de conteúdo ou como artigos da página da Web. Certifique-se de que
individuais?). haja um espaço entre o nome do elemento e o
id, por exemplo, <h2 id="rising">.
...
<cabeçalho> Dê nomes significativos aos seus IDs de âncora
<h2>Índice</h2> para aumentar a riqueza semântica do seu
<nenhum> documento HTML. Em outras palavras, evite IDs
<ul> genéricos como âncora1 e item5.
<li><a href="#introdução">
ÿ Introdução</a></li> Espaços não são permitidos em ids. Separado
valores de identificação de várias palavras com um traço.
...
</ul>
</nenhum>
Em alguns casos, você pode querer incluir um link
abaixo de cada seção de conteúdo para ancorar de volta
</header>
ao índice (você provavelmente está acostumado a vê-los
<artigo> como links “Voltar ao início”). No entanto, se sua página

tiver várias seções longas, você pode considerar dividi-la
<seção id="introdução">
<h2>Introdução</h2> em várias páginas.
<p>Esta é a introdução...</p>
</seção>
<seção id="caracteres principais">

<h2>Descrição dos ÿ Personagens
Principais</h2>
...
</seção>
<seção id="rising-action">
<h2>Ação crescente</h2>
...
</seção>
</artigo>
</body>
</html>
Ligações 173
Vinculando a um
Âncora Específica
Depois de criar uma âncora por meio de um id,
você pode definir um link para que, quando um
usuário o acione, a página salte diretamente
para a seção do documento que contém o
âncora (A e B), em vez de para o topo
do documento.
Para criar um link para uma âncora:
1. Digite <a href="#nome-âncora"> , onde nome-

âncora é o valor do atributo id do destino
(veja a etapa 2 de “Para criar uma âncora”).
2. Digite o texto do rótulo, ou seja, o texto que está

R Quando o visitante aponta para um link que se
destacado (geralmente azul e sublinhado por refere a uma âncora, o URL e o nome da âncora
padrão) e que quando ativado levará o aparecem na barra de status (no canto inferior
usuário para a seção esquerdo da janela) em navegadores de desktop.
referenciado na etapa 1.
3. Digite </a> para completar a definição do link.
Se a âncora estiver em um documento

separado, use <a href="page.html#anchor-name">
para fazer referência à seção. (Não deve
haver espaço entre o URL e o #.) Se a âncora
estiver em uma página em um servidor
diferente, você terá que digitar <a href="http:// www.site
.com/ path/ page.html#anchor-name">
(sem espaços).
Embora obviamente não seja possível

adicionar âncoras às páginas de outras pessoas, B Depois que o visitante ativa o link, a parte específica
você pode aproveitar aquelas que elas já criaram. da página à qual a âncora faz referência é exibida
Visualize o código-fonte de seus documentos para ver na parte superior da janela do navegador.
quais âncoras correspondem a quais seções. (Para obter
ajuda na visualização do código-fonte, consulte “A
Inspiração de Outros” no Capítulo 2.)
Se a âncora estiver na parte inferior do

página, ele pode não ser exibido na parte superior da
janela, mas sim no meio.
174 Capítulo 6
Criando outro
Tipos de links
Você não está limitado a criar links para
outras páginas da Web. Você pode criar um link
para qualquer URL: feeds RSS, arquivos que
você deseja que os visitantes possam baixar,
endereços de e-mail e muito mais .
R Você pode criar links para todos os diferentes tipos de URLs. Esta página inclui cinco links, mas os dois ao redor das
imagens podem não ser óbvios em todos os navegadores B. (Este exemplo também usa frequentemente o elemento abbr para
marcar abreviações, bem como o elemento code , que, não surpreendentemente, designa o conteúdo que é o código. Ambos
são abordados no Capítulo 4.)
...
<corpo>
<h1>Outros tipos de links</h1>
<p>Existem vários tipos diferentes de links que você pode criar em uma página da Web. Mais precisamente, ÿ
há muitos arquivos diferentes aos quais você pode vincular em sua página da Web.</p>
<p>Você pode criar links diretamente para <a href="img/blueflax.jpg">uma foto</a> ou até mesmo criar links para
ÿ fotos.</p>
<p>Por exemplo, aqui estão Cookie e Woody novamente, só que desta vez eles estão vinculados a
outras páginas. ÿ <a href="cookie.html" title="Tudo sobre Cookie"><img src="img/cookiefora.jpg"
width="143" ÿ height="131" alt="Cookie" /></a > <a href="woody.html" title="Tudo sobre o Woody"><img src="img/
ÿ woodygran.jpg" width="202" height="131" alt="Woody" /></a></p>
<p>Você também pode criar um link direto para <a href="http://www.sarahsnotecards.com/catalunyalive/

segadors.mov" ÿ rel="external"> um arquivo de vídeo</a>, embora geralmente seja melhor para vincular a
uma página com o ÿ vídeo incorporado, como com o elemento <abbr title="Hypertext Markup Language revision
5">HTML5 ÿ </abbr> <code>video</code>.</p>
<p>Embora você possa criar um link para <a href="mailto:someone@somedomain.com"> endereços de e-mail ÿ de
alguém </a> com o protocolo <code>mailto:</code>, não recomendo isso, já que os spambots os pegam e os
bombardeiam com spam. É uma pena, porque eles são muito convenientes. Se você ÿ ativar o link, seu programa de
e-mail será aberto. Provavelmente é melhor oferecer seu endereço de e-mail ÿ de forma descritiva, como "alguém
em algum domínio" embora isso nem sempre seja infalível ÿ também.</p>
<corpo>
</html>
Ligações 175
Para criar outros tipos de links:

1. Digite <ahref=".
2. Digite a URL.
Para obter um link para qualquer arquivo na

Web, incluindo imagens, arquivos ZIP,
programas, PDFs, planilhas do Excel ou
qualquer outro, digite http:// www.site.com/
path/ file.ext, onde www.site.com é o nome do
server e path/ file.ext é o caminho para o
arquivo desejado, incluindo sua extensão.
3. Digite ">.
4. Digite o rótulo do link, ou seja,

o texto que será sublinhado e
B Não importa para onde vá um link, ele parece
destacado por padrão e que quando ativado
praticamente o mesmo por padrão nos navegadores, a
levará o visitante à URL menos que você o envolva em uma foto (alguns
referenciado na etapa 2. Como alternativa (ou navegadores mostram uma borda ao redor da imagem,
outros não). Observe que tentei criar rótulos que
além do texto do rótulo), adicione um
fluíssem com o corpo do texto, em vez de usar “clique em mim”.
elemento img como rótulo. (Consulte A e
“Vinculando imagens em miniatura”.)
5. Digite </a>.
176 Capítulo 6
Se você criar um link para um arquivo que um

Vinculando imagens em miniatura navegador não sabe como manipular (um arquivo Excel,
por exemplo), o navegador tentará abrir um programa
Sem dúvida você visitou uma página de galeria
auxiliar para visualizar o arquivo ou tentará baixá-lo
de fotos que mostra diversas miniaturas (versões para o passeio do visitante.
em miniatura de suas imagens) vinculadas a
versões maiores. Isso permite que você veja Embora você possa vincular a PDFs e
muitas fotos rapidamente antes de escolher quais outros documentos não HTML (Word, Excel e assim
visualizar em tamanho real. por diante), tente evitá-los sempre que possível.
Em vez disso, crie um link para uma página HTML
A implementação de uma versão básica que contenha as informações. Os PDFs podem
disso seria semelhante ao código de exemplo demorar muito para carregar e alguns navegadores
que vincula as imagens Cookie e Woody e sistemas (principalmente os mais antigos)
a outras páginas A. Cada uma dessas páginas podem ficar lentos ao tentar exibi-los. Para aqueles
poderia conter uma foto em tamanho real. momentos em que um PDF é sua única opção, deixe
(Abordagens avançadas além das capacidades claro aos usuários que o link aponta para um PDF e
do HTML por si só poderiam permitir uma não para outra página HTML, para que eles não fiquem
surpresos (os usuários não gostam de ser enganados em
página única e dinâmica.)
downloads demorados) . Esse conselho também vale
Tenha cuidado para não enlouquecer com o para outros documentos não HTML. Você pode enviar
número de miniaturas em qualquer página. essa mensagem simplesmente colocando o tipo e o
Elas podem ser pequenas, mas cada miniatura tamanho do arquivo entre parênteses; mostrar um ícone
é uma solicitação separada para o servidor Web, também ajuda. Aqui está um exemplo (sem ícone): <a
e elas se somam, tornando sua página mais href="q2-sales-report.pdf">Q2
Relatório de vendas (PDF, 725kb)</a>.
lenta. Não há uma regra definida sobre quantos
Você também pode querer incluir um
são apropriados. Depende parcialmente do
atributo de título (como title="Abre um PDF")
número e tamanho de outros ativos que sua no link, especialmente se você colocar a nota
página carrega, bem como do público-alvo entre parênteses fora do link.
pretendido. Por exemplo, os dispositivos móveis
normalmente carregam os ativos mais lentamente. É uma boa ideia compactar arquivos grandes e
grupos de arquivos que você deseja que os visitantes
Portanto, se você tiver muitas miniaturas,
baixem. Por exemplo, um conjunto de modelos do
considere dividi-las em mais de uma página.
Photoshop salvos como arquivos PSD. Pesquise
Geralmente, cerca de 20 a 30 miniaturas por online por “ZIP e RAR” para encontrar ferramentas
página poderiam ser razoáveis, mais uma para criar e abrir arquivos usando esses formatos
vez, levando em consideração os fatores que de compactação populares.
observei. Você pode testar suas páginas para
determinar o que funciona melhor. Se você deseja “criar links para conteúdo em
iTunes Store, App Store, iBook-store e Mac App
Por último, recomendo marcar sua lista de Store” (conforme URL a seguir), você pode usar o
miniaturas com uma lista não ordenada (ul), Link Maker da Apple (http://itunes.apple.com/linkmaker)
abordada no Capítulo 15. para gerar o URL a ser incluído em seu HTML. Se você
for um afiliado (www.apple.com/itunes/affiliates/), a Apple
pagará uma comissão sobre os itens que as pessoas
comprarem por meio de seus links.
Ligações 177

7
Blocos de construção CSS
Enquanto o HTML define o significado do seu conteúdo

e dá às suas páginas da Web sua estrutura básica, o CSS Neste capítulo
(Cascading Style Sheets) define a aparência.
Construindo uma regra de estilo 181
Uma folha de estilo é simplesmente um arquivo de Adicionando comentários às regras de estilo 182
texto que contém uma ou mais regras que determinam
A cascata: quando as regras colidem 184
mine - por meio de propriedades e valores - como certos
O valor de uma propriedade 188
elementos em sua página da Web devem ser exibidos.
Existem propriedades CSS para controlar a
formatação básica, como tamanho e cor da fonte,
propriedades de layout, como posicionamento e
flutuação, e controles de impressão, como decidir onde
as quebras de página devem aparecer quando os
visitantes imprimem uma página. CSS também possui
diversas propriedades dinâmicas que permitem que itens
apareçam e desapareçam e que são úteis para criar listas
suspensas e outros componentes interativos.
CSS2 é a versão com melhor suporte em navegadores

novos e antigos, portanto este livro irá abordá-la
extensivamente. CSS3, que ainda está evoluindo
como especificação, baseia-se em CSS2 para
fornecer recursos que designers e desenvolvedores
há muito clamam. A boa notícia é que os navegadores
modernos já implementaram vários componentes
CSS3, então você pode começar a usá-los hoje
mesmo. Você aprenderá alguns dos recursos mais úteis
com o melhor suporte.
A coisa maravilhosa sobre CSS é que ele pode ser

criado fora de uma página da Web e depois
aplicado a todas as páginas do seu site de uma só
vez. É flexível, poderoso e eficiente e pode
economizar muito tempo e largura de banda.
Para obter todos os benefícios do CSS, suas

páginas da Web devem ser bem marcadas e
consistentes, de acordo com as recomendações dos
capítulos sobre HTML.
180 Capítulo 7
Seletor Bloco de declaração Construindo um

h1 { Regra de estilo
Declaração
cor vermelha; Cada regra de estilo em uma folha de estilo tem
} Valor da propriedade
duas partes principais: o seletor, que determina quais
elementos são afetados, e o bloco de declaração,
composto por um ou mais pares propriedade/valor (cada
Uma regra de estilo é composta por um seletor (que indica
um constitui uma declaração), que especifica
quais elementos serão formatados) e um bloco de declaração
(que descreve a formatação que deve ser executada). Cada exatamente o que deve ser feito (A e B).
declaração dentro do bloco é um par propriedade/valor separado
por dois pontos e terminando com ponto e vírgula. Uma chave
esquerda inicia um bloco de declaração e uma chave direita
o termina. Para construir uma regra de estilo:
1. Digite selector, onde selector identifica o elemento

ou elementos que deseja formatar. Você
aprenderá como criar todos os tipos de seletores
h1 {
no Capítulo 9.
fundo: amarelo;
2. Digite { (uma chave de abertura) para iniciar o
cor vermelha;
bloco de declaração.
}
3. Digite propriedade: valor;, onde
Duas declarações, cada uma com uma
propriedade e um valor property é o nome da propriedade CSS que
descreve o tipo de formatação que você gostaria de
B A ordem das declarações não importa, a menos que a aplicar e value é uma de uma lista de opções
mesma propriedade seja definida duas vezes. permitidas para essa propriedade. As descrições
Neste exemplo, color: red poderia estar antes de
das propriedades e valores CSS começam no
background: yellow e ter o mesmo efeito.
Observe o espaçamento e recuo extras (opcional, mas Capítulo 8.
recomendado) para manter tudo legível.
4. Repita a etapa 3 conforme necessário.
Normalmente, você inserirá cada propriedade:
valor (uma declaração) em sua própria linha.
5. Digite } para completar o bloco de declaração

e a regra de estilo.
Você pode adicionar espaços extras,

tabulações ou retornos em uma regra de estilo
para manter a folha de estilo legível B. O formato
no exemplo é talvez o mais comum entre os codificadores.
Embora cada par propriedade/valor deva ser

separado do próximo por ponto e vírgula, você pode
omitir o ponto e vírgula que segue o último par
na lista. Mas recomendo que você sempre o
inclua, pois é uma prática recomendada fazê-lo.
Ponto-e-vírgula ausente (ou duplicado)

pode fazer com que o navegador ignore a regra de estilo.
Blocos de construção CSS 181

Adicionando comentários R Os comentários podem ser longos ou curtos, embora

tendam a ser curtos. Use-os conforme achar
adequado para descrever a finalidade de uma regra de estilo
às regras de estilo ou de um grupo de regras relacionadas. Os comentários
ajudam muito a tornar sua folha de estilos mais fácil de manter.
É uma boa ideia adicionar comentários ao seu CSS
para observar as seções principais das suas folhas /* Este é um comentário CSS. Pode ser um
de estilo ou simplesmente para explicar algo sobre uma ÿ linha longa ou abrangendo várias linhas. Este
regra ou declaração específica. Os comentários ÿ é mais longo que a maioria. Independentemente
disso, um comentário ÿ CSS nunca é exibido
ajudam não apenas você, mas também outras
no ÿ navegador com o conteúdo HTML do seu
pessoas que estão visualizando seu código. Para seu site. ÿ O próximo está mais alinhado com um
próprio bem, você ficará feliz por ter deixado ÿ uso típico do comentário. */
comentários se revisitar o código alguns meses
depois de ter trabalhado nele inicialmente. /* Define a renderização padrão de certos
elementos HTML5 ÿ para navegadores mais antigos. */
Para adicionar comentários às regras de estilo: artigo, aparte, detalhes, figcaption, figura, ÿ rodapé,
cabeçalho, hgroup, menu, nav, seção {
1. Na sua folha de estilo, digite /* para iniciar seu exibição: bloco;
comentário. }
2. Digite o comentário.
3. Digite */ para sinalizar o final do comentário.
Os comentários podem incluir devoluções e,

portanto, abranger várias linhas A.
Você não pode colocar comentários dentro de

outros comentários. Em outras palavras, os comentários
não podem incluir */.
Você pode iniciar comentários em sua

própria linha A, dentro de um bloco de declaração B
ou após uma regra B.
B Você também pode inserir comentários dentro do bloco de declaração ou após uma regra.
/* Adiciona cantos arredondados em navegadores compatíveis */

.caixa {
-webkit-border-radius: 12px; /* Safári 3-4 */
-moz-border-radius: 12px; /* Firefox 3.6 e inferior */
raio da borda: 12px; /* navegadores modernos */
} /* Mais um comentário para garantir! */
182 Capítulo 7
C Os comentários facilitam sua vida ao gerenciar Os comentários são extremamente úteis como
folhas de estilo. Basta comentar as seções principais das ferramenta organizacional. As folhas de estilo podem
regras em suas folhas de estilo para mantê-las organizadas. ficar longas rapidamente, portanto organizá-las é
Acho que usar um formato como este aqui (com letras fundamental para tornar seu CSS fácil de evoluir e manter.
maiúsculas e sublinhado) deixa claro onde começa cada É prática comum agrupar regras relacionadas e
agrupamento principal. Este tratamento distingue-os
preceder cada uma com um comentário descritivo C.
claramente de outros comentários, como os de A e B.
/* NAVEGAÇÃO GLOBAL Independentemente de como você formate seus

------------------------------- */ comentários em C, recomendo que você decida uma
convenção e a use de forma consistente, especialmente
... regras para navegação global ...
se estiver trabalhando em equipe.
Você pode colocar comentários ao redor ou

/* CONTEÚDO PRINCIPAL
dentro das regras de estilo para ocultá-los do navegador D.
------------------------------- */
... regras para o conteúdo principal ... Esta é uma boa maneira de testar uma folha de estilo sem
remover permanentemente a parte comentada até (e
se) você estiver pronto para fazê-lo. É uma ferramenta
de depuração útil; comente algo que você acha que
/* FORMULÁRIO DE INSCRIÇÃO
pode estar causando um problema, atualize a página
------------------------------- */
no navegador e veja se o problema foi resolvido.
... regras para formulário de inscrição ...
Embora esses exemplos contenham muitos

/* RODAPÉ DA PÁGINA
comentários para fins de demonstração, não sinta
------------------------------- */
necessidade de comentar tudo. Você provavelmente
... regras para rodapé da página ...
achará suas folhas de estilo mais difíceis de ler se elas
tiverem muitos comentários. Você provavelmente
descobrirá que uma boa combinação envolve comentários
D Você pode “comentar” uma declaração de que não
organizacionais juntamente com comentários
deseja afetar a página. Aqui, todas as imagens terão
descritivos, conforme necessário. Encontre o equilíbrio
uma borda vermelha sólida de quatro pixels, mas
não um tratamento de margem direita, porque margin-right: 12px; que funciona para você e para os outros membros de sua equipe.
está dentro de um comentário. Um comentário também
pode contornar uma regra inteira, desde que não haja
comentários dentro do comentário.
imagem {
borda: 4px vermelho sólido;

/* margem direita: 12px; */
}

A Cascata: Quando A Esta é a folha de estilo do documento HTML em B.

Não se preocupe muito com os detalhes agora,
Regras colidem mas observe que existe uma regra para p
elementos, mas não para h1, em ou elementos pequenos .
Os estilos vêm de muitas fontes. Como você p{

aprendeu no Capítulo 1, cada navegador possui cor: #36c;
seus próprios estilos padrão. Mas você pode família de fontes: "Trebuchet
aplicar seus próprios estilos para substituí-los ou MS", ÿ "Helvetica", sem serifa;
intensidade da fonte: Negrito;
complementá-los de três maneiras: Você pode
}
carregar um ou mais de um arquivo externo (o
método recomendado) , inseri-los no topo de um imagem {
documento HTML ou aplicá-los a um documento flutuar: esquerda;
HTML. elemento HTML específico diretamente no margem direita: 10px;

}
código (embora isso deva ser evitado sempre
que possível). Consulte o próximo capítulo para
detalhes sobre cada método.
B Os elementos em e small estão contidos no
elemento p e, portanto, são filhos de p.
Além disso, alguns navegadores permitem que
No entanto, o h1 não é, então não é azul como o
seus visitantes criem e apliquem suas próprias folhas outro textoC.
de estilo a qualquer página que visitarem, incluindo
...
a sua. Finalmente, alguns estilos são transmitidos do
<corpo>
elemento pai para o filho.
<h1>O Efêmero Linho Azul</h1>
<img src="img/blueflax.jpg" width="300" ÿ

height="175" alt="Linho Azul (Linum ÿ lewisii)" />
<p> Fico continuamente <em>surpreso</em> com o ÿ

lindo e delicado Linho Azul que de alguma forma ÿ tomou
conta do meu jardim. Elas ficam inundadas de ÿ cores todas
as manhãs, mas nem uma única ÿ flor permanece à
tarde. Eles são ÿ a própria definição de efêmero.</p>
<p><small>© pela Blue Flax Society.

ÿ </small></p>
</body>
</html>
184 Capítulo 7
O que acontece, você pode perguntar, quando há

mais de uma regra de estilo que se aplica a um
determinado elemento? CSS usa o princípio da
cascata para levar em conta tais
características importantes como herança,
especificidade e localização , a fim de determinar
qual de um grupo de regras conflitantes deve
vencer.
Vamos começar com herança. Muitas propriedades

CSS não afetam apenas os elementos definidos
pelo seletor, mas também são herdadas pelos
descendentes desses elementos (A
através de C). Por exemplo, suponha que você
C Na ausência de uma regra especificada explicitamente

torne todos os seus elementos h1 azuis com uma
para os elementos em e small em A, eles herdam sua borda vermelha. Acontece que a propriedade
fonte, peso e cor de seu pai, o elemento p . O itálico vem color é herdada, mas a propriedade border não.
do estilo padrão do navegador . O tamanho do aviso
legal marcado com letras minúsculas (ou seja, “letras
Assim, quaisquer elementos contidos nos
miúdas”) é reduzido pelo mesmo motivo. O h1 não elementos h1 também serão azuis, mas não terão
possui estilo próprio e não é filho de p, portanto é exibido sua própria borda vermelha. Você vai
inteiramente de acordo com o padrão do navegador.
aprenda quais propriedades são herdadas na seção
individual que descreve cada propriedade (e no
Apêndice B no site do livro). Você também pode
usar um valor de herdar com a maioria
propriedades para forçar a herança (veja a
próxima seção, “O valor de uma propriedade”).

Embora a herança determine o que acontece se D Neste exemplo, existem quatro regras de
nenhuma regra de estilo for aplicada a um especificidade variável. O primeiro afeta qualquer
elemento p , o segundo afeta apenas os elementos p com uma classe
elemento, a especificidade é a chave quando mais de
igual ao grupo, e o terceiro e o quarto afetam apenas o
uma regra é aplicada (D a F). único elemento p com um id igual ao último.
A lei da especificidade afirma que quanto mais específico
p{
for o seletor, mais forte será a regra.
cor vermelha;
Faz sentido, certo? Portanto, se uma regra afirma que
}
todos os elementos h1 devem ser azuis, mas um
a segunda regra afirma que todos os elementos h1 com p.grupo {
uma classe de espanhol for vermelha, a segunda regra cor azul;
substituirá a primeira para todos os elementos h1 }
mentos cuja classe é espanhola, porque h1.spanish

p#último {
é um seletor mais específico do que simplesmente h1. cor verde;
}
Observe que os atributos id são considerados os

p#último {
mais específicos (já que devem ser únicos em um cor: magenta;
documento), enquanto a presença de um atributo de }
classe torna o seletor mais
específico do que um seletor simples que não possui
E Três parágrafos: um genérico, um com apenas uma
nenhum. Na verdade, um seletor com mais de uma
classe e um com uma classe e um id.
classe é mais específico do que um seletor com apenas
...
uma. Seletores com apenas nomes de elementos vêm
<corpo>
em seguida na escala de especificidade; regras
herdadas são consideradas
<p>Aqui está um elemento <code>p</code>
mais gerais de todas e são anuladas por qualquer genérico. ÿ Será vermelho.</p>
outra regra.
<p class="group">Aqui está um elemento
Para as regras exatas de cálculo da especificidade, <code>p</code> ÿ com uma <code>class</
consulte a Seção 6.4.3 das especificações CSS code> de ÿ <code>group</code>. Existem duas
(www.w3.org/TR/CSS21/cascade.html#specificity ). regras ÿ que se aplicam, mas como a regra
<code>p.group ÿ </code> é mais específica,
este ÿ parágrafo ficará azul.</p>
<p id="last" class="group">Aqui está um

elemento <code> ÿ p</code> com um <code>id</
code> ÿ de <code>intro</code>. Existem quatro
regras ÿ que podem ser aplicadas a este
parágrafo. Os ÿ dois primeiros são anulados
pelos dois últimos, mais ÿ específicos. A posição
quebra ÿ o empate entre os dois últimos: aquele
ÿ que aparece depois vence e, portanto, este ÿ
parágrafo será magenta.</p>
</body>
</html>
186 Capítulo 7
Às vezes, a especificidade não é suficiente

para determinar um vencedor entre regras
concorrentes. Nesse caso, a localização da regra
desempate: as regras que aparecem posteriormente
têm mais peso (D a F). Por exemplo, regras que
são aplicadas in-line diretamente no elemento
HTML (novamente, não recomendado) são
consideradas como aparecendo depois (e,
portanto, têm mais peso do que) regras
igualmente específicas aplicadas em uma
folha de estilo externa ou incorporada no topo
do Documento HTML. Para obter detalhes,
consulte “A Importância da Localização” no Capítulo 8.
F Como a terceira e a quarta regras têm a mesma
especificidade, a sua posição torna-se um factor – e
Se isso não for suficiente, você pode substituir
assim a quarta regra vence, uma vez que aparece por último. todo o sistema declarando que uma regra específica
deve ser mais importante que as outras,
adicionando !important no final da regra. (Isso
também não é recomendado, exceto em casos
incomuns.)
Em resumo, na ausência de uma regra, muitos

estilos são transmitidos do elemento pai para
o filho. Com duas regras concorrentes, quanto
mais específica for a regra, maior peso ou
importância ela terá – independentemente da sua
localização. Com duas regras de igual
especificidade, vence aquela que aparece
posteriormente na folha de estilo.
Se alguma dessas coisas parece confusa, não se

preocupe agora. Depois de começar a brincar
com CSS e diferentes seletores, acho que
você descobrirá que a cascata funciona exatamente
como seria de esperar na maioria dos casos.

O valor de uma propriedade Um valor predefinido
Cada propriedade CSS possui regras fronteira: nenhuma;

diferentes sobre quais valores ela pode
aceitar. Algumas propriedades aceitam R Muitas propriedades CSS aceitarão apenas valores de uma lista
apenas um valor de uma lista de valores predefinida. Digite-os exatamente e não os coloque entre aspas.
predefinidos. Outros aceitam números,
inteiros, valores relativos, porcentagens, URLs
ou cores. Alguns podem aceitar mais de um Um comprimento
tipo de valor. Os valores aceitáveis para cada

propriedade estão listados na seção que tamanho da fonte: 24px;
descreve essa propriedade (principalmente nos

Capítulos 10 e 11), mas você aprenderá os sistemas básicos aqui.
B Os comprimentos devem sempre indicar explicitamente a unidade.
Não deve haver espaço entre a unidade e a medição.
Herdar
Você pode usar o valor herdado para
qualquer propriedade quando desejar
especificar explicitamente que o valor dessa
propriedade seja igual ao do pai do elemento.
Valores predefinidos
A maioria das propriedades CSS possui
alguns valores predefinidos que podem ser
usados. Por exemplo, a propriedade float pode
ser definida como esquerda, direita ou
nenhuma. Em contraste com HTML, você
não precisa – e na verdade não deve – colocar
valores predefinidos entre aspas A.
Comprimentos e porcentagens
Muitas propriedades CSS têm um comprimento
para seu valor. Todos os valores de
comprimento devem conter uma quantidade e
uma unidade, sem espaços entre eles.
Por exemplo, 3em ou 10px B. A única exceção
é 0, que pode ser usado com ou sem unidades.
188 Capítulo 7
Existem tipos de comprimento relativos a outros

Uma porcentagem
valores. Um em é aproximadamente igual ao tamanho
tamanho da fonte: 80%; da fonte do elemento, então 2em significaria “duas
vezes o tamanho da fonte”. (Quando o em é usado
para definir a própria propriedade font-size do
C As porcentagens são geralmente relativas ao elemento
pai. Portanto, neste exemplo, a fonte seria definida para 80% do elemento , seu valor é derivado do tamanho da fonte
tamanho da fonte pai. do elemento pai.) O ex deve ser igual à altura x
da fonte, ou seja, a altura de uma letra x na fonte,
Um número mas seu suporte varia, então provavelmente você

não a usará.
altura da linha: 1,5;
Pixels (px) não são relativos a outras regras de
estilo. Por exemplo, os valores em px não são
D Não confunda números e inteiros com comprimento. Um
afetados pela configuração do tamanho da
número ou inteiro não tem unidade (como px). Neste caso, o valor
aqui mostrado é um fator que será multiplicado pelo tamanho da fonte , como acontece com os ems . Um pixel
fonte para obter a altura da linha. em um tipo de dispositivo não é necessariamente
do mesmo tamanho que em outro. (Veja a descrição
detalhada de Peter-Paul Koch em www.quirksmode.org/blog/
arquivos/2010/04/a_pixel_is_not.html.)
Existem também unidades absolutas autoexplicativas,
como pontos (pt), que é uma unidade que deve ser
reservada para folhas de estilo de impressão.
(Existem outros, mas não faz sentido mencioná-los,
porque não são usados na prática.) Em geral, você
só deve usar comprimentos absolutos quando o
tamanho da saída for conhecido (como acontece com pt
e a página impressa).
Valores percentuais – 65%, por exemplo –

funcionam como ems, pois são relativos a algum outro
valor C.
De todos eles, você usará mais ems, pixels e

porcentagens.
Números simples
Poucas propriedades CSS aceitam um valor na forma
de um número sem unidade, como 3.
Os mais comuns são altura da linha D
e índice z (consulte “Definindo a altura da linha” no
Capítulo 10 e “Posicionando elementos em 3D” no
Capítulo 11, respectivamente). (Os outros são
principalmente para folhas de estilo impressas e
auditivas e ainda não são bem suportados.)

URLs
Uma URL
Algumas propriedades CSS permitem especificar a
URL de outro arquivo, principalmente imagens. plano de fundo: url(bg_flax.jpg);
Nesse caso, use url(file.ext), onde file.ext é o
caminho e nome do arquivo do ativo desejado E. E URLs em propriedades CSS não precisam ser
Observe que a especificação colocadas entre aspas.
ções afirmam que URLs relativos devem ser
em relação à folha de estilo e não ao documento

HTML. 16 cores predefinidas
Embora você possa usar aspas no nome do
arquivo, elas não são obrigatórias.
Por outro lado, não deve haver espaço entre a
palavra url e os parênteses de abertura. O espaço
água preto azul fúcsia
em branco entre parênteses e o endereço é permitido, #00FFFF #000000 #0000FF #FF00FF
mas não obrigatório (ou habitual).
Para obter mais informações sobre como escrever

as próprias URLs, consulte “URLs” no Capítulo 1. cinza verde Lima marrom
#808080 #008000 #00FF00 #800000
Cores CSS
Você pode especificar cores para propriedades
CSS de diversas maneiras. Primeiro, e mais fácil, o marinha Oliva roxo vermelho
#000080 #808000 #800080 #FF0000

valor pode ser uma das palavras-chave de cores
predefinidas. CSS3 especifica uma lista básica
de 16 nomes F e adiciona mais 131 para alinhar
com os 147 nomes de palavras-chave de cores SVG 1.0.
A lista completa está disponível em www.w3.org/TR/ prata cerceta branco amarelo
#C0C0C0 #008080 #FFFFFF #FFFF00
css3-color/#svg-color.
Claro, ninguém se lembra de nenhum desses nomes

F A maneira mais comum em CSS de definir uma cor
de cores além dos óbvios. Além disso, você é especificando, com números hexadecimais, as
normalmente obtém as cores de ferramentas como quantidades de vermelho, verde e azul que ela contém.
o Adobe Photoshop e elas não usam o nome da cor
CSS. Então, na prática, é mais comum definir suas
cores CSS com o formato hexadecimal (de longe o
mais comum) ou o formato RGB. Como você
aprenderá, você também pode especificar uma cor
com o formato HSL e o nível de transparência da cor
com RGBA e HSLA, todos novos em CSS3.
190 Capítulo 7
RGB
A quantidade de
vermelho na cor Você pode construir sua própria cor
A quantidade de especificando a quantidade de vermelho, verde
verde na cor e azul (daí o nome RGB). Você pode fornecer os
A quantidade de valores de cada uma dessas cores contribuintes
azul na cor como um número de 0 a 255, uma porcentagem ou
uma representação hexadecimal do número. Por
cor: rgb(89, 0, 127);
exemplo, se você quiser criar um roxo escuro,
poderá usar 89 vermelho, nenhum verde e 127 azul.
G Outra maneira de expressar cores em CSS é com valores
numéricos RGB de 0 a 255. Defina primeiro o vermelho, seguido
Essa cor poderia ser escrita rgb(89, 0, 127), conforme
do verde e depois do azul. mostrado em G.
Como alternativa, você pode representar cada

A quantidade de valor como uma porcentagem, embora seja muito
vermelho na cor menos comum fazê-lo, provavelmente porque
A quantidade de editores de imagens como o Photoshop tendem a
verde na cor fornecer valores RGB numéricos. Mas se quiser
A quantidade de usar porcentagens, você pode escrever a mesma
azul na cor
cor que rgb(35%, 0%, 50%), já que 89 é 35% de
255 e 127 é 50% de 255.
cor: #59007f;
Hexadecimal
H A maneira mais comum em CSS de definir uma cor é Salvei o método mais comum para
especificando, com números hexadecimais, as quantidades de
último H. Converta esses valores numéricos em
vermelho, verde e azul que ela contém.
hexadecimais, junte-os e pré-fixe o valor com um #,
como em #59007F. (59 é o equivalente hexadecimal
de 89, 00 é o equivalente hexadecimal de 0 e 7F é o
equivalente hexadecimal de 127.) Você também
pode escrever 7F
como 7f (minha preferência, mas muitos
desenvolvedores e designers vão na direção contrária).
Quando uma cor hexadecimal é composta por

três pares de dígitos repetidos, como em
#ff3344, você pode abreviar a cor para #f34. Na
verdade, é uma prática recomendada fazer isso,
já que não há razão para tornar seu código mais
longo do que o necessário.
Se você está coçando a cabeça por causa de

hexadecimais, não se preocupe. Assim como o
Photoshop e similares incluem ferramentas para
escolher cores e exibir seus valores RGB, o mesmo
acontece com o hexadecimal.

Mais opções de cores em CSS3: I Esta folha de estilo simples aplica uma imagem de
RGBA, HSLA e HSL fundo repetida e uma cor de texto padrão a toda a
página, com tratamentos de fundo ligeiramente
CSS3 introduz outra maneira de especificar cores diferentes para os títulos h1–h3 . Os navegadores
modernos exibem o resultado mostrado em J. Como
– HSL – e a capacidade de definir transparência
você aprenderá mais tarde, as versões do Internet
alfa via RGBA e HSLA. (Você não pode indicar Explorer anteriores ao IE9 não suportam RGBA,
transparência alfa com notação hexadecimal.) portanto ignoram as declarações em h1 e h2.
/* Define a imagem de fundo da página repetida e ÿ

RGBA cor de texto padrão */
corpo {
RGBA é igual a RGB, exceto A plano de fundo: url(../img/blueflax.jpg);
significa transparência alfa. Você pode especificar cor: #ff0;
a quantidade de transparência com um decimal }
de 0 a 1 após os valores de vermelho, verde e azul.
/* 25% transparente */
Então, a sintaxe é a seguinte:
h1 {
fundo: rgba (89,0,127,0,75);
propriedade: rgba(vermelho, verde, }
azul, ÿ transparência alfa);
Quanto mais próximo de 0 a configuração alfa, mais h2 {
transparente se torna a cor. Se for 0, é fundo: rgba (89,0,127,0,4);
}
completamente transparente, como se você não
tivesse definido nenhuma cor. Da mesma forma, 1 /* Fundo sólido (não transparente) */
é completamente opaco, o que significa que não é nada transparente.
h3 {
Aqui estão alguns exemplos de declarações para plano de fundo: rgb(89,0,127);
ilustrar o ponto: }
/* sem transparência, então o mesmo

que ÿ rgb(89, 0, 127); */
fundo: rgba(89,0,127,1);
/* completamente transparente */
fundo: rgba(89,0,127,0);
fundo: rgba (89,0,127,0,75);
fundo: rgba (89,0,127,0,4);
192 Capítulo 7
É claro que, para que isso funcione, você

precisará incluí-los em uma ou mais regras I.
Conforme mostrado, é comum aproveitar a
transparência alfa na cor de fundo de um elemento,
porque a transparência alfa permite que
tudo o que está por trás o elemento - uma
imagem, outras cores, texto e assim por diante -
para espiar e se misturar com ele J. Para ser claro,
porém, você também pode definir a transparência
alfa em outras propriedades baseadas em cores,
como cor, borda, borda -color, box-shadow e
J Neste exemplo vistoso, mas eficaz, você pode ver a
imagem de fundo da página aparecendo no fundo dos dois text-shadow, com vários graus de suporte ao
primeiros títulos, mas não do último. A cor de fundo dos navegador (você está livre com os navegadores
três é a mesma, mas eles se parecem com três tons
modernos).
diferentes de roxo devido às diferentes configurações
de transparência alfa. (O texto é amarelo porque a Como você pode ver, os valores das cores RGB
propriedade color definida no elemento body se espalha
são iguais no código, mas as cores em si
por todo o texto de uma página, a menos que seja
substituída por uma regra de estilo para outro elemento.) aparecem diferentes no navegador devido aos seus
diferentes níveis de trans-
parência J.
A tonalidade HSL e HSLA
O nível de saturação
HSL e HSLA são as outras novidades
O nível de em CSS3. Este último é a alternativa
leveza
RGBA para definir a transparência alfa em uma
cor: hsl(282, 100%, 25%); cor. Você especifica o alfa da mesma forma que
faz com RGBA. Você verá isso em um segundo,
K O detalhamento da formatação HSL. mas primeiro dê uma olhada em como o HSL funciona.
HSL significa matiz, saturação e luminosidade,

onde matiz é um número de 0 a 360, e saturação
e luminosidade são porcentagens de 0 a
100 K. Em CSS, a sintaxe é:
propriedade: hsl(matiz, saturação,

ÿ luminosidade);

E, como você adivinhou, o formato HSLA é este:

Como pensar em HSL
propriedade: hsla(matiz, saturação, Aprender a lógica do HSL leva algum tempo,
ÿ luminosidade, transparência alfa); mas depois que você entender isso, poderá achar
mais fácil trabalhar com ele do que com outros formatos.
Por exemplo, aqui está o mesmo roxo do exemplo
Na seção “Por quê?” seção de seu site HSL Color
RGBA e RGB que expressei
Picker (http://hslpicker.com), Brandon Mathis fornece
em HSLA e HSL:
uma boa explicação do HSL. Ele escreve:
“Escolha uma tonalidade de 0 a 360, e com
h1 {
saturação em 100 e luminosidade em 50
histórico: hsla(282.100%, você terá a forma mais pura dessa cor.
ÿ 25%,0,75); Reduza a saturação
ção e você se move em direção ao cinza.
}
Aumentar a luminosidade move você em
direção ao branco, diminuí-la leva você
/* 60% transparente */ em direção ao preto.”
Por exemplo, aqui estão algumas cores básicas

h2 {
conforme você se move pelo círculo:
histórico: hsla(282.100%,
. Vermelho é hsl(0,100%,50%);
ÿ 25%,0,4);
. Amarelo é hsl(60,100%,50%);
}
. Verde é hsl(120,100%,50%);
. Ciano é hsl(180.100%,50%);
/* Fundo sólido (não ÿ
. Azul é hsl(240,100%,50%);
transparente) */
. Magenta é hsl(300,100%,50%);
h3 {
histórico: hsl(282.100%,25%);
}
O resultado nos navegadores modernos é o mesmo
como antes J.
Pense no valor do matiz como um grau em um

círculo, com 0 e 360 reunidos no topo.
Isso significa que 0 e 360 são os
mesma cor – vermelho. (Não confunda HSL com
HSB ou HSV. Eles são semelhantes, mas não
iguais.)
Nem todos os editores de imagens especificam HSL

imediatamente (você pode obter um plugin para o
Photo-shop). No entanto, o Seletor de Cores HSL do Mathis
é uma excelente ferramenta online gratuita
que permite escolher uma cor e obter seus valores
HSL, hexadecimal e RGB, ou você pode digitar valores
194 Capítulo 7
L Os navegadores modernos renderizam a declaração RGBA para qualquer um dos formatos para ver a
porque ela vem depois da configuração de fundo
mudança de cor. Outra ferramenta desse tipo está
hexadecimal padrão (que também é compreendida,
localizada em www.workwithcolor.com/hsl-color-
portanto a ordem é importante). Enquanto isso, as versões
do IE anteriores ao IE9 ignoram a configuração RGBA picker-01 .htm. Ele mostra as cores em um círculo, o
porque não a entendem, então o fundo hexadecimal que pode ajudá-lo a entender melhor o HSL. (Em
permanece. Você poderia usar RGB (mas não RGBA) em
contraste, o HSL Color Picker os mostra em uma linha.)
vez de hexadecimal na primeira linha, mas, como observado,
hexadecimal é a forma mais comum de denotar cores não transparentes.Você pode encontrar outras ferramentas de cores
pesquisando online.
/* A ordem das declarações de background ÿ é
importante. Versões mais antigas do IE usam a ÿ RGBA, HSL e HSLA no Internet Explorer
primeira linha, e os navegadores modernos Infelizmente, como costuma acontecer com os
entendem ÿ ambas as linhas, mas aplicam a
segunda porque ÿ é a última. */ desenvolvimentos mais recentes no mundo dos
padrões, nenhuma versão do Internet Explorer
h1 { anterior ao IE9 oferece suporte a esses
plano de fundo: #59007f; recursos. Em vez disso, ignoram qualquer
fundo: rgba (89,0,127,0,75); declaração que não entendem.
}
Existe uma solução alternativa para versões anteriores
ao IE9 em relação a RGBA e HSLA. Mas em termos de
M Desvie o olhar antes que seus olhos ardam! Este detalhado HSL, você vai querer usar hexadecimal (ou RGB)
mistura de declarações de sanduíches de código
para especificar suas cores.
para versões anteriores ao IE9 (destacadas) em torno da
notação RGBA padrão (não destacada). Como sempre, as Para RGBA e HSLA em versões anteriores ao IE9,
versões mais antigas do IE ignoram o que não entendem.
Da mesma forma, os navegadores modernos ignoram os você tem três opções (mas apenas uma de cada vez):
valores -ms-filter, filter e zoom , pois não os entendem.
A ordem das declarações é essencial para que esta
técnica funcione. n Faça nada e deixe sua página ter uma aparência justa
diferente nessas versões.
/* Se você é como eu, você já começou a ÿ chorar.
n Forneça uma declaração de cor substituta para
Todas as declarações, exceto a segunda ÿ , são
para versões mais antigas do IE para imitar ÿ eles, o que significa que eles exibirão uma cor
transparência alfa. */ sólida e não transparente L.
h1 { n Imitar a transparência alfa incluindo declarações
fundo: transparente; específicas para eles, a maioria das quais são

fundo: rgba (89,0,127,0,75); CSS proprietários do IE; navegadores modernos
ainda usarão o padrão
/* IE8 */
CSS padrão, embora M.
-ms-filter: "progid:DXImageTransform.
ÿ Microsoft.gradient(startColorstr= Esta última opção utiliza o filtro Gradiente do
ÿ #BF59007F,endColorstr=#BF59007F)"; Internet Explorer em conjunto com código
proprietário que nenhum outro navegador entende.
/* IE6 e 7 */
Isso significa que os navegadores modernos
filtro: progid:DXImageTransform.
ÿ Microsoft.gradient(startColorstr= ignore-o e use a notação padrão, que neste caso
ÿ #BF59007F,endColorstr=#BF59007F); é o plano de fundo:
rgba(89,0,127,0,75); (substitui o valor de fundo
ampliar: 1;
anterior ). Esteja ciente de que as declarações
}
devem estar na ordem
mostrado para o efeito de transparência ser aplicado

corretamente em navegadores modernos e M.
Não vou me preocupar em explicar como funciona a

sintaxe do filtro Gradiente do IE, já que é tão
complicada que você provavelmente nunca a
escreverá à mão. Eu não. Em vez disso, outra
ferramenta online gratuita resgata você (você verá
cada vez mais delas à medida que aprender mais sobre CSS3).
Este vem na forma de Michael
Gerador CSS RGBa e HSLa da Bester para
Internet Explorer (http://kimili.com/journal/
rgba-hsla-css-generator-for-internet- explorer).
Conforme ele explica, você insere uma
declaração RGBA ou HSLA e a ferramenta cria o
CSS equivalente para pré-IE9.
Então você copia e cola em sua folha de estilos. Uma
observação importante: o código gerado pela
ferramenta não inclui a declaração padrão RGBA
ou HSLA para
navegadores modernos. Então, você terá que
adicionar isso diretamente após o plano de fundo:
transparente, assim como é mostrado no
exemplo M. Alternativamente (e muitas vezes
preferível), como Michael observa, você pode colocar
o CSS pré-IE9 em sua própria folha de estilos e
carregá-lo dentro do que é conhecido como condicional
comentários. (Consulte http://reference.sitepoint.com/
css/conditionalcomments para obter mais
informações. )
Os filtros do Internet Explorer, como o

filtro Gradiente M, podem afetar o desempenho
do navegador porque exigem capacidade
de processamento extra. Você provavelmente
não terá nenhum problema perceptível se
um filtro for aplicado a um número razoável
de elementos em uma página, mas às vezes
pode ser observado um atraso além disso.
Também pode depender do que está no resto da
sua página. Portanto, esteja atento a isso ao
criar uma página e, se notar uma lentidão no IE,
você pode querer desligar o filtro para ver se
esse é o problema. Os filtros do IE às vezes
podem ter outros efeitos colaterais inesperados,
como afetar negativamente a qualidade da
renderização do texto. Para esclarecer, isso não afetará outros navegadores, pois eles não entendem os filtros.
196 Capítulo 7
8
Trabalhando com
Folhas de estilo
Antes de começar a definir suas folhas de estilo, é
importante saber como criar e utilizar os arquivos que Neste capítulo
as conterão. Nisso
Criando uma folha de estilo externa 198
Neste capítulo, você aprenderá como criar um arquivo
de folha de estilo e, em seguida, como aplicar CSS Vinculando a folhas de estilo externas 200
a múltiplas páginas da Web (incluindo um site
Criando uma folha de estilo incorporada 202
inteiro), a uma única página ou a um elemento HTML
individual. Você consegue isso por meio de três métodos Aplicando estilos embutidos 204
ods: folhas de estilo externas (a escolha preferida), A importância da localização 206

folhas de estilo incorporadas e estilos embutidos (os
Usando folhas de estilo específicas de mídia 208
menos desejáveis).
Oferecendo folhas de estilo alternativas 210
Você aprenderá como criar o conteúdo
de suas folhas de estilo nos capítulos a seguir. A inspiração de outros: CSS 212
Criando um externo
Folha de estilos
Folhas de estilo externas são ideais para dar uma
aparência consistente à maioria ou a todas as
páginas do seu site. Você pode definir todos os
seus estilos em uma folha de estilos externa e
então dizer a cada página do seu site para R Use qualquer editor de texto de sua preferência para
carregar a folha externa, garantindo assim que criar uma folha de estilo. Este é o Bloco de Notas
(uma versão mais antiga). A maioria das pessoas usa o
cada uma terá as mesmas configurações. Embora mesmo editor para criar documentos HTML e CSS. O
mais tarde você aprenda sobre estilos incorporados texto entre /* */ é um comentário CSS que não afeta a
e embutidos, adicionar CSS à sua página a partir exibição da sua página nem aparece nela.
de uma folha de estilos externa é uma prática

recomendada, portanto, recomendo fortemente
que você use esse método (permitindo exceções ocasionais).
B Certifique-se de salvar o arquivo CSS com a

Para criar uma folha de estilo externa: extensão .css e em formato somente texto (como
um documento de texto ou texto simples ou ASCII ou como
1. Crie um novo documento de texto no editor de
seu editor de texto o chamar).
texto de sua escolha A.
2. Defina as regras de estilo para suas páginas

da Web conforme descrito a partir do
Capítulo 7. Além disso, inclua comentários CSS
conforme achar adequado A.
3. Salve o documento em formato somente texto no

diretório desejado. Qualquer nome serve, mas
dê ao documento a extensão .css para
designá-lo como Cascading Style Sheet B.
198 Capítulo 8
Você pode nomear suas folhas de estilo

Você por favor. base.css e global.css são dois
nomes populares para a folha de estilo que
contém as regras de exibição destinadas a todas
ou à maioria das páginas de um site. Os autores
de sites geralmente criam arquivos CSS adicionais
específicos de seção para complementar os
estilos básicos. Por exemplo, se você estiver
construindo um site de comércio, products.css
poderá conter as regras para suas páginas
relacionadas a produtos. Independentemente dos
nomes de arquivo que você escolher, certifique-se de que eles não con
Folhas de estilo externas podem ser vinculadas

para (conforme demonstrado em “Vinculando a
folhas de estilo externas”) ou importadas (via
@import), mas não recomendo que você as importe.
A diretiva @import afeta negativamente a
velocidade de download e renderização da
página, particularmente no Internet Explorer,
conforme discutido por Steve Souders em www.stevesouders.com/
blog/2009/04/09/não use-import/.
A declaração @charset que inicia a folha de

estilo nem sempre é obrigatória, mas não há mal
nenhum em incluí-la sempre A. No entanto, é
necessária se sua folha de estilo contiver
caracteres não-ASCII, o que pode ser o caso se você'
Você está usando conteúdo gerado por CSS (um
tópico um tanto avançado) ou uma fonte da Web com
um caractere especial em seu nome. Por esse motivo,
você pode optar por sempre incluir @charset para
não precisar se preocupar em adicioná-lo mais
tarde, caso sua folha de estilos precise dele. Apenas
certifique-se de que esteja na primeira linha da sua
folha de estilos. Entretanto, nunca inclua @charset
em estilos incorporados ou inline (abordados posteriormente neste cap
Trabalhando com Folhas de Estilo 199

Vinculando para externo R Aqui está a folha de estilo externa base.css

criada anteriormente neste capítulo (sem o comentário
“Uma folha de estilo simples”, que não tem influência
Folhas de estilo na exibição do HTML). Não se preocupe com as
propriedades e valores ainda (eles significam apenas “criar
Agora que você criou uma folha de estilo A, você uma borda vermelha sólida ao redor de todos os elementos img ”).
precisa carregá-la em suas páginas HTML para
que as regras de estilo sejam aplicadas ao @charset "UTF-8";
conteúdo. A melhor maneira de fazer isso é

imagem {
vincular à folha de estilo B. borda: 4px vermelho sólido;
}
Para vincular uma folha de estilo externa:
1. Digite <link rel="stylesheet" na seção B O elemento link fica dentro da seção head do seu
principal de cada página HTML na qual documento HTML. Sua página pode conter mais de um
elemento de link , mas é melhor manter o total mínimo
deseja usar a folha de estilos.
para que sua página carregue mais rápido.
2. Digite um espaço e depois href="url.css", onde
<!DOCTYPEhtml>
url.css é o nome da sua folha de estilo CSS
<html lang="pt">
(veja a seção anterior). <cabeça>
3. Digite um espaço e o final />. (Ou se <meta charset="UTF-8" />

<title>O Palau da Música</title>
você preferir, não digite nenhum espaço e simplesmente
<link rel="stylesheet" ÿ
>; HTML5 permite ambas as abordagens e elas href="base.css" />
funcionam exatamente da mesma forma.) </head>
<corpo>
<artigo>
Quando você faz uma alteração em uma folha <h1>Palácio da Música</h1>
de estilo externa, todas as páginas que fazem
referência a ela também são atualizadas automaticamente (C e D).
<img src="img/palau250.jpg" width="250" ÿ
Esse é o incrível poder de uma folha de estilos
height="163" alt="El Palau de la ÿ Música" /
externa! >
<img src="img/tickets.jpg" width="87" ÿ
Outro benefício de uma folha de estilo
externa é que, depois que um navegador a carrega height="163" alt="Janela de ingressos" />
para uma página, normalmente não é necessário

<p>Eu adoro o <span lang="es">Palau de la ÿ
recuperá-la do servidor Web para as páginas subsequentes.
Música. É ornamentado e vistoso ÿ e tem tudo o
O navegador armazena o arquivo em cache, ou seja,
que há de maravilhoso ÿ no modernismo. É
salva-o no computador do usuário e utiliza essa
também a casa ÿ do <span lang="es">Orfeó
versão, o que acelera o tempo de carregamento de
Català ÿ , onde aprendi os benefícios ÿ do
suas páginas. Não se preocupe; se mais tarde você
Moscatell.</p>
fizer alterações em sua folha de estilo e carregá-la
em seu servidor Web, os navegadores baixarão seu
</artigo>
arquivo atualizado em vez de usar o arquivo em
</body>
cache (tecnicamente há exceções, mas nenhuma
</html>
você provavelmente enfrentará com frequência).
200 Capítulo 8
Para simplificar, o exemplo do link

mostrado aqui pressupõe que a página HTML
esteja no mesmo diretório que base.css B.
Entretanto, na prática, é melhor organizar
suas folhas de estilo em uma subpasta, em
vez de misturá-las com suas páginas
HTML. Os nomes populares de pastas de
folhas de estilo incluem css e estilos, mas
você pode nomeá-las como quiser, desde
que se refira a elas corretamente no valor href do link . Por exem
css está em uma pasta chamada css e seu
HTML está na pasta acima dele, o elemento
link seria <link rel="stylesheet"
href="css/base.css" />.
URLs em uma folha de estilo externa são

relativas à localização do arquivo da folha de estilo
no servidor, e não à localização da página HTML.
C A regra de estilo (uma borda vermelha sólida com quatro Você verá isso em ação quando aprender sobre
pixels de espessura) é aplicada a cada elemento img .
imagens de fundo CSS no Capítulo 10 (“Definindo o
fundo do texto”).
As regras de uma folha de estilos externa

podem ser substituídas por estilos dentro de um
documento HTML. A influência relativa dos estilos
aplicados de diferentes maneiras está resumida em “A
Importância da Localização”, mais adiante neste capítulo.
Você pode vincular várias folhas de estilo

ao mesmo tempo. Caso uma regra de exibição
concorrente apareça em mais de um arquivo,
aquela do arquivo posterior terá precedência
sobre as anteriores.
Você pode oferecer versões alternativas de links

folhas de estilo e deixe seus visitantes
escolherem entre elas. Consulte “Oferecendo
folhas de estilo alternativas”, mais adiante neste capítulo.
D Outros documentos podem ser vinculados à mesma

Você pode limitar as folhas de estilo a um tipo
folha de estilos externa para que os mesmos estilos
específico de saída definindo o atributo media .
sejam aplicados.
Para obter mais detalhes, consulte “Usando folhas de
estilo específicas de mídia”, mais adiante neste capítulo.
Versões anteriores do HTML pediam que você

inclua type="text/css" em suas definições de
elemento de link , mas o HTML5 não exige isso, então
você pode omiti-lo como fiz nos exemplos de
código deste capítulo.
Trabalhando com folhas de estilo 201

A Ao incorporar uma folha de estilo, o estilo

Criando um incorporado O elemento e suas regras de estilo incluídas normalmente
ficam na seção principal do seu documento. O
Folha de estilos navegador renderiza sua página da mesma forma como
se os estilos fossem carregados de uma folha de
Uma folha de estilos incorporada é a segunda estilo externa B. Observe que as folhas de estilo
maneira de aplicar CSS a uma página. Ele incorporadas nunca devem ter a declaração
permite que você defina os estilos diretamente no @charset no início (ou em qualquer outro lugar, nesse caso).
documento HTML que você deseja afetar ...

(normalmente fica no cabeçalho) A. Como os <cabeça>
estilos estão apenas naquele arquivo HTML, o <meta charset="UTF-8" />

CSS não se aplicará a outras páginas, como um link <title>O Palau da Música</title>
<estilo>
externo. a folha de estilos sim, e você também não
imagem {
obterá os mesmos benefícios de armazenamento
borda: 4px vermelho sólido;
em cache. Como mencionado anteriormente, uma }
folha de estilo externa é a abordagem recomendada </estilo>
para a maioria dos casos, mas é importante </head>
entender suas opções para os momentos em que você precisará<corpo>

desviar.
...
height="163" alt="El Palau de la ÿ
Música" />
<img src="img/tickets.jpg" width="87" ÿ
height="163" alt="Janela de ingressos" />
...
</body>
</html>
202 Capítulo 8
Para criar uma folha de estilos incorporada:

1. Digite <style> na seção principal do seu
documento HTML.
2. Defina quantas regras de estilo desejar
(veja “Construindo uma regra de estilo”
no Capítulo 7).
3. Digite </style> para completar a folha de
estilo incorporada A.
Os estilos conflitantes aplicados em uma

folha de estilo incorporada substituem aqueles em
folhas de estilo externas se — e somente se — o
elemento de estilo vier depois do elemento de
link . Para obter mais detalhes, consulte “A importância
B O resultado é exatamente o mesmo que se você da localização”, mais adiante neste capítulo.
tivesse vinculado aos estilos em uma folha de estilos
externa. A diferença é que nenhuma outra página da Folhas de estilo incorporadas são a segunda
Web pode tirar vantagem dos estilos usados nesta página. melhor maneira de adicionar CSS à sua página. (Há
raras exceções, como sites com muito tráfego sob
certas condições.) A abordagem recomendada é
carregar folhas de estilo externas. Para obter mais
informações, consulte “Criando uma folha de estilos
externa”, anteriormente neste capítulo.
Embora eu desencoraje fortemente você a

fazer isso, você também pode aplicar estilos
diretamente a elementos HTML individuais. Para
obter mais detalhes, consulte “Aplicando
estilos embutidos”, mais adiante neste capítulo.
Tecnicamente, também é possível

incorporar uma folha de estilo no corpo de uma
página , mas evite-a sempre que possível.
Misturar HTML e CSS quebra uma prática
recomendada importante, que é separar
conteúdo (HTML), apresentação (CSS) e
comportamento (JavaScript). Do ponto de
vista prático, é mais fácil manter seu CSS se
ele estiver em uma folha de estilos externa, em vez de incorporad

Aplicando estilos embutidos As regras aplicadas inline afetam apenas um

único elemento; neste caso, a primeira img.
Os estilos embutidos são a terceira maneira de

...
aplicar CSS ao HTML. No entanto, eles são de <cabeça>
longe a opção menos desejável porque <meta charset="UTF-8" />
entrelaçam seu conteúdo (HTML) e <title>O Palau da Música</title>
apresentação (CSS), um tapa cruel na cara </head>
das melhores práticas A. Um estilo inline afeta <corpo>

...
apenas um elemento B, então você perde um dos
<img src="palau250.jpg" width="250" ÿ
principais benefícios que uma folha de estilo height="163" alt="El Palau de la ÿ
externa oferece: Escreva uma vez e veja em Música" style="border: 4px solid ÿ red" /
qualquer lugar. Imagine ter que vasculhar >
uma série de páginas HTML para fazer uma <img src="tickets.jpg" width="87" ÿ
simples mudança na cor da fonte e você verá ...
por que os estilos embutidos não são destinados ao uso regular.
</body>
</html>
No entanto, um estilo embutido pode ser útil se
você quiser experimentar algo rapidamente
como um teste antes de removê-lo do seu HTML
e colocá-lo em sua folha de estilos externa
(assumindo que você ficou satisfeito com os
resultados do teste), onde será mais fácil para
continuar avançando.
B Apenas a primeira imagem tem borda. Para repetir o

efeito mostrado no restante deste capítulo, você teria
que adicionar style="border: 4px solid red" a cada
elemento img individualmente. Como você pode
ver, os estilos inline não são particularmente eficientes
e seria uma dor de cabeça aplicá-los e atualizá-los em um site.
204 Capítulo 8
Para aplicar estilos embutidos:
1. Digite style=" no elemento HTML que deseja

formatar. (Adicione-o à tag inicial de elementos
não vazios.)
2. Crie uma regra de estilo sem chaves ou seletor.

O seletor não é necessário
ensaio, já que você o está colocando
diretamente dentro do elemento desejado.
3. Para criar definições de estilo adicionais,

tipo ; (um ponto e vírgula) e repita a etapa 2.
4. Digite as aspas finais ".
Tenha cuidado para não confundir o sinal de

igual com dois pontos. Como ambos atribuem
valores, é fácil trocá-los sem pensar.
Não se esqueça de separar várias

definições de propriedades com ponto e vírgula.
Não se esqueça de colocar suas definições

de estilo entre aspas retas.
Os estilos aplicados in-line têm

precedência sobre todos os outros estilos, a
menos que um estilo conflitante em outro lugar
seja marcado com !important (veja “A Importância da Localização” n
Se você especificar a família de fontes em

uma declaração de estilo embutida, terá que
colocar nomes de fontes com várias palavras entre
aspas simples para evitar conflito com as aspas
duplas do elemento de estilo . Você não pode usar
o mesmo tipo de cotação em ambos os lugares.
Provavelmente o uso mais comum de inline

estilos é aplicá-los a elementos de funções
JavaScript como parte da dinamização de
partes de uma página. Você pode notar esses estilos
embutidos gerados ao observar a origem de
uma página, por exemplo, no Firebug ou nas
Ferramentas de desenvolvedor do Chrome. Na
maioria dos casos, o JavaScript que os aplica é
separado do HTML, portanto ainda mantém a
separação desejada de conteúdo (HTML),
apresentação (CSS) e comportamento (JavaScript).

A importância A Neste exemplo, o elemento style vem por último.

Portanto, suas regras terão precedência sobre as
da localização regras da folha de estilo base.css (desde que as
regras conflitantes tenham os mesmos fatores de
herança e especificidade).
Não é incomum que mais de uma regra de estilo
seja aplicada ao mesmo elemento, ...
principalmente em sites maiores que exigem mais <cabeça>
<title>O Palau da Música</title>
esforço para gerenciar o CSS. Conforme
mencionado em “The Cascade: When Rules Collide” em
href="base.css" />
Capítulo 7, a localização de um estilo pode <estilo>
desempatar na disputa entre herança e imagem {
especificidade. A regra básica é que, com estilo de borda: tracejado;

todo o resto igual, quanto mais tarde o estilo }
</estilo>
aparece, mais precedência ou importância ele tem (A
</head>
através de D). ...
Portanto, os estilos embutidos têm maior precedência

e substituirão quaisquer estilos conflitantes
aplicados em outro lugar.
Em um elemento de estilo incorporado ,

quaisquer regras @import presentes perderão para
quaisquer regras de estilo individuais que também
apareçam no elemento de estilo (uma vez que devem
seguir as regras @import , por definição).
A relação entre o elemento de estilo incorporado

e quaisquer folhas de estilo externas vinculadas
depende de suas posições relativas. Se o
elemento link vier posteriormente no código HTML,
ele substituirá o estilo
elemento. Se vier antes, o estilo
elemento (e quaisquer folhas de estilo importadas
que ele contenha) substitui as regras na folha de B A borda tracejada do elemento de estilo vence
estilos vinculada. sobre a borda sólida do base.css vinculado.
206 Capítulo 8
C Aqui, a folha de estilo vinculada vem por último e tem Folhas de estilo externas também podem
precedência sobre as regras no elemento de estilo conter regras @import (embora, como
(todo o resto sendo igual). observado anteriormente, eu aconselhe não usá-
... las, por motivos de desempenho). Nesse caso,
<cabeça> as regras importadas são substituídas pelas
<title>O Palau da Música</title> demais regras contidas na folha de estilos externa
<estilo> (já que, por definição, devem seguir o comando @import
imagem {
regra). A sua relação com as outras folhas
estilo de borda: tracejado;
} de estilo do documento é determinada pela posição
</estilo> do link para a folha de estilo externa, como de
<link rel="folha de estilo" href="base.css" costume.
/>
</head> Há uma exceção à forma como a ordem dos
... estilos conflitantes afeta qual deles vence.
Um estilo marcado com !important
sempre vence, seja o primeiro na ordem,
o último ou algo intermediário.
Aqui está um exemplo: p {margem-topo: 1em
!importante; }. Evite usá-lo, no entanto. Isso
torna suas declarações muito fortes e seu CSS
ficará atolado em regras mais longas se você
precisar substituí-lo.
A única coisa que vence uma declaração com !

important é uma folha de estilo do usuário .
Sim, você e eu, como visitantes de sites, podemos
criar nossa própria folha de estilos para o
navegador, e isso tem precedência. Por exemplo,
podemos sempre preferir visualizar determinados
tamanhos de fonte ou um nível de contraste entre o texto e
cores de fundo. No entanto, a maioria dos
D A borda sólida da folha de estilo base.css prevalece usuários nem sabe que pode fazer isso, por isso
sobre a borda tracejada do elemento de estilo interno . é bastante incomum.

A Limite a folha de estilo a uma saída específica

Usando mídia específica adicionando o atributo media ao elemento link .
Neste exemplo, base.css afeta a página quando
Folhas de estilo visualizada no navegador (devido a media="screen"),
enquanto print.css afeta como a página é impressa
Você pode designar uma folha de estilo para ser (devido a media="print").
usada apenas para uma saída específica,
...
talvez apenas para impressão ou apenas para
<cabeça>
visualização na tela do navegador. Por exemplo, <meta charset="UTF-8" />
você pode criar uma folha de estilo geral com <title>O Palau da Música</title>
recursos comuns às versões de impressão e tela <link rel="stylesheet" href="base.css" ÿ
e, em seguida, criar folhas de estilo de impressão media="screen" />
e tela individuais com propriedades a serem <link rel="stylesheet" href="print.css" ÿ

media="print" />
usadas apenas para impressão ou tela, respectivamente. </head>
<corpo>
Para designar folhas ...
de estilo específicas de mídia:
height="163" alt="El Palau de la ÿ
1. Adicione media="output" ao link ou Música" />
tags de início de estilo , onde a saída é um <img src="img/tickets.jpg" width="87" ÿ

ou mais dos seguintes: print, screen ou all ...
(esses são os tipos mais comuns, embora </body>
existam outros) A. Separe vários valores com </html>
vírgulas.
2. Como alternativa, use a regra @media em

sua folha de estilo B. Este método não
requer a especificação de um tipo de mídia
no elemento link .
208 Capítulo 8
B A regra @media em uma folha de estilo é outra maneira de O valor padrão para o atributo media é
direcionar outros tipos de mídia (veja o Capítulo 12) . all, portanto declarar media="all" é
Este exemplo mostra estilos que afetam todos os tipos de redundante. Em outras palavras, você pode
mídia (incluindo impressão) na parte superior e estilos omitir o atributo media , a menos que precise
específicos de impressão na parte inferior. Uma visualização
ser específico. Alguns programadores preferem
de impressão ou impressão de uma página com esta folha
ser explícitos incluindo sempre media="all".
de estilo não mostraria imagens (exibição: nenhuma as desativa)
e texto de parágrafo em preto e itálico. O estilo da fonte: itálico
A declaração também se aplica ao modo de impressão,
Existem nove tipos de saída
já que a folha de estilo de impressão não especifica um estilo possíveis: todos, aural, braille, portátil,
de fonte diferente. impressão, projeção, tela, tty e tv, com
graus variados de suporte (a maioria tem
@charset "UTF-8"; suporte modesto). Na prática, os que você
provavelmente usará são tela e impressão (e
/* Estilos para todas as mídias */ talvez todos); cada um tem um suporte
imagem { muito amplo. Por outro lado (por assim
borda: 4px vermelho sólido; dizer), o dispositivo portátil nunca teve
} muito suporte de dispositivos, então
normalmente você usará a tela ao projetar
p{ para dispositivos móveis (consulte o Capítulo 12). O modo d
cor verde; tipo, voltado para projetores e visualizações
estilo da fonte: itálico; semelhantes.
}
Veja o artigo de Christian Krammer
/* Imprimir folha de estilo */ em www.smashingmagazine.com/2011/11/24/
@impressão de mídia { how-to-set-up-a-print-style-sheet/ para saber
imagem { mais sobre como criar uma folha de estilo de impressão .
Mostrar nenhum;
}
p{
cor preta;
}
}

Oferecendo Alternativa R Em ordem, defini a folha de estilo base ou

persistente, a folha de estilo preferencial ou automática
e uma folha de estilo alternativa. Cada folha de estilo
Folhas de estilo precisa de seu próprio elemento de link .
Você pode vincular mais de uma folha de ...

estilo A e permitir que os visitantes escolham os <cabeça>
estilos que mais gostam. As especificações <meta charset="UTF-8" />

<title>Palácio da Música</title>
permitem um conjunto básico de estilos
persistentes B que são aplicados href="base.css" />
independentemente da preferência do <link rel="folha de estilo" href=
visitante, um conjunto padrão ou preferido de ÿ "preferred.css" title="Tracejado" />
estilos adicionais C que são aplicados se o <link rel="folha de estilo alternativa" ÿ
href="alternate.css"
visitante não fizer escolha, e um ou mais ÿ title="Pontilhado" />
estilos alternativos. folhas de estilo D que o </head>
visitante pode escolher E, momento em que ...
o conjunto preferido (embora não o conjunto
persistente) é desativado e ignorado. Folhas de
B Por exemplo, este arquivo CSS (base.css) será a
estilo alternativas permitem fornecer temas diferentes para o seu site.
folha de estilo persistente e será aplicado
independentemente do que o visitante fizer.
Para oferecer folhas de estilo alternativas:
imagem {
1. Para designar a folha de estilo que deve ser borda: 4px vermelho sólido;
utilizada como base, independente das }
preferências do visitante, utilize a sintaxe
simples descrita em “Vinculação a folhas de
C Esta folha de estilo (preferred.css) será aquela
estilo externas”, sem título. carregada por padrão além de base.css
quando o visitante vai para a página.
2. Para designar a folha de estilo que deve ser
oferecida como primeira opção, mas que pode imagem {
ser desativada por outra opção, adicione estilo de borda: tracejado;
title="label" ao elemento link , onde label }
identifica a folha de estilo preferida.
D O visitante poderá carregar esta folha de

3. Para designar uma folha de estilo que deve estilo alternativa se desejar. O nome do arquivo
é alternativo.css, mas, como acontece com os
ser oferecida como opção alternativa,
outros, você pode nomeá-lo como quiser.
use rel="folha de estilo alternativa"
title="label" no elemento link , onde label imagem {
identifica a alternativa estilo de borda: pontilhado;

}
folha de estilos.
210 Capítulo 8
Você não precisa oferecer um preferido

folha de estilo para fornecer uma folha de estilo
alternativa. O exemplo mostrado pode ter os elementos
de link apenas para base.css e alternativo.css . Da
mesma forma, ele poderia vincular-se a preferencial.css e
alternativo.css sem especificar uma folha de estilo
persistente. Você também pode ter mais de uma folha
de estilos alternativa.
Firefox E e Opera oferecem uma maneira fácil

para mudar de uma folha de estilo para outra.
No entanto, existem soluções JavaScript para outros
navegadores. Pesquise online por “alternador de folha de
estilo” para encontrar o código que você pode usar.
Folhas de estilo alternativas eram mais comuns

há vários anos como um meio de permitir aos usuários
escolher entre vários tamanhos de fonte.
E Quando a página é carregada, ela apresenta
Hoje em dia, os navegadores tendem a facilitar o aumento
uma borda tracejada (o valor preferencial
do tamanho da fonte sem a ajuda de uma folha de
substitui o valor base sólido, mas a cor base é mantida).
estilos alternativa, e muitos usuários estão mais
Se o visitante escolhesse Pontilhado, a folha de estilo
conscientes desses recursos (sendo o zoom da página o
alternativa seria usada.
principal).
Você também pode carregar folhas de estilo apenas para

imprimindo sua página da Web. Para obter
detalhes, consulte “Uso de folhas de estilo específicas
de mídia” neste capítulo.

A inspiração
de outros: CSS
No Capítulo 2, você aprendeu como ver o código-
fonte de uma página da Web. Visualizar o CSS
de alguém não é muito mais difícil.
Para visualizar o código CSS de outros designers:
1. Primeiro visualize o código HTML da página A. Para

obter mais detalhes sobre a visualização do
código-fonte HTML, consulte “A inspiração de
outros” no Capítulo 2. A Visualize o código-fonte da página HTML que contém a
folha de estilos que você deseja visualizar e clique no
Se o código CSS estiver em uma folha de estilos nome do arquivo da folha de estilos.
incorporada, você já poderá vê-lo.
2. Se o CSS estiver em uma folha de estilo externa,

localize a referência a ele no HTML e clique no
nome do arquivo A. A folha de estilo é exibida
na janela B do navegador. Você pode
copiá-la de lá e colá-la em seu editor de texto, se
quiser.
Tal como acontece com o HTML, use o

código de outros designers como inspiração e, em
seguida, escreva suas próprias folhas de estilo.
No entanto, veja o código deles com atenção. Só
porque está na Web não significa que seja sempre
um exemplo da melhor maneira de codificar um efeito
específico, apesar das melhores intenções do autor. B A folha de estilo é exibida no navegador
janela.
Os navegadores modernos permitem que
você clique no nome da folha de estilos no código-
fonte HTML, conforme mostrado nas figuras. Para
visualizar uma folha de estilo em um navegador
mais antigo, pode ser necessário copiar o URL
mostrado no elemento do link , colá-lo na barra de
endereço do seu navegador (substituindo o nome do
arquivo HTML) e pressionar Enter. Se a URL da folha
de estilos for um endereço relativo (veja “URLs”
no Capítulo 1), você pode ter que reconstruir a URL
da folha de estilos combinando a URL da página Web com a URL relativa da folha de estilos.
As ferramentas de desenvolvedor oferecidas

em navegadores modernos também permitem
acesso rápido à visualização do CSS de uma página.
Eles vêm com a maioria dos navegadores e há
uma extensão chamada Firebug para Firefox (veja o Capítulo 20).
212 Capítulo 8

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

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) - 124-237

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

A menos que um site tenha muitos vídeos ou galerias

Indicando uma citação ou referência 112

Os navegadores normalmente estilizam muitos Citando Texto 113

especificamente para formatar linhas de código de um Definindo um Termo 120

usar em ou citar apenas porque deseja colocar o texto 130

apenas um bônus. Caso contrário, basta substituir a Outros elementos 136

Começando um novo R Não é de surpreender que p seja um dos elementos HTML

Para começar um novo parágrafo: <p>Barcelona comemorou o 150º

<h2>A Sagrada Família</h2>

Você pode usar estilos para formatar parágrafos com

Para controlar a quantidade de espaço entre

Você pode justificar o texto do parágrafo ou alinhá-

B Aqui você vê a renderização padrão típica de parágrafos.

Adicionando Autor A Esta página possui dois elementos de endereço :

Em vez disso, o endereço define as informações

Para fornecer as <!-- rodapé do artigo com endereço ÿ informações

2. Digite <endereço>. </endereço>

Na maioria das vezes, as informações

endereço pertence ao ancestral do

O endereço pode conter apenas

Consulte o Capítulo 3 para saber mais

mesmo livro tem figuras na maioria das páginas. <corpo>

criaram soluções por conta própria, muitas vezes

... [mais conteúdo do relatório] ...

2. Opcionalmente, digite <figcaption> para iniciar a

3. Digite o texto da legenda.

4. Digite </figcaption> se você criou uma legenda

5. Crie sua figura adicionando código para imagens,

6. Se você não incluiu uma legenda

Normalmente, a figura faz parte do conteúdo

O elemento de figura pode incluir vários

Não use a figura simplesmente como um meio

O elemento figure é conhecido como raiz

o texto da figcaption não precisa começar com

Se você incluir uma legenda de figura, ela deverá

Especificando hora R Como é apropriado, o atributo datetime e o texto

Você pode representar o tempo com o tempo

B A data de publicação do artigo aparece

C O elemento tempo pode ser utilizado de Para especificar uma hora

... 3. Se o horário representa a publicação

5. Se desejar que a hora seja exibida no

<p>Eles fizeram a reserva do jantar ÿ para

Não use o tempo para marcar datas ou

Sempre inclua uma versão em texto da hora e

continua na página 109

D Os primeiros três parágrafos mostram uma hora.

Compreendendo o formato data e hora

Por exemplo (horário global em UTC):

Por exemplo (hora global com deslocamento do UTC):

Se você usar o tempo com o pubdate para indicar

Se um elemento de tempo com o pubdate

Você pode especificar pubdate como

O formato legível por máquina do atributo

Você não pode aninhar um elemento de tempo

Marcando texto A A primeira frase tem forte e em, enquanto a segunda

importante e enfatizado circunstâncias</em> fossem marcadas como

Para enfatizar o texto:

Não use os elementos b e i como

Você pode aninhar texto forte dentro de

Você pode estilizar qualquer texto como

Se você teve experiência

[fim da barra lateral]