You are on page 1of 35

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.

.....................................................................................................43 Desenhando seu Site... Variações e DOCTYPE......................................................................................................................... mas Não Igual..............21 Como Este Livro Funciona.................... 27 Marcação: Elementos.........15 A Batalha dos Navegadores..17 CSS e Adoção pelos Navegadores.............................................13 Capítulo 1: Sumário A Internet.........................................................49 Editando Páginas Web....................14 Aberta...............................32 Links.................................................50 Organizando Arquivos...................................................................................................26 Os Tijolos da Web.................Sumário Introdução....42 Capítulo 2: Trabalhando com Arquivos de Página Web.............................................................. Imagens e Outros Conteúdos que Não Texto........28 O Conteúdo de Texto de uma Página Web.................................................................... e HTML........................................................24 O Web Site VQS de HTML........................23 O Que Mudou na Sexta Edição................................................................34 URLs...........................44 Criando uma Nova Página Web......................... Atributos e Valores.35 HTML vs XHTML...38 Versões...............................................52 A Inspiração dos Outros.......33 Nomes de Arquivo............................... a Web..........................20 XHTML vs HTML: Qual Você Deve Usar?................................................................................................................................53 5 .................................................................................................................................16 A Pressão por Padrões......40 A Exibição Padrão de (X)HTML..................................48 Especificando uma Página Padrão ou "Home"............................................................................................................46 Sobre o Microsoft Word e Páginas Web...............45 Salvando sua Página Web........................51 Visualizando sua Página em um Navegador.........................

.......................................................................................................................................................................113 Usando Imagens para Rotular Links.......................107 Apontando Links para uma Janela Específica.....................................96 Impedindo Elementos de Contornar.....98 Adicionando Espaço ao redor de uma Imagem..............108 Ajustando o Alvo Padrão...86 Escolhendo um Editor de Imagens.........................62 Nomeando Elementos..73 Citando Texto..................................................................................................59 Criando um Título........................................................................................................................................................102 Capítulo 6: Links............67 Rotulando Elementos em uma Página Web..................................................55 Começando sua Página Web.........................................110 Criando Atalhos no Teclado para Links.............................................................................................88 Inserindo Imagens em uma Página............................70 Alterando o Tamanho do Texto...............................................................................................................................................101 Adicionando um Ícone para sua Página Web ........................................................................................................116 Criando uma Imagem Mapeada no Computador do Usuário...................................................................................................117 6 ....................................90 Oferecendo Texto Alternativo....................................81 Sobre Imagens para a Web........82 Obtendo Imagens............109 Criando Outros Tipos de Links....114 Linkando Thumbnails para Imagens.......................................................................................................................................................................................72 Usando Texto Pré-formatado....103 Criando um Link para Outra Página Web.........79 Capítulo 5: Imagens................................................77 Explicando Abreviações..............................................91 Especificando o Tamanho para Visualização mais Rápida...........................................................................................................58 Declarando a Codificação.........................................................112 Ajustando a Navegação pela Tecla TAB para Links...................................66 Adicionando Comentários.....................................................92 Para dimensionar uma imagem:..63 Dividindo uma Página..............87 O Comando Salvar para a Web...................................74 Criando Sobrescritos e Subscritos............................................................................56 Criando a Fundação................................................115 Dividindo uma Imagem em Regiões Clicáveis..........................76 Marcando Mudanças de Texto........................106 Linkando para uma Âncora Específica.............................................104 Criando Âncoras................100 Adicionando Linhas Horizontais........................................60 Criando Cabeçalhos de Seção..........................................................64 Criando Spans Em Linha......65 Criando uma Quebra de Linha......Sumário Capítulo 3: Estrutura Básica de (X)HTML.....69 Sumário Tornando Texto Negrito ou Itálico......................................99 Alinhando Imagens........68 Capítulo 4: Formatação Básica de (X)HTML.........................................................................95 Fazendo as Imagens Flutuarem....................................................................................78 Centralizando Elementos em uma Página.....................61 Iniciando um Novo Parágrafo..........................................................71 Usando uma Fonte Monoespaçada...........94 Diminuindo imagens..............................................................

...........................131 Importando Folhas de Estilo Externas.................................................................altabooks......com.........................................152 Especificando Fontes Alternativas................166 Usando Letras Minúsculas...............................153 Criando Itálico...............................163 Ajustando as Propriedades do Espaço em Branco....................................................................128 Linkando Folhas de Estilo Externa.................................................................br e dicas extras em inglês em www................119 Construindo uma Regra de Estilo......................................165 Alterando Maiúsculo/Minúsculo.159 Ajustando Cor.............121 Cascata: Quando as Regras Colidem.146 Selecionando Elementos Baseado em Atributos.....................................148 Combinando Seletores.............................164 Alinhando Texto.....................134 A Importância da Localização..................139 Selecionando Elementos por ID ou Classe.................162 Adicionando Recuo.132 Usando Folhas de Estilo Específicas para Mídia.............................com 7 ...........................................................................135 A Inspiração dos Outros: CSS.........................................................................................124 Capítulo 8: Trabalhando com Arquivos de Folhas de Estilo...........................144 Selecionando Elementos de Links Baseados em Seu Estado........120 Adicionando Comentários para as Regras de Estilo...........................................................................140 Selecionando Elementos por Contexto...........160 Alterando o Fundo do Texto.....154 Aplicando Formatação em Negrito....................................................................................................................................156 Ajustando a Altura da Linha......................................................................................................................133 Aplicando Estilos Localmente...............................................................................168 Encontre os exemplos e tabelas em www.....127 Criando uma Folha de Estilo Externa.....................136 Sumário Capítulo 9: Definindo Seletores....161 Controlando o Espaçamento.......................................................................................149 Capítulo 10: Formatando com Estilos.............................................................147 Especificando Grupos de Elementos..............................151 Escolhendo uma Família de Fontes....................158 Ajustando todos os Valores de Fontes de uma Vez........................167 Decorando Texto................................................................................................................130 Criando uma Folha de Estilo Interna..............................................................122 O Valor de uma Propriedade.....................................................141 Selecionando Parte de um Elemento.........................................Sumário Capítulo 7: Construindo Blocos com Folhas de Estilo...................................................129 Oferecendo Folhas de Estilo Alternativas............................cookwood.......137 Construindo Seletores.155 Ajustando o Tamanho da Fonte..................138 Selecionando Elementos pelo Nome....................

.............................................216 Escolhendo seus Marcadores (Bullets).................................................................................208 Capítulo 14: Folhas de Estilo para Impressão...........................211 Controlando Quebras de Página..............170 O Modelo Caixa...............Sumário Sumário Capítulo 11: Layout com Estilos........190 Criando Botões Rollover............181 Controlando Onde os Elementos Flutuam........................174 Ajustando Margens ao Redor de um Elemento.........169 Estruturando Suas Páginas...............................193 Criando Menus Suspensos com Listas................................209 Criando uma Folha de Estilo para Impressão................................................................................194 Substituindo Cabeçalhos por Imagens.............................................219 Usando Marcadores Personalizados................................................................................................................................................................189 Exibindo e Ocultando Elementos............................................................................................207 Ajustando para Tela Pequena....................................................188 Capítulo 12: Efeitos Dinâmicos com Estilos.....................................................176 Adicionando Espaço Extra ao Redor de um Elemento...........................177 Compensando Elementos No Fluxo Natural.........................200 Olhando para Seu Site............214 Capítulo 15: Listas....................................................................186 Determinando Direção do Sobrefluxo...............................223 Formatando Listas Embutidas.............................................218 Escolhendo Onde Começar a Numeração da Lista.....171 Alterando o Fundo.............................184 Alterando o Cursor.........................................224 8 .....183 Ajustando a Borda.....180 Fazendo os Elementos Flutuar....178 Posicionando Elementos em Absoluto..............................................................................215 Criando Listas Ordenadas e Desordenadas.................................192 Criando Pop-ups................................206 Criando Links Extras Para Cima.........................202 Criando Folhas de Estilo para Dispositivos de Mão...187 Alinhando Elementos Verticalmente.............................................222 Criando Listas de Definição.........................204 Ocultando Elementos Estranhos..............................................................................221 Ajustando Todas as Propriedades de Estilo da Lista de uma Vez.................................................................205 Criando e Usando um Cabeçalho de Imagem.........................................................................................................................179 Afixando um Elemento à Janela do Navegador....................................220 Controlando Onde Marcadores Começam...213 Controlando Linhas Viúvas e Órfãs.........199 Mobilidade vs................. Miniaturização........210 Como Diferem as Folhas de Estilo para Impressão...........................196 Capítulo 13: Folhas de Estilo para Dispositivos de Mão....................................................172 Ajustando a Altura ou a Largura de um Elemento...............................................................................................................................................212 Imprimindo URLs de Links..............201 XHTML e CSS para Dispositivos de Mão..................................182 Posicionando Elementos em 3D.........

...............................................228 Criando uma Tabela Simples............271 Criando o Botão de Envio...............................279 Evitando que os Elementos Sejam Alterados.....com..................................280 Encontre os exemplos e tabelas em www............................253 Criando um Formulário.....................276 Ajustando a Navegação via Tecla TAB para um Formulário..........245 Dividindo sua Tabela em Grupos de Colunas.........236 Alinhando o Conteúdo de uma Célula......264 Criando Botões de Seleção...br e dicas extras em inglês em www..................................................232 Centralizando uma Tabela....240 Controlando o Espaço............................................................238 Alterando o Fundo....................................................................Sumário Capítulo 16: Tabelas................................................................................................................................................................................................................................................234 Contorno de texto pela tabela......................................251 Acelerando a Exibição da Tabela................................................268 Criando Áreas de Texto Maiores........................................................................................................................................................................270 Criando Campos Ocultos.278 Desabilitando Elementos do Formulário.......242 Expandindo uma Célula através de Colunas.............................230 Ajustando a Largura.................................260 Criando Caixas de Texto..............cookwood....................................................................................................262 Criando Caixas para Senhas....................................................................altabooks......................229 Adicionando uma Borda......................266 Criando Caixas de Seleção...274 Usando uma Imagem para Enviar Dados.......................................................................................235 Combinando Tabelas...............................252 Formulários.................................com 9 ....................227 Capítulo 17: Sumário Mapeando a Sua Página..................................................................................265 Criando Menus.....277 Adicionando Atalhos de Teclado..........................................................................................................................256 Enviando Dados de Formulário por E-mail...............................................246 Dividindo a Tabela em Seções Horizontais......263 Formalmente Rotulando Partes do Formulário......244 Expandindo uma Célula através de Linhas...................249 Controlando Quebras de Linha em uma Célula......269 Permitindo aos Visitantes Subir Arquivos............272 Reiniciar o Formulário................................................................................................254 Processando Formulários...................248 Escolhendo Quais Bordas Exibir....258 Organizando os Elementos do Formulário........................................................

.312 Chamando um Script Automático Externo..........................298 Oferecendo Seqüência..........................296 Oferecendo Pré-Visualização de um Filme..............323 Alterando uma Imagem Quando um Visitor Aponta o Mouse.......292 Alterando o Tamanho de um Filme em QuickTime............330 Declarando a Codificação de uma Folha de Estilo.....288 Embutindo Filmes QuickTime para Todos...............................................................................299 Embutindo MP3 em uma Página.............................................316 Acrescentando Informações Adicionais..............................................327 Sobre Codificação de Caracteres..302 Embutindo Windows Media....311 Adicionando um Script "Automático".....................305 Embutindo Vídeos do Google e YouTube......283 Obtendo Arquivos Multimídia......332 Salvando a Sua Página com a Codificação Apropriada...................326 Capítulo 21: Símbolos e Caracteres em Outros Idiomas..................................310 Capítulo 19: Scripts..........................................................338 10 .....................................322 Definindo o Tamanho de Uma Nova Janela..........................................................................300 Embutindo Windows Media....................308 Embutindo Outros Arquivos Multimídia...................................309 Criando um Slide Show Automático........................................................................313 Acionando um Script..............................324 Carregando Imagens em Cache.............................285 Embutindo Filmes QuickTime para Windows.........317 Ocultando Scripts de Navegadores mais Antigos....297 Adicionando Atributos para Filmes Secundários....290 Usando JavaScript para Chamar um Filme........................................................................319 Definindo a Linguagem de Script Padrão...............282 Obtendo Plugins para seus Visitantes....................333 Editando a Página com a Codificação Apropriada...............................................................................306 Inserindo Applets Java.............286 Embutindo Filmes QuickTime para Todos.................................................................321 Acrescentando Data e Hora Atuais.....................................................................Sumário Capítulo 18: Vídeo.............328 Declarando a Codificação de Caracteres de Sua Página..................................................................318 Ocultando Scripts de Parsers XML........................................295 Repetindo um Filme em QuickTime.......................................................284 Criando Links para Arquivos Multimídia........314 Criando um Botão que Executa um Script. Parte 1............................. Parte 2...........334 Acrescentando Caracteres Além da Codificação...............................320 Capítulo 20: Um Pouco de Java Script...........................304 Embutindo Flash................................................................294 Alterando a Cor de Fundo de um Filme...... além de IE.................................................... Áudio e outras Mídias..............................281 Sumário Sobre Plugins e Players...........................................................................................336 Especificando o Idioma de uma Página..............................

.............................341 Verificando as Coisas Mais Fáceis: HTML.....................361 Sobre Palavras-chave..................................altabooks.............................................................................................................................................................................................................369 Enviando Seu Site para um Mecanismo de Busca.........................................com 11 ...375 Com o que um Feed se Parece............380 Adicionando Itens para um Feed...........379 Descrevendo seu Site no Feed.....................366 Evitando que as Páginas Sejam Arquivadas.....................................................342 Verificando as Coisas Mais Fáceis: XHTML....................................363 Fornecendo uma Descrição da Sua Página.....................................................................................376 Aprontando-se para Licenciamento..............................349 Diferenças entre Navegadores.....371 Escrevendo Páginas Fáceis de Indexar..................................................................................................356 Obtendo Visitantes........345 Testando Sua Página:..394 Assinando um Feed RSS...364 Controlando Outras Informações............................................................................340 Verifique as Coisas Mais Fáceis Primeiro!..................................362 Listando Palavras-chave Explicitamente....................................br e dicas extras em inglês em www......Sumário Capítulo 22: Testando e Depurando Páginas Web..............365 Mantendo Visitantes Longe............386 Validando um Feed................372 Outras Técnicas para Promover Seu Site.....................................................339 Algumas Técnicas de Depuração.................354 Obtendo seu Próprio Nome de Domínio..397 Encontre os exemplos e tabelas em www.......370 Melhorando sua Posição ao Ser Linkado............................................367 Criando um Mapa de Site Manualmente.................348 Quando as Imagens Não Aparecem:........................................343 Verificando as Coisas Mais Fáceis: CSS....................................368 Usando Mapas de Site do Google...............................................................................................................................................396 Assinando um Podcast com iTunes........................392 Enviando um Podcast para iTunes....................................353 Capítulo 24: Sumário Encontrando um Host para seu Site.................................378 Iniciando um Feed RSS............................................................com......351 Capítulo 23: Publicando suas Páginas na Web..........................373 Capítulo 25: Licenciamento e Podcasting.........................384 Criando Podcasts para iTunes......................393 Publicando seu Feed RSS em Seu Site........................................................................382 Adicionando um anexo.....................cookwood.................344 Validando Seu Código:..355 Transferindo Arquivos para um Servidor..............................346 Quando o Navegador Exibe o Código:........................................................................................................................................................................................350 Ainda com Problemas?..................

.............................433 Editores (X)HTML.........................Sumário Apêndice A: Referência (X)HTML......419 Apêndice E: Hexadecimais.............................................................................................................437 Sumário Colofão...................................................431 Apêndice F: Ferramentas (X)HTML......399 Apêndice B: Propriedades e Valores CSS.................................................................445 12 ....................................................................................436 Índice Remissivo..................................................434 Imagens e Gráficos.417 Apêndice D: Símbolos e Caracteres (X)HTML......................................................409 Apêndice C: Eventos Intrínsecos.....................................................................436 Ferramentas Gráficas..............................................................................

enquanto há muitos programas que criarão códigos em HTML para você. você encontrará instruções claras e fáceis que lhe conduzirão através do processo de criar páginas Web passo a passo. na página do livro. É muito mais um exercício em conformidade e cuidadosa digitação do que procedimentos extremamente complicados. Você decide como será sua página. então. outras. este livro é um perfeito guia de referência. HTML não é difícil de aprender ou de dominar. É ideal para iniciantes. Você pode ter uma página simples em HTML em execução em poucos minutos. Você também encontrará no site da editora.altabooks.com. Neste livro. Se você já conhece HTML. E. escrever em HTML para si próprio significa que você não terá de estudar novos softwares nem estar limitado aos seus recursos. apresentados neste livro. que deseja começar a criar páginas Web. Você pode procurar por tópicos no índice remissivo e consultar apenas aqueles assuntos sobre os quais precisa de mais informação. adicione elementos gráficos. Algumas páginas Web pertencem a empresas com serviços à venda.br 13 Introdução Todas as páginas Web são escritas em alguma forma de HTML. Quase todo mundo pode criar seu próprio Web site e. som e vídeo e salve tudo em um arquivo de texto que qualquer computador pode ler.INTRODUÇÃO i A World Wide Web é a imprensa de Gutemberg de nosso tempo. . HTML permite que você formate texto. sem conhecimento de HTML. tabelas etc. todos os exemplos. Visite www. apresentá-lo ao público na Internet. a indivíduos com informação a compartilhar..

apresenta duas características essenciais: hipertexto e universalidade. por sua vez. 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. Muitas pessoas têm conexões de banda larga de alta velocidade por 24 horas . uma vez que você se conectou. Isso quer dizer que a informação na Web pode ser acessada de muitas direções diferentes. Não importa se seus visitantes tenham máquinas com Macintosh ou Windows. você já ouviu falar de Internet. virtualmente qualquer computador possa ler uma página Web.enquanto outros utilizam um modem para conectar seus computadores de casa durante um certo período de tempo a cada dia. Universalidade implica em. a Internet é uma coleção de computadores que estão conectados uns aos outros. o criador da Web. É uma coleção caleidoscópica e sempre em transformação de centenas de milhões de documentos. cabo ou satélite . 14 . tal como um livro.Introdução A Internet. ou HyperText Markup Language (Linguagem de Marcação de HiperTexto). já que os documentos em HTML são salvos como Arquivos de Texto Somente. A World Wide Web. Independente do tipo de conexão. 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 Web está aberta para todos. todos os quais residem em algum lugar da Internet. queria que ela funcionasse mais como o cérebro de uma pessoa e menos como uma fonte estática de dados. mas o que é isso exatamente? De maneira simples. é muito mais etérea. e são escritos em alguma forma de HTML. a Web e HTML A Internet. ou se estão em uma caixa Unix ou mesmo em um dispositivo de mão.por meio de DSL. HTML. como um Palm. a Web e HTML Certo. Tim Berners-Lee.

o maior número de visitantes poderá ver sua página o mais perto possível do modo como você as queria. enquanto você se preocupa. se você vive em um apartamento de cobertura na Quinta Avenida e eu durmo em bancos de praça. do monitor. Enquanto o Departamento de Turismo de Nova York gostaria de assegurar que todos aproveitem muito o tempo na cidade. mas Não Igual Assim é com o HTML. do software utilizado para visualizar a página: o navegador.cookwood. isso não significa que todos a veem da mesma maneira. e algumas pessoas não as aceitariam mesmo que o fizessem. . Firefox. Eu e você podemos dar um passeio por lá. Os mais populares navegadores atualmente são o Internet Explorer. como estas páginas parecerão. enquanto o HTML está aberto para todos. Assim. mas Não Igual Porém. preferindo acomodações mais simples ou a casa da irmã. lembre-se que o nosso controle é limitado.altabooks. Infelizmente. depende do tipo de computador. Você compreendeu a ideia. Mas. nenhum destes navegadores exibem uma página Web exatamente como os demais. eles não estão entregando reservas grátis para o Park Plaza Hotel. Entretanto.com. Encontre os exemplos e tabelas em www. É algo como o Central Park. por último. acontece que de nada adianta desenhar um belo parque. Apesar de que praticamente todos os computadores possam exibir páginas Web. Opera e Safari com os dispositivos de mão e PDAs ganhando popularidade a cada dia. Este livro lhe mostrará como.Introdução Aberta. nossa visão do parque será bem diferente. da velocidade de conexão à Internet e.br e dicas extras em inglês em www.com 15 Aberta. em Nova York. A moral é esta: as pessoas visualizarão suas páginas com configurações muito diferentes. é preciso se preocupar com a acomodação dos seus visitantes. Crie suas páginas de acordo com elas – assim.

pudessem apenas espiar as áreas "exclusivas". há. carrinhos de cachorro quente e idosos passeando. o problema de que pessoas de um hotel não poderiam entrar no pedaço do parque que pertence a outro hotel.org). A Microsoft começou a cercar seu próprio pedaço da Web. educando seus clientes sobre a impossibilidade de criar certos efeitos para todos os navegadores. no auge da batalha dos navegadores. escrevendo múltiplas versões de páginas para satisfazer cada navegador e. 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.Introdução A Batalha dos Navegadores A Batalha dos Navegadores Agora. jogaram a universalidade pelos ares e criaram um conjunto de extensões a HTML que apenas a Netscape poderia lidar. Ao invés de um recurso público rico. Para atrair usuários. os Web designers gastavam inacreditáveis 25% de seu tempo planejando improvisos para comandos exclusivos. Por volta de 1996. Era uma confusão. poderia reconhecer. Mas as pessoas gostaram tanto daquelas extensões que migraram para o "hotel" Nestcape. até mesmo. nada disso. quem surfava na Web usando Netscape poderia ver páginas com texto colorido. nos bancos do parque. também. fotografias e outros avanços. a Netscape Communications cravou as primeiras cercas na Web com a chamada Batalha dos Navegadores. fundado por uma coalizão de designers de alto nível desgostosos com a crescente fragmentação da Web.Webstandards. Por exemplo. a empresa adicionou extensões não padronizadas que apenas o Internet Explorer. o parque seria dividido em lotes pequenos. limitando o acesso aos seus próprios residentes. 16 . Seria muito ruim se alguns de nós. estéreis e isolados. Novamente. Aqueles que tinham qualquer outro navegador veriam erros e resultados engraçados ou. De acordo com o The Web Standards Project (www. para atrair usuários. o programa já tinha se tornado o mais popular programa de computador do mundo. cheio de patinadores. o navegador da Microsoft. simplesmente. Porém. Em 1994.

Ataques à Torre de Marfim Quase sete anos após HTML 4. entre outros). havia um crescente de vozes erguendo-se em reclamações contra a lentidão do W3C.altabooks. Opera (fabricantes dos navegadores Opera para computadores de mesa e dispositivos de mão).zeldman. “No I am not bloody sorry” (http://www. incluindo aqueles que conduziram a carga pela padronização. Adobe (fabricante de importantes ferramentas de design como Photoshop). apesar do fato de que todo navegador importante foi desenvolvido por um membro do W3C. Muitos Web designers. Mesmo sabões de marfim são 99. não há um único navegador que o suporte totalmente.org/). mas não seja um escravo perante eles. Quase oito anos depois que CSS2 tornou-se uma Recomendação Oficial. facilidade de uso.w3. não há consenso no W3C para onde prosseguir. como Google (o mecanismo de busca ultrapopular.com. O que você deve fazer. então. CSS3 ainda está no estágio Rascunho de Trabalho e. a Microsoft (cujo navegador Internet Explorer pegou o primeiro lugar da Netscape e não olhou para trás) e companhias mais modernas. talvez.org). que é o primeiro competidor que o Explorer tem depois de anos).cookwood. tentem diferenciar seus produtos com velocidade. recomendo o que sempre recomendei: moderação. em 1998). encorajaram os fabricantes de navegadores a apoiar as especificações oficiais de HTML ao máximo possível. de código aberto. criando soluções extensíveis baseadas em padrões (http://microformats.br e dicas extras em inglês em www. sentiram-se ignorados pelo W3C e seus apoiadores corporativos.01 e XHTML tornarem-se Recomendações Oficiais. e dirigida pelo inventor da Web. leia o artigo de Jeffrey Zeldman “An Angry Fix” (http://www. incluindo algumas nas especificações oficiais e removendo outras. Seu objetivo é convencer a comunidade Web da importância da universalidade enquanto tenta satisfazer sua ânsia por páginas de bela aparência. enquanto isso? Neste entretempo.Introdução A Pressão por Padrões As Nações Unidas da Web é uma organização chamada World Wide Web Consortium (www. A ideia é que estas companhias reúnam-se e concordem com padrões e.org/Consortium/Member/List) parece um Quem é Quem dos formadores de opinião da Web e inclui players de longa data.joshuaink/blog/753/ no-i-am-not-bloody-sorry). sem dizer na sua implementação. Ao mesmo tempo. frequentemente abreviado como W3C. e mais) e Mozilla Corporation (fabricantes dos populares navegadores Firefox. como a Apple (que obteve fama com iTunes e iPod. HTML 3. para que uma página escrita conforme os padrões se comportasse da mesma maneira em todos os navegadores. A lista de membros do W3C (http://www. Encontre os exemplos e tabelas em www.com/2006/07/17/anangry-fix) e o de John Orton.2: Começa a padronização A primeira resposta do W3C à fragmentação da Web foi a de padronizar as extensões exclusivas.4% puros. América Online (que absorveu a Netscape Communications quando de sua implosão. há anos de seu término. Siga os padrões. preço e outros recursos que não lancem a Web novamente em uma torre de Babel. muita ênfase no abstrato e falta de resultados concretos. Tim Berners-Lee. w3c. Para mais informações. .com 17 A Pressão por Padrões Ultimamente (meados de 2006). Seu trabalho é remover as cercas existentes e evitar novas. Alguns designers lidaram com a questão com as suas próprias mãos.

A velha versão de HTML reunia conteúdo. Sua resposta foi XML. A maioria dos navegadores voltava para trás para acomodálos. publicado em 1998 e levemente atualizado para Nível 2. as próprias páginas em HTML ainda eram confusas. Ao mesmo tempo. em particular a capacidade de posicionar elementos em uma página Web com maior precisão. porém trouxe novas funcionalidades. se desejado. HTML não era. ou CSS – para preencher a lacuna. CSS agora não só poderia recriar formatação em HTML. estes elementos seriam desaprovados. o W3C marcou a maioria dos elementos de formatação para futura remoção das especificações. As especificações originais para as Cascading Style Sheets limitavam-se. Desta forma. CSS Nível 2.1 em 2006. 18 . e seu uso. E ainda não havia nenhum sistema padrão para acrescentar novos recursos. estrutura e instruções de formatação em um único documento. 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. Porém. ou Extensible Markup Language. em grande parte. mas não muito poderoso. sempre de maneira levemente diferente. criaram o novo sistema de instruções de formatação – chamados Cascade Style Sheets. a recriar efeitos de HTML. desestimulado. poderia ser aplicada não apenas para um único parágrafo ou página Web. Daquele momento em diante. como também criar layouts de aparência profissional. assim.Introdução A Pressão por Padrões HTML 4 e CSS O passo seguinte do W3C foi muito mais audacioso. na nova versão 4 de HTML. que era simples. 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. mas para o site inteiro. entre extensões exclusivas e códigos simples e diretos. o que apenas piorava toda a situação.

que você pode usar.Introdução XML e XHTML Do lado de fora. XML não é nem um pouco leniente como o HTML. E. Seu nome? XHTML.cookwood.com 19 A Pressão por Padrões E é aí que entra a força do XML: se uma tag identifica dados. fornecer a combinação resultante de outra forma. ganhou toda a força e flexibilidade do XML. já que seu léxico inteiro veio de HTML. a informação rotulada pode ser reutilizada tão frequentemente quanto necessário. como sempre. há bilhões de páginas Web já escritas em HTML e milhões de servidores e navegadores que já sabem como lê-las. Ao invés de se perder em uma página Web baseada em HTML. talvez juntá-las com outros dados de outras fontes e. Mas. Esta nova linguagem tinha todos os recursos de HTML e. aspas. finalmente. atributos e valores. XML é uma linguagem para criar outras linguagens. ao mesmo tempo. E. estes dados tornam-se disponíveis para outras tarefas. Deveria ser o melhor dos dois mundos. Sua linguagem de marcação personalizada conterá tags que de fato descrevem os dados que eles contêm. para formatar seus documentos. para outro fim. Além do mais. . tags de fechamento e outras minúcias.altabooks. Encontre os exemplos e tabelas em www. 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. já que utilizava a sintaxe de XML. podia ser compreendida por qualquer navegador no planeta. completo com tags. ao invés de servir como uma linguagem apenas para criar páginas Web. A solução foi bem inteligente. e foi uma fundação perfeita para as CSS. Porém. XML parece muito com HTML. Você pode usar XML para desenhar sua própria linguagem de marcação personalizada. então. O W3C reescreveu HTML em XML. as pessoas que já sabiam HTML apenas tinham de conhecer algumas regras de sintaxe básicas antes de começar a programar. assim. a força vem com um preço.com.br e dicas extras em inglês em www. Um programa de software pode ser desenhado para extrair apenas as informações que precisa.

Em resumo. embora ainda apresente vários bugs clamorosos e o que. assim como o Opera 9. havia um pequeno empecilho que continuou a atormentar Web designers: adoção pelos navegadores. nunca houve um momento tão propício para se mudar com confiança para as CSS.5. agora apresenta bom suporte a CSS. Firefox 1. é importante observar que eles já fizeram muito. tem aprimorado em muito seu suporte a CSS. embora não seja ótimo. particularmente. não era realmente tão ruim. e continua a cair. parecem omissões arrogantes e obstinadas. 20 . Pena que sua base de usuários tenha caído para menos de 1 por cento. E mesmo muito destes estão usando Internet Explorer 5. o dínamo Open Source que nasceu das cinzas da derrocada do Netscape (e foi. até mesmo. No fim das contas. nos mercados de dispositivos de mão e celulares. Enquanto o número de usuários em navegadores antigos poderia ter dado às pessoas pausa para considerar uma troca para CSS. quando o assunto veio a ser a adoção séria e integral das especificações. chamado de Phoenix e Firebird no começo de sua história). este número reduziu-se para menos de 5% (alguns dizem ser menos de 2%). nenhum navegador tinha lidado ainda com esta tarefa. No entanto. a maioria dos usuários usa navegadores que suportam CSS bem ou muito bem.Introdução CSS e Adoção pelos Navegadores CSS e Adoção pelos Navegadores Enquanto XHTML e CSS são uma combinação poderosa. completamente reformado de seus dias loucos por extensões. atualmente o navegador mais utilizado. E Internet Explorer. às vezes. Embora não parecesse ser muito problema adicionar extensões de qualquer maneira. cujo suporte. cuja base de usuários está se expandindo rapidamente e é comum.5. O Netscape 6. tem excelente suporte a CSS.

uns dois bilhões de páginas depois. talvez seja hora de mudarmos nossos hábitos. mais flexível. e assim.com 21 XHTML vs. Encontre os exemplos e tabelas em www. Eu gostava de HTML.com.altabooks. Por sorte. XHTML é um grande avanço em relação ao HTML. você só quer publicar uma página simples sem se estressar até as últimas aspas. Acho que isso é tolice. É mais robusto. mais provável de ser suportado no futuro e pode ser expandido para atender a qualquer necessidade. A segunda. permite o uso das tags desaprovadas. A combinação que você escolher pode depender de muitos fatores (Continue lendo). A primeira. permite tanto o uso de tags desaprovadas quanto de quadros.Introdução XHTML vs. Eles tornaram fácil escrever páginas Web. . chamada de transitional. honestamente. mas eu. Ou. em parte. Pensei que era ótimo que você não precisasse ser obsessivo sobre pontuação. ao fato de que os navegadores nos poupam algum trabalho. frameset. há muitos estágios intermediários. mais poderoso. Agora. Às vezes. De fato. há três variações padrão tanto do HTML quanto do XHTML. Mas eu lhe direi algo. chamada de estrita. Às vezes. Você pode combinar cada uma destas variações em muitos níveis com CSS. acredito que a popularidade da Web seja devido. uma confissão. não. 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). A terceira variação. você não precisa atender a todas as necessidades. HTML: Qual Você Deve Usar? E agora.cookwood. Talvez eu seja apenas preguiçosa. proíbe o uso de todas as tags desaprovadas. todos nós fizemos.br e dicas extras em inglês em www. talvez. 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.

Nestes casos. para mais informações em seu caso particular. uma vez que seja aprovado nos testes. E assegure-se de verificar as diretrizes da companhia ou da agência a respeito. mais importante é que você use CSS e XHTML. ficamos travados como a cobra que devora o próprio rabo. assim que seus níveis de conforto com elas aumentam. podem optar por XHTML transitional. Isso significa que designers ainda não podem se beneficiar da força do XML e. você deve seguir ao máximo o XHTML estrito. Estes tipos de site provavelmente migrarão para as CSS mais poderosas. O primeiro facilita a aplicação. e uma tag desaprovada ocasional onde necessário. quando os navegadores abrirão o caminho para a padronização. o Internet Explorer 7. incluindo o governo dos EUA. junto com a poderosa formatação das CSS. isso não aconteceu. Infelizmente. O problema nasce do fato de que para XHTML ser compatível com versões antigas de navegadores. n Muitas companhias e agências governamentais. todos nós colheremos os benefícios prometidos. Se todos nós escrevermos em XHTML agora. requerem que sua página Web preencha requerimentos de acessibilidade para tornar seus sites disponíveis às pessoas com deficiência. assumirá o manto de navegador mais usado do IE6. Eis algumas diretrizes: n Quanto maior seu site. . ainda não pode compreender arquivos XHTML servidos como xhtml.Introdução Decidindo entre HTML. muito provavelmente. em http://hixie.ch/advocacy/xhtml. 22 O XHTML é considerado perigoso? Há quem questione a mudança para XHTML. enquanto confia na estabilidade de rocha do XHTML. sou a favor da mudança para XHTML e sua promessa de padronização e força. Em meados de 2006. 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. n Sites pequenos ou pessoais podem se beneficiar da fácil sintaxe do HTML. n Minha escolha pessoal é usar XHTML e CSS e o mínimo possível de tags desaprovadas. ao invés de permanecer com o HTML até que algum futuro mítico. E. será do interesse dos fabricantes de navegadores apoiar XHTML. Ele sugere que devemos permanecer com HTML até que os navegadores possam servir xhtml. Mas então. ainda pior. 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 -. aproveitando-se de algumas tgs desaprovadas que têm suporte praticamente universal. então. Pessoalmente. segundo Ian Hickson. há muitas outras opções. 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. edição e atualização da formatação através do site inteiro. que. A ideia era de que. seriam eventualmente capazes de compreender páginas XHTML servidas como xhtml. enquanto os navegadores desenvolviam-se. com formatação por CSS. o último dá à sua página a estrutura necessária para assegurar que esta dure pelo futuro. claro. XHTML e CSS: Decidindo entre HTML. n Grandes sites comerciais que querem atingir a mais ampla audiência.

ainda. ao mesmo tempo. Neste livro. Nestas explicações. novamente com as seções pertinentes destacadas em azul. com as seções pertinentes destacadas em azul. Recomendo se acostumar com a forma de exibição de outros navegadores para (X)HTML. Você pode tanto usá-las como estão (para escrever XHTML) ou optar pela sintaxe mais solta do HTML (para escrever HTML). Figura i. left: 20px. Se você já esteve em outra parte do país.altabooks.com 23 Como Este Livro Funciona </fieldset> Como Este Livro Funciona .} Figura i. assim escolhi usar a abreviação (X)HTML para referir-me às duas ao mesmo tempo.3 O XHTML e o CSS serão. padding-top: . Nestes casos. será exibido em sua própria caixa. fontsize: 90%. ensinarei HTML e XHTML.2em. mas têm uma sintaxe levemente distinta. Elas usam palavras diferentes ou as dizem com um acento diferente. você encontrará partes e trechos por todo o livro. Embora as informações sobre CSS estejam concentradas nos Capítulos 7 ao 14. Seria cansativo ter de me referir a HTML e XHTML por todo o tempo. um pouco engraçado. provavelmente percebeu como as pessoas falam. É com você. É assim com HTML e XHTML.4em. line-height: 1. Já que são tão similares.cookwood. Encontre os exemplos e tabelas em www.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. usarei a sintaxe mais estrita de XHTML (Figura i. Nos poucos casos em que uso um dos nomes individuais.2 Se o código CSS for relevante ao exemplo.2). você as compreende tão bem. elas compartilham precisamente as mesmas palavras (ao pé da letra). depois.2em} input {margin-left: 9em. bem. E.1 Em muitas páginas. você saberá que a informação pertence apenas àquela linguagem e não à outra. E.3). Embora você continue com um navegador. ainda. não há como saber qual seus visitantes usarão. isso significa ambos HTML e XHTML – como uma extensão natural e.1). você encontrará um pequeno trecho de código XHTML. mesmo se você zomba sobre isso no carro.br e dicas extras em inglês em www. incluí ilustrações dos principais navegadores tanto no Windows quanto no Mac (Figura i. explicarei o vocabulário que compartilham. próximo à parte de (X)HTML ao qual é mais aplicável (Figura i. Começo ao explicar as diferenças de sintaxe que as distingue. margim-bottom: . então. CSS é incorporado às descrições de (X) HTML – novamente. como uma ferramenta separada. #rótulo pessoal {position: absolute.com. exibidos em um ou mais navegadores para que você veja como fica na vida real (este exemplo é da página 264). por todo o livro. então.

portanto. mas através dos capítulos sobre CSS em geral. E. em suas mãos. tem 25 capítulos. que a exibição de (X)HTML e CSS mude um pouco quando o programa final for lançado. as ilustrações que mostram o Internet Explorer 7 são. Este livro expandiu-se e adaptou-se. . de fato. Isso não significa. Nos três curtos anos desde a Quinta Edição. porém. que eu lhe ajudarei a lidar no Capítulo 18. tinha 11 capítulos. de fato. É possível. em particular no Capítulo 11. a própria Web mudou dramaticamente. um ressurgimento de páginas Web sendo reescritas em CSS para ser visualizada em dispositivos de mão celulares (Capítulo 13). 6 apêndices e mais do que 450 páginas.Introdução O Que Mudou na Sexta Edição A primeira edição deste livro. 24 Internet Explorer 7 Internet Explorer 7 ainda estava em testes quando este livro estava sendo publicado e. e uma mudança para blogs frequentemente atualizados que levou a licenciamento. junto com formatação em CSS para elementos de formulário (Capítulo 17). feeds RSS e podcasting. porque. O Que Mudou na Sexta Edição O que é novo A coisa curiosa desta vez é que (X)HTML e CSS não mudaram consideravelmente. a mudança do Perl/CGI em favor de PHP. Internet Explorer 7 beta 2 e beta 3. desde a última edição. as técnicas mais padronizadas de XHTML e CSS. uma explosão verdadeira de áudio e vídeo. que veremos no Capítulo 25. vimos um amadurecimento das técnicas de layouts em CSS. 2 apêndices e. embora muitos dos outros capítulos tenham os mesmos títulos. que o livro é apenas uma reedição da edição anterior. enquanto (X)HTML e CSS têm crescido e mudado. 176 páginas. somente. as quais exploraremos com exemplos de códigos novos em folha. publicada em 1996. embora improvável. A sexta edição. todos foram completamente atualizados para abranger os últimos navegadores.

Introdução O que se foi Finalmente. Encontre os exemplos e tabelas em www.com. sobre tags desaprovadas e de pouco uso. Eu sugiro que você também os evite. WML (que foram substituídos por XHTML + CSS) e os dois capítulos sobre Velhas Maneiras.altabooks. e sobre tags de layout desaprovadas e ainda menos utilizadas.br e dicas extras em inglês em www. Eram os capítulos da Quinta Edição sobre quadros.cookwood. . também tomei a difícil decisão de remover quatro capítulos por completo. embora desaprovados.com 25 O Que Mudou na Sexta Edição Ainda que a maioria dos elementos descritos nestes capítulos ainda seja considerada válida. eles ficavam tão em desuso que poucos criadores Web que se respeitam tocariam neles. para (X)HTML.

você encontra uma lista de erros. tabelas hexadecimais e listas completas de elementos e atributos (X)HTML. Se você estiver com vontade. você encontrará um animado Fórum de Perguntas e Respostas em inglês (www.cookwood. Finalmente. Há. Sua ajuda será muito bem-vinda. atualizações. Nos encontramos na Web! 26 . Estão todos disponíveis no meu site. você encontrará e poderá baixar os códigos fonte completos para cada um dos exemplos deste livro. também. simplesmente. incluindo (X) HTML e CSS (http://www. resenhas e comentários.altabooks. sinta-se livre para entrar e responder você mesmo algumas perguntas. com/).com. O Web site VQS de HTML No site da editora. há uma equipe dedicada de Web designers que. incluindo tabelas de cor. enquanto eu escrevia este livro.com/html/qanda). também.br). onde você poderá postar as questões que mais lhe preocupam – e as mais fáceis. No meu site em inglês (www. não cabiam na página apropriada. em geral.Introdução O Web site VQS de HTML Com a Web mudando constantemente.cookwood. e de propriedades e valores CSS. são bem mais craques do que eu. vários recursos disponíveis em meu site que eu espero que vocês gostem. 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. Enquanto eu estiver por lá e esforçar-me para responder. Depois.com/html/). artigos. tabelas de símbolos e de caracteres.cookwood. reuni uma coleção de dicas menores e truques que.

OS TIJOLOS DA WEB 1 Dedicarei este capítulo para explicar cada um destes importantes conceitos. onde ambos têm propriedades idênticas. referências ocasionais para conteúdo mais complexo. praticamente. animações em Flash. uso (X)HTML para referir tanto a HTML 4 e XHTML 1. únicas para um ou para outro. Uma página Web é feita de três componentes principais: conteúdo de texto. em qualquer plataforma. qualquer navegador. como em " elemento de tabela (X)HTML". Por outro lado. Observação: Como mencionei na introdução. .0 em situações. e talvez. os verdadeiros cabeçalhos e parágrafos que aparecem na página. usarei seus nomes individuais: "XHTML requer aspas cercando valores de atributos". e marcação – instruções que descrevem como o conteúdo e as referências devem ser exibidos. para aqueles casos no qual estou destacando características especiais. sua estrutura fundamental permanece notavelmente simples. Este recurso essencial quer dizer que as páginas Web podem ser salvas em formato text-only e visualizadas em. na página 23. consulte Como Este Livro Funciona. Para mais detalhes. 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). imagens. 27 Os Tijolos da Web Embora as páginas Web tenham se tornado cada vez mais complexas. assim como o tipo de marcação que o descreve (doctype). É importante observar que cada um destes componentes consiste exclusivamente de texto. como links.

fornecerá os detalhes específicos. o nome do elemento. aquilo ali é um parágrafo e aquele outro é uma informação importante".Capítulo 1 Marcação: Elementos. novamente entre os sinais maior que e menor que) (Figura 1. o m em (X)HTML – pode incluir instruções de formatação. A seção correspondente neste livro. 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. a palavra "efêmero" será enfatizada. do elemento. ele é. Em HTML. o conteúdo. a tag de fechamento é sempre necessária. ou podem ser vazios.1). para cada elemento. . Um elemento não-vazio consiste de uma tag de abertura (o nome do elemento e os atributos. o documento é acessível quase que universalmente. atributos e valores. já que a própria marcação é composta principalmente de texto. e uma tag de fechamento (uma barra diagonal seguida pelo nome do elemento. ela é obrigatória.1 Eis um elemento (X)HTML típico. Alguns elementos têm um ou mais atributos. seguido por quaisquer atributos que possa ter. como img aqui mostra- do. dentro dos sinais de maior que e menor que). se houver. uma barra diagonal e o sinal maior que final (Figura 1. Porém. se houver. Atributos e Valores (X)HTML é um sistema engenhoso de incluir informação sobre conteúdo corretamente em um documento de texto. com um sinal menor que inicial. Neste caso. assim como detalhes sobre os relacionamentos entre as partes do documento. a barra final é opcional. que descrevem mais fundo o propósito e o conteúdo. um espaço. Esta informação – chamada marcação. Os elementos podem conter texto e/ou outros elementos. Atributos e Valores Marcação: Elementos. neste livro. não cercam nenhum conteúdo de texto. 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.jpg" width="300" /> Um espaço e a barra diagonal Figura 1. às vezes opcional. o que na maior parte dos navegadores quer dizer que será exibida em itálico. Em XHTML. (X)HTML tem três principais tipos de marcação: elementos.2). Eles têm uma tag simples que serve tanto para abrir como para fechar o elemento. Mais adiante. <img src="blueflax. As tags de abertura e de fechamento cercam o texto que será afetado. Em HTML.2 Elementos vazios. também falaremos de declarações (consulte página 40) e entidades (consulte página 336). Um elemento vazio aparece como uma combinação de tags de abertura e de fechamento. Em XHTML.

devem conter valores da forma de URL. embora eu lhe recomende sempre usá-las. 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. Figura 1. Em XHTML. isso não importa).altabooks. A ordem é irrelevante. Em HTML. Você pode encontrar instruções para criar suas mas você não pode criar um valor para ele. como a altura do texto ou a largura de uma imagem. um valor de atributo deve sempre estar dentro de aspas. próprias cores hexadecimais. o atributo medefinidos.com 29 Marcação: Elementos. portanto. Em XHTML.com. Você pode encontrar Figura 1.jpg" width=”300” /> Atributos e Valores . Por exemplo. Falaremos mais sobre URL a partir da página 35. Alguns atributos podem aceitar quaisquer valores.cookwood.5). entre outros. pode receber um ou mais atributos. Atributos e Valores <img src="blueflax. Muitos atributos requerem um número ou um percentual para seus valores. cada qual com seu próprio valor.br e dicas extras em inglês em www. <link rel="folhadeestilo" type="text/css"eles são entendidos como pixels. às vezes. Veja que (X)HTML não suporta valores numéricos ou percentuais para cor.3 Eis um elemento td (para uma célula de tabela) com um simples par de valor-atributo. Talvez o mais comum sejam aqueles que aceitem valores numéricos ou pré-definidos.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.5 Alguns atributos apenas aceitam uma lista dos dezesseis nomes de cor prévalores específicos. Onde as unidades são aplicáveis. valores numéricos sempre são escritos em letras minúsculas (em HTML.3 e 1. handheld ou print. Separe cada par de valor-atributo do seguinte com um espaço. Encontre os exemplos e tabelas em www. o endereço único de um arquivo na Web. Um valor numérico nunca inclui unidades. Alguns atributos fazem referência para outros arquivos e. na página 126. particularmente aqueles que descrevem tamanho e extensão. ou Uniform Resource Locator (Localizador de Recursos Uniforme).Os Tijolos da Web colspan é um atributo de td <td colspan="3">Fevereiro</td> O valor do atributo colspan Figura 1. assim como uma seleção de cores dia no elemento link pode ser ajustado para hexadecimais na capa interna ao fim deste livro screen. as aspas podem ser. omitidas (consulte a página 38). outros são mais limitados. Seus valores devem sempre estar dentro de aspas. Atributos são sempre localizados dentro de uma tag de abertura do elemento. media="screen" href="blueflax. deixe-me dar uma idéia dos tipos de valores que você encontrará. você deve selecionar um valor de uma lista padrão de escolhas (Figura 1. verde e azul da cor.4 Alguns elementos. Enquanto você encontra detalhes completos sobre os valores aceitáveis para cada atributo neste livro. Em outras palavras. como o img aqui mostrado.4).

outros elementos nível de parágrafo. mas parece ser uma categoria tão pequena que dificilmente requerem discussão além do Capítulo 15. podem. 2002 by Blue Flax Society. será exibido na linha atual. Listas).6 Os elementos nível de parágrafo. Se for linha. 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. aqui exibidos destacados em negrito. Figura 1. Linha Um elemento pode ser nível de parágrafo ou linha. São a própria definição de <em>efêmero</em>.Capítulo 1 Parágrafo vs. (Os elementos também podem ser itens de lista. Elementos de linha. Os elementos de linha.jpg" alt="Blue Flax (Linum lewisii)" width="194" height="174" /> <p>Sempre fico surpresa com as belas e delicadas Blue Flax que. 30 . mas nem uma única flor resiste à tarde. aparecem em meu jardim.</p> </div> Figura 1. sempre será exibido em uma nova linha. conter apenas elementos de linha e texto. como tal. de alguma forma. <div><img src="blueflax.7 Cada elemento nível de parágrafo começa em uma nova linha. Elas são abundantes de cor todas as manhãs. destacados mas não em negrito. que são considerados distintos dos nível de parágrafo e de linha. como a próxima palavra em um parágrafo. elementos de linha e texto. por outro lado. são img e em. podem conter. geralmente.</p> <p>&copy. como um novo parágrafo em um livro. 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. Se for nível de parágrafo. são div e p. Os elementos de linha (neste caso. geralmente.

cada elemento pode ser apropriadamente embutido. especificamente. que está inteiramente contido dentro de seu pai. depois B e. É importante observar que. O em é filho do primeiro p e. quando os elementos contêm outros elementos..9 Os elementos devem ser embutidos corretamente.8 O elemento div é pai dos elementos img e todos os p. Tijolos de Folhas de Estilo) e aplicar efeitos JavaScript a eles (brevemente discutidos. criar uma família em uma página Web. Atributos e Valores Correto (sem linhas sobrepostas) Se um elemento contém outro. O primeiro elemento p é pai da tag em. o elemento pai (Figura 1. os elementos img e todos os p são filhos (e descendentes) de div..altabooks.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.pela Blue Flax Society</p> </div> Figura 1. Sempre que você usar uma tag de fechamento. ./> <p>. você deve fechar em antes de p. que é o elemento filho. ela deve corresponder à última tag de abertura aberta.. de <em>efêmero</em> </p> <p>. Se você abre p e depois em. Figura 1. Por outro lado. descendente (mas não filho) de div.com. então.8). Em outras palavras.. Um Gosto de JavaScript)....Os Tijolos da Web Pais e Filhos <div> <img src="blueflax.com 31 Marcação: Elementos. na verdade.br e dicas extras em inglês em www.de<em>efêmero</em></p> <p>. também. <p>.. Quaisquer elementos contidos no elemento filho são considerados descendentes do elemento exterior.9). que tanto mostra os relacionamentos hierárquicos entre cada elemento na página e..jpg" . feche B e então. ele é considerado pai do que estiver embutido. primeiro abra A. identifica cada elemento. A. Encontre os exemplos e tabelas em www. (Figura 1.. no Capítulo 20.cookwood. Você pode.

Embora você possa ainda usar referências de caracteres é. Elas são abundantes de cor todas as manhãs. como &eacute. Símbolos e Caracteres em Outros Idiomas). numerais e alguns dos símbolos mais comuns. para o símbolo de copyright. o texto em uma página (X)HTML tem algumas diferenças importantes. São a própria definição de <em>efêmero</em>. tudo do lado de fora da marcação. consulte Adicionando Caracteres Além da Codificação. então. Observe que cada linha é separada com um retorno. 32 <div><img src="blueflax. 2002 by Blue Flax Society. Porém. HTML costumava ficar restrito a caracteres ASCII – basicamente as letras do idioma inglês. e muito mais – documentos codificados com Unicode são compatíveis com os navegadores e os editores de texto existentes. Dado que este símbolo tem um significado especial em (X)HTML. (para ©). . O Conteúdo de Texto de uma Página Web Primeiro. aparecem em meu jardim. você tem duas opções. Atualmente. principalmente para começar estas referências de caracteres.11). codificar seus arquivos (X)HTML em Unicode (e. talvez. (para é) ou &copy. não importa como eu salve o documento. basicamente. consulte o Capítulo 21. o ingrediente mais básico em uma página Web. com UTF-8). mais fácil simplesmente digitar a maior parte dos caracteres como são e. o símbolo deve sempre ser expressado como &amp. enquanto os navegadores que compreendem Unicode exibirão a porção que não é ASCII também (para mais detalhes.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 (©). na página 336. Figura 1. Se você já usou um processador de texto. frequentemente.Capítulo 1 O Conteúdo de Texto de uma Página Web O texto contido dentro dos elementos é.jpg" alt="Blue Flax (Linum lewisii)" width="194" height="174" /> <p>Sempre fico surpresa com as belas e delicadas Blue Flax que. Também.</p> </div> Figura 1. quando usado como texto. Porque Unicode é um super conjunto de ASCII – é tudo o que ASCII é. Os navegadores que não compreendem Unicode interpretam a porção ASCII do documento apropriadamente. (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. Caracteres acentuados (comuns em muitos idiomas da Europa Ocidental. Depois. Para mais informações.10 O conteúdo de texto é. O único símbolo que você não deve digitar diretamente é &. como o português) e muitos símbolos do dia-a-dia têm de ser criados com referências de caracteres.10 e 1. utilizei uma referência de caractere especial &copy. você já digitou algum texto.</p> <p>&copy. de alguma forma. particularmente. mas nem uma única flor resiste à tarde. para assegurar que seja exibido apropriadamente. como em AT&T.

encontradas ao longo de tantas estradas e rodovias que são.jpg. porém. há uma referência a um arquivo chamado tigerlily. às vezes. são referenciados de uma página Web.com.com 33 Links. Falaremos de imagens no Capítulo 5.</p> </div> Figura 1.12 Neste Claro. Já que a referência nada mais é do que texto. e o navegador os exibe junto com o texto. simplesmente.altabooks. abrir e carregar com o restante da página. referenciados a partir de dentro da página. Eles não podem. Imagens e Outros Conteúdos que Não Texto .13 Imagens. chamadas de <em>Lírios de Valas</em>. no Capítulo 18. músicas em MP3 e mais. Áudio e outras Mídias. escondem-se na grama com suas cores pulando em você quando menos se espera. Ao invés de efetivamente anexar os arquivos no arquivo em (X)HTML. necessariamente. Imagens. Imagens e Outros Conteúdos que Não Texto documento (X)HTML. 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. estes arquivos são salvos separadamente e.cookwood. e trataremos de plugins e aplicativos auxiliares. 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.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. manusear qualquer outro tipo de arquivo.</p> <p>&copy. Links. que o navegador irá acessar. Vídeo. Encontre os exemplos e tabelas em www.</p> <p>São tão onipresentes como o tigre verdadeiro é raro. as imagens. Se você referenciar um arquivo que o navegador de seu visitante não compreender.br e dicas extras em inglês em www. o que faz a Web tão vibrante são os links de uma página para outra. 2006 by Blue Flax Society. filmes em QuickTime. Figura 1. o arquivo (X) HTML permanece universalmente acessível. e outros conteúdos que não texto. A maioria dos navegadores pode manusear links e imagens sem muito problema. as animações em Flash.

Praticamente todos os demais pode usar tanto . http://www. Se a página já tem alguma outra extensão.com/PaginasWeb/ TORTURA/Pena_Capital. n Apenas as pessoas que ainda usam Windows 3. encontrar sua página. uma página Web tem um nome de arquivo que a identifica para você. o navegador a tratará como texto e mostrará todo o seu belo código ao visitante. "E agora.html. era um C maiúsculo ou minúsculo?". 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. que lhe ajudarão a organizar seus arquivos. Há algumas dicas para se lembrar quando atribuir nomes de arquivo para suas páginas Web. 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: . n Amigos do Windows.htm ou . ao todo) estão limitadas a . seus visitantes e para os navegadores Web de seus visitantes. Mude suas Opções de Pasta. como. se necessário. ". O segredo é coerência. estejam cientes que o Windows nem sempre revela a extensão real do documento. Mesclar letras minúsculas com maiúsculas dificulta a digitação do endereço apropriado para o seu visitante e.htm. também. você pode poupar erros de digitação (e dores de cabeça) ao usar apenas letras minúsculas em seus nomes de arquivo. assim. para evitar ter de se lembrar qual você usou. para que você possa ver as extensões.14 Lembre-se de utilizar sempre letras minúsculas para os seus nomes de arquivo e de adicionar .htm ou .Capítulo 1 Nomes de Arquivos Como qualquer outro documento de texto.htm quanto .html sem problemas. por exemplo. 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. 34 nome de arquivo. seus visitantes (e você) não terão de perder tempo imaginando.html com coerência.seusite.1 (que são seis.txt". 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. Apenas siga a mesma linha. apenas em letras minúsculas Extensão pena_capital.html Nomes de arquivo com letras maiúsculas são complicados de digitar e de comunicar Figura 1. tornálos mais fáceis para seus visitantes encontrar e acessar suas páginas e assegurar que seus navegadores visualizem a página corretamente. Se você não usa letras maiúsculas.15 Use sempre letras minúsculas para os seus diretórios e pastas também.html Figura 1.html Pena_Capital. .

corresponde à página inicial).altabooks.site.html" Nome do arquivo Figura 1.com. Barra diagonal rastejadora "http://www.16 Sua URL básica contém um esquema. para páginas Web seguras. Esquema Nome do servidor Caminho "ftp://ftp. É utilizado para acessar páginas Web (Figura 1.br e dicas extras em inglês em www.com " URL para um endereço de e-mail inclui o esquema mailto seguido de dois pontos. Figura 1.html. O esquema mais comum que você verá é HTTP.19 Uma Esquema Letra do Disco "file:///c|/caminho/home. então. o navegador começará uma transferência FTP do arquivo prog. Ele contém informações sobre onde um arquivo está e o que um navegador deve fazer com ele. Sempre digite os esquemas em letras minúsculas.com/pub/prog.com/liz/" Figura 1. Figura 1. Alguns nomes de arquivo padrão comuns são index. uma URL termina em uma barra diagonal rastejante sem nenhum nome de arquivo dado (Figura 1. geralmente. Mailto e News são exceções.com 35 URLs Figura 1.cookwood. é um nome bacana para endereço.html" Barra Vertical Caminho e nome do arquivo Uniform Resource Locator (Localizador de Recursos Uniforme). use o esquema file. A primeira parte da URL é chamada esquema.Os Tijolos da Web Esquema Nome do servidor Caminho "http://www. o diretório liz).20).exe. Encontre os exemplos e tabelas em www.18). levam apenas dois pontos. o próprio endereço de email. o nome do servidor. Veja que o esquema File usa três barras. ou URL.site. Neste caso. para enviar e-mail (Figura 1. mas sem barras diagonais e. use file:///DiscoRígido/caminho/ nomedearquivo. ou Protocolo de Transferência de Arquivos). seja o computador local. Cada arquivo na Internet tem uma única URL.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. A barra vertical não é necessária (isto também funciona às vezes para o Windows).html ou default. Ela diz ao navegador como lidar com o arquivo que está prestes a abrir.20 Para referenciar um arquivo em uma máquina local Windows. frequentemente chamada de index.17). seguido pelo caminho que leva ao arquivo e o próprio nome do arquivo. Isso porque supõe-se que o hospedeiro. Outros esquemas comuns são HTTPS. para baixar arquivos (Figura 1. Mailto. o caminho e o nome do arquivo.18 Quando URLs . A segunda parte da URL é o nome do servidor onde o arquivo está localizado. a URL refere-se ao arquivo padrão no último diretório no caminho (que.htm.html e default. ou Hypertext Transfer Protocol (Protocolo de Transferência de Hiper Texto).19) e File.mailto Esquema Scheme Endereço de e-mail Email address " mailto: htmlhelp@cookwood. que em outros esquemas vai entre a segunda e a terceira barras. para acessar arquivos em um disco rígido local ou redes de compartilhamento de arquivos locais (Figura 1. FTP (File Transfer Protocol.16). Às vezes. Para Macintosh. Um esquema geralmente é seguido por dois pontos e duas barras diagonais.site.exe" Nome do Arquivo o usuário clica nesta URL.com/liz/arquivo.

neste caso .html (nenhum. incluindo o esquema.html www.Capítulo 1 URLs Absolutas URLs podem ser tanto absolutas quanto relativas.remoto. pasta/dir =imagem. servidor =www.gif www.html. rua e número. Uma URL absoluta é análoga a um endereço físico completo.com/info/data. Não importa de onde uma carta seja enviada.com/bcn/info. estado. uma URL absoluta parecerá exatamente a mesma. Uma URL absoluta mostra todo o caminho para o arquivo.html URLs =informação =bcn =info.com/pub/inicio. URLs absolutas não se importam com onde estão localizadas. 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. você sempre usará uma URL absoluta.html inicio. cidade. use absoluta) URLs Absolutas vs URLs Relativas 36 . Em termos de URL.remoto. ou qualquer tipo de URL que não use um protocolo HTTP.gif =www. Em outras palavras. o caminho completo e o próprio nome do arquivo.site.site.21 Nome do arquivo URL absoluta (pode ser usada em qualquer lugar) URL relativa (funciona apenas em voceestaaqui.html pasta/dir =imagens servidor Quando você está referenciando um arquivo do servidor de alguém.com/Web/index.html =voceestaaqui.gif data.html www. incluindo nome. Você também precisará de URLs absolutas para sites FTP.html O documento que contém as URLs – voceestaaqui. o correio sempre será capaz de encontrar o destinatário.com =web pasta/dir pasta/dir =index. CEP e país.html www. Figura 1.html) index.é o ponto de referência para URLs relativas.remoto.html image.site.html =dados.com/Web/images/image.html (nenhum: use absoluta) info. o nome do servidor.html index..html ./info/data.com =pub pasta/dir =inicio.html www.site. as URLs relativas são relativas àquela localização do arquivo no servidor.gif images/image.