HTML Xhtml e Css

HTML, XHTML& CSS

6ª EdiçãoGUIA 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 Grif"ths, 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

"lhos, 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.

5

Sumário

Sumário

Introdução............................................................13A 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

Capítulo 1: Os Tijolos da Web................................................ 27Marcaçã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.............43Desenhando 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

Especi*cando 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

6

Sumário

Sum

ári

o

Capítulo 3: Estrutura Básica de (X)HTML...................................55Começando sua Página Web......................................................56Criando a Fundação..................................................................58Declarando a Codi%cação..........................................................59Criando um Título......................................................................60Criando Cabeçalhos de Seção.....................................................61Iniciando um Novo Parágrafo....................................................62Nomeando Elementos..................................................................63Dividindo uma Página...............................................................64Criando Spans Em Linha.............................................................65Criando uma Quebra de Linha..................................................66Adicionando Comentários..........................................................67Rotulando Elementos em uma Página Web................................68

Capítulo 4: Formatação Básica de (X)HTML..............................69Tornando Texto Negrito ou Itálico..............................................70Alterando o Tamanho do Texto...................................................71Usando uma Fonte Monoespaçada.............................................72Usando Texto Pré-formatado......................................................73Citando Texto.............................................................................74Criando Sobrescritos e Subscritos................................................76Marcando Mudanças de Texto...................................................77Explicando Abreviações..............................................................78Centralizando Elementos em uma Página..................................79

Capítulo 5: Imagens................................................................81Sobre Imagens para a Web..........................................................82Obtendo Imagens........................................................................86Escolhendo um Editor de Imagens..............................................87O Comando Salvar para a Web..................................................88Inserindo Imagens em uma Página............................................90Oferecendo Texto Alternativo......................................................91Especi%cando o Tamanho para Visualização mais Rápida........92Para dimensionar uma imagem:................................................94Diminuindo imagens..................................................................95Fazendo as Imagens Flutuarem..................................................96Impedindo Elementos de Contornar............................................98Adicionando Espaço ao redor de uma Imagem ..........................99Alinhando Imagens..................................................................100Adicionando Linhas Horizontais..............................................101Adicionando um Ícone para sua Página Web .........................102

Capítulo 6: Links...................................................................103Criando um Link para Outra Página Web................................104Criando Âncoras......................................................................106Linkando para uma Âncora Especí%ca....................................107Apontando Links para uma Janela Especí%ca..........................108Ajustando o Alvo Padrão..........................................................109Criando Outros Tipos de Links...................................................110Criando Atalhos no Teclado para Links....................................112Ajustando a Navegação pela Tecla TAB para Links...................113Usando Imagens para Rotular Links.........................................114Linkando Thumbnails para Imagens........................................115Dividindo uma Imagem em Regiões Clicáveis...........................116Criando uma Imagem Mapeada no Computador do Usuário...117

7

Sumário

Sum

ário

Capítulo 7: Construindo Blocos com Folhas de Estilo..............119Construindo uma Regra de Estilo.............................................120Adicionando Comentários para as Regras de Estilo..................121Cascata: Quando as Regras Colidem........................................122O Valor de uma Propriedade....................................................124

Capítulo 8: Trabalhando com Arquivos de Folhas de Estilo.....127Criando uma Folha de Estilo Externa .......................................128Linkando Folhas de Estilo Externa............................................129Oferecendo Folhas de Estilo Alternativas...................................130Criando uma Folha de Estilo Interna........................................131Importando Folhas de Estilo Externas.......................................132Usando Folhas de Estilo Especí%cas para Mídia........................133Aplicando Estilos Localmente....................................................134A Importância da Localização.................................................135A Inspiração dos Outros: CSS....................................................136

Capítulo 9: Definindo Seletores..............................................137Construindo Seletores...............................................................138Selecionando Elementos pelo Nome...........................................139Selecionando Elementos por ID ou Classe..................................140Selecionando Elementos por Contexto .......................................141Selecionando Parte de um Elemento.........................................144Selecionando Elementos de Links Baseados em Seu Estado.......146Selecionando Elementos Baseado em Atributos.........................147Especi%cando Grupos de Elementos..........................................148Combinando Seletores..............................................................149

Capítulo 10: Formatando com Estilos........................................151Escolhendo uma Família de Fontes...........................................152Especi%cando Fontes Alternativas..............................................153Criando Itálico.........................................................................154Aplicando Formatação em Negrito...........................................155Ajustando o Tamanho da Fonte................................................156Ajustando a Altura da Linha....................................................158Ajustando todos os Valores de Fontes de uma Vez.....................159Ajustando Cor...........................................................................160Alterando o Fundo do Texto......................................................161Controlando o Espaçamento.....................................................162Adicionando Recuo..................................................................163Ajustando as Propriedades do Espaço em Branco.....................164Alinhando Texto.......................................................................165Alterando Maiúsculo/Minúsculo...............................................166Usando Letras Minúsculas........................................................167Decorando Texto......................................................................168

Encontre os exemplos e tabelas em www.altabooks.com.br e dicas extras em inglês em www.cookwood.com

8

Sumário

Sum

ári

o

Capítulo 11: Layout com Estilos...............................................169Estruturando Suas Páginas.......................................................170O Modelo Caixa........................................................................171Alterando o Fundo....................................................................172Ajustando a Altura ou a Largura de um Elemento...................174Ajustando Margens ao Redor de um Elemento.........................176Adicionando Espaço Extra ao Redor de um Elemento..............177Compensando Elementos No Fluxo Natural..............................178Posicionando Elementos em Absoluto.......................................179A%xando um Elemento à Janela do Navegador .......................180Fazendo os Elementos Flutuar...................................................181Controlando Onde os Elementos Flutuam.................................182Posicionando Elementos em 3D................................................183Ajustando a Borda....................................................................184Alterando o Cursor...................................................................186Determinando Direção do Sobre=uxo.....................................187Alinhando Elementos Verticalmente.........................................188

Capítulo 12: Efeitos Dinâmicos com Estilos...............................189Exibindo e Ocultando Elementos..............................................190Criando Botões Rollover............................................................192Criando Pop-ups.......................................................................193Criando Menus Suspensos com Listas........................................194Substituindo Cabeçalhos por Imagens ......................................196

Capítulo 13: Folhas de Estilo para Dispositivos de Mão............199Mobilidade vs. Miniaturização.................................................200Olhando para Seu Site..............................................................201XHTML e CSS para Dispositivos de Mão....................................202Criando Folhas de Estilo para Dispositivos de Mão...................204Ocultando Elementos Estranhos...............................................205Criando e Usando um Cabeçalho de Imagem...........................206Criando Links Extras Para Cima...............................................207Ajustando para Tela Pequena...................................................208

Capítulo 14: Folhas de Estilo para Impressão...........................209Criando uma Folha de Estilo para Impressão............................210Como Diferem as Folhas de Estilo para Impressão.....................211Controlando Quebras de Página...............................................212Imprimindo URLs de Links........................................................213Controlando Linhas Viúvas e Órfãs..........................................214

Capítulo 15: Listas..................................................................215Criando Listas Ordenadas e Desordenadas...............................216Escolhendo seus Marcadores (Bullets).......................................218Escolhendo Onde Começar a Numeração da Lista....................219Usando Marcadores Personalizados.........................................220Controlando Onde Marcadores Começam................................221Ajustando Todas as Propriedades de Estilo da Lista de uma Vez....222Criando Listas de De%nição......................................................223Formatando Listas Embutidas...................................................224

9

Sumário

Sum

ário

Capítulo 16: Tabelas ..............................................................227Mapeando a Sua Página..........................................................228Criando uma Tabela Simples....................................................229Adicionando uma Borda..........................................................230Ajustando a Largura................................................................232Centralizando uma Tabela........................................................234Contorno de texto pela tabela...................................................235Combinando Tabelas................................................................236Alinhando o Conteúdo de uma Célula......................................238Alterando o Fundo....................................................................240Controlando o Espaço...............................................................242Expandindo uma Célula através de Colunas............................244Expandindo uma Célula através de Linhas..............................245Dividindo sua Tabela em Grupos de Colunas...........................246Dividindo a Tabela em Seções Horizontais...............................248Escolhendo Quais Bordas Exibir................................................249Controlando Quebras de Linha em uma Célula........................251Acelerando a Exibição da Tabela.............................................252

Capítulo 17: Formulários.........................................................253Criando um Formulário...........................................................254Processando Formulários..........................................................256Enviando Dados de Formulário por E-mail..............................258Organizando os Elementos do Formulário...............................260Criando Caixas de Texto...........................................................262Criando Caixas para Senhas....................................................263Formalmente Rotulando Partes do Formulário.........................264Criando Botões de Seleção........................................................265Criando Menus.........................................................................266Criando Caixas de Seleção.......................................................268Criando Áreas de Texto Maiores...............................................269Permitindo aos Visitantes Subir Arquivos.................................270Criando Campos Ocultos..........................................................271Criando o Botão de Envio.........................................................272Reiniciar o Formulário.............................................................274Usando uma Imagem para Enviar Dados.................................276Ajustando a Navegação via Tecla TAB para um Formulário....277Adicionando Atalhos de Teclado..............................................278Desabilitando Elementos do Formulário...................................279Evitando que os Elementos Sejam Alterados..............................280


10

Sumário

Sum

ári

o

Capítulo 18: Vídeo, Áudio e outras Mídias...............................281Sobre Plugins e Players..............................................................282Obtendo Plugins para seus Visitantes........................................283Obtendo Arquivos Multimídia...................................................284Criando Links para Arquivos Multimídia..................................285Embutindo Filmes QuickTime para Windows...........................286Embutindo Filmes QuickTime para Todos, além de IE..............288Embutindo Filmes QuickTime para Todos................................290Usando JavaScript para Chamar um Filme...............................292Alterando o Tamanho de um Filme em QuickTime...................294Alterando a Cor de Fundo de um Filme....................................295Repetindo um Filme em QuickTime..........................................296Oferecendo Pré-Visualização de um Filme...............................297Adicionando Atributos para Filmes Secundários......................298Oferecendo Seqüência..............................................................299Embutindo MP3 em uma Página.............................................300Embutindo Windows Media, Parte 1........................................302Embutindo Windows Media, Parte 2.........................................304Embutindo Flash......................................................................305Embutindo Vídeos do Google e YouTube...................................306Inserindo Applets Java...............................................................308Embutindo Outros Arquivos Multimídia...................................309Criando um Slide Show Automático.........................................310

Capítulo 19: Scripts.................................................................311Adicionando um Script "Automático" .......................................312Chamando um Script Automático Externo...............................313 Acionando um Script................................................................314Criando um Botão que Executa um Script...............................316Acrescentando Informações Adicionais....................................317Ocultando Scripts de Navegadores mais Antigos.......................318Ocultando Scripts de Parsers XML............................................319De%nindo a Linguagem de Script Padrão.................................320

Capítulo 20: Um Pouco de Java Script......................................321Acrescentando Data e Hora Atuais...........................................322De%nindo o Tamanho de Uma Nova Janela..............................323Alterando uma Imagem Quando um Visitor Aponta o Mouse...324Carregando Imagens em Cache................................................326

Capítulo 21: Símbolos e Caracteres em Outros Idiomas............327Sobre Codi%cação de Caracteres...............................................328Declarando a Codi%cação de Caracteres de Sua Página..........330Declarando a Codi%cação de uma Folha de Estilo...................332Salvando a Sua Página com a Codi%cação Apropriada...........333Editando a Página com a Codi%cação Apropriada..................334Acrescentando Caracteres Além da Codi%cação.......................336Especi%cando o Idioma de uma Página...................................338

11

Sumário

Sum

ário

Capítulo 22: Testando e Depurando Páginas Web....................339Algumas Técnicas de Depuração..............................................340Veri%que as Coisas Mais Fáceis Primeiro!................................341Veri%cando as Coisas Mais Fáceis: HTML.................................342Veri%cando as Coisas Mais Fáceis: XHTML.................................343Veri%cando as Coisas Mais Fáceis: CSS.....................................344Validando Seu Código:..............................................................345Testando Sua Página:...............................................................346Quando o Navegador Exibe o Código:.......................................348Quando as Imagens Não Aparecem:.........................................349Diferenças entre Navegadores...................................................350Ainda com Problemas?..............................................................351

Capítulo 23: Publicando suas Páginas na Web.........................353Encontrando um Host para seu Site..........................................354Obtendo seu Próprio Nome de Domínio....................................355Transferindo Arquivos para um Servidor..................................356

Capítulo 24: Obtendo Visitantes..............................................361Sobre Palavras-chave................................................................362Listando Palavras-chave Explicitamente...................................363Fornecendo uma Descrição da Sua Página..............................364Controlando Outras Informações.............................................365Mantendo Visitantes Longe.......................................................366Evitando que as Páginas Sejam Arquivadas..............................367Criando um Mapa de Site Manualmente..................................368Usando Mapas de Site do Google...............................................369Enviando Seu Site para um Mecanismo de Busca.....................370Melhorando sua Posição ao Ser Linkado..................................371Escrevendo Páginas Fáceis de Indexar......................................372Outras Técnicas para Promover Seu Site...................................373

Capítulo 25: Licenciamento e Podcasting..................................375Com o que um Feed se Parece...................................................376Aprontando-se para Licenciamento..........................................378Iniciando um Feed RSS.............................................................379Descrevendo seu Site no Feed....................................................380Adicionando Itens para um Feed..............................................382Adicionando um anexo.............................................................384Criando Podcasts para iTunes..................................................386Validando um Feed...................................................................392Enviando um Podcast para iTunes...........................................393Publicando seu Feed RSS em Seu Site........................................394Assinando um Feed RSS............................................................396Assinando um Podcast com iTunes...........................................397


12

Sumário

Sum

ári

o

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..............................................433Editores (X)HTML..........................................................................434Imagens e Grá%cos.......................................................................436Ferramentas Grá%cas....................................................................436

Índice Remissivo.....................................................437Colofão.........................................................................................445

13

INTRODUÇÃOi

Intro

duçã

o

A World Wide Web é a imprensa de Gutem-berg de nosso tempo. Quase todo mundo pode criar seu próprio Web site e, então, apresentá-lo ao público na Internet. Algu-mas 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.

Todas as páginas Web são escritas em alguma forma de HTML. HTML permite que você for-mate texto, adicione elementos gráficos, som e vídeo e salve tudo em um arquivo de texto que qualquer computador pode ler.

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 complica-dos. 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 pro-cesso 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 edito-ra, na página do livro, todos os exemplos, tabelas etc., apresentados neste livro. Visite www.altabooks.com.br

14

Introdução

A Internet, a Web e HTMLCerto, 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 com-putadores 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 pratica-mente 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 funcionas-se 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 docu-mentos 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 dispo-sitivo de mão, como um Palm. A Web está aberta para todos.

A I

nter

net,

a W

eb e

HTM

L

15

Introdução

Aberta, mas Não IgualPoré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.

Assim é com o HTML. Apesar de que pra-ticamente 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 ganhan-do popularidade a cada dia. Infelizmente, nenhum destes navegadores exibem uma página Web exatamente como os demais. Assim, acontece que de nada adianta dese-nhar um belo parque, é preciso se preocu-par com a acomodação dos seus visitantes.

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 aco-modaçõ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.

Aberta, m

as Não Igual


16

Introdução

A Batalha dos NavegadoresAgora, imagine o que aconteceria se cada ho-tel 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, pudes-sem apenas espiar as áreas "exclusivas". Po-ré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 ex-tensões que migraram para o "hotel" Nestca-pe. Por volta de 1996, o programa já tinha se tornado o mais popular programa de com-putador do mundo. A Microsoft começou a cercar seu próprio pedaço da Web. Novamen-te, 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 desgosto-sos 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 coman-dos 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.

A B

atal

ha d

os N

aveg

ador

es

17

Introdução

A Pressão por PadrõesAs 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 univer-salidade enquanto tenta satisfazer sua ânsia por páginas de bela aparência. Seu trabalho é remover as cercas existentes e evitar novas.

A lista de membros do W3C (http://www.w3c.org/Consortium/Member/List) parece um Quem é Quem dos formadores de opi-niã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 compa-nhias 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.

HTML 3.2: Começa a padronizaçãoA primeira resposta do W3C à fragmentação da Web foi a de padronizar as extensões exclusivas, incluindo algumas nas especi-ficaçõ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.

A Pressão por Padrões

Ataques à Torre de MarfimUltimamente (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 apoia-dores corporativos.

Quase sete anos após HTML 4.01 e XHTML tornarem-se Recomendações O%ciais, 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://mi-croformats.org/). Para mais informações, leia o artigo de Jeffrey Zeldman “An Angry Fix” (http://www.zeldman.com/2006/07/17/an-angry-%x) 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 reco-mendei: moderação. Siga os padrões, mas não seja um escravo perante eles. Mesmo sabões de marfim são 99,4% puros.


18

Introdução

HTML 4 e CSSO passo seguinte do W3C foi muito mais au-dacioso. A velha versão de HTML reunia con-teú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 elemen-tos 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, cria-ram 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 funcionalida-des, em particular a capacidade de posicionar elementos em uma página Web com maior precisão. CSS agora não só poderia recriar for-mataçã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.

A P

ress

ão p

or P

adrõ

es

19

Introdução

XML e XHTMLDo 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 de-senhar sua própria linguagem de marcação personalizada, que você pode usar, então, para formatar seus documentos. Sua lingua-gem de marcação personalizada conterá tags que de fato descrevem os dados que eles contêm.

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 reutili-zada tão frequentemente quanto necessário.

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 rees-creveu HTML em XML. Esta nova linguagem tinha todos os recursos de HTML e, assim, podia ser compreendida por qualquer nave-gador 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 utili-zava 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.

A Pressão por Padrões


20

Introdução

CSS e Adoção pelos NavegadoresEnquanto 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 pare-cesse 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 apre-senta 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 Nets-cape (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 des-tes 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.

CSS

e A

doçã

o pe

los

Nav

egad

ores

21

Introdução

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, acre-dito 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 fize-mos. Agora, uns dois bilhões de páginas depois, talvez seja hora de mudarmos nossos hábitos. Ou, talvez, não.

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 neces-sidades. À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, cha-mada de transitional, permite o uso das tags desaprovadas. A segunda, chamada de estri-ta, proíbe o uso de todas as tags desapro-vadas. 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 depen-der de muitos fatores (Continue lendo).

XH

TML vs. H

TML: Q

ual Você Deve U

sar?


22

Introdução

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 governa-mentais, incluindo o governo dos EUA, requerem que sua página Web preencha requerimentos de acessibilidade para tor-nar seus sites disponíveis às pessoas com deficiência. Nestes casos, você deve seguir ao máximo o XHTML estrito, com forma-taçã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, aprovei-tando-se de algumas tgs desaprovadas que têm suporte praticamente universal, enquanto confia na estabilidade de rocha do XHTML. Estes tipos de site provavel-mente migrarão para as CSS mais pode-rosas, assim que seus níveis de conforto com elas aumentam.

n Sites pequenos ou pessoais podem se beneficiar da fácil sintaxe do HTML, jun-to 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 desa-provadas.

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 me-ados 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 Hick-

son, 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 per-manecer com HTML até que os navegado-res possam servir xhtml.

Mas então, claro, ficamos travados como a cobra que devora o próprio rabo. Pes-soalmente, 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 fabri-cantes de navegadores apoiar XHTML. E, então, todos nós colheremos os benefícios prometidos.

Deci

din

do e

ntr

e H

TML,

XH

TML

e C

SS:

23

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 />

</fieldset>

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; font-size: 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.

Figura i.3 O XHTML e o CSS serão, então, exibidos em um ou mais navegadores para que você veja como %ca na vida real (este exemplo é da página 264).

Como Este Livro FuncionaSe 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 compre-ende 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 expli-car as diferenças de sintaxe que as distingue. E, então, por todo o livro, explicarei o voca-bulá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 natu-ral 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).

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 navegado-res para (X)HTML.

Com

o Este

Livro

Funcio

na


24

Introdução

Internet Explorer 7Internet 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.

O Que Mudou na Sexta EdiçãoA primeira edição deste livro, publicada em 1996, tinha 11 capítulos, 2 apêndices e, so-mente, 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 é novoA 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 an-terior, 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 ex-ploraremos 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 forma-taçã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 fre-quentemente atualizados que levou a licencia-mento, 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 padro-nizadas de XHTML e CSS.

O Q

ue M

udou n

a S

exta

Ediç

ão

25

Introdução

O que se foiFinalmente, 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 Ve-lhas Maneiras, sobre tags desaprovadas e de pouco uso, e sobre tags de layout desapro-vadas e ainda menos utilizadas.

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 cria-dores Web que se respeitam tocariam neles. Eu sugiro que você também os evite.

O Q

ue M

udou n

a Se

xta

Ediçã

o


26

Introdução

O Web site VQS de HTMLCom a Web mudando constantemente, pare-cia 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/).

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, atuali-zaçõ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 apropria-da. 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 von-tade, sinta-se livre para entrar e responder você mesmo algumas perguntas. Sua ajuda será muito bem-vinda.

Nos encontramos na Web!

O W

eb s

ite V

QS

de H

TML

27

OS TIJOLOS

DA WEB1

Os Tijo

los d

a W

eb

Embora as páginas Web tenham se tornado cada vez mais complexas, sua estrutura fun-damental 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. É impor-tante observar que cada um destes compo-nentes 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 nave-gador, 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 codi&cação), assim como o tipo de marcação que o descreve (doctype).

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 " ele-mento 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.

28

Capítulo 1

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 princi-palmente de texto, o documento é acessível quase que universalmente.

(X)HTML tem três principais tipos de marca-ção: elementos, atributos e valores. Mais adian-te, neste livro, também falaremos de declara-ções (consulte página 40) e entidades (consulte página 336).

ElementosElementos 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 elemen-tos 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 elemen-to, novamente entre os sinais maior que e menor que) (Figura 1.1).

Um elemento vazio aparece como uma com-binaçã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.

definição de <em>efêmero</em>

Tag de fechamento

Sinal de maior que

e de menor que Barra diagonal

Tag de abertura

Texto afetado

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 navegado-res 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 &nal é opcional. Em XHTML, ela é obrigatória.

Marc

açã

o: El

emen

tos,

Atr

ibuto

s e

Valo

res

29

Os Tijolos da Web

Atributos e ValoresAtributos 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 as-pas. 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 va-lores 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).

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, eles são entendidos como pixels.

Os atributos controlando cor podem conter valores que são tanto o nome da cor ou uma representação hexadecimal do conteúdo verme-lho, verde e azul da cor. Você pode encontrar uma lista dos dezesseis nomes de cor pré-definidos, assim como uma seleção de cores hexadecimais na capa interna ao fim deste livro Você pode encontrar instruções para criar suas próprias cores hexadecimais, na página 126. Veja que (X)HTML não suporta valores numéri-cos 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.

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-atribu-to. 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

<img src="blueflax.jpg" width=”300” />

width também é

um atributo de img

Valor de src

Valor de width

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.

Valor pré-definido

<link rel="folhadeestilo" type="text/css" media="screen" href="blueflax.css" />

Figura 1.5 Alguns atributos apenas aceitam valores especí&cos. Por exemplo, o atributo me-dia no elemento link pode ser ajustado para screen, handheld ou print, entre outros, mas você não pode criar um valor para ele.

Marca

ção: Elem

ento

s, Atrib

uto

s e Valo

res


30

Capítulo 1

Parágrafo vs. LinhaUm 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.

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, elemen-tos 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 reque-rem 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 li-nha (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.M

arc

açã

o: El

emen

tos,

Atr

ibuto

s e

Valo

res

31

Os Tijolos da Web

Pais e FilhosSe um elemento contém outro, ele é con-siderado pai do que estiver embutido, que é o elemento &lho. Quaisquer elementos contidos no elemento filho são considera-dos 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.

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 (brevemen-te discutidos, no Capítulo 20, Um Gosto de JavaScript).

É importante observar que, quando os elementos contêm outros elementos, cada elemento pode ser apropriadamente embuti-do, 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).

<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 &lhos (e descendentes) de div. O primeiro elemento p é pai da tag em. O em é &lho do primeiro p e, também, descenden-te (mas não &lho) de div.

Correto (sem linhas sobrepostas)

<p>...de<em>efêmero</em></p>

<p>...de<em>efêmero</p></em>

Incorreto (os conjuntos de tags

intrometem-se uns nos outros)

Figura 1.9 Os elementos devem ser embutidos corretamente. Se você abre p e depois em, você deve fechar em antes de p.

Marca

ção: Elem

ento

s, Atrib

uto

s e Valo

res


32

Capítulo 1

O Conteúdo de Texto de uma Página WebO texto contido dentro dos elementos é, tal-vez, o ingrediente mais básico em uma pági-na 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.

Primeiro, (X)HTML contrai espaços extras ou tabulações em um espaço único e con-verte 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ímbo-los mais comuns. Caracteres acentuados (co-muns em muitos idiomas da Europa Ociden-tal, 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). Por-que Unicode é um super conjunto de ASCII – é tudo o que ASCII é, e muito mais – documen-tos codificados com Unicode são compatíveis com os navegadores e os editores de texto existentes. Os navegadores que não compre-endem Unicode interpretam a porção ASCII do documento apropriadamente, enquanto os navegadores que compreendem Unicode exi-birã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 ex-pressado como & quando usado como texto, como em AT&T. Para mais informações, consulte Adicionando Caracteres Além da Codi&cação, na página 336.

<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>


</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. Tam-bém, utilizei uma referência de caractere espe-cial © 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 (©).O

Conte

údo d

e T

exto

de u

ma P

ágin

a W

eb

33

Os Tijolos da Web

Links, Imagens e Outros Conteúdos que Não TextoClaro, 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 QuickTi-me, músicas em MP3 e mais. Ao invés de efetivamente anexar os arquivos no arquivo em (X)HTML, estes arquivos são salvos sepa-radamente e, simplesmente, referenciados a partir de dentro da página. Já que a referên-cia 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 nave-gador 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, Ima-gens, e trataremos de plugins e aplicativos auxiliares, no Capítulo 18, Vídeo, Áudio e outras Mídias.

<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 estra-das e rodovias que são, às vezes, chamadas de <em>Lírios de Valas</em>.</p>


</div>

Figura 1.12 Neste documento (X)HTML, há uma referência a um arquivo chamado tigerli-ly.jpg, que o navegador irá acessar, abrir e carregar com o restante da página.

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.

Links, Im

agen

s e Outro

s Conteú

dos q

ue N

ão Tex

to


34

Capítulo 1

Nomes de ArquivosComo 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 nave-gadores visualizem a página corretamente.

Use nomes com letras minúsculasJá que o nome que você escolheu para a sua página Web determina o que seus visitantes te-rã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 apropriadaO 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 navega-dor a tratará como texto e mostrará todo o seu belo código ao visitante.

Usuários de n Macintosh – a menos que você esteja em um servidor Mac e todos os seus visitantes usem Macs – isso vale para vocês, também.

Amigos do Windows, estejam cientes n

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.

Apenas as pessoas que ainda usam Win- n

dows 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 mes-ma linha, para evitar ter de se lembrar qual você usou.

nome de arquivo, apenas

em letras minúsculas

Nomes de arquivo com letras

maiúsculas são complicados

de digitar e de comunicar

pena_capital.html

Pena_Capital.html

Extensão

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 di&-culta 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 tem-po imaginando, "E agora, era um C maiúsculo ou minúsculo?".

Nom

es

de A

rquiv

os

35

Os Tijolos da Web

URLsUniform Resource Locator (Localizador de Recursos Uniforme), ou URL, é um nome ba-cana 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 esque-ma. Ela diz ao navegador como lidar com o arquivo que está prestes a abrir. O esque-ma 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 servi-dor onde o arquivo está localizado, segui-do pelo caminho que leva ao arquivo e o próprio nome do arquivo. Às vezes, uma URL termina em uma barra diagonal raste-jante 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 compartilha-mento 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 ter-ceira barras, seja o computador local. Sempre digite os esquemas em letras minúsculas.

"http://www.site.com/liz/arquivo.html"

Nome do servidorCaminhoEsquema

Nome do arquivo

Figura 1.16 Sua URL básica contém um esque-ma, o nome do servidor, o caminho e o nome do arquivo.

"http://www.site.com/liz/"

Barra diagonal rastejadora

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 (nes-te caso, o diretório liz). Alguns nomes de arquivo padrão comuns são index.html e default.html.

"ftp://ftp.site.com/pub/prog.exe"

Esquema

Nome do servidor

Nome do Arquivo

Caminho

Figura 1.18 Quando o usuário clica nesta URL, o navegador começará uma transferência FTP do arquivo prog.exe.mailto

Figura 1.19 Uma 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.

"file:///c|/caminho/home.html"

EsquemaLetra do Disco

Barra Vertical

Caminho e nome do arquivo

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).

UR

Ls

" mailto: [email protected] "

Scheme

Email address

EsquemaEndereço de e-mail


36

Capítulo 1

URLs AbsolutasURLs podem ser tanto absolutas quanto relativas. Uma URL absoluta mostra todo o caminho para o arquivo, incluindo o esque-ma, o nome do servidor, o caminho com-pleto 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 abso-luta parecerá exatamente a mesma.

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.

servidor=www.site.com

pasta/dir=web

pasta/dir=informação

pasta/dir=imagens

=index.html =dados.html

=voceestaaqui.html

=imagem.gif

servidor=www.remoto.com

pasta/dir=pub

pasta/dir=bcn

=inicio.html =info.html

Figura 1.21 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.

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

UR

Ls

HTML Xhtml e Css

Documents

Transcript of HTML Xhtml e Css