HTML XHTML e CSS

HTML,
XHTML
& CSS
6ª Edição
GUIA PRÁTICO VISUAL
by Elizabeth Castro
Rio de janeiro, 2010
Para todos os meus pais
(os quatro!)
Que nem sempre concordam,
Mas que me ajudaram de todos os modos.
Agradecimentos especiais para:
Nancy Davis , da Peachpit Press, que me deu ma mais
perfeita combinação de encorajamento, edição e amizade.
Andrei Pastermak e Mimi Heft, e todos os demais da
Peachpit Press, por toda a ajuda em fazer este livro ser
publicado.
Kate Reber e Nolan Hester, que trabalharam na Peachpit
Press, pela ajuda com as edições anteriores deste livro.
A Web é um recurso inacreditável. As pessoas não
apenas compartilham seus conhecimentos livremente
em seus sites Web, mas, também, são inacreditavelmente
generosas com seu tempo, respondendo minhas perguntas
independentemente de serem simples. Em particular,
eu gostaria de agradecer a Larry Ullman, cujo PHP for
the World Wide Web: Visual Quickstart Guide, Second
Edition é um modo excelente de começar com PHP, e que,
bondosamente, ajudou-me a polir meus primeiros scripts
(http://dmcinsights.com/phpmysql/), Richard Ishida,
cujos tutoriais no W3C (http://www.w3.org/International/)
para criar sites para vários idiomas são valiosos; Patrick
Woolsey, da Barebones Software (http://www.barebones.
com), por respostas muito rápidas e úteis para todas as
minhas perguntas sobre meus códigos e BBEdit, Alan Wood,
cujo site Unicode Resources Web (http://www.alanwood.
net/unicode/) foi uma grande fonte de informação para o
capítulo sobre Símbolos e Caracteres de Outros Idiomas,
Jeffrey Zeldman, cuja revista online, A List Apart (http://
www.alistapart.com), é uma fonte essencial para designers
Web, e Paul Bottin, Douglas Bowman, Dan Cederholm,
Patrick Griffiths, Ian Hickson, Molly Holzschlag, Steve
Krug, Drew McLellan, Eric Meyer, John Oxton, Dave
Shea, Geoff Stearns e Danny Sullivan, cujos livros, blogs,
sites e generosidade em muito me inspiraram.
Andreu, por seus comentários, por suas grandes dicas sobre
Photoshop e por dividir sua vida comigo; e meus doces
filhos, a quem agora posso responder, “Sim, posso brincar
com vocês agora”.
Llumi e Xixo, por perseguirem tomates cereja e um ao
outro pelo meu escritório e por me ajudar a pensar em
exemplos de documentos (X)HTML; e nova geração de Sky,
Night e Sir Edmund, por quem ainda esperamos.
E a todos os leitores das versões anteriores deste livro, que
tomaram tempo para escrever-me suas críticas, perguntas e
sugestões.
Sumário
Introdução............................................................13
Capítulo 1:
Sumário
A Internet, a Web, e HTML..........................................................14
Aberta, mas Não Igual................................................................15
A Batalha dos Navegadores........................................................16
A Pressão por Padrões.................................................................17
CSS e Adoção pelos Navegadores.................................................20
XHTML vs HTML: Qual Você Deve Usar?.....................................21
Como Este Livro Funciona..........................................................23
O Que Mudou na Sexta Edição...................................................24
O Web Site VQS de HTML...........................................................26
Os Tijolos da Web................................................ 27
Marcação: Elementos, Atributos e Valores...................................28
O Conteúdo de Texto de uma Página Web..................................32
Links, Imagens e Outros Conteúdos que Não Texto.....................33
Nomes de Arquivo.......................................................................34
URLs............................................................................................35
HTML vs XHTML.........................................................................38
Versões, Variações e DOCTYPE...................................................40
A Exibição Padrão de (X)HTML..................................................42
Capítulo 2:
Trabalhando com Arquivos de Página Web.............43
Desenhando seu Site...................................................................44
Criando uma Nova Página Web.................................................45
Salvando sua Página Web..........................................................46
Sobre o Microsoft Word e Páginas Web.......................................48
Especificando uma Página Padrão ou "Home"..........................49
Editando Páginas Web................................................................50
Organizando Arquivos...............................................................51
Visualizando sua Página em um Navegador..............................52
A Inspiração dos Outros..............................................................53
5
Sumário
Capítulo 3:
Estrutura Básica de (X)HTML...................................55
Começando sua Página Web......................................................56
Criando a Fundação..................................................................58
Declarando a Codificação..........................................................59
Criando um Título......................................................................60
Criando Cabeçalhos de Seção.....................................................61
Iniciando um Novo Parágrafo....................................................62
Nomeando Elementos..................................................................63
Dividindo uma Página...............................................................64
Criando Spans Em Linha.............................................................65
Criando uma Quebra de Linha..................................................66
Adicionando Comentários..........................................................67
Rotulando Elementos em uma Página Web................................68
Capítulo 4:
Formatação Básica de (X)HTML..............................69
Sumário
Tornando Texto Negrito ou Itálico..............................................70
Alterando o Tamanho do Texto...................................................71
Usando uma Fonte Monoespaçada.............................................72
Usando Texto Pré-formatado......................................................73
Citando Texto.............................................................................74
Criando Sobrescritos e Subscritos................................................76
Marcando Mudanças de Texto...................................................77
Explicando Abreviações..............................................................78
Centralizando Elementos em uma Página..................................79
Capítulo 5:
Imagens................................................................81
Sobre Imagens para a Web..........................................................82
Obtendo Imagens........................................................................86
Escolhendo um Editor de Imagens..............................................87
O Comando Salvar para a Web..................................................88
Inserindo Imagens em uma Página............................................90
Oferecendo Texto Alternativo......................................................91
Especificando o Tamanho para Visualização mais Rápida........92
Para dimensionar uma imagem:................................................94
Diminuindo imagens..................................................................95
Fazendo as Imagens Flutuarem..................................................96
Impedindo Elementos de Contornar............................................98
Adicionando Espaço ao redor de uma Imagem..........................99
Alinhando Imagens..................................................................100
Adicionando Linhas Horizontais..............................................101
Adicionando um Ícone para sua Página Web .........................102
Capítulo 6:
Links...................................................................103
Criando um Link para Outra Página Web................................104
Criando Âncoras......................................................................106
Linkando para uma Âncora Específica....................................107
Apontando Links para uma Janela Específica..........................108
Ajustando o Alvo Padrão..........................................................109
Criando Outros Tipos de Links...................................................110
Criando Atalhos no Teclado para Links....................................112
Ajustando a Navegação pela Tecla TAB para Links...................113
Usando Imagens para Rotular Links.........................................114
Linkando Thumbnails para Imagens........................................115
Dividindo uma Imagem em Regiões Clicáveis...........................116
Criando uma Imagem Mapeada no Computador do Usuário...117
6
Sumário
Capítulo 7:
Construindo Blocos com Folhas de Estilo..............119
Construindo uma Regra de Estilo.............................................120
Adicionando Comentários para as Regras de Estilo..................121
Cascata: Quando as Regras Colidem........................................122
O Valor de uma Propriedade....................................................124
Capítulo 8:
Trabalhando com Arquivos de Folhas de Estilo.....127
Criando uma Folha de Estilo Externa.......................................128
Linkando Folhas de Estilo Externa............................................129
Oferecendo Folhas de Estilo Alternativas...................................130
Criando uma Folha de Estilo Interna........................................131
Importando Folhas de Estilo Externas.......................................132
Usando Folhas de Estilo Específicas para Mídia........................133
Aplicando Estilos Localmente....................................................134
A Importância da Localização.................................................135
A Inspiração dos Outros: CSS....................................................136
Sumário
Capítulo 9:
Definindo Seletores..............................................137
Construindo Seletores...............................................................138
Selecionando Elementos pelo Nome...........................................139
Selecionando Elementos por ID ou Classe..................................140
Selecionando Elementos por Contexto.......................................141
Selecionando Parte de um Elemento.........................................144
Selecionando Elementos de Links Baseados em Seu Estado.......146
Selecionando Elementos Baseado em Atributos.........................147
Especificando Grupos de Elementos..........................................148
Combinando Seletores..............................................................149
Capítulo 10:
Formatando com Estilos........................................151
Escolhendo uma Família de Fontes...........................................152
Especificando Fontes Alternativas..............................................153
Criando Itálico.........................................................................154
Aplicando Formatação em Negrito...........................................155
Ajustando o Tamanho da Fonte................................................156
Ajustando a Altura da Linha....................................................158
Ajustando todos os Valores de Fontes de uma Vez.....................159
Ajustando Cor...........................................................................160
Alterando o Fundo do Texto......................................................161
Controlando o Espaçamento.....................................................162
Adicionando Recuo..................................................................163
Ajustando as Propriedades do Espaço em Branco.....................164
Alinhando Texto.......................................................................165
Alterando Maiúsculo/Minúsculo...............................................166
Usando Letras Minúsculas........................................................167
Decorando Texto......................................................................168
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
7
Sumário
Sumário
Capítulo 11:
Layout com Estilos...............................................169
Estruturando Suas Páginas.......................................................170
O Modelo Caixa........................................................................171
Alterando o Fundo....................................................................172
Ajustando a Altura ou a Largura de um Elemento...................174
Ajustando Margens ao Redor de um Elemento.........................176
Adicionando Espaço Extra ao Redor de um Elemento..............177
Compensando Elementos No Fluxo Natural..............................178
Posicionando Elementos em Absoluto.......................................179
Afixando um Elemento à Janela do Navegador.......................180
Fazendo os Elementos Flutuar...................................................181
Controlando Onde os Elementos Flutuam.................................182
Posicionando Elementos em 3D................................................183
Ajustando a Borda....................................................................184
Alterando o Cursor...................................................................186
Determinando Direção do Sobrefluxo.....................................187
Alinhando Elementos Verticalmente.........................................188
Capítulo 12:
Efeitos Dinâmicos com Estilos...............................189
Exibindo e Ocultando Elementos..............................................190
Criando Botões Rollover............................................................192
Criando Pop-ups.......................................................................193
Criando Menus Suspensos com Listas........................................194
Substituindo Cabeçalhos por Imagens......................................196
Capítulo 13:
Folhas de Estilo para Dispositivos de Mão............199
Mobilidade vs. Miniaturização.................................................200
Olhando para Seu Site..............................................................201
XHTML e CSS para Dispositivos de Mão....................................202
Criando Folhas de Estilo para Dispositivos de Mão...................204
Ocultando Elementos Estranhos...............................................205
Criando e Usando um Cabeçalho de Imagem...........................206
Criando Links Extras Para Cima...............................................207
Ajustando para Tela Pequena...................................................208
Capítulo 14:
Folhas de Estilo para Impressão...........................209
Criando uma Folha de Estilo para Impressão............................210
Como Diferem as Folhas de Estilo para Impressão.....................211
Controlando Quebras de Página...............................................212
Imprimindo URLs de Links........................................................213
Controlando Linhas Viúvas e Órfãs..........................................214
Capítulo 15:
Listas..................................................................215
Criando Listas Ordenadas e Desordenadas...............................216
Escolhendo seus Marcadores (Bullets).......................................218
Escolhendo Onde Começar a Numeração da Lista....................219
Usando Marcadores Personalizados.........................................220
Controlando Onde Marcadores Começam................................221
Ajustando Todas as Propriedades de Estilo da Lista de uma Vez....222
Criando Listas de Definição......................................................223
Formatando Listas Embutidas...................................................224
8
Sumário
Capítulo 16:
Tabelas..............................................................227
Capítulo 17:
Sumário
Mapeando a Sua Página..........................................................228
Criando uma Tabela Simples....................................................229
Adicionando uma Borda..........................................................230
Ajustando a Largura................................................................232
Centralizando uma Tabela........................................................234
Contorno de texto pela tabela...................................................235
Combinando Tabelas................................................................236
Alinhando o Conteúdo de uma Célula......................................238
Alterando o Fundo....................................................................240
Controlando o Espaço...............................................................242
Expandindo uma Célula através de Colunas............................244
Expandindo uma Célula através de Linhas..............................245
Dividindo sua Tabela em Grupos de Colunas...........................246
Dividindo a Tabela em Seções Horizontais...............................248
Escolhendo Quais Bordas Exibir................................................249
Controlando Quebras de Linha em uma Célula........................251
Acelerando a Exibição da Tabela.............................................252
Formulários.........................................................253
Criando um Formulário...........................................................254
Processando Formulários..........................................................256
Enviando Dados de Formulário por E-mail..............................258
Organizando os Elementos do Formulário...............................260
Criando Caixas de Texto...........................................................262
Criando Caixas para Senhas....................................................263
Formalmente Rotulando Partes do Formulário.........................264
Criando Botões de Seleção........................................................265
Criando Menus.........................................................................266
Criando Caixas de Seleção.......................................................268
Criando Áreas de Texto Maiores...............................................269
Permitindo aos Visitantes Subir Arquivos.................................270
Criando Campos Ocultos..........................................................271
Criando o Botão de Envio.........................................................272
Reiniciar o Formulário.............................................................274
Usando uma Imagem para Enviar Dados.................................276
Ajustando a Navegação via Tecla TAB para um Formulário....277
Adicionando Atalhos de Teclado..............................................278
Desabilitando Elementos do Formulário...................................279
Evitando que os Elementos Sejam Alterados..............................280
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
9
Sumário
Capítulo 18:
Vídeo, Áudio e outras Mídias...............................281
Sumário
Sobre Plugins e Players..............................................................282
Obtendo Plugins para seus Visitantes........................................283
Obtendo Arquivos Multimídia...................................................284
Criando Links para Arquivos Multimídia..................................285
Embutindo Filmes QuickTime para Windows...........................286
Embutindo Filmes QuickTime para Todos, além de IE..............288
Embutindo Filmes QuickTime para Todos................................290
Usando JavaScript para Chamar um Filme...............................292
Alterando o Tamanho de um Filme em QuickTime...................294
Alterando a Cor de Fundo de um Filme....................................295
Repetindo um Filme em QuickTime..........................................296
Oferecendo Pré-Visualização de um Filme...............................297
Adicionando Atributos para Filmes Secundários......................298
Oferecendo Seqüência..............................................................299
Embutindo MP3 em uma Página.............................................300
Embutindo Windows Media, Parte 1........................................302
Embutindo Windows Media, Parte 2.........................................304
Embutindo Flash......................................................................305
Embutindo Vídeos do Google e YouTube...................................306
Inserindo Applets Java...............................................................308
Embutindo Outros Arquivos Multimídia...................................309
Criando um Slide Show Automático.........................................310
Capítulo 19:
Scripts.................................................................311
Adicionando um Script "Automático".......................................312
Chamando um Script Automático Externo...............................313
Acionando um Script................................................................314
Criando um Botão que Executa um Script...............................316
Acrescentando Informações Adicionais....................................317
Ocultando Scripts de Navegadores mais Antigos.......................318
Ocultando Scripts de Parsers XML............................................319
Definindo a Linguagem de Script Padrão.................................320
Capítulo 20:
Um Pouco de Java Script......................................321
Acrescentando Data e Hora Atuais...........................................322
Definindo o Tamanho de Uma Nova Janela..............................323
Alterando uma Imagem Quando um Visitor Aponta o Mouse...324
Carregando Imagens em Cache................................................326
Capítulo 21:
Símbolos e Caracteres em Outros Idiomas............327
Sobre Codificação de Caracteres...............................................328
Declarando a Codificação de Caracteres de Sua Página..........330
Declarando a Codificação de uma Folha de Estilo...................332
Salvando a Sua Página com a Codificação Apropriada...........333
Editando a Página com a Codificação Apropriada..................334
Acrescentando Caracteres Além da Codificação.......................336
Especificando o Idioma de uma Página...................................338
10
Sumário
Capítulo 22:
Testando e Depurando Páginas Web....................339
Algumas Técnicas de Depuração..............................................340
Verifique as Coisas Mais Fáceis Primeiro!................................341
Verificando as Coisas Mais Fáceis: HTML.................................342
Verificando as Coisas Mais Fáceis: XHTML.................................343
Verificando as Coisas Mais Fáceis: CSS.....................................344
Validando Seu Código:..............................................................345
Testando Sua Página:...............................................................346
Quando o Navegador Exibe o Código:.......................................348
Quando as Imagens Não Aparecem:.........................................349
Diferenças entre Navegadores...................................................350
Ainda com Problemas?..............................................................351
Capítulo 23:
Publicando suas Páginas na Web.........................353
Capítulo 24:
Sumário
Encontrando um Host para seu Site..........................................354
Obtendo seu Próprio Nome de Domínio....................................355
Transferindo Arquivos para um Servidor..................................356
Obtendo Visitantes..............................................361
Sobre Palavras-chave................................................................362
Listando Palavras-chave Explicitamente...................................363
Fornecendo uma Descrição da Sua Página..............................364
Controlando Outras Informações.............................................365
Mantendo Visitantes Longe.......................................................366
Evitando que as Páginas Sejam Arquivadas..............................367
Criando um Mapa de Site Manualmente..................................368
Usando Mapas de Site do Google...............................................369
Enviando Seu Site para um Mecanismo de Busca.....................370
Melhorando sua Posição ao Ser Linkado..................................371
Escrevendo Páginas Fáceis de Indexar......................................372
Outras Técnicas para Promover Seu Site...................................373
Capítulo 25:
Licenciamento e Podcasting..................................375
Com o que um Feed se Parece...................................................376
Aprontando-se para Licenciamento..........................................378
Iniciando um Feed RSS.............................................................379
Descrevendo seu Site no Feed....................................................380
Adicionando Itens para um Feed..............................................382
Adicionando um anexo.............................................................384
Criando Podcasts para iTunes..................................................386
Validando um Feed...................................................................392
Enviando um Podcast para iTunes...........................................393
Publicando seu Feed RSS em Seu Site........................................394
Assinando um Feed RSS............................................................396
Assinando um Podcast com iTunes...........................................397
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
11
Sumário
Apêndice A: Referência (X)HTML.................................................399
Apêndice B: Propriedades e Valores CSS.....................................409
Apêndice C: Eventos Intrínsecos..................................................417
Apêndice D: Símbolos e Caracteres (X)HTML...............................419
Apêndice E: Hexadecimais..........................................................431
Apêndice F: Ferramentas (X)HTML..............................................433
Editores (X)HTML..........................................................................434
Imagens e Gráficos.......................................................................436
Ferramentas Gráficas....................................................................436
Índice Remissivo.....................................................437
Sumário
Colofão.........................................................................................445
12
INTRODUÇÃO
i
A World Wide Web é a imprensa de Gutemberg de nosso tempo. Quase todo mundo
pode criar seu próprio Web site e, então,
apresentá-lo ao público na Internet. Algumas páginas Web pertencem a empresas
com serviços à venda, outras, a indivíduos
com informação a compartilhar. Você decide
como será sua página.
HTML não é difícil de aprender ou de
dominar. É muito mais um exercício em
conformidade e cuidadosa digitação do que
procedimentos extremamente complicados. Você pode ter uma página simples em
HTML em execução em poucos minutos. E,
enquanto há muitos programas que criarão
códigos em HTML para você, escrever em
HTML para si próprio significa que você não
terá de estudar novos softwares nem estar
limitado aos seus recursos.
Neste livro, você encontrará instruções claras
e fáceis que lhe conduzirão através do processo de criar páginas Web passo a passo. É
ideal para iniciantes, sem conhecimento de
HTML, que deseja começar a criar páginas
Web.
Se você já conhece HTML, este livro é um
perfeito guia de referência. Você pode
procurar por tópicos no índice remissivo e
consultar apenas aqueles assuntos sobre os
quais precisa de mais informação.
Você também encontrará no site da editora, na página do livro, todos os exemplos,
tabelas etc., apresentados neste livro. Visite
www.altabooks.com.br
13
Introdução
Todas as páginas Web são escritas em alguma
forma de HTML. HTML permite que você formate texto, adicione elementos gráficos, som e
vídeo e salve tudo em um arquivo de texto que
qualquer computador pode ler.
Introdução
A Internet, a Web e HTML
A Internet, a Web e HTML
Certo, você já ouviu falar de Internet, mas o
que é isso exatamente? De maneira simples,
a Internet é uma coleção de computadores
que estão conectados uns aos outros. Muitas
pessoas têm conexões de banda larga de
alta velocidade por 24 horas - por meio
de DSL, cabo ou satélite - enquanto outros
utilizam um modem para conectar seus computadores de casa durante um certo período
de tempo a cada dia. Independente do tipo
de conexão, uma vez que você se conectou,
você e seu computador tornam-se parte da
Internet e estão ligados a todos os outros
computadores que estão também conectados
naquele momento.
A World Wide Web, por sua vez, é muito
mais etérea. É uma coleção caleidoscópica
e sempre em transformação de centenas
de milhões de documentos, todos os quais
residem em algum lugar da Internet, e são
escritos em alguma forma de HTML.
HTML, ou HyperText Markup Language
(Linguagem de Marcação de HiperTexto),
apresenta duas características essenciais:
hipertexto e universalidade. Hipertexto
quer dizer que você pode criar um link em
uma página Web que conduz o visitante a
qualquer outra página Web ou para praticamente tudo na Internet. Isso quer dizer que
a informação na Web pode ser acessada de
muitas direções diferentes. Tim Berners-Lee,
o criador da Web, queria que ela funcionasse mais como o cérebro de uma pessoa e
menos como uma fonte estática de dados,
tal como um livro.
Universalidade implica em, já que os documentos em HTML são salvos como Arquivos
de Texto Somente, virtualmente qualquer
computador possa ler uma página Web. Não
importa se seus visitantes tenham máquinas
com Macintosh ou Windows, ou se estão em
uma caixa Unix ou mesmo em um dispositivo de mão, como um Palm. A Web está
aberta para todos.
14
Introdução
Aberta, mas Não Igual
Porém, enquanto o HTML está aberto para
todos, isso não significa que todos a veem
da mesma maneira. É algo como o Central
Park, em Nova York. Eu e você podemos dar
um passeio por lá. Entretanto, se você vive
em um apartamento de cobertura na Quinta
Avenida e eu durmo em bancos de praça,
nossa visão do parque será bem diferente.
Mas, enquanto você se preocupa, lembre-se
que o nosso controle é limitado. Enquanto
o Departamento de Turismo de Nova York
gostaria de assegurar que todos aproveitem
muito o tempo na cidade, eles não estão
entregando reservas grátis para o Park Plaza
Hotel, e algumas pessoas não as aceitariam
mesmo que o fizessem, preferindo acomodações mais simples ou a casa da irmã.
Você compreendeu a ideia. A moral é esta:
as pessoas visualizarão suas páginas com
configurações muito diferentes. Crie suas
páginas de acordo com elas – assim, o maior
número de visitantes poderá ver sua página
o mais perto possível do modo como você
as queria. Este livro lhe mostrará como.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
15
Aberta, mas Não Igual
Assim é com o HTML. Apesar de que praticamente todos os computadores possam
exibir páginas Web, como estas páginas
parecerão, depende do tipo de computador,
do monitor, da velocidade de conexão à
Internet e, por último, do software utilizado
para visualizar a página: o navegador. Os
mais populares navegadores atualmente são
o Internet Explorer, Firefox, Opera e Safari
com os dispositivos de mão e PDAs ganhando popularidade a cada dia. Infelizmente,
nenhum destes navegadores exibem uma
página Web exatamente como os demais.
Assim, acontece que de nada adianta desenhar um belo parque, é preciso se preocupar com a acomodação dos seus visitantes.
Introdução
A Batalha dos Navegadores
A Batalha dos Navegadores
Agora, imagine o que aconteceria se cada hotel e cada edifício de apartamentos na Quinta
Avenida delimitassem um pedaço do Central
Park e o cercasse, limitando o acesso aos
seus próprios residentes. Seria muito ruim se
alguns de nós, nos bancos do parque, pudessem apenas espiar as áreas "exclusivas". Porém, há, também, o problema de que pessoas
de um hotel não poderiam entrar no pedaço
do parque que pertence a outro hotel. Ao
invés de um recurso público rico, cheio de
patinadores, carrinhos de cachorro quente e
idosos passeando, o parque seria dividido em
lotes pequenos, estéreis e isolados.
Em 1994, a Netscape Communications cravou
as primeiras cercas na Web com a chamada
Batalha dos Navegadores. Para atrair usuários,
jogaram a universalidade pelos ares e criaram
um conjunto de extensões a HTML que apenas
a Netscape poderia lidar. Por exemplo, quem
surfava na Web usando Netscape poderia
ver páginas com texto colorido, fotografias e
outros avanços. Aqueles que tinham qualquer
outro navegador veriam erros e resultados
engraçados ou, até mesmo, nada disso.
Mas as pessoas gostaram tanto daquelas extensões que migraram para o "hotel" Nestcape. Por volta de 1996, o programa já tinha se
tornado o mais popular programa de computador do mundo. A Microsoft começou a
cercar seu próprio pedaço da Web. Novamente, para atrair usuários, a empresa adicionou
extensões não padronizadas que apenas o
Internet Explorer, o navegador da Microsoft,
poderia reconhecer.
De acordo com o The Web Standards Project
(www.Webstandards.org), fundado por uma
coalizão de designers de alto nível desgostosos com a crescente fragmentação da Web,
no auge da batalha dos navegadores, os Web
designers gastavam inacreditáveis 25% de seu
tempo planejando improvisos para comandos exclusivos, escrevendo múltiplas versões
de páginas para satisfazer cada navegador e,
simplesmente, educando seus clientes sobre
a impossibilidade de criar certos efeitos para
todos os navegadores. Era uma confusão.
16
Introdução
A Pressão por Padrões
As Nações Unidas da Web é uma organização chamada World Wide Web Consortium
(www.w3.org), frequentemente abreviado
como W3C, e dirigida pelo inventor da Web,
Tim Berners-Lee. Seu objetivo é convencer a
comunidade Web da importância da universalidade enquanto tenta satisfazer sua ânsia
por páginas de bela aparência. Seu trabalho é
remover as cercas existentes e evitar novas.
Ataques à Torre de Marfim
Quase sete anos após HTML 4.01 e XHTML
tornarem-se Recomendações Oficiais, não
há consenso no W3C para onde prosseguir.
Quase oito anos depois que CSS2 tornou-se
uma Recomendação Oficial, não há um único
navegador que o suporte totalmente, apesar
do fato de que todo navegador importante foi
desenvolvido por um membro do W3C. CSS3
ainda está no estágio Rascunho de Trabalho e,
talvez, há anos de seu término, sem dizer na
sua implementação.
Alguns designers lidaram com a questão
com as suas próprias mãos, criando soluções
extensíveis baseadas em padrões (http://microformats.org/). Para mais informações, leia
o artigo de Jeffrey Zeldman “An Angry Fix”
(http://www.zeldman.com/2006/07/17/anangry-fix) e o de John Orton, “No I am not
bloody sorry” (http://www.joshuaink/blog/753/
no-i-am-not-bloody-sorry).
O que você deve fazer, enquanto isso? Neste
entretempo, recomendo o que sempre recomendei: moderação. Siga os padrões, mas
não seja um escravo perante eles. Mesmo
sabões de marfim são 99,4% puros.
HTML 3.2: Começa a padronização
A primeira resposta do W3C à fragmentação
da Web foi a de padronizar as extensões
exclusivas, incluindo algumas nas especificações oficiais e removendo outras. Ao
mesmo tempo, encorajaram os fabricantes
de navegadores a apoiar as especificações
oficiais de HTML ao máximo possível, para
que uma página escrita conforme os padrões
se comportasse da mesma maneira em todos
os navegadores.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
17
A Pressão por Padrões
Ultimamente (meados de 2006), havia um
crescente de vozes erguendo-se em reclamações contra a lentidão do W3C, muita ênfase
no abstrato e falta de resultados concretos.
Muitos Web designers, incluindo aqueles
que conduziram a carga pela padronização,
sentiram-se ignorados pelo W3C e seus apoiadores corporativos.
A lista de membros do W3C (http://www.
w3c.org/Consortium/Member/List) parece
um Quem é Quem dos formadores de opinião da Web e inclui players de longa data,
como a Apple (que obteve fama com iTunes
e iPod, entre outros), Adobe (fabricante de
importantes ferramentas de design como
Photoshop), América Online (que absorveu
a Netscape Communications quando de sua
implosão, em 1998), Opera (fabricantes dos
navegadores Opera para computadores de
mesa e dispositivos de mão), a Microsoft (cujo
navegador Internet Explorer pegou o primeiro
lugar da Netscape e não olhou para trás) e
companhias mais modernas, como Google (o
mecanismo de busca ultrapopular, e mais) e
Mozilla Corporation (fabricantes dos populares
navegadores Firefox, de código aberto, que
é o primeiro competidor que o Explorer tem
depois de anos). A ideia é que estas companhias reúnam-se e concordem com padrões e,
então, tentem diferenciar seus produtos com
velocidade, facilidade de uso, preço e outros
recursos que não lancem a Web novamente
em uma torre de Babel.
Introdução
A Pressão por Padrões
HTML 4 e CSS
O passo seguinte do W3C foi muito mais audacioso. A velha versão de HTML reunia conteúdo, estrutura e instruções de formatação
em um único documento, que era simples,
mas não muito poderoso. O W3C planejou
um novo sistema no qual as instruções de
formatação seriam salvas em separado do
conteúdo e da estrutura e, assim, poderia ser
aplicada não apenas para um único parágrafo
ou página Web, mas para o site inteiro, se
desejado. Desta forma, na nova versão 4 de
HTML, o W3C marcou a maioria dos elementos de formatação para futura remoção das
especificações. Daquele momento em diante,
estes elementos seriam desaprovados, e seu
uso, desestimulado. Ao mesmo tempo, criaram o novo sistema de instruções de formatação – chamados Cascade Style Sheets, ou CSS
– para preencher a lacuna.
As especificações originais para as Cascading
Style Sheets limitavam-se, em grande parte, a
recriar efeitos de HTML. CSS Nível 2, publicado
em 1998 e levemente atualizado para Nível 2.1
em 2006, porém trouxe novas funcionalidades, em particular a capacidade de posicionar
elementos em uma página Web com maior
precisão. CSS agora não só poderia recriar formatação em HTML, como também criar layouts
de aparência profissional.
Porém, entre extensões exclusivas e códigos
simples e diretos, as próprias páginas em
HTML ainda eram confusas. A maioria dos
navegadores voltava para trás para acomodálos, sempre de maneira levemente diferente,
o que apenas piorava toda a situação. E
ainda não havia nenhum sistema padrão
para acrescentar novos recursos. HTML não
era, simplesmente, uma plataforma firme o
suficiente para se construir sobre ela. O W3C
decidiu que todos nós precisávamos de um
pouco de estrutura. Sua resposta foi XML, ou
Extensible Markup Language.
18
Introdução
XML e XHTML
Do lado de fora, XML parece muito com
HTML, completo com tags, atributos e
valores. Mas, ao invés de servir como uma
linguagem apenas para criar páginas Web,
XML é uma linguagem para criar outras
linguagens. Você pode usar XML para desenhar sua própria linguagem de marcação
personalizada, que você pode usar, então,
para formatar seus documentos. Sua linguagem de marcação personalizada conterá tags
que de fato descrevem os dados que eles
contêm.
Porém, como sempre, a força vem com um
preço. XML não é nem um pouco leniente
como o HTML. Para facilitar o trabalho dos
parsers XML – software que lê e interpreta
dados em XML – a linguagem requer atenção
cuidadosa com letras maiúsculas e minúsculas,
aspas, tags de fechamento e outras minúcias.
Além do mais, há bilhões de páginas Web já
escritas em HTML e milhões de servidores e
navegadores que já sabem como lê-las.
A solução foi bem inteligente. O W3C reescreveu HTML em XML. Esta nova linguagem
tinha todos os recursos de HTML e, assim,
podia ser compreendida por qualquer navegador no planeta. E, já que seu léxico inteiro
veio de HTML, as pessoas que já sabiam
HTML apenas tinham de conhecer algumas
regras de sintaxe básicas antes de começar a
programar. E, ao mesmo tempo, já que utilizava a sintaxe de XML, ganhou toda a força
e flexibilidade do XML, e foi uma fundação
perfeita para as CSS. Deveria ser o melhor
dos dois mundos. Seu nome? XHTML.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
19
A Pressão por Padrões
E é aí que entra a força do XML: se uma
tag identifica dados, estes dados tornam-se
disponíveis para outras tarefas. Um programa
de software pode ser desenhado para extrair
apenas as informações que precisa, talvez
juntá-las com outros dados de outras fontes e,
finalmente, fornecer a combinação resultante
de outra forma, para outro fim. Ao invés de
se perder em uma página Web baseada em
HTML, a informação rotulada pode ser reutilizada tão frequentemente quanto necessário.
Introdução
CSS e Adoção pelos Navegadores
CSS e Adoção pelos Navegadores
Enquanto XHTML e CSS são uma combinação poderosa, havia um pequeno empecilho
que continuou a atormentar Web designers:
adoção pelos navegadores. Embora não parecesse ser muito problema adicionar extensões
de qualquer maneira, quando o assunto veio
a ser a adoção séria e integral das especificações, nenhum navegador tinha lidado ainda
com esta tarefa. No entanto, é importante
observar que eles já fizeram muito.
O Netscape 6, completamente reformado de
seus dias loucos por extensões, agora apresenta bom suporte a CSS. Pena que sua base
de usuários tenha caído para menos de 1 por
cento. Firefox 1.5, o dínamo Open Source
que nasceu das cinzas da derrocada do Netscape (e foi, até mesmo, chamado de Phoenix
e Firebird no começo de sua história), tem
excelente suporte a CSS, assim como o Opera
9, cuja base de usuários está se expandindo
rapidamente e é comum, particularmente, nos
mercados de dispositivos de mão e celulares.
E Internet Explorer, atualmente o navegador
mais utilizado, tem aprimorado em muito seu
suporte a CSS, embora ainda apresente vários
bugs clamorosos e o que, às vezes, parecem
omissões arrogantes e obstinadas.
No fim das contas, a maioria dos usuários
usa navegadores que suportam CSS bem ou
muito bem. Enquanto o número de usuários em navegadores antigos poderia ter
dado às pessoas pausa para considerar uma
troca para CSS, este número reduziu-se para
menos de 5% (alguns dizem ser menos de
2%), e continua a cair. E mesmo muito destes estão usando Internet Explorer 5.5, cujo
suporte, embora não seja ótimo, não era
realmente tão ruim.
Em resumo, nunca houve um momento tão
propício para se mudar com confiança para
as CSS.
20
Introdução
XHTML vs. HTML: Qual Você
Deve Usar?
Há muitas pessoas por aí que irão lhe dizer
que HTML é ruim e que XHTML é a única
solução. Acho que isso é tolice. XHTML é
um grande avanço em relação ao HTML. É
mais robusto, mais flexível, mais poderoso,
mais provável de ser suportado no futuro e
pode ser expandido para atender a qualquer
necessidade. Mas eu lhe direi algo. Às vezes,
você não precisa atender a todas as necessidades. Às vezes, você só quer publicar
uma página simples sem se estressar até as
últimas aspas.
Por sorte, há muitos estágios intermediários.
De fato, há três variações padrão tanto do
HTML quanto do XHTML. A primeira, chamada de transitional, permite o uso das tags
desaprovadas. A segunda, chamada de estrita, proíbe o uso de todas as tags desaprovadas. A terceira variação, frameset, permite
tanto o uso de tags desaprovadas quanto de
quadros, que caíram tanto em desgraça que
eu retirei o capítulo que os descreve deste
livro e o coloquei em meu Web site (ver
página 25). Você pode combinar cada uma
destas variações em muitos níveis com CSS. A
combinação que você escolher pode depender de muitos fatores (Continue lendo).
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
21
XHTML vs. HTML: Qual Você Deve Usar?
E agora, uma confissão. Eu gostava de HTML.
Pensei que era ótimo que você não precisasse
ser obsessivo sobre pontuação. Talvez eu seja
apenas preguiçosa, mas eu, honestamente, acredito que a popularidade da Web seja devido,
em parte, ao fato de que os navegadores nos
poupam algum trabalho. Eles tornaram fácil
escrever páginas Web, e assim, todos nós fizemos. Agora, uns dois bilhões de páginas depois,
talvez seja hora de mudarmos nossos hábitos.
Ou, talvez, não.
Introdução
Decidindo entre HTML, XHTML
e CSS:
Decidindo entre HTML, XHTML e CSS:
Já que eu não recomendo usar extensões
exclusivas – já que elas não atendem a parte
de seu público -, há muitas outras opções.
Eis algumas diretrizes:
n Quanto maior seu site, mais importante é
que você use CSS e XHTML. O primeiro
facilita a aplicação, edição e atualização da
formatação através do site inteiro; o último
dá à sua página a estrutura necessária para
assegurar que esta dure pelo futuro.
n Muitas companhias e agências governamentais, incluindo o governo dos EUA,
requerem que sua página Web preencha
requerimentos de acessibilidade para tornar seus sites disponíveis às pessoas com
deficiência. Nestes casos, você deve seguir
ao máximo o XHTML estrito, com formatação por CSS. E assegure-se de verificar
as diretrizes da companhia ou da agência
a respeito, para mais informações em seu
caso particular.
n Grandes sites comerciais que querem
atingir a mais ampla audiência, podem
optar por XHTML transitional, aproveitando-se de algumas tgs desaprovadas
que têm suporte praticamente universal,
enquanto confia na estabilidade de rocha
do XHTML. Estes tipos de site provavelmente migrarão para as CSS mais poderosas, assim que seus níveis de conforto
com elas aumentam.
n Sites pequenos ou pessoais podem se
beneficiar da fácil sintaxe do HTML, junto com a poderosa formatação das CSS,
e uma tag desaprovada ocasional onde
necessário.
n Minha escolha pessoal é usar XHTML e
CSS e o mínimo possível de tags desaprovadas.
22
O XHTML é considerado
perigoso?
Há quem questione a mudança para
XHTML. O problema nasce do fato de que
para XHTML ser compatível com versões
antigas de navegadores, uma pequena
concessão teve de ser feita: tinha de ser
enviado do servidor de um modo que os
navegadores já entendessem: rotulados
como html. A ideia era de que, enquanto
os navegadores desenvolviam-se, seriam
eventualmente capazes de compreender
páginas XHTML servidas como xhtml.
Infelizmente, isso não aconteceu. Em meados de 2006, o Internet Explorer 7, que,
muito provavelmente, assumirá o manto de
navegador mais usado do IE6, uma vez que
seja aprovado nos testes, ainda não pode
compreender arquivos XHTML servidos
como xhtml. Isso significa que designers
ainda não podem se beneficiar da força
do XML e, ainda pior, segundo Ian Hickson, em http://hixie.ch/advocacy/xhtml,
que páginas escritas em XHTML e servidas
como html podem ser mais um obstáculo
contra a pressão pelos padrões do que
como ajuda. Ele sugere que devemos permanecer com HTML até que os navegadores possam servir xhtml.
Mas então, claro, ficamos travados como a
cobra que devora o próprio rabo. Pessoalmente, sou a favor da mudança para
XHTML e sua promessa de padronização
e força, ao invés de permanecer com o
HTML até que algum futuro mítico, quando
os navegadores abrirão o caminho para a
padronização. Se todos nós escrevermos em
XHTML agora, será do interesse dos fabricantes de navegadores apoiar XHTML. E,
então, todos nós colheremos os benefícios
prometidos.
Introdução
<fieldset id="pessoal">
<label>Nome</label><input type="texto"
name="nome" size="30" /> <br />
<label>Endereço</label><input type="texto"
name="endereço" size="30" /> <br />
<label>Cidade</label><input type="texto"
name="cidade" size="30" /> <br />
<label>Estado</label><input type="texto"
name="estado" size="2" maxlength="2" /> <br />
<label>CEP</label><input type="texto"
name="cep" size="5" maxlength="5" /> <br />
<label>Senha do Cliente</label><input
type="password"name="código" size="8" /> <br />
Figura i.1 Em
muitas páginas, você encontrará
um pequeno trecho de código XHTML, com as
seções pertinentes destacadas em azul.
#rótulo pessoal {position: absolute; left: 20px; fontsize: 90%; padding-top: .2em}
input {margin-left: 9em; margim-bottom: .2em;
line-height: 1.4em;}
Figura i.2 Se o código CSS for relevante ao exemplo,
será exibido em sua própria caixa, novamente
com as seções pertinentes destacadas em azul.
Se você já esteve em outra parte do país,
provavelmente percebeu como as pessoas
falam, bem, um pouco engraçado. Elas usam
palavras diferentes ou as dizem com um
acento diferente. E, ainda, você as compreende tão bem, mesmo se você zomba sobre
isso no carro, depois. É assim com HTML
e XHTML. Nestes casos, elas compartilham
precisamente as mesmas palavras (ao pé
da letra), mas têm uma sintaxe levemente
distinta.
Já que são tão similares, ensinarei HTML e
XHTML, ao mesmo tempo. Começo ao explicar as diferenças de sintaxe que as distingue.
E, então, por todo o livro, explicarei o vocabulário que compartilham. Nestas explicações, usarei a sintaxe mais estrita de XHTML
(Figura i.1). Você pode tanto usá-las como
estão (para escrever XHTML) ou optar pela
sintaxe mais solta do HTML (para escrever
HTML). É com você.
Seria cansativo ter de me referir a HTML e
XHTML por todo o tempo, assim escolhi usar a
abreviação (X)HTML para referir-me às duas
ao mesmo tempo. Nos poucos casos em que
uso um dos nomes individuais, você saberá
que a informação pertence apenas àquela
linguagem e não à outra.
CSS é incorporado às descrições de (X)
HTML – novamente, isso significa ambos
HTML e XHTML – como uma extensão natural e, ainda, como uma ferramenta separada.
Embora as informações sobre CSS estejam
concentradas nos Capítulos 7 ao 14, você
encontrará partes e trechos por todo o livro,
próximo à parte de (X)HTML ao qual é mais
aplicável (Figura i.2).
Figura i.3 O
XHTML e o CSS serão, então, exibidos
em um ou mais navegadores para que você
veja como fica na vida real (este exemplo é da
página 264).
Neste livro, incluí ilustrações dos principais
navegadores tanto no Windows quanto no
Mac (Figura i.3). Embora você continue com
um navegador, não há como saber qual seus
visitantes usarão. Recomendo se acostumar
com a forma de exibição de outros navegadores para (X)HTML.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
23
Como Este Livro Funciona
</fieldset>
Como Este Livro Funciona
Introdução
O Que Mudou na Sexta Edição
A primeira edição deste livro, publicada em
1996, tinha 11 capítulos, 2 apêndices e, somente, 176 páginas. A sexta edição, em suas
mãos, tem 25 capítulos, 6 apêndices e mais
do que 450 páginas. Este livro expandiu-se
e adaptou-se, enquanto (X)HTML e CSS têm
crescido e mudado.
O Que Mudou na Sexta Edição
O que é novo
A coisa curiosa desta vez é que (X)HTML e
CSS não mudaram consideravelmente, desde
a última edição. Isso não significa, porém, que
o livro é apenas uma reedição da edição anterior, porque, de fato, a própria Web mudou
dramaticamente. Nos três curtos anos desde
a Quinta Edição, vimos um amadurecimento
das técnicas de layouts em CSS, as quais exploraremos com exemplos de códigos novos
em folha, em particular no Capítulo 11, mas
através dos capítulos sobre CSS em geral, um
ressurgimento de páginas Web sendo reescritas
em CSS para ser visualizada em dispositivos
de mão celulares (Capítulo 13), a mudança do
Perl/CGI em favor de PHP, junto com formatação em CSS para elementos de formulário
(Capítulo 17), uma explosão verdadeira de
áudio e vídeo, que eu lhe ajudarei a lidar no
Capítulo 18, e uma mudança para blogs frequentemente atualizados que levou a licenciamento, feeds RSS e podcasting, que veremos
no Capítulo 25.
E, embora muitos dos outros capítulos
tenham os mesmos títulos, todos foram
completamente atualizados para abranger os
últimos navegadores, as técnicas mais padronizadas de XHTML e CSS.
24
Internet Explorer 7
Internet Explorer 7 ainda estava em testes
quando este livro estava sendo publicado
e, portanto, as ilustrações que mostram o
Internet Explorer 7 são, de fato, Internet
Explorer 7 beta 2 e beta 3. É possível, embora
improvável, que a exibição de (X)HTML e CSS
mude um pouco quando o programa final for
lançado.
Introdução
O que se foi
Finalmente, também tomei a difícil decisão
de remover quatro capítulos por completo.
Eram os capítulos da Quinta Edição sobre
quadros, WML (que foram substituídos por
XHTML + CSS) e os dois capítulos sobre Velhas Maneiras, sobre tags desaprovadas e de
pouco uso, e sobre tags de layout desaprovadas e ainda menos utilizadas.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
25
O Que Mudou na Sexta Edição
Ainda que a maioria dos elementos descritos
nestes capítulos ainda seja considerada válida, embora desaprovados, para (X)HTML,
eles ficavam tão em desuso que poucos criadores Web que se respeitam tocariam neles.
Eu sugiro que você também os evite.
Introdução
O Web site VQS de HTML
Com a Web mudando constantemente, parecia mais apropriado adicionar um elemento
dinâmico a este livro: o Web site da sexta
edição do VQS de HTML em inglês (http://
www.cookwood.com/html/).
O Web site VQS de HTML
No site da editora, você encontrará e poderá
baixar os códigos fonte completos para cada
um dos exemplos deste livro, incluindo (X)
HTML e CSS (http://www.altabooks.com.br).
No meu site em inglês (www.cookwood.
com/), você encontra uma lista de erros, atualizações, artigos, resenhas e comentários.
Há, também, vários recursos disponíveis em
meu site que eu espero que vocês gostem,
incluindo tabelas de cor, tabelas de símbolos
e de caracteres, tabelas hexadecimais e listas
completas de elementos e atributos (X)HTML,
e de propriedades e valores CSS.
Depois, enquanto eu escrevia este livro, reuni
uma coleção de dicas menores e truques que,
simplesmente, não cabiam na página apropriada. Estão todos disponíveis no meu site.
Finalmente, você encontrará um animado
Fórum de Perguntas e Respostas em inglês
(www.cookwood.com/html/qanda), onde
você poderá postar as questões que mais
lhe preocupam – e as mais fáceis, também.
Enquanto eu estiver por lá e esforçar-me
para responder, há uma equipe dedicada de
Web designers que, em geral, são bem mais
craques do que eu. Se você estiver com vontade, sinta-se livre para entrar e responder
você mesmo algumas perguntas. Sua ajuda
será muito bem-vinda.
Nos encontramos na Web!
26
OS TIJOLOS
DA WEB
1
Dedicarei este capítulo para explicar cada
um destes importantes conceitos.
Observação: Como mencionei na introdução, uso (X)HTML para referir tanto a HTML
4 e XHTML 1.0 em situações, onde ambos
têm propriedades idênticas, como em " elemento de tabela (X)HTML". Por outro lado,
para aqueles casos no qual estou destacando
características especiais, únicas para um ou
para outro, usarei seus nomes individuais:
"XHTML requer aspas cercando valores
de atributos". Para mais detalhes, consulte
Como Este Livro Funciona, na página 23.
27
Os Tijolos da Web
Embora as páginas Web tenham se tornado
cada vez mais complexas, sua estrutura fundamental permanece notavelmente simples.
Uma página Web é feita de três componentes
principais: conteúdo de texto, os verdadeiros
cabeçalhos e parágrafos que aparecem na
página; referências ocasionais para conteúdo mais complexo, como links, imagens, e
talvez, animações em Flash; e marcação –
instruções que descrevem como o conteúdo e
as referências devem ser exibidos. É importante observar que cada um destes componentes consiste exclusivamente de texto. Este
recurso essencial quer dizer que as páginas
Web podem ser salvas em formato text-only e
visualizadas em, praticamente, qualquer navegador, em qualquer plataforma. Isso garante a
universalidade da Web.
As páginas Web também incluem informações sobre a linguagem e o script no qual
o texto foi escrito (a codificação), assim
como o tipo de marcação que o descreve
(doctype).
Capítulo 1
Marcação: Elementos, Atributos
e Valores
Marcação: Elementos, Atributos e Valores
(X)HTML é um sistema engenhoso de incluir
informação sobre conteúdo corretamente em
um documento de texto. Esta informação
– chamada marcação, o m em (X)HTML –
pode incluir instruções de formatação, assim
como detalhes sobre os relacionamentos
entre as partes do documento. Porém, já
que a própria marcação é composta principalmente de texto, o documento é acessível
quase que universalmente.
(X)HTML tem três principais tipos de marcação: elementos, atributos e valores. Mais adiante, neste livro, também falaremos de declarações (consulte página 40) e entidades (consulte
página 336).
Elementos
Elementos são como pequenas etiquetas que
identificam e dão estrutura às diferentes partes
de uma página Web: "Este é um cabeçalho,
aquilo ali é um parágrafo e aquele outro é
uma informação importante". Alguns elementos têm um ou mais atributos, que descrevem
mais fundo o propósito e o conteúdo. se
houver, do elemento.
Os elementos podem conter texto e/ou outros
elementos, ou podem ser vazios. Um elemento
não-vazio consiste de uma tag de abertura (o
nome do elemento e os atributos, se houver,
dentro dos sinais de maior que e menor que),
o conteúdo, e uma tag de fechamento (uma
barra diagonal seguida pelo nome do elemento, novamente entre os sinais maior que e
menor que) (Figura 1.1).
Um elemento vazio aparece como uma combinação de tags de abertura e de fechamento,
com um sinal menor que inicial, o nome do
elemento, seguido por quaisquer atributos que
possa ter, um espaço, uma barra diagonal e o
sinal maior que final (Figura 1.2).
Em XHTML, a tag de fechamento é sempre
necessária. Em HTML, ele é, às vezes opcional.
A seção correspondente neste livro, para cada
elemento, fornecerá os detalhes específicos.
28
Texto afetado
Tag de abertura
Tag de fechamento
definição de <em>efêmero</em>
Sinal de maior que
e de menor que
Barra diagonal
Figura 1.1 Eis um elemento (X)HTML típico. As tags
de abertura e de fechamento cercam o texto que
será afetado. Neste caso, a palavra "efêmero" será
enfatizada, o que na maior parte dos navegadores quer dizer que será exibida em itálico.
<img src="blueflax.jpg" width="300" />
Um espaço e a barra diagonal
Figura 1.2 Elementos vazios, como img aqui mostra-
do, não cercam nenhum conteúdo de texto. Eles
têm uma tag simples que serve tanto para abrir
como para fechar o elemento. Em HTML, a barra
final é opcional. Em XHTML, ela é obrigatória.
Os Tijolos da Web
colspan é um atributo de td
<td colspan="3">Fevereiro</td>
O valor do atributo
colspan
Figura 1.3 Eis um elemento td (para uma célula
de tabela) com um simples par de valor-atributo. Atributos são sempre localizados dentro de
uma tag de abertura do elemento. Seus valores
devem sempre estar dentro de aspas.
src é um atributo de img
Valor de src
width também é
um atributo de img
Valor de width
Atributos contêm informações sobre os dados
em um documento e não os próprios dados
(Figuras 1.3 e 1.4). Em XHTML, um valor
de atributo deve sempre estar dentro de aspas. Em HTML, as aspas podem ser, às vezes,
omitidas (consulte a página 38), embora eu
lhe recomende sempre usá-las.
Enquanto você encontra detalhes completos
sobre os valores aceitáveis para cada atributo
neste livro, deixe-me dar uma idéia dos tipos
de valores que você encontrará.
Alguns atributos podem aceitar quaisquer
valores, outros são mais limitados. Talvez o
mais comum sejam aqueles que aceitem valores numéricos ou pré-definidos. Em outras
palavras, você deve selecionar um valor de
uma lista padrão de escolhas (Figura 1.5).
Em XHTML, valores numéricos sempre são
escritos em letras minúsculas (em HTML,
isso não importa).
Figura 1.4 Alguns
elementos, como o img aqui
mostrado, pode receber um ou mais atributos,
cada qual com seu próprio valor. A ordem é
irrelevante. Separe cada par de valor-atributo
do seguinte com um espaço.
Muitos atributos requerem um número ou um
percentual para seus valores, particularmente
aqueles que descrevem tamanho e extensão.
Um valor numérico nunca inclui unidades.
Onde as unidades são aplicáveis, como a
altura do texto ou a largura de uma imagem,
<link rel="folhadeestilo" type="text/css"eles são entendidos como pixels.
media="screen" href="blueflax.css" />
Os atributos controlando cor podem conter
valores que são tanto o nome da cor ou uma
Valor pré-definido
representação hexadecimal do conteúdo vermelho, verde e azul da cor. Você pode encontrar
Figura 1.5 Alguns atributos apenas aceitam
uma lista dos dezesseis nomes de cor prévalores específicos. Por exemplo, o atributo medefinidos, assim como uma seleção de cores
dia no elemento link pode ser ajustado para
hexadecimais na capa interna ao fim deste livro
screen, handheld ou print, entre outros,
Você pode encontrar instruções para criar suas
mas você não pode criar um valor para ele.
próprias cores hexadecimais, na página 126.
Veja que (X)HTML não suporta valores numéricos ou percentuais para cor.
Alguns atributos fazem referência para outros
arquivos e, portanto, devem conter valores da
forma de URL, ou Uniform Resource Locator
(Localizador de Recursos Uniforme), o endereço
único de um arquivo na Web. Falaremos mais
sobre URL a partir da página 35.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
29
Marcação: Elementos, Atributos e Valores
<img src="blueflax.jpg" width=”300” />
Atributos e Valores
Capítulo 1
Parágrafo vs. Linha
Um elemento pode ser nível de parágrafo
ou linha. Se for nível de parágrafo, sempre
será exibido em uma nova linha, como um
novo parágrafo em um livro. Se for linha,
será exibido na linha atual, como a próxima
palavra em um parágrafo.
Marcação: Elementos, Atributos e Valores
Elementos nível de parágrafo são considerados
as maiores partes estruturais de sua página
Web e, como tal, podem conter, geralmente,
outros elementos nível de parágrafo, elementos de linha e texto. Elementos de linha, por
outro lado, podem, geralmente, conter apenas
elementos de linha e texto.
(Os elementos também podem ser itens de
lista, que são considerados distintos dos nível
de parágrafo e de linha, mas parece ser uma
categoria tão pequena que dificilmente requerem discussão além do Capítulo 15, Listas).
<div><img src="blueflax.jpg" alt="Blue Flax (Linum
lewisii)" width="194" height="174" />
<p>Sempre fico surpresa com as belas e delicadas
Blue Flax que, de alguma forma, aparecem em
meu jardim.
Elas são abundantes de cor todas as manhãs, mas
nem uma única flor resiste à tarde.
São a própria definição de
<em>efêmero</em>.</p>
<p>© 2002 by Blue Flax Society.</p>
</div>
Figura 1.6 Os
elementos nível de parágrafo, aqui
exibidos destacados em negrito, são div e p.
Os elementos de linha, destacados mas não em
negrito, são img e em.
Figura 1.7 Cada
elemento nível de parágrafo
começa em uma nova linha. Os elementos de linha (neste caso, a imagem e o texto em itálico)
continuam a linha iniciada pelo elemento nível
de parágrafo no qual eles estão contidos.
30
Os Tijolos da Web
Pais e Filhos
<div>
<img src="blueflax.jpg" .../>
<p>... de
<em>efêmero</em>
</p>
<p>...pela Blue Flax Society</p>
</div>
Figura 1.8 O
elemento div é pai dos elementos
img e todos os p. Por outro lado, os elementos
img e todos os p são filhos (e descendentes) de
div. O primeiro elemento p é pai da tag em. O
em é filho do primeiro p e, também, descendente (mas não filho) de div.
<p>...de<em>efêmero</em></p>
<p>...de<em>efêmero</p></em>
Incorreto (os conjuntos de tags
intrometem-se uns nos outros)
Esta estrutura é um recurso chave do código (X)HTML e facilita acrescentar estilo
aos elementos (o que nós apresentaremos
no Capítulo 7, Tijolos de Folhas de Estilo) e
aplicar efeitos JavaScript a eles (brevemente discutidos, no Capítulo 20, Um Gosto de
JavaScript).
É importante observar que, quando os
elementos contêm outros elementos, cada
elemento pode ser apropriadamente embutido, que está inteiramente contido dentro de
seu pai. Sempre que você usar uma tag de
fechamento, ela deve corresponder à última
tag de abertura aberta. Em outras palavras,
primeiro abra A, depois B e, então, feche B
e então, A. (Figura 1.9).
Figura 1.9 Os
elementos devem ser embutidos
corretamente. Se você abre p e depois em, você
deve fechar em antes de p.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
31
Marcação: Elementos, Atributos e Valores
Correto (sem linhas sobrepostas)
Se um elemento contém outro, ele é considerado pai do que estiver embutido, que
é o elemento filho. Quaisquer elementos
contidos no elemento filho são considerados descendentes do elemento exterior, o
elemento pai (Figura 1.8). Você pode, na
verdade, criar uma família em uma página
Web, que tanto mostra os relacionamentos
hierárquicos entre cada elemento na página
e, especificamente, identifica cada elemento.
Capítulo 1
O Conteúdo de Texto de uma
Página Web
O texto contido dentro dos elementos é, talvez, o ingrediente mais básico em uma página Web. Se você já usou um processador de
texto, você já digitou algum texto. Porém, o
texto em uma página (X)HTML tem algumas
diferenças importantes.
O Conteúdo de Texto de uma Página Web
Primeiro, (X)HTML contrai espaços extras
ou tabulações em um espaço único e converte retornos e entradas de linha em um
espaço único ou os ignora completamente
(Figuras 1.10 e 1.11).
Depois, HTML costumava ficar restrito a
caracteres ASCII – basicamente as letras do
idioma inglês, numerais e alguns dos símbolos mais comuns. Caracteres acentuados (comuns em muitos idiomas da Europa Ocidental, como o português) e muitos símbolos do
dia-a-dia têm de ser criados com referências
de caracteres, como é (para é) ou
© (para ©).
Atualmente, você tem duas opções. Embora
você possa ainda usar referências de caracteres
é, frequentemente, mais fácil simplesmente
digitar a maior parte dos caracteres como são
e, então, codificar seus arquivos (X)HTML em
Unicode (e, particularmente, com UTF-8). Porque Unicode é um super conjunto de ASCII – é
tudo o que ASCII é, e muito mais – documentos codificados com Unicode são compatíveis
com os navegadores e os editores de texto
existentes. Os navegadores que não compreendem Unicode interpretam a porção ASCII
do documento apropriadamente, enquanto os
navegadores que compreendem Unicode exibirão a porção que não é ASCII também (para
mais detalhes, consulte o Capítulo 21, Símbolos
e Caracteres em Outros Idiomas).
O único símbolo que você não deve digitar
diretamente é &. Dado que este símbolo
tem um significado especial em (X)HTML,
principalmente para começar estas referências
de caracteres, o símbolo deve sempre ser expressado como & quando usado como
texto, como em AT&T. Para mais informações,
consulte Adicionando Caracteres Além da
Codificação, na página 336.
32
<div><img src="blueflax.jpg" alt="Blue Flax (Linum
lewisii)" width="194" height="174" />
<p>Sempre fico surpresa com as belas e delicadas
Blue Flax que, de alguma forma, aparecem em
meu jardim.
Elas são abundantes de cor todas as manhãs, mas
nem uma única flor resiste à tarde.
São a própria definição de
<em>efêmero</em>.</p>
<p>© 2002 by Blue Flax Society.</p>
</div>
Figura 1.10 O
conteúdo de texto é, basicamente,
tudo do lado de fora da marcação. Observe que
cada linha é separada com um retorno. Também, utilizei uma referência de caractere especial © para o símbolo de copyright, para
assegurar que seja exibido apropriadamente,
não importa como eu salve o documento.
Figura 1.11 Observe como os retornos extra são ig-
norados quando o documento é visualizado com
um navegador Web e a referência de caractere é
substituída pelo símbolo correspondente (©).
Os Tijolos da Web
<div><img src="tigerlily.jpg" alt="Lírio Tigrino
(Lilium lancifolium)" width="133" height="130" />
<p>Lírios tigrinos são como seus primos mamíferos, escondem-se na grama com suas cores
pulando em você quando menos se espera.</p>
<p>São tão onipresentes como o tigre verdadeiro
é raro, encontradas ao longo de tantas estradas e rodovias que são, às vezes, chamadas de
<em>Lírios de Valas</em>.</p>
<p>© 2006 by Blue Flax Society.</p>
</div>
Figura 1.12 Neste
Claro, o que faz a Web tão vibrante são os
links de uma página para outra, as imagens,
as animações em Flash, filmes em QuickTime, músicas em MP3 e mais. Ao invés de
efetivamente anexar os arquivos no arquivo
em (X)HTML, estes arquivos são salvos separadamente e, simplesmente, referenciados a
partir de dentro da página. Já que a referência nada mais é do que texto, o arquivo (X)
HTML permanece universalmente acessível.
A maioria dos navegadores pode manusear
links e imagens sem muito problema. Eles
não podem, necessariamente, manusear
qualquer outro tipo de arquivo, porém. Se
você referenciar um arquivo que o navegador de seu visitante não compreender,
o navegador geralmente procurará por
um plugin ou aplicativo auxiliar – algum
programa apropriado no computador do
visitante – que seja capaz de abrir aquele
tipo de arquivo. Você também pode dar aos
navegadores algum tipo de informação extra
sobre como baixar plugins para visualizar
arquivos em particular se o visitante já não
tiver um em seu computador.
Falaremos de imagens no Capítulo 5, Imagens, e trataremos de plugins e aplicativos
auxiliares, no Capítulo 18, Vídeo, Áudio e
outras Mídias.
Figura 1.13 Imagens,
e outros conteúdos que não
texto, são referenciados de uma página Web, e
o navegador os exibe junto com o texto.
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
33
Links, Imagens e Outros Conteúdos que Não Texto
documento (X)HTML, há uma
referência a um arquivo chamado tigerlily.jpg, que o navegador irá acessar, abrir e
carregar com o restante da página.
Links, Imagens e Outros
Conteúdos que Não Texto
Capítulo 1
Nomes de Arquivos
Como qualquer outro documento de texto,
uma página Web tem um nome de arquivo que
a identifica para você, seus visitantes e para
os navegadores Web de seus visitantes. Há
algumas dicas para se lembrar quando atribuir
nomes de arquivo para suas páginas Web, que
lhe ajudarão a organizar seus arquivos, tornálos mais fáceis para seus visitantes encontrar e
acessar suas páginas e assegurar que seus navegadores visualizem a página corretamente.
Nomes de Arquivos
Use nomes com letras minúsculas
Já que o nome que você escolheu para a sua
página Web determina o que seus visitantes terão de digitar para ir à sua página, você pode
poupar erros de digitação (e dores de cabeça)
ao usar apenas letras minúsculas em seus
nomes de arquivo. Também é de grande ajuda
quando você mesmo cria links entre as suas
páginas. Se todos os seus nomes de arquivo
tiverem apenas letras minúsculas, é apenas
menos uma coisa com que se preocupar.
Use a extensão apropriada
O meio principal pelo qual um navegador sabe
que deve ler um documento de texto como
uma página Web é observando sua extensão:
.htm ou .html. Se a página já tem alguma outra
extensão, como, por exemplo, ".txt", o navegador a tratará como texto e mostrará todo o seu
belo código ao visitante.
n Usuários de Macintosh – a menos que
você esteja em um servidor Mac e todos
os seus visitantes usem Macs – isso vale
para vocês, também.
n Amigos do Windows, estejam cientes
que o Windows nem sempre revela a
extensão real do documento. Mude suas
Opções de Pasta, se necessário, para que
você possa ver as extensões.
n Apenas as pessoas que ainda usam Windows 3.1 (que são seis, ao todo) estão
limitadas a .htm. Praticamente todos os
demais pode usar tanto .htm quanto
.html sem problemas. Apenas siga a mesma linha, para evitar ter de se lembrar
qual você usou.
34
nome de arquivo, apenas
em letras minúsculas
Extensão
pena_capital.html
Pena_Capital.html
Nomes de arquivo com letras
maiúsculas são complicados
de digitar e de comunicar
Figura 1.14 Lembre-se
de utilizar sempre letras
minúsculas para os seus nomes de arquivo e
de adicionar .htm ou .html com coerência.
Mesclar letras minúsculas com maiúsculas dificulta a digitação do endereço apropriado para
o seu visitante e, assim, encontrar sua página.
http://www.seusite.com/PaginasWeb/
TORTURA/Pena_Capital.html
Figura 1.15 Use
sempre letras minúsculas para
os seus diretórios e pastas também. O segredo é
coerência. Se você não usa letras maiúsculas,
seus visitantes (e você) não terão de perder tempo imaginando, "E agora, era um C maiúsculo
ou minúsculo?".
Os Tijolos da Web
Esquema Nome do servidor Caminho
"http://www.site.com/liz/arquivo.html"
Nome do arquivo
Figura 1.16 Sua
URL básica contém um esquema, o nome do servidor, o caminho e o nome
do arquivo.
Barra diagonal rastejadora
"http://www.site.com/liz/"
Figura 1.17 Uma URL com uma barra diagonal raste-
jadora e sem o nome do arquivo aponta para o
arquivo padrão no último diretório nomeado (neste caso, o diretório liz). Alguns nomes de arquivo
padrão comuns são index.html e default.html.
Esquema
Nome do servidor
Caminho
"ftp://ftp.site.com/pub/prog.exe"
Nome do Arquivo
o usuário clica nesta URL, o
navegador começará uma transferência FTP
do arquivo prog.exe.mailto
Esquema
Scheme
Endereço
de e-mail
Email
address
" mailto: [email protected] "
URL para um endereço de e-mail
inclui o esquema mailto seguido de dois pontos,
mas sem barras diagonais e, então, o próprio
endereço de email.
Figura 1.19 Uma
Esquema
Letra do Disco
"file:///c|/caminho/home.html"
Barra Vertical
Caminho e nome do arquivo
Uniform Resource Locator (Localizador de
Recursos Uniforme), ou URL, é um nome bacana para endereço. Ele contém informações
sobre onde um arquivo está e o que um
navegador deve fazer com ele. Cada arquivo
na Internet tem uma única URL.
A primeira parte da URL é chamada esquema. Ela diz ao navegador como lidar com o
arquivo que está prestes a abrir. O esquema mais comum que você verá é HTTP, ou
Hypertext Transfer Protocol (Protocolo de
Transferência de Hiper Texto). É utilizado
para acessar páginas Web (Figura 1.16).
A segunda parte da URL é o nome do servidor onde o arquivo está localizado, seguido pelo caminho que leva ao arquivo e o
próprio nome do arquivo. Às vezes, uma
URL termina em uma barra diagonal rastejante sem nenhum nome de arquivo dado
(Figura 1.17). Neste caso, a URL refere-se
ao arquivo padrão no último diretório no
caminho (que, geralmente, corresponde à
página inicial), frequentemente chamada de
index.html ou default.htm.
Outros esquemas comuns são HTTPS, para
páginas Web seguras; FTP (File Transfer
Protocol, ou Protocolo de Transferência de
Arquivos), para baixar arquivos (Figura
1.18); Mailto, para enviar e-mail (Figura
1.19) e File, para acessar arquivos em um
disco rígido local ou redes de compartilhamento de arquivos locais (Figura 1.20).
Um esquema geralmente é seguido por
dois pontos e duas barras diagonais.
Mailto e News são exceções; levam apenas
dois pontos.
Veja que o esquema File usa três barras. Isso
porque supõe-se que o hospedeiro, que em
outros esquemas vai entre a segunda e a terceira barras, seja o computador local. Sempre
digite os esquemas em letras minúsculas.
Figura 1.20 Para referenciar um arquivo em uma
máquina local Windows, use o esquema file.
Para Macintosh, use file:///DiscoRígido/caminho/
nomedearquivo. A barra vertical não é necessária
(isto também funciona às vezes para o Windows).
Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com
35
URLs
Figura 1.18 Quando
URLs
Capítulo 1
URLs Absolutas
URLs podem ser tanto absolutas quanto
relativas. Uma URL absoluta mostra todo o
caminho para o arquivo, incluindo o esquema, o nome do servidor, o caminho completo e o próprio nome do arquivo. Uma
URL absoluta é análoga a um endereço físico
completo, incluindo nome, rua e número,
cidade, estado, CEP e país. Não importa
de onde uma carta seja enviada, o correio
sempre será capaz de encontrar o destinatário. Em termos de URL, isso significa que a
localização da própria URL absoluta não tem
influência sobre a localização do verdadeiro
arquivo referenciado -seja uma página Web
em seu servidor ou no meu, uma URL absoluta parecerá exatamente a mesma.
servidor
=www.site.com
=web
pasta/dir
pasta/dir
=index.html
=dados.html
=voceestaaqui.html
pasta/dir
=imagens
servidor
Quando você está referenciando um arquivo
do servidor de alguém, você sempre usará
uma URL absoluta. Você também precisará de
URLs absolutas para sites FTP, ou qualquer
tipo de URL que não use um protocolo HTTP.
pasta/dir
=imagem.gif
=www.remoto.com
=pub
pasta/dir
=inicio.html
URLs
=informação
=bcn
=info.html
O documento que contém as URLs
– voceestaaqui.html, neste caso - é o ponto
de referência para URLs relativas. Em outras
palavras, as URLs relativas são relativas
àquela localização do arquivo no servidor.
URLs absolutas não se importam com onde
estão localizadas.
Figura 1.21
Nome do arquivo URL absoluta
(pode ser usada em qualquer lugar)
URL relativa
(funciona apenas
em voceestaaqui.html)
index.html
www.site.com/Web/index.html
index.html
image.gif
www.site.com/Web/images/image.gif
images/image.gif
data.html
www.site.com/info/data.html
../info/data.html
inicio.html
www.remoto.com/pub/inicio.html
(nenhum: use absoluta)
info.html
www.remoto.com/bcn/info.html
(nenhum; use absoluta)
URLs Absolutas vs URLs Relativas
36