(HELDER DA ROCHA) Criação de Web Sites I

Helder da Rocha
Criao de
Web Sites I
Web e Internet Web design Tecnologias de apresentao
Rev.: CWS1-03-2000/01 A4
Copyright 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra esto protegidos pela Lei 9.610/98 (Lei de Direitos Autorais). Nenhuma parte desta publicao poder ser reproduzida ou utilizada em outros cursos sem a autorizao, por escrito, do autor. Alunos, professores ou funcionrios de instituies educacionais ou filantrpicas podem requerer autorizao gratuita para a reproduo deste material para uso prprio, ou para uso em treinamentos sem fins lucrativos. O autor pode ser contatado atravs dos endereos eletrnicos hlsr@uol.com.br ou helder@ibpinet.net. Este livro faz parte da srie Criao de Web Sites de propriedade de Helder Lima Santos da Rocha. Esta edio destina-se exclusivamente ao uso como material didtico do curso Formao WebDesigner, da IBPI Software e Servios Ltda. e no pode ser vendida separadamente nem utilizada como material didtico de outros cursos. Embora todos os cuidados tenham sido tomados na preparao deste livro, o autor no assume responsabilidade por erros e omisses, ou por quaisquer danos resultantes do uso das informaes nele contidas. Web Site: http://www.ibpinet.net/helder/wd/cws1/ Capa, editorao eletrnica e reviso: o autor. Cdigo desta edio: CWS1-03-2000/01 (Primeira edio) Formato: A4 apostila (numerao de pginas por captulo). Responsvel por esta tiragem: IBPINET So Paulo Tiragem desta edio: 80 cpias (juntamente com a edio 0 para a IBPINET). R672s Rocha, Helder Lima Santos da, 1968Criao de Web sites I tecnologias de apresentao. 1a. edio com tiragem limitada e autorizada apenas para cursos da IBPINET realizados at 31/12/2000. 140 p. A4. Acompanha disquete ou CD de 3 ou Web site com cdigo e exemplos. Reproduo: IBPINET So Paulo, SP, Maro de 2000. 1. Web design criao e apresentao de contedo interativo para a World Wide Web. 2. HTML HyperText Markup Language (linguagem usada para criar pginas). 3. CSS Cascading Style Sheets (linguagem usada para controlar forma). 4. World Wide Web (servio de recuperao de informaes da Internet) Programao. 5. Internet (rede de computadores, meio de comunicao) Programao. I. Ttulo: Criao de Web Sites I Tecnologias de apresentao. II. Srie. CDD 005.133
Quaisquer marcas registradas citadas nesta obra pertencem aos seus respectivos proprietrios.
ii
Contedo
Apresentao Prefcio Parte 1: Web e Internet

1. Introduo 2. Criao de Web sites
Parte 2: HTML
1. Fundamentos do HTML 2. Pargrafos e blocos 3. Listas 4. Imagens 5. Formatao de caracteres (inline elements) 6. ncoras e Vnculos 7. Tabelas 8. Elementos deprecados 9. Testes
Parte 3: Folhas de Estilo

1. Introduo 2. Regras Bsicas 3. Fontes 4. Atributos de texto 5. Cores 6. Propriedades de classificao 7. Controle de blocos
iii
8. Posicionamento 9. Exerccios
Parte 4: Recursos Avanados

1. Layout com tabelas 2. Frames 3. Multimdia 4. Applets Java 5. Exerccios
Apndice A Bibliografia
iv
Apresentao
Web design (web = teia, design = projeto) , em ingls, o nome da arte milenar praticada pelos seres artrpodes da ordem Aracneae, ou aracndeos, mais popularmente conhecidos como as aranhas! Essa seria uma boa definio para o termo web design h 10 anos! Hoje, Web design a arte de tecer um outro tipo de teia, razoavelmente organizada, para depois lig-la a uma teia enorme, muito desorganizada e catica, e que no controlada por nenhuma aranha individual: a World Wide Web. Web design , portanto, a concepo e projeto de colees de pginas de informao e aplicaes interativas, mantidas no ar por um programa chamado de servidor Web, o mesmo que mantm cada site acessvel atravs da World Wide Web. Na poca em que as aranhas perderam a exclusividade da sua arte, a administrao da Web cabia a programadores que precisavam codificar toda a informao de texto usando uma linguagem: o HTML, para depois armazen-las em uma rea especial de uma mquina Unix, onde rodava um servidor Web. O Web design na poca era totalmente dependente do HTML. Pouco tempo depois, com a chegada da Web grfica, as imagens tornaram a teia ciberntica um pouco mais colorida. Hoje, a arte de criar pginas Web continua a exigir mais e mais conhecimentos de programao... programao visual! Saber HTML hoje menos importante que saber organizar informao graficamente, em um meio dinmico e heterogneo que tem altura, largura e profundidade. A criao das pginas para a Web hoje se assemelha mais editorao eletrnica que programao. Os programadores no esto mais codificando HTML. Eles agora se preocupam com Java, Perl, ASP e outras linguagens de verdade. So os designers que tomaram conta da Web, e agora eles querem domin-la. Mas no fcil dominar algo que muda todos os dias. Os caminhos do Web design so bem diferentes daqueles seguidos na criao para mdia impressa, de onde vm muitos designers de interface. O Web designer deve conhecer no s as possibilidades do meio onde publicar a sua informao, como tambm, e principalmente, suas limitaes. Novas tecnologias nem sempre podem ser aproveitadas. O que melhor, nem sempre vivel. A arte do Web design consiste em aproveitar ao mximo os recursos oferecidos pela Web, garantindo a melhor apresentao, navegabilidade e interatividade de um Web site, dentro dos limites impostos pelo meio. necessrio atrair os visitantes e estimul-los a voltar outras vezes. s vezes necessrio sacrificar a qualidade da apresentao ou deixar de usar algum recurv
so til devido a lentido da rede ou incompatibilidades de navegadores problemas tpicos desse meio. importante que o Web designer aprenda a traar uma linha de equilbrio entre os impedimentos tecnolgicos e as possibilidades criativas dessa nova mdia, para tirar o maior proveito do seu potencial. preciso estar mais atento s novas tecnologias, s novas verses dos navegadores e demora dos velhos navegadores em desaparecerem totalmente que qualquer recurso oferecido por uma nova ferramenta de desenvolvimento. A Web aberta e as tecnologias que a sustentam tambm so abertas e gratuitas. Um Web designer no deve ser limitado pelos recursos tecnolgicos que tem disposio, nem pelas ferramentas que permitem que ele no precise se preocupar com tais recursos. O bom Web design comea longe do computador. Planejar a estrutura da teia e sua identidade com base nos objetivos que se destina (comercio, informao, promoo, intranet, captura de insetos) antes de iniciar a implementao libera a criatividade, preserva o conceito por trs do design da interface e diminui os limites impostos pela tecnologia. Por outro lado, conhecer as tecnologias envolvidas e no se contentar em apenas usar os recursos oferecidos pelas ferramentas que as escondem essencial para o Web designer que deseje dominar a Web, e no ficar eternamente nas mos dos que desenvolvem tais ferramentas. O objetivo deste curso oferecer os conhecimentos necessrios para formar esse tipo de Web designer, que sabe projetar o visual, identidade e estrutura de navegao de um site e ao mesmo tempo conhece as tecnologias que as suas ferramentas esto gerando, para que possa, quando for preciso, super-las.
vi
Prefcio
Este material didtico contm textos selecionados e organizados especialmente para o curso Criao de Web Sites I. A finalidade deste material servir de apoio ao curso como fonte de informaes tericas e exerccios. A finalidade do curso Criao de Web Sites I capacitar o aluno a desenvolver Web sites eficientes, de fcil manuteno, esteticamente atraentes, navegveis, acessveis e compatveis com os navegadores do pblico-alvo ao qual se destinam. O curso concentra-se nas tecnologias utilizadas para o desenvolvimento de sistemas de informao em hipertexto: HTML e CSS e tambm discute aspectos de design e acessibilidade. O curso Criao de Web Sites I o primeiro de uma seqncia de trs cursos, de igual durao, que exploram a maior parte das tecnologias essenciais e de domnio pblico para criar Web sites interativos. No faz parte do programa desses trs cursos o tratamento de imagens para a Web, o uso de ferramentas grficas e de produtividade, nem o projeto supervisionado de um site enfatizando critrios de design. Tais assuntos, importantes em um programa completo para formao de um Web designer, podero ser abordados em outros cursos (e realizados na seqncia ou paralelamente.)
O que voc j deve saber

Para ter o melhor rendimento neste curso, voc dever saber: usar um computador PC/Windows, Macintosh ou Unix (copiar arquivos, remover arquivos, mudar o nome de arquivos, criar diretrios, mudar de diretrio, rodar aplicaes). conectar-se e navegar na Internet usando um navegador. usar um editor de textos para alterar e criar novos textos.
O laboratrio onde este curso ser ministrado em geral s contm um tipo de computador (PC, Mac ou Linux consulte a coordenao do curso para saber qual). Usurios de outros sistemas devero revisar as tarefas bsicas do sistema disponvel no laboratrio antes de iniciar o curso de forma a obter o melhor rendimento em sala de aula.
vii
No Web site dedicado a este curso (veja pgina de copyright) h links para material adicional de referncia, aplicativos (para Linux, Macintosh e Windows) usados em sala de aula e alternativas, programa do curso (datas) e outras informaes.
Descrio do contedo
Esta apostila consiste de quatro partes. A primeira traz uma introduo Web e Internet, com a definio de conceitos essenciais que sero usados ao longo do curso e aspectos importantes do desenvolvimento de Web sites. A segunda parte trata exclusivamente da tecnologia HTML que ser apresentada de forma interativa. Ela no cobre todo o HTML, mas apenas mostra como usar os principais descritores HTML e seus atributos mais importantes, destacando o uso de tabelas, vnculos e imagens com diversos exemplos e ilustraes. A terceira parte introduz a linguagem CSS, usada para criar sites controlados por folhas de estilo. Com essa tecnologia possvel ter controle quase absoluto sobre a aparncia de um site, com vantagens que facilitam a manuteno, tornam o site mais leve e acessvel e permite o suporte a tecnologias interativas como o DHTML (Dynamic HTML). A quarta e ltima parte apresenta aspectos avanados do HTML como o uso de tabelas para organizar o layout de pginas, o uso de imagens para espaamento, janelas com mltiplos documentos (frames), imagens mapeadas, udio, vdeo, plug-ins e applets Java. Esta apostila no contm tudo sobre HTML 4.0 e CSS. Para complement-la voc deve fazer o download de guias de referncia completos disponveis na Internet. Veja no site deste curso os endereos onde eles podem ser encontrados. Ao longo do curso, anexos podero ser distribudos (ou colocados na Internet para download) para complementar ou atualizar assuntos que eventualmente precisem ser tratados em maior detalhe.
Programa do curso
O programa do curso cobre a maior parte dos assuntos discutidos nesta apostila, mas no todos. Alguns assuntos so temas de outros cursos e esto na apostila apenas para servir de referncia. O programa abaixo no esttico. A ordem e profundidade dos assuntos abordados em sala podero ser modificadas pelo instrutor, visando o melhor aprendizado e o cumprimento dos objetivos do treinamento. 1. INTRODUO PLATAFORMA WEB: Conceitos essenciais. Tpicos: Princpios de Internet/Intranet, A Web e a Internet, Protocolos, Servios, A plataforma Web, Arquitetura da Web, Browsers e servidores, HTTP, HTML e URI (URL). Testes 2. HTML - HYPERTEXT MARKUP LANGUAGE: Introduo prtica linguagem declarativa usada para a descrio da estrutura de uma pgina de hipertexto. Tpicos: Tecnologias de apresentao, HTML e CSS, Fundamentos do HTML 4, Blocos e pargrafos: <P, <Hn>, ..., Listas <UL>, <OL>, <LI>, Texto <B>, <I>, <SPAN>, ...,
viii
Vnculos <A>, Imagens <IMG>, Tabelas <TABLE>, <TR>, <TD>, <COL>. Testes e exerccios 3. CSS - FOLHAS DE ESTILO: Linguagem declarativa usada para a definio do estilo e aparncia de um Web Site ou pgina. Tpicos: Fundamentos de folhas de estilo, Regras e Sintaxe, Propriedades do CSS, Cores e imagens de fundo, Fontes, Margens e posicionamento. Testes e exerccios. 4. RECURSOS AVANADOS DO HTML: Frames, imagens mapeadas e recursos de estilo para sites cujo pblico-alvo no suporta HTML 4 ou CSS. Tpicos: Imagens mapeadas, frames, layout com tabelas, estilos com HTML. Exerccios. Projetos usando HTML e CSS. Testes, exerccios e projetos podero ser propostos para a realizao fora do horrio de aula. Reserve pelo menos algumas horas por semana para dedicar-se a eles. Exerccios adicionais, alm de testes e projetos para avaliao (obrigatrios em alguns cursos), estaro disponveis no Web site dedicado ao curso (veja pgina de copyright).
Mdia eletrnica e atualizaes

Todos os exemplos, exerccios resolvidos e solues de alguns exerccios propostos esto ou distribudos em um disquete ou CD que acompanha este livro ou disponveis na Internet. Veja na pgina de copyright (logo aps a capa desta apostila) qual o endereo na Internet onde os arquivos deste curso se encontram disponveis para download.
Crticas e sugestes
Os textos contidos nesta edio esto sempre sendo revisados, atualizados e ampliados periodicamente e cada vez que so utilizados em cursos. Cuidados foram tomados para garantir a apresentao dos assuntos de forma clara, didtica e precisa, mas eventualmente podem escapar erros, imprecises e trechos de pouca clareza. Sugestes, crticas e correes so sempre bem vindas e podem ser enviadas por e-mail a hlsr@uol.com.br ou helder@ibpinet.net. Sua opinio muito importante e contribuir para que futuras edies possam ser cada vez melhores.
Helder L. S. da Rocha So Paulo, 16 de maro de 2000.
ix
Criao de Web Sites I
e Internet
Parte 1 Web e Internet
Contedo
1. Introduo............................................................................................................... 3
1.1. Breve histria da Internet ............................................................................................3 A rede acadmica .................................................................................................................3 O surgimento da Web .........................................................................................................4 O poder da Web como meio de comunicao ................................................................5 1.2. Como funciona a Web e a Internet ............................................................................5 Protocolos .............................................................................................................................5 Endereos Internet ..............................................................................................................7 Servio de Nomes (DNS Domain Name Service).......................................................7 Portas e servios da Internet ..............................................................................................8 A Web entre os servios da Internet.................................................................................8 1.3. A plataforma Web.........................................................................................................9 Hipertexto .............................................................................................................................9 HTML....................................................................................................................................9 Servidor HTTP...................................................................................................................10 URIs (URLs) .......................................................................................................................11 Browser................................................................................................................................12 Tipos MIME .......................................................................................................................12 1.4. Tecnologias de Apresentao....................................................................................13 HTML..................................................................................................................................13 Histrico do HTML ..........................................................................................................14 HTML 4 e CSS ...................................................................................................................15 XML e XSL.........................................................................................................................15 1.5. Exerccios .....................................................................................................................16
2. Criao de Web Sites............................................................................................ 19

2.1. Quais ferramentas existem para criar e manter sites? ............................................19 Editores grficos (WYSIWYG) .......................................................................................19 Editores de texto ................................................................................................................20 Editores de HTML ............................................................................................................20 2.2. Por que se preocupar com o perfil dos visitantes?.................................................21 2.3. Por que aprender HTML? .........................................................................................21
1. Introduo
O objetivo deste captulo definir os termos e definies essenciais relacionadas com a Web e a Internet. As informaes deste captulo no so essenciais para a criao de pginas, mas conhec-las uma vantagem que dar maior poder ao Web designer, pois entendendo como funciona o meio no qual ir publicar seus sites, ter melhores condies de detectar e solucionar os problemas que surgirem na publicao e manuteno deles.
1.1. Breve histria da Internet

A Internet uma rede antiga. Tem mais de 30 anos de idade. Uma das pessoas que teve um papel decisivo na sua criao, embora nunca seja lembrado por isto, foi o presidente cubano Fidel Castro. Os Estados Unidos tinham passado por uma possibilidade real de ataque nuclear depois da instalao de msseis russos em Cuba e a interligao das bases militares em rede foi uma estratgia militar para proteger a comunicao em caso de ataque. Ela ligava mquinas diferentes entre si atravs de linhas redundantes de maneira que, mesmo que uma ou vrias bases fossem reduzidas a p, as outras estaes ainda conseguiriam se comunicar entre si. Ento, com medo que Fidel e seus charutos nucleares paralisassem o sistema de defesa do pas foi criada a rede ARPANET (Advanced Research Projects Agency Network). A rede interligou vrios computadores em algumas universidades e centros de pesquisa envolvidos com projetos militares. Na poca, computador ainda era coisa rara. Computador em rede, mais raro ainda.
A rede acadmica
Os primeiros usurios (cientistas) usavam a rede para trocar mensagens de correio eletrnico e ligarem-se remotamente a computadores distantes. O servio tornou-se to til que as universidades envolvidas comearam a ligar seus departamentos, mesmo os que no tinham nada a ver com o projeto. Na dcada de 80, foi a vez da NSFNET, a rede nacional de pesquisa dos Estados Unidos, que conectou os cinco grandes centros regionais de supercomputao e passou tambm a fazer parte da ARPANET. A NSFNET se tornou espinha dorsal das duas redes, depois chamada de Internet. A NSFNET levou consigo uma legio de pequenas redes que a ela estavam conectadas. E assim a Internet foi crescendo e crescendo, sem nenhuma organizao central. Qualquer centro que achasse seus servios convenientes podia se amarrar ao n mais prximo simples3
mente pagando as despesas de uma linha dedicada de dados. Em pouco tempo, a Internet j interligava os maiores centros de pesquisa do mundo. A expanso foi trazendo novos servios e outras redes de pesquisa, como a Usenet, a Bitnet, EARN e redes de BBSs. O crescimento j era impressionante, mas a popularidade ainda era limitada. Grande parte do trfego era acadmico. Operar um sistema de correio eletrnico em geral significava saber operar um jurssico terminal IBM ou mquina Unix, e ter alguma familiaridade com suas interfaces hostis. Para transferir um arquivo era necessrio saber usar um programa especial (FTP), mandar comandos para ele e entender os cdigos que ele retornava. O maior problema na poca, maior talvez que a complexidade, j que os usurios eram todos acadmicos, era a desorganizao generalizada da Internet. A Internet era um tremendo caos. Sabamos que era possvel transferir um arquivo de informaes de qualquer lugar do mundo. O problema era como saber se ele existia e onde estava!
O surgimento da Web
A Internet comeou a crescer de forma explosiva em 1992, com o surgimento da World Wide Web a evoluo de um projeto desenvolvido por Tim Berners-Lee no laboratrio CERN em Genebra. A CERN Laboratrio Europeu para Fsica de Partculas uma das maiores instituies cientficas do mundo e seus laboratrios esto distribudos por vrias cidades localizadas em 19 pases da Europa. Berners-Lee demonstrou como a informao se perdia diariamente no CERN, um ambiente que ele classificou como um modelo em miniatura do resto do mundo em alguns anos. O sistema proposto, inicialmente chamado de Mesh foi implantado no CERN no ano seguinte j com o nome de World Wide Web. Berners-Lee estava certo. O CERN era uma miniatura do mundo. Hoje, 10 anos depois, a Internet no mais a mesma. Todos os servios da Internet se renderam ao poder da Web e linguagem HTML, que a sustenta. At o servio de correio eletrnico, campeo de trfego na Internet por muitos anos, que por muito tempo exigia aplicaes especficas, separadas do browser, hoje lido dentro de um browser, atravs de pginas HTML. A Web conseguiu finalmente organizar um pouco as informaes da Internet atravs do hipertexto mas foi s no ano seguinte que comeou a tomar conta da Internet com a chegada do primeiro navegador grfico: o X-Mosaic programa desenvolvido por um grupo de estagirios do NCSA - Centro Nacional de Supercomputao da Universidade de Illinois. Pouco depois surgiram verses para Windows e Macintosh que, oferecendo pela primeira vez uma interface grfica para a Web, acessvel atravs de um PC ou Mac, trouxe a grande massa de usurios domsticos para dentro da rede. Os provedores de acesso e informao comerciais se multiplicaram, oferecendo s pessoas comuns o mesmo acesso que antes s tinham as grandes organizaes e o meio acadmico, e a NSFNET finalmente se entregou iniciativa privada. Os criadores do Mosaic, entre eles Marc Andreesen, pouco depois de deixar a universidade criaram uma empresa: a Netscape, que foi provavelmente a empresa que teve a maior influncia nos rumos seguidos pela Web na sua evoluo at os dias de hoje.
4
O poder da Web como meio de comunicao

Apesar de ter surgido inicialmente como um servio disponvel em uma rede de computadores, a Web tem hoje um papel muito mais importante. Ela confundida com a prpria Internet, da qual faz parte. Para explor-la, nem mais necessrio ter um PC. Para publicar informaes atravs dela, no preciso saber nada sobre programao ou redes. Tecnologias recentes como o Network Computer (NC) um terminal inteligente para a Web, telefones celulares com navegadores embutidos e a rede WebTV mostram que a World Wide Web est destinada a preencher todos os espaos da mdia de difuso, no se limitando queles que possuem um computador. A Web, dessa forma, possui um potencial inigualvel na histria das telecomunicaes. capaz de servir de porta de entrada no s a todos os servios da Internet mas tambm invadir a praia dos tradicionais servios de voz (telefone), televiso, rdio e mdias impressas, sem falar do impacto que est tendo diretamente nos hbitos da sociedade, mudando as regras do comrcio e das relaes humanas. Diferente dos meios tradicionais de comunicao de massa, a World Wide Web uma mdia democrtica (isto demonstrado pelo fracasso das tentativas de controle da informao por governos totalitrios.) O participante da comunidade virtual no precisa possuir uma estao difusora, uma concesso, uma grfica e nem sequer um computador para poder publicar sua informao e influenciar sua audincia, j que existem provedores de acesso e hospedeiros de informaes que nada cobram. Todos podem receber as informaes de todos. Qualquer um pode prover informao. O poder da informao est nas mos de todos os que puderem ter um espao na Teia, e no mais apenas com aqueles que controlam os meios de difuso tradicionais.
1.2. Como funciona a Web e a Internet

Como deve ter ficado claro se voc leu a histria da Internet, os termos Web e Internet no so sinnimos. A World Wide Web o nome do servio mais popular da Internet. Por esse motivo, freqentemente confundida com a prpria Internet. Internet, por sua vez, o nome dado ao conjunto de computadores, provedores de acesso, satlites, cabos e servios que formam uma rede mundial baseada em uma coleo de protocolos de comunicao conhecidos como TCP/IP. Essa distino pode fazer pouca diferena para quem apenas navega pela Web mas essencial para quem pretende desenvolver e colocar no ar pginas e aplicaes.
Protocolos
atravs de protocolos de comunicao que um computador pode se comunicar com outro atravs de uma linha telefnica ou placa de rede sem que o usurio precise se preocupar em saber qual o meio fsico que est sendo utilizado. O sistema Windows possui protocolos que permitem facilmente interligar computadores rodando Windows entre si. Os mesmos protocolos podem no servir para fazer com que uma mquina Windows se comunique com uma
5
mquina Unix ou Macintosh, pois essas mquinas possuem arquiteturas diferentes. TCP/IP uma suite de protocolos padro que foi adotado como lngua oficial da Internet. Para fazer parte da Internet, um computador precisa saber se comunicar em TCP/IP. Todas as operaes de rede so traduzidas para TCP/IP antes que possam funcionar na Internet. Protocolos TCP/IP atuam em vrios nveis ou camadas dentro de uma rede ou computador. Um grupo de protocolos lida com os detalhes da rede fsica, como a converso dos dados para que possam ser enviados pela linha telefnica ou cabos de rede. So chamados de protocolos da camada fsica. Uma segunda classe de protocolos serve para organizar geograficamente a rede, atribuindo a cada pedao de informao que circula por ela um endereo de origem e destino. Esses so os protocolos de nvel de rede. Garantir que as informaes chegam ao seu destino inteiras e na ordem correta uma tarefa realizada por uma classe de protocolos chamados de protocolos de transporte. Finalmente, h protocolos que se preocupam apenas com a comunicao entre aplicaes rodando em mquinas diferentes. Esses so os protocolos de nvel de aplicao. Para que qualquer informao na Internet saia de um computador e chegue at outro, precisar ser transformada por esses quatro tipos de protocolos em seqncia. Cada camada fragmenta ou transforma os dados mais e mais at que estejam em um formato que possa ser usado pelo protocolo seguinte ou adequado transmisso pela rede. Ao chegar do outro lado, os dados so decodificados na ordem inversa. A relao abaixo apresenta um resumo desses quatro tipos de protocolos (com as siglas de alguns deles entre parnteses): Camada 4 (mais alta): protocolos de aplicao - oferecem servios como acesso remoto (Telnet), e-mail (SMTP, POP3), transferncia de arquivos (FTP), servio de nomes (DNS), servio Web (HTTP) entre outros. Lidam com a comunicao aparente entre duas aplicaes rodando em computadores diferentes. Camada 3: protocolos de transporte - realizam a transferncia dos dados organizados em pacotes de uma mquina para outra. A transferncia pode ser confivel (TCP) ou no-confivel (UDP). Transferncias no confiveis so mais rpidas e por isso so usadas para transmitir udio e vdeo eficientemente. Camada 2: protocolos de nvel de rede - identificam as mquinas e pacotes de informao atravs de endereos (IP) de origem e destino, formados por cdigos distintos como 200.231.19.1 Camada 1: protocolos da camada fsica - realizam a interface entre as camadas anteriores e o meio de transmisso que pode ser formado por linhas telefnicas (PPP, SLIP, ...), placas e cabos de rede, transmissores e receptores de rdio e infravermelho, links de satlite, etc.
A figura abaixo ilustra a transferncia de informaes entre computadores, passando pelas 4 camadas interligadas pelos protocolos TCP/IP:
Cliente HTTP TCP IP PPP
Linha telefnica Internet Linha telefnica
Servidor HTTP Comunicao Aparente TCP IP PPP
Endereos Internet
Um dos protocolos mais importantes da suite TCP/IP o protocolo de nvel de rede IP - Internet Protocol. Ele define a forma de endereamento que permite a localizao de um computador na Internet, atravs de um conjunto de dgitos chamado de endereo IP. Qualquer mquina acessvel atravs da Internet tem um endereo IP exclusivo. Esse endereo pode ser temporrio ou permanente. Quando voc se conecta a um provedor via linha telefnica, ele atribui um nmero IP temporrio sua mquina que permitir que ela faa parte da Internet enquanto durar a sua sesso no provedor. S assim possvel receber informaes em um browser ou enviar e-mail. Computadores que hospedam pginas Web e que oferecem outros servios pela Internet precisam de um endereo IP fixo, para que voc possa localiz-los a qualquer hora. Por exemplo, 200.231.191.10 o endereo IP da mquina onde est localizado o servidor Web do IBPINET em So Paulo. Voc pode localiz-lo digitando http://200.231.191.10/ no campo de endereos do seu navegador.
Servio de Nomes (DNS Domain Name Service)

Embora cada computador seja identificado de forma exclusiva atravs de um endereo IP, no dessa forma que costumamos localiz-los na Internet. Um dos servios fundamentais ao funcionamento da Internet o servio de nomes de domnio. Esse servio oferecido por vrias mquinas espalhadas pela Internet e que guardam tabelas que associam o nome de uma mquina ou de uma rede a um endereo IP. Quando voc digita o nome de uma mquina no seu browser (por exemplo, www.ibpinet.net), o browser primeiro tenta localiz-la consultando uma outra mquina (cujo endereo IP o browser j conhece) que oferece o servio de nomes. Essa mquina consulta outros servios de nomes espalhados pela Internet e em pouco tempo devolve o endereo IP correspondente ao nome solicitado (www.ibpinet.net devolver 200.231.191.10). Se o sistema de nomes falhar, o browser no conseguir o nmero IP que precisa e assim no localizar a mquina correspondente (mesmo que ela no esteja fora do ar).
Portas e servios da Internet

A Internet existe h mais de trs dcadas. Na maior parte desse perodo ela era restrita aos meios acadmicos e militares e oferecia poucos servios. Os principais servios utilizados na rede eram a transferncia de arquivos entre computadores (usando aplicaes que se comunicavam atravs do protocolo FTP - File Transfer Protocol), o correio eletrnico e a emulao de terminal, que permitia o acesso a computadores remotos. Esses servios eram oferecidos em algumas mquinas onde rodavam programas servidores, permanentemente no ar aguardando a conexo de um cliente em uma de suas portas de comunicao. Uma mesma mquina pode oferecer vrios servios, desde que em portas diferentes. Imagine que o endereo IP de uma mquina seja como o endereo de um prdio de escritrios. Localizando o prdio, voc procura por um determinado servio que prestado por uma empresa. Pode haver vrias empresas no prdio. Cada uma tem uma sala identificada por um nmero. O nmero da sala anlogo porta de servios de uma mquina. Para facilitar a vida dos clientes, vrias portas, identificadas por um nmero, foram padronizadas, ou seja, em computadores diferentes, voc geralmente encontra os mesmos servios localizados em portas com os mesmos nmeros. Para ter acesso a um servio preciso ter uma aplicao cliente apropriada que saiba conversar na lngua (protocolo de nvel de aplicao) de uma aplicao servidora (programa que oferece o servio na porta buscada pelo cliente). Como as portas so padronizadas, um cliente muitas vezes s precisa saber o nome ou endereo IP da mquina que tem determinado servio, pois o nmero da porta ele supe que seja o nmero padro. Se voc usa o Internet Explorer para ter acesso ao site do IBPINET ou o Outlook Express para ler seu e-mail no IBPINET, possvel que voc esteja se conectando mesma mquina. O Outlook Express se conectar porta 110 para verificar suas mensagens. Na hora de enviar, utilizar os servios da porta 25. O Internet Explorer buscar a home page do IBPINET na porta 80, mas se voc decidir fazer compras e utilizar o servidor seguro do IBPINET, seu browser utilizar a porta 443.
A Web entre os servios da Internet

O servio de emulao de terminal remoto - Telnet, requer que o usurio conhea o sistema remoto, tenha permisso de acesso e saiba utiliz-lo. O acesso orientado a caracter e pode ser feito em MS-DOS. No incio da popularizao da Internet, vrios servios eram oferecidos apenas via Telnet, que funcionava como uma espcie de cliente universal. O usurio, ligado Internet, poderia pesquisar o banco de dados da Nasa, bater papo com usurios remotos e pesquisar repositrios de informaes pelo mundo afora. A World Wide Web surgiu inicialmente como mais um desses servios, que poderia ser utilizado atravs de um cliente Telnet apontando para o endereo info.cern.ch. O servio ainda existe, por razes histricas. possvel acess-lo via linha de comando no DOS ou Unix usando:
telnet info.cern.ch
um acesso orientado a caracter e na poca concorria com outros servios de informaes mais populares como o WAIS, o Gopher e o Archie, que tambm tentavam organizar as informaes da Internet. O acesso direto ao servidor, usando um cliente conectado sua porta de comunicao sempre mais rpido e eficiente que o acesso via Telnet. Os primeiros clientes Web eram orientados a caracter (no exibiam fontes nem imagens) e rodavam apenas em ambientes Unix. Foi somente com o surgimento do X-Mosaic que a Web se tornou grfica (e comeou a se tornar popular.) O Mosaic abriu caminho para vrios outros clientes Web, hoje chamados de browsers ou navegadores, e que passaram a ser o primeiro (e s vezes nico) contato de muitos usurios com a Internet. Os browsers de hoje no so mais apenas clientes Web. Eles lem pginas locais, enviam e-mail, permitem que o usurio leia grupos de notcias, e-mail, execute aplicaes locais, acesse aplicaes remotas e diversos outros servios da Internet. O browser moderno um cliente universal para toda a Internet, embora esse acesso ocorra atravs da World Wide Web.
1.3. A plataforma Web

A World Wide Web um servio TCP/IP baseado no protocolo de nvel de aplicao HTTP (HyperText Transfer Protocol) Protocolo de Transferncia de Hipertexto. A plataforma Web o meio virtual formado pelos servidores HTTP (servidores Web que mantm sites), clientes HTTP (browsers) e protocolo HTTP (a lngua comum entre o cliente e o servidor).
Hipertexto
Hipertexto uma forma no linear de publicao de informaes onde palavras que aparecem no texto podem levar a outras sees de um documento, outros documentos ou at outros sistemas de informao, fugindo da estrutura linear original de um texto simples. O hipertexto baseia-se em ligaes entre dois pontos chamados de ncoras. As ligaes entre as ncoras so chamadas de vnculos (links). Vnculos de hipertexto so implementados em textos publicados na Web usando uma linguagem declarativa chamada HTML - HyperText Markup Language.
HTML
HTML usada para marcar um arquivo de texto simples (texto simples texto sem formatao alguma, visualizvel em qualquer editor de textos). Se um arquivo de texto simples receber uma extenso de nome de arquivo .html ou .htm, um navegador como o Internet Explorer ir tentar interpret-lo como HTML. Dentro do texto, pode-se definir descritores (ou comandos HTML) entre os smbolos < e >:
<h1>Arquivo de texto</h1> <p>Este o <i>primeiro</i> pargrafo.</p>
Os descritores s sero visveis quando o arquivo for visualizado em um editor de textos (como o Bloco de Notas do Windows). Ao ser visualizado em um programa capaz de entender HTML, apenas o texto aparece, com uma aparncia determinada pelos descritores:
Arquivo de texto
Este o primeiro pargrafo.
O texto com marcadores chamado cdigo-fonte HTML. O cdigo-fonte usado para produzir a pgina visualizada o browser que chamada de pgina HTML ou pgina Web. O browser, por ser capaz de exibir diversos tipos de informao, depende totalmente da extenso do arquivo para saber o que fazer com ele. Se a extenso .htm ou .html no estiver presente ou se o arquivo tiver a extenso .txt, o browser exibir o cdigo-fonte. Alm da formatao da pgina, o HTML responsvel tambm pela incluso de imagens e definio dos links que permitem a navegao em hipertexto.
Servidor HTTP
O servio HTTP funciona de forma semelhante ao servio FTP - File Transfer Protocol (protocolo de comunicao usado na Web para operaes de transferncia de arquivos). Ambos oferecem aos seus clientes um sistema de arquivos virtual onde podem localizar recursos (arquivos, programas, etc.) e transferi-los de um computador para outro. O sistema virtual pode ter uma hierarquia prpria e totalmente diferente do sistema de arquivos real do computador, ao qual est vinculado. Geralmente um servidor tem acesso a uma rea restrita da mquina e s permite a visualizao dos arquivos l contidos. O sistema de arquivos virtual usa uma notao diferente daquela usada pelo sistema real. Por exemplo, considere o seguinte sistema de diretrios no Windows:
C:\ C:\Windows C:\Documentos C:\Documentos\Web\ C:\Documentos\Web\Imagens C:\Documentos\Web\Videos
Suponha que um servidor HTTP foi instalado nessa mquina. Na instalao, ele configurado para administrar um sistema de diretrios a partir de um certo diretrio. Suponha que esse diretrio C:\Documentos\Web\. Para o servidor, isto seu diretrio raiz. No sistema de diretrios virtual, o diretrio raiz de um servidor chamado de / (barra). O sistema de arquivos virtual (a parte que um browser poder ter acesso) :
/ /Imagens (C:\Documentos\Web\) (C:\Documentos\Web\Imagens)
10
/Videos
(C:\Documentos\Web\Videos)
Um browser jamais ter acesso ao diretrio Windows, por exemplo. A principal funo de um servidor Web , portanto, administrar um sistema de arquivos e diretrios virtual e atender requisies dos clientes HTTP (os browsers), que, na maior parte das vezes, enviam comandos HTTP pedindo que o servidor devolva um ou mais arquivos localizados nesses diretrios. Os pedidos so feitos atravs de uma sintaxe especial chamada de URI.
URIs (URLs1)
Todas as comunicaes na plataforma Web utilizam uma sintaxe de endereamento chamada URI - Uniform Resource Identifier - para localizar os recursos que so transferidos. O servio HTTP depende da URI que usada para localizar qualquer coisa na Internet. Contm duas informaes essenciais: 1) COMO transferir o objeto (o protocolo); 2) ONDE encontrlo (o endereo da mquina e o caminho virtual). URIs tipicamente so constitudas de trs partes: mecanismo (protocolo) usado para ter acesso aos recursos (geralmente HTTP) nome da mquina (precedido de //) onde o servio remoto oferecido (e a porta, se o servio no estiver em uma porta padro) ou outro nome atravs do qual o servio possa ser localizado (sem //). nome do recurso (arquivo, programa) na forma de um caminho (no sistema de arquivos virtual do servidor) onde se possa encontr-lo dentro da mquina. Sintaxe tpica:
protocolo://maquina:porta/caminho/recurso
As URIs mais comuns so os endereos da Web, que utilizam o mecanismo HTTP para realizar a transferncia de dados:
http://www.maquina.com.br/caminho/para/minha/pgina/texto.html
Veja algumas outras URLs:

ftp://usuario:senha@maquina.com/pub/arquivo.doc
Acesso a servidor FTP que exige usurio e senha para fazer download de arquivo.doc
nntp://news.com.br/comp.lang.java
Acesso a servidor de newsgroups para ler o grupo comp.lang.java

news:comp.lang.java
Acesso ao grupo comp.lang.java atravs de servidor default (definido localmente)

http://www.ibpinet.net/
Acesso pgina default disponvel no diretrio raiz do servidor Web de

www.ibpinet.net URIs tambm so frequentemente chamadas de URLs (Uniform Resource Locators). A URL um tipo particular de URI mas, para a nossa discusso, essa distino irrelevante. A documentao HTML (especificao) sempre refere-se essa sintaxe como URI.
1
11
http://www.algumlugar.com:8081/textos/
Acesso pgina default disponvel no diretrio textos do servidor Web que roda na porta 8081 da mquina www.algumlugar.net
http://www.busca.com/progbusca.exe?opcoes=abc&pesquisa=dracula
Passagem de parmetros de pesquisa para programa de busca progbusca.exe que ter sua execuo iniciada pelo servidor HTTP que roda na porta 80 (default) de www.busca.com.
http://www.ibpinet.net/helder/dante/pt/inferno/notas_4.html#cesar
Acesso uma seo da pgina HTML notas_4.html identificada como cesar, localizada no subdiretrio virtual /helder/dante/pt/inferno/ do servidor Web de www.ibpinet.net.
mailto:helder@ibpinet.net
Acesso janela de envio de e-mail do cliente de correio eletrnico local.
Browser
O browser um programa que serve de interface universal a todos os servios que podem ser oferecidos via Web. para a plataforma Web o que o sistema operacional (Windows, Linux, Mac) para o computador. A principal funo de um browser ler e exibir o contedo de uma pgina Web. A maior parte dos browsers tambm capaz de exibir vrios outros tipos de informao como diversos formatos de imagens, vdeos, executar sons e rodar programas. Um browser geralmente usado como cliente HTTP aplicao de rede que envia requisies a um servidor HTTP e recebe os dados (uma pgina HTML, uma imagem, um programa) para exibio, execuo ou download. Browsers tambm podem ser usados off-line como aplicao local do sistema operacional para navegar em sistemas de hipertexto construdos com arquivos HTML (sem precisar de servidor HTTP). Nesse caso, no se comportam como clientes HTTP (j que no esto realizando operaes em rede) mas apenas como visualizadores de mdia interativa capazes de visualizar HTML, imagens, sons, programas, etc. Como os browsers precisam interpretar vrios tipos de cdigo (cdigo de imagens GIF, JPEG, cdigo de programas Java e Flash, cdigos de texto HTML ou texto simples) preciso que ele saiba identificar os dados que recebe do servidor. Isto no a mesma coisa que identificar um arquivo carregado do disco local, onde ele pode identificar o tipo atravs da extenso. Quando os dados chegam atravs da rede, a extenso no significa nada. O servidor precisa informar ao browser o que ele est enviando. Na Web, isto feito atravs de uma sintaxe padro para definir tipos chamada MIME - Multipart Internet Mail Extensions.
Tipos MIME
MIME uma sintaxe universal para identificar tipos de dados originalmente utilizada para permitir o envio de arquivos anexados via e-mail. O servidor Web possui, internamente, tabelas que relacionam os tipos de dados (na sintaxe MIME) com a extenso dos arquivos por ele gerenciados. Quando ele envia um conjunto de bytes para o browser, envia antes um cabealho (semelhante ao cabealho de e-mail) informando o nmero de bytes enviados e o tipo MIME
12
dos dados para que o browser saiba o que fazer com a informao. A sintaxe MIME tem a seguinte forma:
tipo/subtipo
O tipo classifica um conjunto de bytes como imagens, textos, vdeos, programas (aplicaes), etc. O subtipo informa caractersticas particulares de cada tipo. No basta saber que o arquivo uma imagem, preciso saber qual o formato, pois o cdigos usados para produzir imagens de mesma aparncia grfica podem diferir bastante entre si. Tanto no servidor como no browser h tabelas que relacionam extenses de arquivo a tipos MIME:
image/jpeg image/png image/gif text/html text/plain x-application/java .jpe, .jpg, .jpeg .png .gif .html, .htm, .jsp, .asp, .shtml .txt .class
1.4. Tecnologias de Apresentao

As tecnologias utilizadas na plataforma Web podem ser classificadas de acordo com sua finalidade em tecnologias de apresentao e tecnologias interativas. As tecnologias de apresentao so aquelas que se destinam unicamente formatao e estruturao das pginas Web. Podem ser usadas tambm para construir a interface de aplicaes Web no browser. Os principais padres em uso atualmente so HTML, CSS, XML e XSL. As tecnologias interativas so as que permitem o desenvolvimento de aplicaes e pginas com alto nvel de interatividade com o usurio. Em geral consistem da combinao de uma linguagem de programao com uma arquitetura ou modelo que possibilita a sua integrao com uma pgina HTML ou servidor HTTP. Podem, portanto, executar do lado do servidor (como CGI, ASP, ADO, Servlets, ISAPI, JSP, PhP, Cold Fusion e LiveWire) ou do lado do cliente (como JavaScript, DHTML, Java Applets, ActiveX e VBScript).
HTML
HTML - HyperText Markup Language a linguagem universal da Web. atravs dela que a informao disponvel nas pginas da WWW pode ser acessada por mquinas de arquiteturas e sistemas operacionais diferentes. No uma linguagem de programao com a qual se possa construir algoritmos, mas uma linguagem declarativa que serve para organizar informaes em um arquivo de textos que ser visualizado em um browser. Define uma coleo de elementos para marcao (definio de estrutura) de texto. Se voc, no passado, j usou um editor de textos como WordStar ou Carta Certa, dever se sentir em casa com HTML. Coo foi mencionado anteriormente, um arquivo HTML um arquivo de texto simples recheado de marcadores que se destacam do texto pelos caracteres especiais "<" e ">".
13
Existem vrias linguagens para formatao de textos. Qualquer texto que aparece formatado (com fontes, cores, tamanhos) em um computador tem uma linguagem de formatao por trs. A maioria so linguagens proprietrias que s funcionam em softwares especficos (textos em formato Word, por exemplo). Existem alguns formatos, porm, que se tornaram padres, servindo basicamente para realizar converses entre os formatos proprietrios (SGML e RTF, PostScript, TeX, PDF). HTML um formato pblico (no pertence a um fabricante especfico), e leve (no produz arquivos enormes como o Word) sendo por essas e outras razes adequado difuso de informaes que sero visualizadas em mquinas diferentes. Com HTML possvel publicar documentos estruturados on-line, recuperar informaes atravs de vnculos de hipertexto, projetar uma interface interativa com formulrios para acesso a servios remotos como buscas e comrcio eletrnico, e incluir imagens, vdeos, sons, animaes e outras aplicaes interativas dentro de documentos visveis no browser.
Histrico do HTML
HTML foi desenvolvida originalmente por Tim Berners-Lee no CERN - Laboratrio Europeu de Fsica de Partculas. Sua popularidade cresceu junto com a popularizao da Web, atravs do NCSA Mosaic. Devido ao surgimento de vrios browsers que utilizavam HTML para navegar no sistema de informaes proporcionado pela Web, grupos de trabalho foram formados com a inteno de padronizar especificaes para o HTML. HTML 2.0, concluda em 1995, foi a primeira verso recomendada pelo IETF - Internet Engineering Task Force e se tornou um padro da Internet. HTML 2.0 era uma linguagem simples que dizia como um browser deveria estruturar uma pgina, mas no como os ttulos, pargrafos e listas deveriam aparecer graficamente. Durante o desenvolvimento do HTML 3.0, a Web estava em franca expanso e os esforos de padronizao no puderam acompanhar as tendncias do mercado, que exigiam maiores recursos de apresentao grfica ao HTML 2.0. O HTML 3.0 acabou no sendo aprovado e anos depois, aprovou-se uma recomendao chamada HTML 3.2 em 1997, que introduzia recursos de apresentao grfica no HTML. Infelizmente a maioria dos recursos grficos do HTML 3.2 foram incorporaes de extenses proprietrias da Netscape e Microsoft, criadas sem levar em conta a filosofia do HTML de garantir a compatibilidade da linguagem em plataformas diferentes. Isto acabou atrasando o desenvolvimento de ferramentas de desenvolvimento eficientes, pois era impossvel validar HTML para plataformas que no suportavam certos recursos grficos mais sofisticados. HTML foi desenvolvida originalmente para que qualquer dispositivo pudesse ter acesso informao da Web. Isto inclui PCs com monitores grficos de diversas resolues, terminais orientados a caracter, telefones celulares, dispositivos geradores de voz, etc. HTML 3.2 tinha elementos que prejudicavam essa meta. Finalmente, depois de muita discusso, as empresas entraram em um acordo e desenvolveram o HTML 4.0, que estende o HTML com mais recursos visando um acesso mais universal informao da Web, como recursos de acessibilidade pessoas com deficincias, suporte a convenes internacionais (outras lnguas, outros alfabe-
14
tos), separao da estrutura, contedo e apresentao, recursos interativos do lado do cliente e otimizao em tabelas e formulrios.
HTML 4 e CSS
Vrios elementos do HTML 3.2 foram considerados deprecados (candidatos a se tornarem obsoletos) pelo HTML 4. So todos elementos que permitem definir cores, fontes, alinhamento, imagens de fundo e outras caractersticas da apresentao da pgina que dependem da plataforma onde a informao visualizada. HTML nunca realizou bem o trabalho de formatao grfica de uma pgina. Foi criada inicialmente para apenas dar estrutura a um contedo. Nunca previu formas de posicionar imagens e texto de forma absoluta em uma pgina e as solues desenvolvidas pelos Web designers, por no serem solues previstas na especificao, tm causado problemas de acesso em vrios sites e impedido o acesso de dispositivos mais limitados como a WebTV e WebPhone de terem acesso total Web. A soluo do HTML 4.0 foi separar a estrutura da apresentao, deixando que a linguagem HTML voltasse s suas origens (nos tempos do HTML 2) para definir apenas a funo do texto marcado (o que ttulo, pargrafo, etc.) Uma outra linguagem foi criada para se preocupar com a aparncia (como o ttulo e pargrafo sero exibidos na tela). A principal linguagem usada para esse fim CSS - Cascading Style Sheets, que permite a criao de folhas de estilo aplicveis a vrias pginas de um site. Se um dispositivo limitado no consegue exibir os estilos definidos no CSS, ele pelo menos consegue entender a estrutura do texto e imagens de forma que mesmo usurios com menos recursos podem ter acesso informao. Escrever HTML no difcil, apenas toma tempo, por isso usar um editor apropriado pode tornar o processo de criao de pginas mais produtivo. Um arquivo de texto simples com descritores HTML, quando carregado em um browser, tem os descritores interpretados e as suas informaes formatadas na tela de acordo com a estrutura prevista pelos marcadores e uma folha de estilos, geralmente definida pelo prprio browser. A folha de estilos pode ser definida pelo programador usando uma linguagem como CSS e vinculada pgina para mudar sua aparncia.
XML e XSL
XML - eXtensible Markup Language e XSL - eXtensible Style Language so as novas criaes do W3C - World Wide Web Consortium (consrcio das empresas que desenvolvem os padres para a WWW). No pretendem substituir o HTML mas, em vez disso, oferecer meios de estender e ampliar as possibilidades da Web. XML uma especificao ou meta-linguagem que define uma sintaxe que pode ser usada para criar novas linguagens semelhantes a HTML. A prpria linguagem HTML pode ser vista como um tipo especial de XML. Com XML voc pode criar sua prpria linguagem de marcao MinhaML, definir seus prprios marcadores e esquemas para aplicaes especficas, por exemplo, poderia conter algo como:
<compra id="xyz"><data>26/12/1999</data>...</compra> ...
15
Depois voc pode usar CSS ou XSL para definir a aparncia dos seus marcadores em um browser XML. Para que um browser XML seja capaz de compreender a linguagem que voc criou, preciso definir um dicionrio e uma gramtica (usando as regras da especificao XML) para ela. A gramtica para a anlise da sua linguagem deve ficar armazenada em um documento chamado DTD - Document Type Definition. Carregando o DTD, o browser XML aprender a nova linguagem e ser capaz de formatar a informao que voc estruturou com seus marcadores, e apresentar as informaes na tela de acordo com as regras de estilo definidas no CSS ou em um XSL criado por voc. As tecnologias XML e XSL no sero abordadas neste curso mas voc pode obter maiores informaes sobre as duas tecnologias, alm de ter acesso a guias de referncia e tutoriais atravs do site do World Wide Web Consortium (W3C) em http://www.w3.org/XML/.
1.5. Exerccios
1. Entre as opes abaixo, quais representam protocolos da Internet? Marque uma ou mais de uma. a) HTML b) HTTP c) CSS d) FTP e) URI 2. Marque apenas as afirmaes verdadeiras: a) World Wide Web e Internet so dois nomes usados para representar o conjunto de computadores, provedores de acesso, satlites, cabos e servios que formam uma rede de alcance mundial. b) Um protocolo de comunicaes essencial para que computadores diferentes possam se comunicar uns com os outros. c) A Internet se baseia em um protocolo de comunicaes chamado de HTTP HyperText Transfer Protocol. Para fazer parte da Internet, um computador precisa saber falar HTTP. d) Qualquer mquina acessvel atravs da Internet tem, em algum momento, um endereo IP exclusivo. e) No possvel que um computador utilize programas como browsers e aplicativos de correio eletrnico para navegar, receber e enviar e-mail sem que ele possua, necessariamente, um endereo IP. 3. Marque apenas as alternativas falsas: a) Se um computador identificado atravs de um nome, por exemplo, www.severino.com.br, ele no precisa ter um endereo IP. b) Se o sistema de pesquisa de nomes (DNS) falhar o browser no localizar a mquina procurada na Internet. Isto no quer dizer que o site est fora do ar. Se voc informar diretamente o endereo IP da mquina, existe a possibilidade que o site seja alcanado.
16
c) Uma mesma mquina pode oferecer vrios servios TCP/IP, como o servio HTTP (Web), oferecido por mquinas que hospedam sites, o servio de caixapostal, e o servio de envio de correio eletrnico. d) Uma porta TCP/IP pode oferecer apenas um tipo de servio. e) Os nmeros das principais portas de servio TCP/IP so padronizadas, ou seja, em computadores diferentes, voc geralmente encontra os mesmos servios localizados em portas com os mesmos nmeros. 4. Servidor e cliente so papis diferentes exercidos por um computador em rede (os termos tambm so usados para se referir aos programas usados para esses fins). Uma mesma mquina pode, simultaneamente, exercer os dois papis, desde que rode programas capazes de oferecer servios e de consumi-los. Entre as alternativas abaixo, marque apenas as que descrevem caractersticas de servidores Web: a) Monitoramento da porta TCP/IP de nmero 80 em uma nica mquina. b) Hospedagem e gerenciamento de arquivos em um site na Web c) Interpretao de arquivos HTML d) Exibio de imagens e) Requisio de informaes remotas atravs de URIs 5. Qual a principal funo da sintaxe MIME Multipart Internet Mail Extensions? Marque uma alternativa. a) localizar pginas na Internet b) tornar possvel o envio de e-mail atravs de uma pgina Web c) identificar tipos de arquivos d) permitir que um browser funcione como servidor de e-mail e) nenhuma das alternativas anteriores 6. Marque as opes verdadeiras. Uma pgina HTML ... a) ... geralmente um arquivo de texto com extenso .htm ou .html b) ... poder exibir imagens, texto formatado, vnculos de hipertexto e cores ao ser lida por uma aplicao como o Internet Explorer. c) ... exibir seu cdigo-fonte, consistindo de smbolos especiais entre < e > quando for lida por um editor de textos comum, e no mostrar imagens. d) ... no pode ser criada atravs de um editor de textos qualquer. preciso usar uma ferramenta como o DreamWeaver ou HomeSite. e) ... pode ter vnculos interligando-a com outras pginas e com imagens. f) ... se tiver vnculos deve express-los usando a notao de URIs, absolutas ou relativas, para que funcionem quando a pgina for publicada em um servidor Web. 7. O que acontece quando um browser carrega um arquivo de texto simples, com extenso .html ou .htm, mas sem formatao HTML alguma? a) A pgina no carregada b) A pgina carregada mas toda a formatao do texto original (pargrafos, ttulos, quebras de linha, etc.) perdida na visualizao c) A pgina interpretada como texto simples e exibida em fonte de largura fixa (Courier, por exemplo), preservando a formatao original d) O browser causa a abertura de uma aplicao para a leitura de textos (o Word, por exemplo).
17
e) O browser exibe uma mensagem de erro 8. Considere o seguinte sistema de diretrios no Windows, em uma mquina acessvel via Internet chamada www.tribos.com.br:
C:\ C:\Windows C:\Apache C:\Apache\htdocs\ C:\Apache\htdocs\ongs\
Suponha que um servidor HTTP foi instalado nessa mquina e configurado para administrar um sistema de diretrios a partir do diretrio C:\Apache\htdocs\ (diretrio raiz do servidor). Qual das URLs abaixo permite a visualizao do arquivo index.html, armazenado em C:\Apache\htdocs\ongs\ atravs de um browser localizado em uma mquina remota? a) http://www.tribos.com.br/Apache/htdocs/ongs/index.html b) http://www.tribos.com.br/C:/Apache/htdocs/ongs/index.html c) http://www.tribos.com.br/ongs/index.html d) http://www.tribos.com.br/C:/Apache/htdocs/index.html e) http://www.tribos.com.br/index.html f) http://www.tribos.com.br/ g) C:\Apache\htdocs\ongs\index.html 9. No mesmo servidor Web da questo anterior h uma imagem logotipo.gif armazenada no diretrio C:\Apache\htdocs\. O arquivo index.html localizado em C:\Apache\htdocs\ongs\ refere-se a essa imagem atravs de um descritor <IMG>. Quais, entre as sintaxes abaixo para o descritor <IMG> de index.html, causaro a exibio da imagem dentro da pgina, quando visualizada por um browser em uma mquina remota? Marque no mnimo uma. a) <IMG SRC="logotipo.gif"> b) <IMG SRC="C:\Apache\htdocs\logotipo.gif"> c) <IMG SRC="../logotipo.gif"> d) <IMG SRC="/logotipo.gif"> e) <IMG SRC="http://www.tribos.com.br/logotipo.gif"> f) <IMG SRC="http://www.tribos.com.br/Apache/htdocs/logotipo.gif"> 10. Qual dos caminhos abaixo no uma URI (ou URL)? a) ftp://usuario:senha@maquina.com/pub/arquivo.doc b) news:comp.lang.java c) http://www.algumlugar.com:8081/textos/ d) c:\wd\paginas\html\ e) /progbusca.exe?opcoes=abc&pesquisa=dracula f) mailto:helder@ibpinet.net
18
2. Criao de Web Sites

2.1. Quais ferramentas existem para criar e manter sites?
Podemos criar uma pgina Web simplesmente usando um editor de textos (como o bloco de notas do Windows) e um browser para visualizao. Embora esta seja uma boa forma de aprender, pouco produtiva para desenvolver sites complexos que usam tabelas, frames e design sofisticado. Alguns editores so bastante visuais e mostram todo o processo de criao do site, fazem busca e substituio em todo o site, utilizam templates, permitem edio direta do cdigo e fazem a previso sem a necessidade de um browser. o caso do Microsoft FrontPage, do Macromedia DreamWeaver, do Corel WebMaster, e do Adobe GoLive. Outros, simplesmente servem para economizar batidas de teclas e evitar erros de sintaxe na hora de escrever o cdigo HTML. Editores de cdigo HTML como o Hot Dog, Hot Metal, HomeSite, BareBones, etc. realizam esta funo. Nas sees a seguir, discutiremos as diferenas entre cada tipo de editor.
Editores grficos (WYSIWYG)

Os editores mais fceis de usar, que dispensam totalmente o uso de HTML so os editores WYSIWYG. Esse nome esquisito uma sigla bastante usada nos primeiros tempos da editorao eletrnica para caracterizar programas que representavam na tela do computador uma pgina da forma como seria impressa. Naquele tempo, era comum a existncia de processadores de texto ou formatadores de texto que usavam comandos para descrever como o texto iria aparecer na hora da impresso. Para se ter uma idia do resultado final, era necessrio ou imprimir ou rodar um programa a parte que fizesse um preview da pgina criada. Com o advento da editorao eletrnica, surgiram programas como o Aldus PageMaker no Macintosh e Ventura Publisher no PC que mostravam na tela a prpria pgina, e no um monte de cdigos de controle misturados ao texto. Eles se definiam como programas WYSIWYG, que quer dizer What You See Is What You Get, ou, o que voc v o que voc obtm, sugerindo que o que o autor visualiza na tela uma representao bastante fiel do resultado final que obter na impressora. WYSIWYG na Web bem menos fiel que na impresso. Para trabalhos impressos, temse uma representao da pgina em uma determinada impressora, com determinadas fontes, cores, etc. Na Web impossvel saber se a pessoa que ir ver a sua pgina ter as mesmas fontes, cores, verses de browser que aquela onde voc fez o seu teste WYSIWYG. Portanto,
19
os editores grficos de pginas Web so no mximo WYSISWIG ou What You See Is Sometimes What You Get (o que voc v s vezes o que voc obtm.). A multiplicidade de browsers e plataformas que existem na Internet exige do Web designer mais que saber fazer pginas que ficam boas em uma nica plataforma e browser. necessrio testar o site em sistemas diferentes levando em conta o pblico-alvo do site e muitas vezes necessrio recorrer codificao HTML para resolver algum problema no previsto pelos editores. Todos os bons editores grficos permitem a edio do cdigo HTML assim como o desenvolvimento grfico. A imagem acima mostra o ambiente do Macromedia Dreamweaver 3.
Editores de texto
Pode-se usar qualquer editor de texto que tenha a capacidade de salvar um arquivo de texto puro, com alfabeto ISO-Latin-1 (ISO-8859-1) ou ASCII para criar pginas HTML. Se o seu editor s conseguir salvar US-ASCII, ser mais difcil o uso de acentos (voc ter que usar cdigos especiais). Alguns exemplos de editores que podem ser usados so o Bloco de Notas do Windows, o WordPad (desde que se salve a pgina como texto), o EditPad, o WinEdit e outros editores shareware/freeware populares disponveis na Internet.
Editores de HTML
Editores de HTML so como os editores de texto mas possuem uma srie de atalhos para agilizar a entrada de cdigo HTML. Os atalhos tambm evitam que se cometam erros de sintaxe. Os editores HTML mais sofisticados possuem um sistema de preview embutido, permitem a definio de gabaritos a serem aplicados a um conjunto de pginas, su-
20
portam macros, busca e substituio em diversos arquivos e filtros diversos. A figura acima mostra o ambiente do Allaire HomeSite 4.5. A maioria dos editores HTML esto disponveis na Internet pelo sistema de freeware ou shareware. O site das duas vacas, ou TUCOWS (http://www.tucows.com) possui uma lista crescente destes programas. Voc tambm encontra editores em http://www.shareware.com. Entre os comerciais, um dos mais populares o HomeSite.
2.2. Por que se preocupar com o perfil dos visitantes?

Qualquer Web designer que queira desenvolver pginas seriamente hoje em dia deve ter as verses dos browsers mais populares entre o pblico. No basta testar somente na ltima verso. Geralmente a grande massa de usurios que navega na Internet no possui a ltima verso do seu browser. Os browsers so a janela do usurio para a Web. Dependendo da verso ou do tipo de browser que o seu visitante est usando, e qual o seu computador, a sua pgina pode aparecer para ele como uma experincia agradvel que o far voltar muitas e muitas vezes; ou como um pesadelo horrvel, que ele jamais esquecer. trabalho do Web designer resolver ao mximo esses problemas de compatibilidade de forma a garantir que pelo menos a informao essencial seja acessvel (isto inclui a identidade visual e a navegao do site). essencial testar as pginas em browsers e plataformas diferentes antes de public-las. Os browsers mais populares hoje continuam sendo o Netscape Communicator e Microsoft Internet Explorer. As plataformas de navegao mais populares ainda so PC e Mac. Mas o que usado por todo o mundo pode no ser o mais importante no seu caso: se seu pblico-alvo formado em grande parte por usurios de mquinas Sun essencial testar suas pginas nessas plataformas tambm. H ainda uma outra questo. Mesmo que voc saiba que 99% do seu pblico usa browsers Netscape ou Microsoft, importante saber as verses que eles usam. A grande maioria dos usurios no possui as ltimas verses dos seus browsers (os provedores continuam distribuindo verses antigas). H muitos recursos novos nas novas verses do Communicator e do Internet Explorer que no so suportados nas verses anteriores. Se voc us-los sem prestar ateno ao efeito que causam em verses antigas, uma grande parte do pblico que visitar suas pginas podero nunca mais voltar.
2.3. Por que aprender HTML?

Se possvel fazer todo um site, com scripts interativos, imagens, animaes, Java, etc. sem escrever uma linha sequer de HTML, por que perder tempo aprendendo cdigos que no vo servir para nada? No seria programar em HTML um desperdcio de tempo e criatividade que um Web designer poderia economizar usando ferramentas que escondessem o cdigo, dando maior nfase ao aspecto visual?
21
As respostas s perguntas do pargrafo anterior dependem do que voc pretende fazer e do controle que voc pretende ter sobre a sua obra. Se o seu objetivo fazer pginas prticas e rpidas, como uma home page pessoal ou para um sistema Intranet simples, pode realizar todo o trabalho sem sequer tomar conhecimento do HTML, usando as ferramentas que existem por a. Mas se voc deseja fazer coisas mais sofisticadas, como ter mais controle sobre o design da sua pgina, criar pginas que interajam com outros programas (como servidores de bancos de dados) e usar recursos novos como Dynamic HTML, JavaScript, canais e folhas de estilo, voc provavelmente no vai escapar de ter que editar sua pgina pelo menos uma ou duas vezes. Talvez para fazer alguns ajustes, talvez simplesmente para localizar o ponto do cdigo onde ser inserida uma rotina JavaScript que algum programador escreveu. Saber HTML significa mais poder sobre a sua obra. Mas no se preocupe em vo. A notcia boa que HTML fcil. No linguagem de programao, no tem coisas como recurso, ponteiros ou nada do tipo. Web designers podem e devem aprender HTML. somente marcao de texto. uma linguagem trivial para aqueles que usam computadores desde o tempo do MS-DOS e WordStar programas bem mais complexos que o HTML.
22
Parte 2 - HTML
Contedo
3. Fundamentos do HTML...................................................................................... 26
3.1. Elementos e descritores (tags)...................................................................................27 3.2. Atributos.......................................................................................................................29 3.3. Caracteres de escape ...................................................................................................29 3.4. Comentrios.................................................................................................................31 3.5. Estrutura do documento............................................................................................31 3.6. Elementos do HEAD.................................................................................................32 TITLE..................................................................................................................................32 META..................................................................................................................................32 LINK ...................................................................................................................................33 BASE ...................................................................................................................................33 3.7. Elementos de BODY .................................................................................................33
4. Pargrafos e blocos ................................................................................................ 35

4.1. 4.2. 4.3. 4.4. 4.5. 4.6. 4.7. 4.8. 5.1. 5.2. 5.3. Pargrafos <P> ...........................................................................................................35 Cabealhos <H1> a <H6>.......................................................................................36 Quebras de linha <BR>.............................................................................................37 Linhas horizontais <HR> .........................................................................................37 Citao de bloco <BLOCKQUOTE> ...................................................................37 Texto pr-formatado <PRE>...................................................................................38 Bloco genrico de seo <DIV>..............................................................................39 Bloco de endereo <ADDRESS> ...........................................................................39 Listas no-ordenadas <UL>, <LI>.........................................................................40 Listas ordenadas <OL>, <LI> ................................................................................41 Listas de definies <DL>, <DT>, <DD> ..........................................................41
5. Listas ................................................................................................................... 40
6. Imagens................................................................................................................. 43
6.1. O objeto <IMG> .......................................................................................................43 URIs relativas......................................................................................................................43 6.2. Alinhamento de imagens............................................................................................44 6.3. Dimensionamento.......................................................................................................44
7. Formatao de texto (inline elements) ................................................................... 46 8. ncoras e Vnculos .............................................................................................. 48 9. Tabelas................................................................................................................. 49

9.1. 9.2. 9.3. 9.4. Principais elementos estruturais <TABLE>, <TR>, <TD> ou <TH>...........49 Tabela sem bordas ......................................................................................................50 Bordas ...........................................................................................................................51 Espaamento................................................................................................................51
24
Parte 2 - HTML
9.5. 9.6. 9.7. 9.8. 9.9. 9.10. 10.1. 10.2. 10.3. 10.4. 10.5. 10.6. 10.7.
Largura da tabela .........................................................................................................52 Altura, posicionamento e cores.................................................................................53 Alinhamento de clulas ..............................................................................................54 Combinao de clulas ...............................................................................................55 Otimizao <THEAD>, <TBODY>, <COLGROUP>, <COL> ..................55 Legenda <CAPTION> .............................................................................................56 Blocos que alteram estilo (deprecados)....................................................................57 Bloco centrado <CENTER> ...................................................................................57 Bloco sem quebras de linha <NOBR> e <WBR> ...............................................58 Elementos de estilo (deprecados no HTML 4.0) ...................................................58 Atributos de uma pgina <BODY atributos> .......................................................59 Cores e fontes <FONT> ..........................................................................................59 Concluso.....................................................................................................................60
10.Elementos deprecados............................................................................................ 57
11.Testes ................................................................................................................... 61
25
Parte 2 - HTML
3. Fundamentos do HTML
O arquivo usado para construir uma pgina Web texto simples. Mesmo que a pgina visualizada no browser mostre imagens, applets Java, plug-ins (como Flash) e outros recursos, por trs de tudo existe uma pgina de texto e vrios outros arquivos separados, que foram montados em uma pgina pelo browser. O cdigo texto, mas no s texto. texto marcado com HTML. HTML define toda a estrutura de uma pgina para que um browser possa format-la e produzir a apresentao desejada. HTML tambm importa as imagens, programas, sons e vdeos que uma pgina exibe em seu interior. Mas como HTML texto simples, pode ser editada em qualquer editor de texto (como o Bloco de Notas do Windows). Ao ler um documento HTML, um browser tenta interpretar todas as seqncias de caracteres que ficam entre os smbolos "<" e ">". O browser entende que qualquer coisa que estiver entre esses caracteres um descritor HTML (tag) e no deve ser mostrado na tela. Se o descritor for desconhecido ele simplesmente o ignora (e no mostra o contedo na tela) mas se realmente for um elemento HTML (definido na especificao suportada pelo browser), ele usar as informaes contidas entre os smbolos estruturar a pgina, formatando-a de acordo com alguma regra de estilo previamente definida. Toda a formatao de um arquivo HTML feita exclusivamente atravs dos descritores. O browser sabe que o arquivo contm cdigo HTML atravs de sua extenso (ou tipo MIME enviado pelo servidor). Se um arquivo de texto com extenso HTML mas sem descritores for carregado, no browser, toda a sua informao aparecer em um nico pargrafo, sem destaques, sem formatao alguma. Veja as figuras abaixo. Elas ilustram um mesmo texto de um documento HTML digitado no Bloco de Notas do Windows e lidos atravs do Internet Explorer. Na primeira figura, no h descritores HTML e, apesar dos espaos, tabulaes e novas-linhas existente no arquivo de texto visualizado no editor de textos, o browser ignora toda a formatao. J na segunda figura descritores HTML foram includos e o browser foi capaz de formatar a pgina de uma maneira estruturada.
26
Parte 2 - HTML
Arquivo de texto (com extenso .html) sem marcao HTML ao ser visualizado no browser e no editor Bloco de Notas (Windows).
Arquivo de texto (com extenso .html) contendo marcao HTML ao ser visualizado no browser e no editor Bloco de Notas (Windows).
3.1. Elementos e descritores (tags)

A maioria dos elementos HTML possui um descritor inicial e um descritor final, cercando o texto que marcado por eles. A sintaxe bsica
<Elemento> Texto marcado por Elemento </Elemento>
O texto marcado passa a ter uma funo, determinada pelo Elemento. Nem sempre isto significa que o texto marcado ter sua aparncia alterada quando a pgina HTML aparecer no browser. H browsers orientados a caractere que no so capazes de exibir tamanhos de fonte, por exemplo. Outros podem no ter uma forma associada a um elemento. Neste caso, o autor
27
Parte 2 - HTML
da pgina poder definir a forma atravs de uma folha de estilos usando CSS, caso o browser a suporte. Os elementos tambm podem influenciar o comportamento de mecanismos de busca, que atribuem maior importncia ou filtram dados de acordo com a sua funo determinada pelos elementos HTML. O texto marcado e o elemento HTML tambm assumem o papel de objeto abstrato utilizvel por linguagens embutidas na pgina como CSS e JavaScript. Essas linguagens interagem com o HTML atravs de um modelo de objetos que relaciona as estruturas HTML com comportamentos interativos (em JavaScript e DHTML) e forma grfica (CSS). Veja alguns exemplos de texto rotulado com descritores HTML:
<b> Texto em negrito </b> <h2> Subttulo </h2>
Observe que o descritor final praticamente idntico ao descritor inicial. A nica diferena que este ltimo precedido por uma barra ("/"). No faz diferena utilizar letras maisculas ou minsculas para os descritores HTML. Os blocos de texto marcados pelo HTML podem conter outros blocos. Sempre que isto ocorrer, o bloco mais interno dever ser fechado antes do descritor de fechamento do bloco externo. Veja um exemplo:
<h1> Texto <b>muito <i>importante</i></b> para todos</h1>
Este outro exemplo est incorreto pois o bloco <b> fecha sem que o bloco <i> tenha fechado.
<h1> Texto <b>muito <i>importante</b></i> para todos</h1>
Nem todo elemento HTML pode conter outros descritores e mesmo os que podem tm regras que definem quais os elementos permitidos. Existem elementos que no precisam ter descritores de fechamento. O pargrafo, por exemplo, marcado por <P> e </p> pode omitir o descritor final. Isto permitido porque no pode haver um pargrafo dentro de outro, portanto, se o browser encontra um <p> pouco depois de outro <p> ele automaticamente coloca um </p> antes.
<p>Primeiro pargrafo. <p>Incio de outro pargrafo.</p>
Finalmente, h tambm elementos que no podem conter texto ou quaisquer descritores HTML. Eles precisam ser vazios. O descritor final nesses casos sequer permitido (a no ser que aparea logo aps o descritor inicial).
<p>Esta uma frase<br>que ocupa duas linhas.
No exemplo acima <br> (quebra de linha) marca a posio onde a linha deve ser quebrada (no contm ou marca texto algum).
28
Parte 2 - HTML
3.2. Atributos
Alguns elementos HTML podem ter um ou mais atributos, opcionais ou no, que modificam alguma propriedade do texto marcado ou acrescentam alguma informao necessria. Geralmente os atributos so pares do tipo:
propriedade="valor"
Quando presentes, os atributos aparecem apenas no descritor inicial separados por espaos, logo aps o nome do elemento:
<h1 align="center">Ttulo centralizado</h1>
Um descritor pode ter vrios atributos. A ordem em que aparecem no faz diferena desde que apaream no descritor inicial e estejam separados dos outros atributos e do nome do elemento por espaos. Se um atributo for escrito incorretamente ou se o browser no o reconhecer, ele ser ignorado. Diversos atributos so comuns a todos os elementos HTML. Outros s fazem sentido em certos elementos. O valor do atributo no precisa estar entre aspas se contiver apenas letras (A-Z, a-z), nmeros, ponto (.), dois pontos (:), hfen (-) e sublinhado (_). Se o valor atribudo propriedade tiver espaos, preciso coloc-lo entre aspas ou apstrofes. No pode haver espao entre a propriedade e o = nem entre o = e o valor:
propriedade="Valor com espaos" propriedade = "Sintaxe incorreta"
O segundo exemplo acima ser interpretado incorretamente pelo browser como tendo trs atributos e no um (no pode haver espaos!). Atributos geralmente so opcionais. Em alguns casos so obrigatrios, como os atributos HREF e SRC em vnculos de hipertexto e imagens, respectivamente. Ambos informam uma URI onde se encontra um recurso na Web.
<a href="http://www.ibpinet.net/" title="Vai logo! Clica!"> Clique aqui </a> <img src="antas.gif" height=120 width=400 alt="Um casal de antas">
3.3. Caracteres de escape

Os caracteres "<" e ">", por definirem o incio e final dos descritores, no podem ser impressos na tela do browser. Quando necessrio produzi-los, deve-se utilizar uma seqncia de escape. Esta seqncia iniciada por um "&" seguido de uma abreviao e um ponto-evrgula, que indica o final da seqncia. Como o "&" tambm caractere especial, h tambm
29
Parte 2 - HTML
uma seqncia para produzi-lo. As principais seqncias de escape, necessrias para produzir "<", ">", "&" e aspas (quando necessrio) so: Caractere
< > & "
Seqncia de Escape
< > & "
Por exemplo, para produzir as seguintes linhas no browser:

144 < 25 + x < 36 + y Fulano, Sicrano & Cia.
preciso digitar no editor de textos (cdigo HTML):

144 < 25 + x < 36 + y Fulano, Sicrano & Cia.
As seqncias de escape tambm so usadas para produzir caracteres que no so encontrados no teclado, como letras acentuadas, smbolos de copyright, etc. Por exemplo, para produzir, no browser, as palavras:
Plantao magebend hndbfger enciclopdia sueo
pode-se usar, no editor de textos:

Plantação <BR> maßgebend <BR> håndbøger <BR> encilopædia <BR> © <BR> sueño
possvel usar tambm cdigos numricos, porm eles so dependentes do alfabeto utilizado. Consulte a documentao HTML para uma lista completa de todos os cdigos. Os editores mais sofisticados, como por exemplo o HomeSite, facilitam a entrada de caracteres especiais e geram automaticamente as seqncias de escape. Se voc est usando um editor comum, como o Bloco de Notas, deve ter o cuidado de digitar corretamente as seqncias. Alguns browsers simplesmente ignoram seqncias que no conhecem, outros engolem linhas e palavras. Em qualquer um dos casos h perda de informao. Nunca necessrio digitar seqncias de escape se: voc tem os caracteres no seu teclado
30
Parte 2 - HTML
eles fazem parte do conjunto de caracteres ISO-Latin-1 (alfabeto default do HTML) alfabeto default da pgina no foi alterado atravs de um descritor <META> ou de um cabealho HTTP. Todos os browsers h mais de 4 anos entendem acentos e cedilha sem que seja necessrio digitar os cdigos. indiferente usar letras maisculas ou minsculas para o nome do descritor ou seus atributos. Tanto faz usar <BODY>, <body>, <Body> ou <bOdY>; <a HREF="a.html"> ou <A href="a.html">. Deve-se tomar cuidado, porm, com o contedo dos atributos (o valor que s vezes precisam vir entre aspas). Em alguns casos, principalmente quando se lida com URIs ou quando se usa JavaScript, o formato maisculo ou minsculo faz diferena e deve ser respeitado.
3.4. Comentrios
Elementos desconhecidos pelo HTML so ignorados quando colocados entre sinais de < e >. Se voc deseja fazer isto intencionalmente para acrescentar comentrios no cdigo (que no aparecero na pgina), deve usar os comentrios HTML, identificados entre . Qualquer texto ou cdigo entre esses smbolos ser ignorado na formatao da pgina pelo browser.
3.5. Estrutura do documento

A maioria dos elementos HTML segue uma estrutura hierrquica. H uma estrutura bsica (mnima) para uma pgina HTML, construda de acordo com a especificao padro, que deve ser respeitada para garantir uma compatibilidade com o maior nmero de browsers possvel. Esta estrutura est mostrada na figura abaixo:
<!DOCTYPE HTML Public "-//IETF//DTD HTML 4.0//EN" --> <HTML> <HEAD> <TITLE> Descrio do documento </TITLE> Aqui ficam blocos de controle, folha de estilo, funes de scripts, informaes de indexao, atributos que afetam todo o documento, etc. </HEAD> <BODY> Toda a informao visvel da pgina vem aqui. </BODY> </HTML>
A primeira linha: <!DOCTYPE HTML Public "-//IETF//DTD HTML 4.0//EN" --> um descritor SGML que informa ao browser que ele deve interpretar o documento de acordo com a definio do HTML verso 4.0, se possvel. HTML uma linguagem derivada e comple31
Parte 2 - HTML
tamente especificada a partir da linguagem SGML Standard Generalized Markup Language. Voc no precisa saber SGML para usar HTML, basta recortar e colar a linha acima que serve para orientar o browser e permitir a validao do cdigo de sua pgina. O elemento <HTML>...</HTML> marca o incio e o final do documento HTML. Deve conter duas sub-estruturas distintas: o cabealho, delimitado por <HEAD> e </HEAD>, e o corpo do documento, entre os descritores <BODY> e </BODY>.
3.6. Elementos do HEAD

O bloco do cabealho, marcado por <HEAD> e </HEAD> pode conter informaes sobre o contedo do documento utilizada para fins de indexao e organizao. No contm informao que ser exibida na pgina.
TITLE
<TITLE> o nico elemento obrigatrio do bloco do cabealho. Deve conter o ttulo do documento que aparece fora da pgina, na barra de ttulo do browser. o que aparece tambm nos hotlists e bookmarks. O ttulo deve conter informaes que descrevam o documento.
<TITLE>HTML e CSS: Introduo</TITLE>
META
<META> usado para incluir meta-informao como palavras-chave, descries, etc. que podem ser usadas por mecanismos de busca, softwares de pesquisa e catalogao. A informao adicional deve vir nos atributos NAME (descreve o tipo de meta-informao, por exemplo Keywords) e CONTENT (descreve o contedo da meta-informao, por exemplo, uma lista de palavras-chave separadas por vrgula). <META> tambm pode ser usado para adicionar ou redefinir cabealhos HTTP. Isto feito atravs do atributo HTTP-EQUIV. Neste caso, o CONTENT deve conter o contedo do cabealho.
<META HTTP-EQUIV="Set-Cookie" CONTENT="pag=12"> <META NAME="Keywords" CONTENT="html, css, folhas de estilo, estilo"> <META NAME="Description" CONTENT="Esta pgina explica os fundamentos bsicos de HTML e folhas de estilo usando a linguagem CSS."> <META HTTP-EQUIV="Refresh" CONTENT="10;url=pag13.html"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
32
Parte 2 - HTML
LINK
<LINK> usado para vincular uma pgina a outro recurso. Na maioria dos casos, o vnculo simblico e no tem outra finalidade a no ser facilitar a indexao e organizao do site por ferramentas de validao e busca. Vnculos a folhas de estilo incorporam o arquivo que interpretado pelo browser antes de formatar a pgina..
<LINK REL="StyleSheet" HREF="../estilos/default.css">
BASE
<BASE> altera os vnculos de origem e destino da janela, ou seja, a parte absoluta da URL das imagens e vnculos, especificados com URLs relativas, e a janela onde o resultado dos vnculos ser mostrada. Normalmente a URL base de origem o local onde a pgina se encontra no momento em que carrega a imagem ou o usurio clica no vnculo (protocolo atual, mquina atual e diretrio atual ou "./"). Com <BASE>, o autor pode alterar a URL base para que as imagens e links sejam buscados em outros lugares. Normalmente a janela atual (_self) a responsvel por receber o resultado dos vnculos. O autor tambm pode, com <BASE>, fazer com que links abram em outra janela, em novas janelas (_blank) ou em outras partes de estrutura de frames (_top e _parent).
<BASE HREF="." TARGET="_self"> <!-BASE default --> <BASE HREF=" http://www.a.com/dados/"> <!-Os links relativos sero procurados em http://www.a.com/dados/--> <BASE TARGET="lateral2"> <!- links abriro na janela lateral2 -->
3.7. Elementos de BODY

O bloco marcado por <BODY> e </BODY> contm a parte do documento onde ser colocada a informao que efetivamente ser mostrada e formatada na tela pelo browser. Todos os elementos que sero apresentados daqui em diante tratam da formatao do texto (ou imagens) da pgina e devem, portanto, estar presentes no bloco <BODY>. Elementos HTML podem ser de vrios tipos e tm regras especficas sobre o que podem conter e onde podem ser usados. Quanto estrutura que assumem na pgina, podem ser classificados da seguinte forma:

Elementos de bloco (contm texto ou agrupam outros elementos de bloco) Elementos inline (em linha usados dentro do texto) Elementos de lista (usados para construir listas) Elementos de tabela (usados para construir tabelas) Elementos de formulrio (usados para construir formulrios) Elementos para embutir objetos (usados para incluir imagens, applets, vdeos, etc.)
33
Parte 2 - HTML
Entre os elementos inline esto os vnculos (links) de hipertexto, que permitem marcar texto que servir de ligao a outra pgina ou recurso na Internet. O objetivo das sees seguintes ser apresentar uma introduo bsica aos principais elementos HTML. No uma introduo exaustiva. Consulte as referncias e documentao oficial para uma abordagem completa de cada elemento HTML.
34
Parte 2 - HTML
4. Pargrafos e blocos
Blocos so elementos que podem ocorrer dentro de <BODY>. No permitido existir texto diretamente abaixo de <BODY>. O texto dever estar dentro de um bloco, tabela, lista ou formulrio. Alguns blocos HTML s permitem que haja outros blocos dentro deles ( o caso de <BODY>. Outros s admitem texto e elementos inline (em linha elementos que no so blocos e podem ser usados dentro de pargrafos para formatar texto, marcar posies ou incluir imagens). Alguns admitem blocos e texto (<TD>, <LI>, etc.).
4.1. Pargrafos <P>

O descritor <P> abre um pargrafo em HTML. O descritor </P> o fecha. Tudo o que est entre <P> e </P> tratado como um bloco. Se esse nosso pargrafo tiver atributos, eles afetaro todo o bloco. Se seu arquivo HTML contiver:
<P>Um pargrafo</P> <P>Outro pargrafo</P>
um browser como o Netscape ou o Internet Explorer mostrar na tela algo parecido com: Um pargrafo Outro pargrafo <P> pode ter atributos. Um deles o atributo ALIGN. Se ele no for usado, cada pargrafo alinha pela esquerda. Ele pode ser usado para fazer o pargrafo alinhar pelo centro ou pela direita, por exemplo:
<P ALIGN=center>Um pargrafo</P> <P ALIGN=right>Outro pargrafo</P>
vai resultar em: Um pargrafo Outro pargrafo
35
Parte 2 - HTML
O atributo ALIGN, como qualquer outro atributo que altera o posicionamento ou aparncia atravs do HTML, foi deprecado na especificao HTML 4 em benefcio das folhas de estilo. Nem todos os browsers suportam, porm, os recursos de folha de estilo que substituem o ALIGN. Mas as folhas de estilo, quando presentes, sempre tm precedncia. Se uma folha de estilos ditar um alinhamento, aquele proposto pelo atributo ALIGN ignorado. O elemento </P> de um pargrafo opcional. Como no pode haver um pargrafo dentro de outro ou qualquer elemento de bloco dentro de um pargrafo, o browser automaticamente fecha o pargrafo quando encontra um <P>, <H1>, <DIV>, <BLOCKQUOTE>, <PRE> ou outro elemento de bloco. Blocos em HTML nunca podem ocorrer dentro do texto de um pargrafo.
4.2. Cabealhos <H1> a <H6>

Um outro bloco importante na organizao do texto o cabealho. H seis nveis diferentes. O mais importante definido com <H1> e pode ser usado para destacar, por exemplo, o ttulo de um documento. No confunda esse ttulo com <TITLE>, elemento de <HEAD>, que define um ttulo para a pgina mas no aparece na mesma.
<h1>La Cosa Nostra Pizzaria i Ristorante</h1>
Observe no seu browser que o texto aparece grande e em negrito (por causa da folha de estilos do browser). Assim como <P>, <H1> tambm suporta o atributo ALIGN, portanto, pode-se us-lo para colocar o ttulo alinhado pelo centro:
<h1 align=center>La Cosa Nostra Pizzaria i Ristorante</h1>
Alm do H1, h mais 5 nveis de cabealho que podem ser usados para organizar os pargrafos de uma pgina em sees. Veja na figura abaixo o cdigo e o resultado no browser de textos marcados com H1, H2, H3, H4, H5 e H6.
36
Parte 2 - HTML
4.3. Quebras de linha <BR>

Os pargrafos sempre tm uma linha em branco separando-os dos outros blocos (por causa da folha de estilos do browser). Pode-se quebrar uma linha e ainda assim se manter no mesmo pargrafo usando o marcador <BR>. <BR> um marcador vazio. No pode ter descritor de fechamento. <BR> sempre quebra a linha na posio onde for colocado:
<p align=center>"Tradio, qualidade e<br> segurana so nossas<br> prioridades"</p>
Quebras de linha s podem ser usadas dentro de pargrafos, cabealhos e outros elementos de bloco que contm texto.
4.4. Linhas horizontais <HR>

Linhas horizontais decorativas podem ser produzidas pelo <HR>. <HR> como <BR>. No tem marcador final de fechamento. Acontece no lugar onde o colocarmos e ainda introduz uma quebra de linha antes e depois.:
<h1 align=center>La Cosa Nostra Pizzaria i Ristorante</h1> <hr> <h2 align=center>Una impresa de la famiglia Corleone</h2>
A linha atravessa toda a largura do browser. Podemos usar o atributo WIDTH para torn-la menor. WIDTH aceita um nmero absoluto em pixels ou uma porcentagem:
<hr width=50%>
H vrios outros atributos. Consulte a documentao (ou digite a tecla F1 quando estiver com o cursor dentro do elemento <HR> no HomeSite) e teste os possveis resultados no seu browser. Linhas horizontais so elementos de bloco, ou seja, eles quebram a linha antes e depois. Voc no pode ter uma linha horizontal dentro de um pargrafo ou cabealho.
4.5. Citao de bloco <BLOCKQUOTE>

Com a funo de dar o destaque de um bloco de citao em um texto, foi criado o descritor <BLOCKQUOTE>. Na poca em que havia mais de dois browsers dividindo as preferncias na Web, alguns browsers o formatavam em itlico, outros em fonte menor, outros endentavam. Hoje, com o monoplio Microsoft-Netscape, todos os browsers formatam <BLOCKQUOTE> endentado e com uma linha em branco antes e depois. O que era uma questo de estilo acabou virando regra de formatao. Na falta de um mecanismo de controle
37
Parte 2 - HTML
grfico como as folhas de estilos, a funo de <BLOCKQUOTE> acabou reduzida a bloco endentado.
<blockquote> <p>"Tradio, qualidade e<br> segurana so nossas<br> prioridades"</p> </blockquote>
Mas <BLOCKQUOTE> no deve ser usado pensando s na aparncia. Qualquer folha de estilos pode endentar um pargrafo ou mudar a aparncia de <BLOCKQUOTE>. Com o suporte crescente de CSS, o uso de <BLOCKQUOTE> apenas com a finalidade de endentar o texto deve diminuir.
4.6. Texto pr-formatado <PRE>

Vimos que o HTML ignora espaos, tabulaes, novas-linhas e coisas parecidas. Se isto for necessrio, podemos resolver o problema usando o descritor <PRE>. Esse descritor preserva as caractersticas do texto previamente formatado e leva em consideraes as novaslinhas, espaos e tabulaes:
<pre> <p>Nmero de Assassinatos Janeiro Fevereiro Maro Abril Total La Cosa Nostra 1 7 0 3 11 La Santa Camorra 12 12 6 9 39</p></pre>
Se a largura da tabela passar da largura da pgina, s ajustar diminuindo um pouco o nmero de tabulaes ou trocando por espaos que o ajuste fica perfeito. H formas melhores de criar tabelas em HTML, como veremos adiante.
38
Parte 2 - HTML
4.7. Bloco genrico de seo <DIV>

Podemos decidir criar divises na pgina pelos mais diversos motivos. At por motivos de estrutura lgica (mesmo que o resultado no aparea visualmente, pode ser usado por um mecanismo de busca ou indexao). Com folhas de estilo, podemos atribuir um estilo totalmente diferente a uma seo da pgina, como mudar fundo, fontes, cores, etc. O descritor <DIV> usado para definir uma nova seo (ou diviso). Este descritor no faz nada se no tiver atributos. Um dos atributos ALIGN, que tem a mesma funo que o ALIGN de <P> e <H1> s que afeta um bloco inteiro, com todos os descritores que houver dentro. A precedncia ocorre de dentro para fora. Se houver um <P ALIGN=center> dentro de um <DIV ALIGN=right>, o alinhamento de <P> prevalece. <DIV> um dos descritores mais teis em pginas formatadas por folhas de estilo.
4.8. Bloco de endereo <ADDRESS>

O bloco <ADDRESS> tem apenas finalidade funcional. Indica um bloco que contm um endereo. O browser apenas formata o texto contido em <ADDRESS> de forma diferente (em itlico, por exemplo). Como tem pouco valor para controlar a aparncia de uma pgina, pouco usado e raramente gerado por ferramentas grficas como FrontPage ou DreamWeaver. til em clientes no grficos como mecanismos de busca, filtros, etc.
<ADDRESS> <P>Copyright &copy 2000, <a href="mailto: fulano@tal.com">Fulano de Tal</a>. <P>Rua Ag t Eme-le, 4, C-sse sse, WebCity, Internet. </ADDRESS>
39
Parte 2 - HTML
5. Listas
HTML define vrias formas de apresentar listas de informao em um documento. Toda lista um elemento de bloco que possui um descritor inicial e final e s pode conter "itens de lista". Os itens de lista tambm so blocos que podem conter texto, pargrafos ou ainda outras listas. HTML define trs tipos de listas: as listas ordenadas, marcadas pelos descritores <OL> e </OL>; as listas no-ordenadas marcadas por <UL> e </UL> e as listas de definies, marcadas por <DL> e </DL>.
5.1. Listas no-ordenadas <UL>, <LI>

Nas listas UL, cada item da lista contido dentro de <LI> e </LI>. O browser geralmente formata os itens com marcadores (bolinhas pretas). Veja a imagem ao lado e o cdigo abaixo:
<ul> <li>Pizza a moda del Capo</li> <li>Pizza di pepperonni</li> <li>Pizza siciliana</li> </ul>
Voc tambm pode criar listas de nvel hierrquico inferior. O browser formatar a sub-lista de uma forma diferente (geralmente endentada e com um marcador diferente). Por exemplo, para fazer a seguinte lista:

item 1 item 2 item 2.1 item 2.2 item 3
pode-se utilizar o seguinte cdigo:

40
Parte 2 - HTML
<ul> <li>item 1</li> <li>item 2</li> <ul> <li>item 2.1</li> <li>item 2.2</li> </ul> <li>item 3</li> </ul>
5.2. Listas ordenadas <OL>, <LI>

As listas ordenadas so marcadas pelos descritores <OL> e </OL>. Da mesma forma que nas listas no-ordenadas, cada item contido dentro de <LI>. Poderamos numerar as pizzas trocando os UL por OL:
<ol> <li>Pizza a moda del Capo</li> <li>Pizza di pepperonni</li> <li>Pizza siciliana</li> </ol>
1. Pizza a moda del Capo 2. Pizza di pepperonni 3. Pizza siciliana
As listas e seus itens podem ter atributos que mudam suas caractersticas como tipo de marcador, incio da contagem (para listas ordenadas), tipo de numeral (arbico, latino, etc.) A maior parte dessas alteraes pode tambm ser realizada em folhas de estilo.
5.3. Listas de definies <DL>, <DT>, <DD>

Finalmente, existem as listas de definies. Esse tipo de lista usado quando h vrios tpicos curtos acompanhados de uma definio mais longa (em um glossrio, por exemplo). Alista de definies consiste de um conjunto de trs descritores: <DL> e </DL> que delimitam toda a lista; <DT></DT> que marca o termo; e <DD></DD> marca a definio.
A imagem ao abaixo foi produzida com os descritores ao lado:
41
Parte 2 - HTML
<dl> <dt>Caos</dt> <dd>O nada absoluto que existia antes do princpio das coisas.</dd> <dt>Urano</dt> <dd>O deus dos Cus.</dd> <dt>Gaia</dt> <dd>A deusa da Terra.</dd> <dt>Cronos</dt> <dd>Saturno. Filho da unio de Gaia com Urano. Deus do Tempo.</dd> </dl>
42
Parte 2 - HTML
6. Imagens
J vimos que uma pgina HTML uma mera pgina de texto. Mesmo com imagens, ela continuar a ser uma mera pgina de texto, no vai aumentar de tamanho pois as imagens sempre ficaro separadas. As imagens so carregadas na hora em que o browser l a pgina, atravs de um vnculo (link) para a sua localizao atravs de uma URL. Ela pode estar no mesmo diretrio que a pgina ou em outra parte do mundo. Desde que se informe o seu endereo corretamente e que a rede no esteja sem comunicao, o browser localizar a imagem e a colocar na pgina no local onde estiver o descritor <IMG> que a solicitou.
6.1. O objeto <IMG>

<IMG> como <BR> e <HR> que no marcam texto, mas uma posio, por isso no tm descritores de fechamento. No caso de <IMG>, o atributo SRC obrigatrio pois ele quem informa a localizao da imagem atravs de sua URL. A URL pode ser tanto um endereo absoluto (http://alguma.coisa/) como um endereo relativo URL da prpria pgina. Por exemplo, se a URL pgina est em http://blablabla.com/dirdir/pagina.html e a URL da imagem que a pgina carrega http://blablabla.com/dirdir/imagem.gif, pode-se simplesmente chamar a imagem pelo endereo relativo "imagem.gif", usando <IMG SRC="imagem.gif"> na posio, relativa ao texto, onde ela deva aparecer.
URIs relativas
O browser, como est remoto, precisa utilizar uma URI absoluta que contenha o protocolo, o nome da mquina onde roda o servidor e a porta de servios (se no for a porta padro). A URI usada internamente no servidor (o sistema de arquivos virtual) contm apenas o caminho absoluto dentro do mesmo (/, /Imagens ou /Videos). As pginas HTML disponveis via servidor Web esto armazenadas em determinada mquina e diretrio e podem usar, para comunicao entre si, URIs relativas sua localizao. As URIs relativas so teis em HTML. Um vnculo em uma pgina pode se referir a um arquivo que ocupa o mesmo diretrio que ela simplesmente usando o nome do arquivo como URI (e omitindo http://maquina:porta/caminho/). Para ter acesso a um diretrio anterior, usa-se a notao Unix: ../arquivo.txt refere-se a um arquivo chamado arquivo.txt localizado no diretrio anterior..
43
Parte 2 - HTML
Resumindo: servidores e browsers s localizam recursos usando URIs. No faz sentido escrever C:\qualquercoisa\x.txt no browser a no ser para utiliz-lo como visualizador de pginas HTML armazenadas localmente. Tambm no faz sentido usar caminhos desse tipo em arquivos HTML (como veremos). Eles podem at funcionar localmente, sem servidor, mas no mais funcionaro quando forem publicados em um servidor Web. O ideal usar URIs relativas que funcionam em qualquer situao.
6.2. Alinhamento de imagens

A imagem pode ser alinhada de vrias formas em relao ao texto usando HTML (ou folhas de estilo). Veja abaixo alguns exemplos.
<img src="pizza_calabresa.gif" align=middle> e outros...
Use ALIGN=left ou ALIGN=right para fazer com que o texto corra esquerda ou direita da imagem:
<img src="pizza_calabresa.gif" align=left>
6.3. Dimensionamento
Se a imagem ficar muito grande, podemos reduzi-la um pouco usando os atributos HEIGHT e WIDTH. Atravs deles podemos mudar quaisquer dimenses da imagem ao ser exibida, em pixels. Mas cuidado! A qualidade da imagem e seu tamanho continuam os mesmos. Carregar uma imagem gigantesca para depois reduzi-la desperdcio assim como h perda de qualidade ao se ampliar uma imagem pequena.
44
Parte 2 - HTML
HEIGHT e WIDTH no servem s para redimensionar imagens. Usando esses atributos em todas as suas imagens com as suas dimenses verdadeiras torna o carregamento da pgina mais rpido. Por que isto? Porque o browser no vai precisar calcular as dimenses da imagem para saber onde colocar o texto. Se no houver HEIGHT e WIDTH ele s pode mostrar o texto depois de saber o tamanho das imagens. Para descobrir o tamanho da imagem, use um editor grfico como o Lview ou PhotoShop. Que tal uma pizza esticada?
<img src="pizza_calabresa.gif" align=left height=100 width=20>
Se voc no gostou da pizza esticada, use as dimenses corretas em pixels que so HEIGHT=137 e WIDTH=134. Ainda h alguns atributos que permitem que se empurre o texto para longe da figura. Na verdade, criam uma margem invisvel ao redor dela. HSPACE e VSPACE, respectivamente acrescentam margens horizontais e verticais, em pixels, em volta da figura. Todos os atributos de alinhamento podem ser substitudos por folhas de estilo.
<img src="pizza_calabresa.gif" align=left hspace=10>
45
Parte 2 - HTML
7. Formatao de texto (inline elements)

H vrios descritores que tm a funo de atribuir um papel a trechos de texto. Na prtica, este "papel" se reflete na forma de um destaque diferente. Somente com folhas de estilo o "papel" aproveitado totalmente. Os descritores de formatao de caracteres so de dois tipos: descritores lgicos (aqueles que tem uma funo): <STRONG>, <CITE>, <DFN>, <CODE>, <Q>, <VAR>, <KBD>, <SAMP>, <EM>, <SPAN>, <ABBR> e <ACRONYM> os fsicos (aqueles que no tem funo estrutural, s aparncia): <B>, <I>, <BIG>, <SMALL>, <S>, <STRIKE>, <SUB>, <SUP>, <TT>, <U> Esses elementos servem para marcar texto dentro de blocos que os contm como pargrafos, cabealhos, clulas de tabelas, etc. Os descritores fsicos tm um nome associado sua
46
Parte 2 - HTML
aparncia, mas nada impede que uma folha de estilos mude isto. Os descritores lgicos tm uma aparncia default mas o que interessa a sua funo (CITE de citao, ABBR de abreviao, VAR de varivel). Alguns sequer mudam a aparncia do texto a no ser que um estilo seja atribudo atravs de CSS (<SPAN>, <ABBR> e <ACRONYM>, por exemplo, no mudam a aparncia do texto). A figura acima mostra a aparncia default de alguns dos elementos. A sua funo est descrita abaixo: Os elementos abaixo significam mais pela sua funo que pela sua aparncia. So elementos lgicos. EM texto grifado STRONG texto fortemente grifado DFN definio CODE cdigo SAMP amostra KBD teclado VAR varivel CITE citao SAMP amostra ABBR abreviao ACRONYM sigla SPAN container genrico Q texto de citao (entre aspas) Estes outros elementos tm um nome que enfatiza a sua aparncia (so os elementos fsicos). Folhas de estilo, porm, podem alterar tudo. TT I B S STRIKE U BIG SMALL SUB SUP texto de espaamento fixo texto em itlico texto em negrito texto riscado (mesmo que STRIKE) texto riscado texto sublinhado texto em fonte maior texto em fonte menor texto sub-escrito texto sobre-escrito
47
Parte 2 - HTML
8. ncoras e Vnculos
Uma ncora qualquer um dos lados de um vnculo de hipertexto. Em outras palavras, tanto a origem quanto o destino de um link so ncoras. Voc pode criar uma ncora destino em uma pgina HTML usando o elemento <A> com atributo NAME (para dar um nome ncora):
<A NAME="cap1"></A> <H1>Captulo 1 </H1>
O descritor pode ficar vazio, j que s marca uma posio, mas o marcador final necessrio. Para criar um vnculo ncora, utiliza-se o mesmo elemento <A>, em outro lugar da pgina ou em outra pgina, marcando um texto ou imagem que servir de ponto de partida, indicando o destino atravs do atributo HREF:
<A HREF="#cap1">Ir at o captulo 1</A>
O trecho acima vincula a frase "Ir ao captulo 1" com a posio onde est a ncora "cap1", desde que ela esteja definida no mesmo arquivo. Para especificar um destino externo, preciso usar uma URI (relativa ou absoluta). A URI pode apontar para qualquer coisa (no precisa ser uma pgina HTML).
<A HREF="http://www.abc.com/dados/index.html">Ir at o arquivo Index.html</A>
Se o destino for uma determinada seo da pgina, pode-se complementar a URI com o fragmento correspondente ao nome da ncora definida no arquivo:
<A HREF="http://www.abc.com/dados/index.html#cap1">Ir at o captulo 1 no arquivo Index.html</A>
48
Parte 2 - HTML
9. Tabelas
At a verso 2.0, HTML s fornecia meios de estruturar informao que fosse formatada seqencialmente, ou seja, o fluxo do texto e imagens era nico e acontecia da esquerda para a direita e de cima para baixo. No havia meios de dispor, por exemplo, dois pargrafos lado-alado a no ser que todo o texto fosse formatado usando espaos e tabulaes e posteriormente includo em um bloco <PRE>. A introduo das tabelas, proposta no HTML 3.0 (mas adotada pelos browsers mais populares como uma extenso do HTML 2.0), tornou possvel a classificao da informao com marcadores HTML que seria formatada no browser em linhas e colunas. Os marcadores eram inicialmente destinados organizao de dados em forma de tabelas, mas em pouco tempo passaram a ser usados pelos Web designers para obter maior controle sobre a apresentao do contedo das suas pginas. Imagens com partes dinmicas, pginas de mais de uma coluna e controle da largura da pgina so algumas das solues possveis em HTML usando tabelas. Por ter tantas utilidades, as tabelas so um tpico complexo em HTML, mas as possibilidades que oferecem compensam o esforo de conhecer bem cada um dos seus atributos.
9.1. Principais elementos estruturais <TABLE>, <TR>, <TD> ou <TH>

Uma tabela precisa ter no mnimo trs elementos HTML. O elemento <TABLE> representa a tabela e contm uma ou mais linhas, representadas pelo elemento <TR>. O elemento <TR> o nico, dentro de um bloco <TABLE>...</TABLE> que contm a informao da tabela. Essa informao precisa estar dentro de elementos <TD> ou <TH>, que so os nicos permitidos dentro de um <TR>. <TR>...</TR> representa uma linha da tabela (Table Row). Cada linha pode ter uma ou mais clulas de dados em blocos <TD>...</TD> (Table Data) ou <TH>...</TH> (Table Header). O nmero de colunas da tabela , portanto, derivado do nmero de clulas contidas no bloco <TR>...</TR> que tiver mais blocos <TH>...</TH> ou <TD>...</TD> . Como os elementos <TD>, <TH> e <TR> no podem ocorrer dentro de blocos do mesmo tipo, os descritores finais </TD>, </TH> e </TR> so opcionais.
49
Parte 2 - HTML
Os exemplos abaixo ilustram tabelas simples. O cdigo HTML:

<p><table border> <tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr> </table>
resulta na seguinte formatao: 1,1 2,1 3,1 1,2 2,2 3,2 1,3 2,3 3,3
Este outro exemplo

<TABLE BORDER=1> <TR><TD>Mercrio</TD><TD>Venus</TD><TD>Terra</TD></TR> <TR><TD>Marte</TD><TD>Jpiter</TD><TD>Saturno</TD></TR> <TR><TD>Urano</TD><TD>Netuno</TD><TD>Pluto</TD></TR> </TABLE>
produz:
9.2. Tabela sem bordas

BORDER um atributo de <TABLE> que faz com que a tabela seja desenhada com uma borda default (1 pixel). Se o nome BORDER no estiver presente, a borda no aparecer, embora o espao de 1 pixel em volta da tabela permanea. Veja o exemplo abaixo (tabela simples sem bordas):
<TABLE> <TR><TD>Maranho</TD><TD>Piau</TD><TD>Cear</TD></TR> <TR><TD>Rio Grande do Norte</TD><TD>Paraba</TD> <TD>Pernambuco</TD></TR> <TR><TD>Alagoas</TD><TD>Sergipe</TD><TD>Bahia</TD></TR> </TABLE>
50
Parte 2 - HTML
Os elementos <TD> e <TH> de <TABLE> podem conter qualquer texto ou elementos HTML utilizados dentro de <BODY>, como imagens:
<table> <tr><td><img <tr><td><img <tr><td><img <tr><td><img <tr><td><img <tr><td><img </table>
src="ball.gif"></td> src="ball.gif"></td> src="ball.gif"></td> src="ball.gif"></td> src="ball.gif"></td> src="ball.gif"></td>
<td>Altmetro </td></tr> <td>Taqumetro </td></tr> <td>Indicador ...</td></tr> <td>Bssola </td></tr> <td>Nvel de ... </td></tr> <td>Termmetros </td></tr>
9.3. Bordas
O elemento <TABLE> contm vrios outros atributos que alteram a aparncia de toda a tabela. BORDER=valor permite especificar a largura da borda da tabela atravs de um valor absoluto em pixels. A tabela abaixo possui uma borda de 10 pixels:
<TABLE BORDER=10> <TR><TD><a href="estate.html">Estate</a></TD> <TD><a href="autunno.html">Autunno</a></TD></TR> <TR><TD><a href="primavera.html">Primavera</a></TD> <TD><a href="inverno.html">Inverno</a></TD></TR> </TABLE>
9.4. Espaamento
CELLSPACING=valor controla a quantidade de espao entre as clulas de uma tabela.
Normalmente esse espao de 1 pixel. CELLPADDING=valor controla a quantidade de espao entre o texto da clula e suas bordas (margens internas das clulas). O valor default de 2 pixels, portanto, se as bordas forem zero, haver 3 pixels entre os elementos da tabela a no ser que esse espao seja alterado com CELLSPACING e CELLPADDING. Veja os exemplos abaixo:
51
Parte 2 - HTML
<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR><TD>Aranha</TD><TD>Lacrau</TD><TD>Escorpio</TD></TR> <TR><TD>Barata</TD><TD>Formiga</TD><TD>Mosca</TD></TR> </TABLE>
<TABLE BORDER CELLPADDING=0 CELLSPACING=10> (...) </TABLE>
<TABLE BORDER CELLPADDING=10 CELLSPACING=10> (...) </TABLE>
Se os atributos BORDER, CELLPADDING e CELLSPACING forem definidos com o valor "0", no haver espao algum entre os elementos da tabela a no ser que o espao seja adicionado de forma explcita (linhas em branco, tabulaes ou espaos dentro do bloco <TD>).
9.5. Largura da tabela

O atributo WIDTH=numero ou percentagem permite especificar a largura da tabela, atravs de uma medida absoluta em pixels ou atravs de uma percentagem da largura visvel da pgina. Sem WIDTH, a tabela ocupar apenas o espao horizontal necessrio para conter todos os seus elementos, as bordas e margens. Se uma tabela for definida com WIDTH=100%, ela ocupar toda a largura visvel da pgina e mudar de tamanho caso a janela seja redimensionada (e a rea visvel seja alterada). Se for definida com WIDTH=500, ter uma largura fixa e que no mudar mesmo com o redimensionamento da janela. No uso de tabelas como ferramenta para o layout das pginas, WIDTH usado para determinar a largura da pgina que est contida em uma tabela de nica clula. Pginas criadas para a resoluo de 640x480 so tipicamente definidas dentro de tabelas com largura de 600 pixels. Para 800x600, comum usar 750 pixels:
52
Parte 2 - HTML
<body> <table width=750> <tr><td> (... a pgina inteira ...) </td></tr> </table> </body>
No exemplo abaixo h duas tabelas. A primeira no possui o atributo WIDTH. A segunda possui o atributo WIDTH=50%.
<TABLE BORDER> <TR><TD>16</TD> <TD>25</TD> <TD>26</TD></TR> <TR><TD>34</TD> <TD>40</TD> <TD>43</TD></TR> </TABLE> <TABLE BORDER WIDTH="50%"> <TR><TD>16</TD> <TD>25</TD> <TD>26</TD></TR> <TR><TD>34</TD> <TD>40</TD> <TD>43</TD></TR> </TABLE>
9.6. Altura, posicionamento e cores

De forma anloga ao atributo WIDTH, HEIGHT=numero ou percentagem permite especificar a altura da tabela. O suporte a esse recurso, porm, no consistente em browsers que no suportam totalmente o HTML 4. A tabela, se tiver uma largura menor que o espao horizontal visvel, ser alinhada pela margem esquerda da pgina a no ser que possua o atributo ALIGN com o valor right ( direita) ou center. HSPACE e VSPACE podem ser usados para acrescentar espao vertical e horizontal como margens externas para toda a tabela, da mesma forma como so usados por imagens. O atributo BACKGROUND, se presente, deve receber a URL de uma imagem que ir se repetir no fundo da tabela, da linha ou da clula. BGCOLOR permite que se defina uma cor. importante observar que a cor default da tabela (TABLE) das clulas (TD) e linhas (TR) transparente, ou seja, se houver imagens ou cores de fundo na pgina, elas sero visveis atravs da tabela. Isto verdade apenas se a tabela ou clulas no tiverem atributos BACKGROUND
53
Parte 2 - HTML
e BGCOLOR. A cor da tabela poder no ser visvel se cores opacas tiverem sido atribudas a blocos TD e TR. Veja agora a tabela que antes construmos com <PRE>:
<table border> <tr><th>Nmero de Assassinatos</th> <th>La Cosa Nostra</th><th>La Santa <tr><td>Janeiro </td><td> 1 </td><td> <tr><td>Fevereiro </td><td> 7 </td><td> <tr><td>Maro </td><td> 0 </td><td> <tr><td>Abril </td><td> 3 </td><td> <tr><td>Total </td><td>11 </td><td> </table>
Camorra</th></tr> 12</td></tr> 12</td></tr> 6 </td></tr> 9 </td></tr> 39</td></tr>
A tabela fica melhor alinhada pelo centro. Use <DIV> para fazer isto.
<div align="center"><table border>(...)</table></div>
Observe que, por default, os dados de <TH> so alinhados pelo centro, enquanto que os dados de <TD> so alinhados com a margem esquerda. Tudo isto e muito mais podem ser alterados usando atributos como ALIGN, VALIGN (alinhamento vertical) alm, claro, folhas de estilo. Tabelas tendem a ficar muito complexas, principalmente quando usadas umas dentro das outras, o que bastante comum no HTML. importante entender como funcionam as tabelas mas o ideal cri-las atravs de programas grficos como o DreamWeaver ou FrontPage. s vezes, porm, necessrio fazer pequenas alteraes por causa de diferenas entre browsers e assim, saber identificar as clulas de uma tabela no cdigo HTML essencial.
9.7. Alinhamento de clulas

Clulas e linhas de tabelas podem ter seu contedo alinhado sem usar folhas de estilo atravs dos atributos ALIGN e VALIGN aplicados a <TD> e <TR>. ALIGN pode assumir os valores left, right ou center. VALIGN pode ser top, bottom ou center. Com os dois possvel colocar um objeto alinhado em qualquer posio da tabela.
54
Parte 2 - HTML
Qualquer <TD> tambm pode ter atributos HEIGHT e WIDTH para controlar a altura e largura da clula, respectivamente. Esse valor pode ser absoluto (em pixels) ou relativo altura/largura totais da tabela. Mas HEIGHT e WIDTH devem ser usados com cautela. Nem sempre possvel determinar essas dimenses. Blocos <NOBR> e <PRE> podem fazer a tabela crescer alm de sua largura mxima estabelecida. A altura no pode ser limitada pois o texto contido na tabela sempre pode fazer com que ela tenha que crescer. Imagens tem todo o poder para destruir completamente quaisquer limitaes de altura e largura definidas nas tabelas.
9.8. Combinao de clulas

Clulas podem ser mescladas em uma s atravessando colunas e linhas com os atributos ROWSPAN e COLSPAN aplicveis a <TD> ou <TH>. Com esses recursos possvel construir tabelas O seguinte exemplo utiliza COLSPAN e ROWSPAN para construir uma tabela contendo vrias clulas mescladas:
<table border=2 cellpadding="5"> <tr> <td colspan="3">Trs colunas combinadas</td> <td rowspan="3">Coluna 4<br>ocupa trs<br>linhas</td> </tr> <tr> <td rowspan="2">Coluna 1<br>2 linhas</td> <td>Coluna 2</td> <td>Coluna 3</td> </tr> <tr> <td colspan="2">Colunas 2 e 3 juntas</td> </tr>
</table>
9.9. Otimizao <THEAD>, <TBODY>, <COLGROUP>, <COL>

Para poder desenhar uma tabela na tela, o browser tem que carregar todo o cdigo antes. Se a tabela for muito complexa ou muito longa, isto pode demorar. Os elementos <COL> e <COLGROUP> permite que se informe o browser com antecedncia o nmero de colunas que a tabela ter, fazendo com que ele ganhe tempo ao desenh-la. Esses elementos tambm permitem que se aplique uma formatao em uma coluna ou grupo de colunas (e no apenas nas linhas, como ocorre atualmente).
55
Parte 2 - HTML
<table border=1> <colgroup width=100> <col> <col align=right> </colgroup> <tr><td>Dados 1.1</td><td>Dados 1.2</td><td>Dados 1.3</td></tr> <tr><td>Dados 2.1</td><td>Dados 2.2</td><td>Dados 2.3</td></tr> <tr><td>Dados 3.1</td><td>Dados 3.2</td><td>Dados 3.3</td></tr> </table>
Os elementos <THEAD>, <TBODY>, e <TFOOT> servem para identificar o cabealho, o corpo e o rodap de uma tabela para poder controlar sua aparncia e permitir (futuramente) a impresso de tabelas em mltiplas pginas com repetio do cabealho e rodap. Se nenhum desses elementos estiver presente, toda a tabela ser considerada <TBODY>. Se houver <THEAD>, a ocorrncia de <TBODY> marcar o fim daquele bloco (</THEAD> opcional nesse caso). Veja um exemplo:
<table border=1> <thead valign=top align=center> <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr> </thead> <tfoot valign=bottom align=center> <tr><td>Rodap 1</td><td> Rodap 2</td><td> Rodap 3</td></tr> </tfoot> <tbody> <tr><td>Dados 1.1</td><td>Dados 1.2</td><td>Dados 1.3</td></tr> <tr><td>Dados 2.1</td><td>Dados 2.2</td><td>Dados 2.3</td></tr> <tr><td>Dados 3.1</td><td>Dados 3.2</td><td>Dados 3.3</td></tr> </tbody> </table>
A utilidade de <TBODY>, <TFOOT> e <THEAD> maior com folhas de estilo. Consulte a documentao para conhecer os atributos usados nesses elementos para controlar a formatao das tabelas.
9.10.
Legenda <CAPTION>
O bloco <CAPTION> pode ser usado dentro de <TABLE>...</TABLE> para incluir uma legenda numa tabela. Pode-se usar o atributo ALIGN para posicionar a legenda acima ou ao lado da tabela.
<TABLE border=1> (...) <CAPTION> Tabela 1: Preos e quantidade</CAPTION> </TABLE>
56
Parte 2 - HTML
10. Elementos deprecados

10.1. Blocos que alteram estilo (deprecados)
O bloco <ADDRESS> pouco usado atualmente. <BLOCKQUOTE> usado bastante, porm somente para endentao. Isto reflete uma preocupao maior com a aparncia da pgina que com sua estrutura. Com a possibilidade de uso de folhas de estilo, a formatao oferecida pelo HTML perde importncia pois um estilo endentado, por exemplo, pode ser aplicado a qualquer elemento. <BLOCKQUOTE> ento passar a ter uma importncia menor. S seria usado com a finalidade de marcar uma citao e no meramente para empurrar o texto um pouco para a direita. A funo do texto marcado o que importa em HTML e isto interessa no s a browsers mas a qualquer cliente Web, como por exemplo, os mecanismos de busca. Estes no esto interessados na formatao da pgina, mas na importncia de cada bloco. Para um mecanismo de busca, um bloco <H1> mais importante que um <P> ou <H2> independente da aparncia que ele apresente no browser. Um bloco <ADDRESS> pode ser usado para filtrar os autores de cada pgina de um site, mesmo que o texto marcado por ele sequer altere a aparncia visual do endereo, nome ou e-mail do autor quando mostrado na pgina. Mas como as folhas de estilo chegaram h pouco tempo, ainda h vestgios de elementos que foram criados com finalidades puramente visuais. Eles foram deprecados (uso no recomendado) pelo HTML 4.0, e podem ser substitudos por elementos novos, mas vale a pena conhec-los pois ainda aparecem em pginas geradas por ferramentas como o FrontPage, DreamWeaver e Netscape Composer.
10.2.
Bloco centrado <CENTER>
O Netscape 3.0 no reconhece <DIV ALIGN=center>. O Netscape 4 reconhece o elemento <DIV> mas no permite que um bloco <DIV> contenha outro bloco <DIV>. Se o objetivo de um <DIV> meramente centrar um conjunto de pargrafos nele contidos, podese substitu-lo por um bloco <CENTER>...</CENTER>:
<CENTER> <TABLE BORDER=1> <TR><TD> Tabela centrada na pgina </TD></TR>
57
Parte 2 - HTML
</TABLE> </CENTER>
10.3.
Bloco sem quebras de linha <NOBR> e <WBR>
Se voc colocar um pargrafo dentro de um bloco <NOBR>...</NOBR>, ele no formatar como os pargrafos comuns, quebrando linhas para que todo o texto fique visvel. Se o texto for grande o suficiente voc ter que rolar a tela horizontalmente para v-lo. Isto pode ser til em listagens de programas e outros textos onde a quebra de linha automtica pode prejudicar a preciso das informaes. Dentro de um bloco <NOBR>, talvez haja a necessidade de se quebrar a linha num determinado ponto. Para isto sempre pode-se usar <BR>. Em outros casos, quebrar a linha no desejado mas se for necessrio, podemos querer que a quebra ocorra em um lugar especfico. Para isto tempos o elemento <WBR>, que s tem utilidade dentro de um bloco <NOBR>. <WBR> indica um ponto de quebra de linha em potencial. Se o browser precisar quebrar uma linha para torn-la visvel no browser, ele o far na posio <WBR>. Se isto no for necessrio (todo o pargrafo est visvel), ento ele ignorar o <WBR>.
<NOBR> <P>Se tiver que ser quebrado, que ocorra aqui<WBR> e no em outro lugar.</P> </NOBR>
O comportamento do <NOBR> pode ser aplicado a blocos <DIV>, pargrafos individuais, cabealhos <H1> a <H6> e outros blocos atravs de folhas de estilos. O uso de <NOBR> ainda pode ser justificado para garantir a compatibilidade com browsers Netscape que no implementam totalmente a especificao de folhas de estilo.
10.4.
Elementos de estilo (deprecados no HTML 4.0)
No precisamos ficar satisfeitos com o fundo cinza, letras pretas e links azuis. Podemos mudar todas as cores. Veremos futuramente como fazer tudo isto usando folhas de estilo, mas o HTML tambm oferece meios de realizar alteraes de estilo. A especificao HTML recomenda fortemente que esses elementos no sejam usados, mas que se prefira usar folhas de estilo, mas, como o suporte a folhas de estilo no chega aos browsers verso 3.0, e voc ainda pode ter clientes com tais browsers que no vo ficar satisfeitos com pginas monocromticas, importante conhecer esses elementos. medida em que os browsers verso 3.0 forem entrando em extino, deve-se gradualmente abandonar toda a formatao de cores e fontes atravs do HTML, pois prejudica enormemente a manuteno de um site, alm de torn-lo maior e mais sujeito a erros.
58
Parte 2 - HTML
10.5.
Atributos de uma pgina <BODY atributos>

Os atributos podem ser mudados atravs do descritor <BODY>. Vrios atributos permitem definir uma imagem de papel de parede, uma cor de fundo, cor para todo o texto e links. As cores so informadas usando ou um cdigo RGB em hexadecimal ou um nome padronizado. Para mudar a cor de fundo, utilizamos o atributo BGCOLOR.
<body bgcolor="white" text="green" link="red" vlink="black">
Usamos nomes de cores. Se quisssemos usar uma cor diferente das 16 cores daquela tabela bsica (veja apndice), precisaramos usar cdigos hexadecimais. Os cdigos so um conjunto de 6 algarismos hexadecimais precedidos de um "#". Pode-se, atravs deles, obter mais de 200 cores diferentes. O papel de parede uma imagem que repetida vrias vezes no fundo. Pode-se usar qualquer imagem mas ela no deve atrapalhar a leitura do texto. Deve ser informada a URL completa ou relativa:
<body background="fundo.jpg" bgcolor="white" text="green" link="red" vlink="black">
10.6.

Cores e fontes <FONT>

SIZE, que informa o tamanho (variando de 1 a 7 ou de -3 a +3); FACE, que informa o nome exato de uma fonte ou uma lista delas separadas por vrgula (terminando em uma fonte genrica serif, sans-serif ou monospace); e COLOR, que informa uma cor em cdigo hexadecimal (por exemplo #FF0080) ou pelo nome (red, blue, navy), da mesma forma como feito em BODY.
Cores de texto individuais, fontes e tamanhos podem ser alterados com um descritor inline chamado <FONT>, que pode receber trs atributos:
<FONT> totalmente dispensvel forem utilizadas folhas de estilo, mas, como alguns browsers ainda no suportam folhas de estilo, pode-se usar esse elemento para garantir uma aparncia melhor s pginas Web.
59
Parte 2 - HTML
<li> <font face="Palatino, serif" size=5 color="#80001F"> Pizza a moda del Capo</font> </li>
A maior parte das ferramentas grficas que criam pginas HTML usam <FONT> para ter controle sobre a aparncia do texto. Alguns ignoram totalmente a estrutura (aumentando a fonte de <P> em vez de usar <H1>). Isto no s prejudica a estrutura do HTML, que tambm tem outras finalidades alm de formatar texto em um browser grfico, como dificulta a manuteno do site com folhas de estilo. Tudo o que possvel fazer com <FONT> se pode fazer com folhas de estilo e bem melhor. Os browsers Netscape 4.0, Internet Explorer 3.0 e 4.0 suportam as propriedades de folhas de estilo que substituem totalmente a necessidade de se usar <FONT>, que um elemento deprecado na especificao HTML 4.0.
10.7.
Concluso
A finalidade deste mdulo foi proporcionar uma introduo linguagem HTML. No deixe de consultar os tutoriais e guias de referncia sobre HTML para conhecer outros elementos e atributos que foram deixados de fora desta exposio. Antes de usar um determinado recurso, porm, teste nos browsers e plataformas utilizadas pelo pblico-alvo de seu site. Nem tudo o que padro implementado nos browsers que atualmente dominam o mercado.
60
Parte 2 - HTML
11. Testes
1. Marque apenas as alternativas verdadeiras: a) Em um arquivo HTML, um bloco de texto cercado por um par de descritores HTML poder no ter sua aparncia alterada quando o arquivo for carregado em um browser. b) Atributos s podem ocorrer no descritor inicial de um elemento HTML c) Atributos podem ocorrer em qualquer ordem dentro de um descritor HTML. d) Descritores e atributos desconhecidos pelo browser so ignorados e) Os valores dos atributos devem ser definidos entre aspas, sempre. 2. O que acontecer com o trecho de cdigo HTML abaixo

quando a pgina no qual est contigo dor visualizada em um browser? a) Ele aparecer em destaque na barra de ttulo do browser b) Ele aparecer na pgina entre duas linhas horizontais c) Ele ser completamente ignorado pelo browser d) Ele no aparecer na pgina mas causar o aparecimento de uma linha em branco no lugar onde deveria aparecer. e) O browser mostrar uma mensagem de erro. 3. Quais trechos de cdigo HTML abaixo esto incorretos? Marque um ou mais. a) <p>Este um pargrafo <b>importante</b>.</p> b) <h1>Ttulo do captulo</h1 align="center"> c) <td>Voltar para <a href="casa.html">Casa</a></td> d) <p><a href="../index.html"><b>Retornar</a></b></p> e) <p>Pargrafo um. <p>Pargrafo dois. f) <A HREF="arquivo.gif">Link para imagem</A> g) <IMG SRC = "imagem.jpg" ALT = "Figura 1"> h) <p align=center>Texto alinhado pelo centro</p> i) <p>O elemento <table> serve para construir tabelas</p> j) <p>Copyright &copy 2000, Jos Severino da Silva</p> 4. Marque apenas as afirmaes falsas: a) Espaos extras, tabulaes e quebras de linha que ocorrem no texto so geralmente ignorados em pginas HTML. b) Tudo o que aparece na pgina deve estar dentro de um bloco delimitado em HTML pelos descritores <BODY> e </BODY>.
61
Parte 2 - HTML
c) O elemento <META> serve para incluir informaes sobre a pgina que podem ser teis para facilitar a localizao da pgina por mecanismos de busca. d) Se uma pgina tiver o descritor <BASE TARGET="nova">, clicar em um de seus vnculos (links) poder causar a abertura de novas janelas. e) O ttulo do documento, expresso entre <TITLE> e </TITLE> aparece no incio da pgina HTML, antes do restante do texto ou imagens. 5. Para criar uma lista simples de itens numerados, qual conjunto de elementos HTML voc utilizaria? Escolha uma alternativa. a) <P> e <LI> b) <UL> e <LI> c) <OL> e <LI> d) <TD> e <LI> e) <UL>, <OL> e <LI> 6. Quais trechos de cdigo HTML abaixo sempre sero exibidos em itlico em qualquer browser? Marque uma ou mais opes. a) <I>Texto grifado</I> b) <EM>Texto grifado</EM> c) <CITE>Texto grifado</CITE> d) <ADDRESS>Texto grifado</ADDRESS> e) Nenhuma das alternativas acima garante que o texto aparecer em itlico. Para as trs prximas questes a seguir, considere a seguinte estrutura de arquivos (em itlico) e diretrios (em negrito):
/____ index.html |____ documentos | |____ mar.html | |____ ondas.jpg |____ imagens |___ barco.gif
7. Qual das alternativas abaixo contm o cdigo HTML para que o arquivo index.html mostre a imagem barco.gif e contenha um link para o arquivo mar.html? Marque uma alternativa. a) <img src="barco.gif"> <a href="mar.html">Mar</a> b) <img src="../imagens/barco.gif">
<a href="../documentos/mar.html">Mar</a>
c) <img src="imagens/barco.gif">
<a href="documentos/mar.html"></a>Mar
d) <img src="/imagens/barco.gif">
<a href="documentos/mar.html">Mar</a> e) <img src="../barco.gif"> <a href="../mar.html">Mar</a>
8. Qual das alternativas abaixo contm o cdigo HTML para que o arquivo mar.html mostre respectivamente as imagens ondas.jpg e barco.gif? Marque uma alternativa. a) <img src="documentos/ondas.jpg"> e <img src="/imagens/barco.gif">
62
Parte 2 - HTML
b) c) d) e)
<img <img <img <img
src="ondas.jpg"> e <img src="../imagens/barco.gif"> src="/documentos/ondas.jpg"> e <img src="../barco.gif"> src="ondas.jpg"> e <img src="/barco.gif"> src="ondas.jpg"> e <img src="barco.gif">
9. Suponha que o arquivo index.html possua uma seo ancorada por um elemento <a name="secao2"></a>. Qual das alternativas abaixo contm o cdigo HTML para que o arquivo mar.html contenha um link que aponte para essa ncora do arquivo index.html? Marque uma alternativa. a) <a name="/index.html#secao2">Seo 2 do ndice</a> b) <a href="index.html#secao2">Seo 2 do ndice</a> c) <a href="../index.html">Seo 2 do ndice</a> d) <a href="#secao2">Seo 2 do ndice</a> e) <a href="/index.html#secao2">Seo 2 do ndice</a> 10. Qual dos trechos de cdigo HTML abaixo desenhar a seguinte tabela? a) <table border="1" width="80">
<tr> <td colspan="2">1</td> </tr> <tr> <td rowspan="2">4</td> <td>5</td> <td rowspan="2">2</td> </tr> <tr> <td colspan="2">3</td> </tr> </table>
b) <table border="1" width="80">

<tr> <td colspan="2">1</td> <td rowspan="2">2</td> <td rowspan="2">4</td> <td>5</td> <td colspan="2">3</td> </tr> </table>
c) <table border="1" width="80">

<tr> <td <td <tr> <td <td <tr> <td </table> colspan="2">1</td> rowspan="2">2</td> </tr> rowspan="2">4</td> rowspan="1">5</td> </tr> colspan="2">3</td> </tr>
d) <table border="1" width="80">

<tr> <td rowspan="2">1</td> <td colspan="2">2</td> </tr> <tr> <td colspan="2">4</td> <td>5</td> </tr> <tr> <td rowspan="2">3</td> </tr> </table>
e) Nenhuma das alternativas anteriores

63
de
Parte 3 Folhas de Estilo
Contedo
12. Introduo........................................................................................................... 67
12.1. O que so folhas de estilo? ..........................................................................................67 12.2. Para que servem as folhas de estilo ............................................................................68 Separar apresentao da estrutura....................................................................................68 Controle absoluto da aparncia da pgina......................................................................68 Pginas mais leves ..............................................................................................................68 Manuteno de um grande site ........................................................................................68
13. Regras Bsicas .................................................................................................... 70

13.1. Regras, declaraes e seletores ....................................................................................70 13.2. Mltiplas declaraes e seletores.................................................................................71 13.3. Comentrios e instrues.............................................................................................71 13.4. Valores ............................................................................................................................72 13.5. Herana...........................................................................................................................73 13.6. Descritores HTML especiais .......................................................................................73 13.7. Como incluir estilos em uma pgina ..........................................................................74 13.8. Classes e IDs..................................................................................................................76 13.9. Links (pseudo-classes e pseudo-elementos) ..............................................................77 13.10. Seletores de contexto..................................................................................................77 13.11. Cascata de folhas de estilo .........................................................................................77
14. Fontes ................................................................................................................. 79

14.1. font-family......................................................................................................................79 14.2. font-size ..........................................................................................................................80 14.3. font-style e font-weight ................................................................................................82 14.4. font-variant.....................................................................................................................84 14.5. A propriedade font........................................................................................................85
15. Atributos de texto ............................................................................................... 86

15.1. text-transform ................................................................................................................86 15.2. text-decoration...............................................................................................................87 15.3. text-align e vertical-align...............................................................................................88 15.4. text-indent ......................................................................................................................89 15.5. line-height.......................................................................................................................89 15.6. letter-spacing ..................................................................................................................90
16. Cores .................................................................................................................. 91

16.1. color ................................................................................................................................92 16.2. background-color ..........................................................................................................92 16.3. background-image.........................................................................................................93 16.4. background-repeat ........................................................................................................93
65
16.5. background-position e background-attachment.......................................................93 16.6. background.....................................................................................................................95
17. Propriedades de classificao ............................................................................... 96

17.1. display .............................................................................................................................96 17.2. white-space.....................................................................................................................96 17.3. list-style ...........................................................................................................................97
18. Controle de blocos................................................................................................ 98

18.1. margin e padding ...........................................................................................................99 18.2. border-width ................................................................................................................100 18.3. border-color .................................................................................................................100 18.4. border-style ..................................................................................................................101 18.5. border............................................................................................................................102 18.6. width e height ..............................................................................................................102 18.7. float................................................................................................................................102 18.8. clear ...............................................................................................................................103
19. Posicionamento.................................................................................................. 104

19.1. position, top e left .......................................................................................................104 19.2. z-index...........................................................................................................................106 19.3. visibility .........................................................................................................................106
20. Exerccios ......................................................................................................... 107

20.1. Testes sobre Folhas de Estilo....................................................................................107 20.2. Exerccios com Folhas de Estilo...............................................................................109
66
12. Introduo
12.1. O que so folhas de estilo?
Uma folha de estilos um conjunto de regras que informa a um programa, responsvel pela formatao de um documento, como organizar a pgina, como posicionar e expor o texto e, dependendo de onde aplicada, como organizar uma coleo de documentos. A maior parte dos programas de editorao eletrnica e processadores de texto modernos trabalham com folhas de estilos. O processo consiste em definir um rtulo (nome do estilo) para um determinado pargrafo e em seguida alterar os seus atributos. Todo pargrafo que for rotulado com aquele estilo passar a exibir as caractersticas definidas anteriormente. Qualquer alterao nos atributos de um estilo afetar todos os pargrafos que estiverem rotulados com ele. Esta descrio, que se aplica a estilos em processadores de texto e programas de editorao eletrnica, tambm vale para a Web. Na Web, os "pargrafos" so blocos marcados por descritores HTML como <H1>, <P>, etc. Para fazer com que todos os blocos de textos marcados com <H1> em um documento sejam exibidos em tamanho de 48 pontos, basta definir a regra:
H1 {font-size: 48pt}
dentro de uma "folha de estilos" aplicada ao documento. A folha de estilos pode ser um arquivo de textos simples (alfabeto ISO-Latin1) com a extenso .css. Para vincul-lo a uma pgina HTML, esta deve ter dentro do seu bloco <HEAD> ... </HEAD> o seguinte descritor:
<LINK REL="stylesheet" HREF="url_do_arquivo.css">
O restante deste artigo tratar dos fundamentos da tecnologia de folhas de estilos aplicveis ao HTML, chamada de Cascading Style Sheets (folhas de estilo em cascata), mostrando como estabelecer as regras de estilo para um bloco de texto, uma pgina ou todo um site. Sees especficas abordaro cores, imagens, tipologia e posicionamento. Este texto no completo. Omitimos propriedades e recursos no suportados nos browsers e nos limitamos queles recursos que constam da especificao CSS1 (no inclumos recursos proprietrios nem a maior parte das novidades do CSS2 que no
67
funcionam nos browsers disponveis no mercado). Para uma abordagem mais completa, consulte a documentao oficial do W3C: http://www.w3.org/Style/.
12.2. Para que servem as folhas de estilo

Separar apresentao da estrutura
Com isto possvel voltar a suportar browsers antigos que antes estavam condenados por no conseguirem ler a informao sem perdas. Com a informao toda armazenada no HTML (estrutura), a apresentao (estilo) seria uma camada a mais, alterando a disposio do texto, cores, etc. mas sem afetar a estrutura essencial da informao. Isto permite que uma pgina tenha vrios estilos e use scripts (programas embutidos) para decidir qual carregar (em funo do browser e da plataforma). Isto muito menos trabalho que fazer uma pgina para cada browser e plataforma, pois a atualizao feita apenas no HTML. Tambm, com isso, possvel ter uma folha de estilos especial somente para impresso, onde haveria informaes de quebra de pginas, etc. (este recurso no faz parte da verso 1 do CSS).
Controle absoluto da aparncia da pgina.

algo que no se tem com o HTML. Pode-se usar tabelas, GIFs invisveis de um pixel e mais uma dzia de "macetes" mas no se consegue fazer o texto fluir suavemente em volta de uma imagem irregular, por exemplo. Alm do mais, quanto mais sofisticada a tcnica, mais difcil de codificar e mais "sujo" fica o cdigo, o que o torna mais sujeito a erros. Com CSS, pode-se colocar uma imagem em qualquer lugar da pgina (at fora dela), usando tcnicas de posicionamento absoluto ou relativo. Pode-se escolher a posio exata da imagem de background e faz-la combinar com algo no foreground. As dimenses e posies so exatas e dadas em unidades conhecidas no mundo da tipografia como pixels, pontos, paicas, milmetros.
Pginas mais leves

Com folhas de estilo possvel criar muitas pginas com um layout sofisticado que antes s era possvel usando imagens, tecnologias como Flash ou applets Java. Estas pginas eram sempre mais pesadas, pois precisavam carregar imagens, componentes, programas. Com CSS possvel definir texto de qualquer tamanho, posicion-lo por cima de outros objetos, ao lado ou por cima de texto e conseguir efeitos sofisticados a um custo (banda de rede) baixo. possvel ainda importar fontes (que o usurio talvez no tenha).
Manuteno de um grande site

Uma folha de estilos serve para toda uma coleo de pginas, podendo ser usada para dar um estilo consistente a todo o site. Sendo aplicada em separado da informao e estrutura, no precisar ser atualizada todas as vezes em que a informao for mudada. A pgina pode ser atualizada em um editor HTML ou gerador de HTML simples, sem recursos de cor ou alinha68
mento, e ser formatada na hora em que for carregada pelo browser. possvel tambm fazer o contrrio: mudar o estilo sem alterar a informao, como ter uma pgina que sempre carrega com um estilo diferente. O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem CSS ( uma linguagem declarativa) trabalha com os elementos tratando-os como "objetos". Cada pargrafo <P>, cada <H1>, cada <IMG> um objeto. Objetos podem ser agrupados de vrias formas. A cada objeto ou grupo de objetos podem ser atribudas propriedades de estilo definidas em regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' ser azul, ter tamanho de 12 pontos, espaamento duplo, alinhamento pela direita e usar a famlia de fontes Arial, ou, se esta no existir, Helvetica, ou ento a fonte sem-serifa default do sistema". Um arquivo CSS com apenas a regra acima conteria o texto:
P.editorial {color: 0000ff; font-size: 12pt; line-height: 24pt; text-align: right; font-family: arial, helvetica, sans-serif}
Se a folha de estilos acima for aplicada a uma pgina que possua pargrafos <P> rotulados com o nome "editorial" (atributo 'CLASS=editorial'), eles sero formatados de acordo com as propriedades especificadas se o browser suportar CSS. Se o browser no suportar CSS, a estrutura ser mantida (embora a aparncia no seja a ideal) e o usurio conseguir ter acesso informao estruturada, mesmo em um meio de visualizao mais limitado. Quando se usa CSS, so poucas as modificaes necessrias no HTML. No so necessrios novos descritores ou extenses. No exemplo acima, teremos que incluir apenas um atributo a mais (o atributo CLASS, do HTML 4) classificando os pargrafos que fazem parte do nosso 'editorial' (pargrafos que tem uma funo diferente dos demais). A grande vantagem das folhas de estilo a preservao da estrutura do HTML e um controle muito melhor do autor sobre a sua aparncia na tela do usurio final. Uma pgina dever aparecer da melhor forma possvel tanto num PowerPC sofisticado como naquele IBM PCXT 4.77MHz rodando o Lynx for DOS. O primeiro utilizar todos os recursos grficos determinados pelas folhas de estilo. O segundo as ignorar, mas preservar a estrutura e a informao
69
13. Regras Bsicas

13.1. Regras, declaraes e seletores
A estrutura dos estilos bastante simples. Consiste de uma lista de regras. Cada regra possui um bloco, entre chaves ({ e }), de uma ou mais declaraes aplicveis a um ou mais seletores. Um seletor algo no qual pode-se aplicar um estilo. Pode ser um descritor HTML, uma hierarquia de descritores ou um atributo que identifique um grupo de descritores. Uma folha de estilos consiste de uma ou mais linhas de regras, da forma:
seletores { declaraes }
As regras podem estar dentro de um arquivo de texto (ISO Latin1 ou ASCII 8-bit) com extenso ".css" ou embutidas em um arquivo HTML (as vrias maneiras de aplicar estilos a um arquivo HTML sero vistas na seo seguinte). Um exemplo de folha de estilos com apenas uma regra foi mostrada na seo anterior:
H1 {font-size: 48pt}
Nesta regra, H1 o seletor e {font-size: 48pt} o bloco da declarao, que estabelece um tamanho de fonte (prop. font-size) para todos os objetos (pargrafos) marcados com <H1>. As declaraes so feitas usando a sintaxe:
propriedade: valor
Observe que se usa dois-pontos (:) e no igual (=) para aplicar um valor a uma propriedade. Pode haver mais de uma declarao de estilo para um seletor. Isto pode ser feito em outro bloco. Cada linha acrescenta ou sobrepe declaraes feitas em linhas anteriores:
H1 { H1 { H1 { font-size: 24pt } color: blue } font-size: 18pt }
No trecho acima, o texto marcado com <H1> ser azul e ter tamanho de 18pt porque a regra H1 { font-size: 18pt } ocorreu depois da regra H1 { font-size: 24pt }.
70
13.2. Mltiplas declaraes e seletores

Vrias declaraes de estilo podem ser aplicadas de uma vez a um seletor. As declaraes, ento, precisam ser separadas por ponto-e-vrgula (;) :
H1 {font-size: 18pt; color: blue; font-family: Caslon, serif } BODY { background : navy; color : white }
Os espaos em branco (espaos, novas-linhas e tabulaes) so ignorados pelo browser na hora de interpretar uma folha de estilos e podem ser usados para melhorar a sua legibilidade. As duas linhas acima ficariam mais legveis da forma:
BODY {background : navy; color : white } H1 {color: blue; font-size: 18pt; font-family: Caslon, serif }
Uma declarao s termina com uma fecha-chaves (}) ou com um ponto-e-vrgula (;). Dependendo da propriedade, esta pode ter vrios valores separados por vrgulas ou valores compostos com as palavras separadas por espaos:
P { H2 { font: 12pt "Times New Roman" bold } font-family: Arial, Helvetica, Sans-serif }
As aspas devem ser usadas quando uma palavra que tem espaos precisar ser usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado como o nome de uma fonte distinta, e no como trs valores, o que ocorreria se as aspas no estivessem presentes. Assim como um seletor pode ter vrias propriedades definidas para ele, um mesmo conjunto de propriedades pode ser aplicada a um grupo de seletores, separando-os com vrgulas:
H1, H2, H3 { color: blue; font-size: 18pt; font-family: Arial, Helvetica, Sans-serif }
As declaraes de estilo podem ser aplicadas em quase qualquer descritor HTML - no mundo perfeito! Na prtica, muitos browsers ainda tm problemas de compatibilidade, e no implementam a especificao risca, como veremos adiante. Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem descritores finais freqentemente ignorados, como </P>, </LI>, etc. A falta do </P> pode causar o "vazamento" das declaraes de estilo para fora do pargrafo em alguns browsers.
13.3. Comentrios e instrues

Alm das regras, um arquivo CSS pode ter ainda comentrios e instrues (precedidas de @). No CSS1 apenas uma instruo definida: @import. Ela usada para que uma folha de estilos possa importar estilos de outro arquivo CSS atravs de uma URL. Os estilos importados
71
sempre tm menos precedncia que os locais (ou seja, os locais podem sobrepor os importados). A sintaxe da instruo @import :
@import url(url_da_folha_de_estilos)
No deve haver outras estruturas (a no ser comentrios) na linha onde h uma instruo. Exemplos do uso de @import:
@import url(../basico.css) @import url(http://longe.com/estilos/basico.css)
Pode-se inserir trechos que sero ignorados pelo browser ao interpretar folhas de estilo usando blocos de comentrio. Comentrios em folhas de estilos so iguais a comentrios em linguagens como C ou Java: entre /* e */:
/* este texto ignorado at que seja encontrado um asterisco seguido por uma barra */
13.4. Valores
Os valores que so aplicados s propriedades tm uma sintaxe que depende da propriedade que os usa. Propriedades que envolvem tamanho (tamanho de fontes, espaamento, etc.) geralmente recebem valores que consistem de um nmero e uma unidade ou porcentagem. O sinal de porcentagem ou unidade deve estar junto ao nmero correspondente sem espaos. Ou seja, deve-se escrever font-size: 24pt e no font-size: 24 pt. Cores e arquivos externos podem requerer uma funo para serem definidos. So duas as funes (ou procedimentos) do CSS1: rgb(), que constri uma cor, e url(), que retorna um vnculo para uma imagem ou arquivo CSS (usada em instrues @import). H quatro maneiras diferentes de especificar cores em CSS: usando o nome do sistema (red, yellow, blue, black, lightGray), usando seu cdigo RGB hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a funo rgb(). A funo rgb() requer trs argumentos que representam a intensidade dos componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz (no opaca). A intensidade pode ser expressa em valores inteiros de 0 (mnimo) a 255 (mximo) ou em valores fracionrios de 0% a 100%. As instrues abaixo definem a mesma cor para um pargrafo:
P P P P {color: {color: {color: {color: red} ff0000} rgb(100%, 0%, 0%)} rgb(255, 0, 0)}
No deve haver espao entre o "b" de rgb e o abre-parnteses. A funo URL pode ser usada em propriedades que requerem arquivos (no caso, imagens) como valores. Ela recebe um argumento apenas com a URL (relativa ou absoluta) da imagem:
72
P {background-image: url(../imagens/tijolos.gif)} P {background-image: url(http://longe.com/imagens/pedras.png)}
13.5. Herana
Os estilos "herdam" propriedades de vrias maneiras. Uma das formas atravs da prpria hierarquia do HTML. Se voc declara propriedades para BODY, todos os descritores sero afetados a no ser que tenham as suas propriedades redefinidas dentro de um novo bloco de declaraes CSS. Se um <I> est dentro de um <P> e todos os <P> so declarados como tendo a cor vermelha, o <I> tambm ser vermelho a menos que haja um bloco, posterior quela declarao, redefinindo as propriedades de <I>, por exemplo:
P {font: 12pt "Times New Roman" bold; color: red } I {color: black }
faria com que o texto "seletor", no texto a seguir permanecesse preto:

<P>Um <I>seletor</I> algo no qual pode-se aplicar um estilo.</P>
Se voc definir atributos para os descritores <BODY> ou <HTML>, toda a pgina ser afetada. No exemplo a seguir, uma cor de texto definida para BODY ser usada para colorir todo o texto do documento, a no ser que sejam sobrepostos por uma regra subseqente:
BODY {color: navy } H1, H2 {color: yellow }
Os blocos acima faro com que todo o texto seja azul marinho, exceto aquele marcado com H1 ou H2, que ser amarelo. Os browsers comerciais tm problemas principalmente com a aplicao de estilos em BODY, portanto, freqentemente preciso mexer nas declaraes de estilo, acrescentando propriedades redundantes para adapt-los realidade. No site do W3C (http://www.w3.org) h links para documentos que analisam essas diferenas entre browsers. O site http://www.w3.org/Stye/CSS/Test/ uma plataforma de testes que pode ser usada para verificar se um browser suporta ou no determinada propriedade.
13.6. Descritores HTML especiais

Dois descritores HTML tm importncia fundamental em CSS. Eles so descritores estruturais puros que no definem apresentao especfica na folha de estilos nativa do browser. Com CSS possvel definir propriedades de apresentao para esses descritores. Eles so <DIV> e <SPAN>. <SPAN> um descritor que deve ser usado dentro de blocos de texto apenas. chamado de descritor em-linha (inline), j que no quebra a linha antes ou depois. Ele se assemelha
73
a descritores como <B>, <I>, <SMALL>, <A HREF> e <SUP> que servem para formatar texto dentro de pargrafos, clulas de tabela, etc. <DIV> um descritor que define um bloco ou seo da pgina. Pode ser usado para dividir a pgina em sees (e subsees no Internet Explorer) e permitir que sejam aplicados estilos especficos a essas sees. Descritores de bloco so <P>, <H1>, <TABLE>, etc. <DIV> define um bloco sem funo ou aparncia definida. A funo e aparncia ser determinada em CSS.
13.7. Como incluir estilos em uma pgina

H trs formas de aplicar uma folha de estilos a uma pgina Web. Estas formas iro determinar a abrangncia dos estilos: se afetaro um trecho limitado de uma pgina, se a toda a pgina, ou se iro afetar todo um site. A primeira forma, mais abrangente, a vinculao a um arquivo CSS. Isto feito ligando a pgina HTML a um arquivo de folha de estilo, usando do descritor <LINK>). Este mtodo permite que mltiplas pginas ou um site inteiro usem a mesma folha de estilos. Para fazer um vnculo uma folha de estilos externa, deve-se criar um arquivo de texto contendo um conjunto de regras de estilo em CSS, salv-lo com uma extenso ".css" e chamlo a partir de todos os documentos HTML onde o estilo ser aplicado. No preciso compilar ou qualquer coisa do tipo. Depois que as definies estiverem prontas, o estilo estar pronto para ser usado. Pode ser importado atravs do descritor LINK:
<HEAD> (...) <LINK REL=STYLESHEET HREF="http://internet-name/mystyles.css" TYPE="text/css"> </HEAD>
O elemento <LINK> no tem descritor de fechamento e deve ser usado dentro do bloco <HEAD>. Uma segunda forma, permite que estilos sejam aplicados localmente, em uma nica pgina, embutindo uma folha de estilos diretamente na pgina HTML dentro de um bloco formado pelos descritores <STYLE> e </STYLE>. Este mtodo permite que voc altere as propriedades de estilo de uma nica pgina. A linguagem que embutida em um bloco <STYLE> a mesma usada nos arquivos CSS. <STYLE> ... </STYLE> deve ser usado em <HEAD>. Um atributo type informa o tipo de arquivo utilizado:
<style type="text/css"> P { font: 12pt "Times New Roman" bold; color: red } I { color: black } </style> 74
As propriedades declaradas no bloco <STYLE> sobrepem qualquer propriedades anteriores do elemento (inclusive as de uma folha de estilos importada, se houver). comum colocar todo o cdigo entre comentrios HTML () para proteger browsers antigos da exibio indesejada do cdigo:
<style type="text/css"> <!-P { font: 12pt "Times New Roman" bold; color: red } I { color: black } --> </style>
Finalmente, h uma forma de aplicar estilos diretamente a um descritor individual. Para fazer isto deve-se usar o atributo STYLE em quase qualquer descritor. Este mtodo no corresponde exatamente a uma "folha" de estilos, pois os estilos aplicados no so reaproveitveis. Permite alterar a aparncia de um nico descritor, de um conjunto deles ou de um bloco de informaes da pgina. Por exemplo:
<P STYLE="color: green; font-size: 12pt">Este texto</P>
Esta propriedade mais interessante quando aplicada em um descritor que usado para agrupar vrios outros, como <DIV>, que divide a pgina em sees ou <SPAN>, usado em situaes bem especficas. Usar estilos desta forma pouco diferente de usar atributos locais. Os benefcios de poder mudar a fonte, cores e outras caractersticas em todo o documento ficam mais difceis. Pode-se usar um, dois ou os trs mtodos ao mesmo tempo. As caractersticas definidas pelos mais especficos sobrepem as definidas pelos mais genricos. Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes regras:
H1 { color: green; font-size: 24pt} P { color: blue}
Suponha que ele seja carregado na pgina a seguir que possui um bloco <STYLE> com uma nova definio de P e H1.
<HEAD> <link rel=STYLESHEET href="estilos.css" type="text/css"> <style type="text/css"><!-P {font: 12pt "Times New Roman" bold; color: red } H1 {color: black } --></style> </HEAD>
75
Mais adiante, existe um pargrafo e um ttulo da forma:

<h1 style="color: navy">Auto da Compadecida</h1> <p style="color: black">Ariano Suassuna (Recife, 1955)</p>
Qual estilo ir predominar? Pela regra de que o mais especfico sobrepe o mais geral, teremos uma pgina onde os <h1> tm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da pgina) e os <p> so vermelhos (sobreposto pelo estilo da pgina). Nas duas linhas acima (e nelas apenas), o <h1> ser azul marinho (sobrepondo o estilo da pgina) e o <p> ser preto.
13.8. Classes e IDs

s vezes um pargrafo tem uma aparncia diferente dos outros pargrafos em uma certa parte do texto. Para mudar o estilo dele, pode-se incluir as declaraes em um atributo STYLE. Mas, se tal procedimento torna difcil a localizao e a gerncia dos estilos, pode-se usar um recurso para marc-lo de forma que seja considerado diferente. Isto pode ser feito atribuindolhe uma identificao nica. Em HTML 3.2, pode-se usar o atributo ID:
<P ID=w779>Texto especial</P>
Para alterar as caractersticas deste pargrafo agora, pode-se usar o seu ID como seletor, da forma:
#w779 {color: cyan }
Se isto estiver em um arquivo CSS, todas as pginas que o usam e que tiverem um elemento com o ID #w779 sero afetadas. Se houver mais de um com o mesmo ID apenas o primeiro ser afetado. Melhor que usar ID agrupar caractersticas semelhantes em classes. Uma classe uma variao de um determinado objeto. Por exemplo, um texto teatral pode ter trs pargrafos com apresentao diferente, representando as falas de trs personagens. Se quisssemos que cada um tivesse uma cor diferente, poderamos declarar cada um como sendo de uma classe distinta:
<p class=padre>Eu retiro o que disse, Joo</p> <p class=grilo>Retirando ou no retirando, o fato que o cachorro enterrou-se em latim</p> <p class=bispo>Um cachorro? Enterrado em latim? </p> <p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, no sabe? </p>
Para dar a cada pargrafo de um mesmo personagem (mesma classe) os mesmos atributos, usa-se:
P.grilo { color: maroon } P.padre { color: black } P.bispo { color: navy }
76
Desta maneira, todos os textos que devero ser lidos pelo personagem "Bispo" estaro em azul marinho. Uma classe tambm pode conter descritores diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderamos criar uma classe sem citar o descritor:
.verde { color: green }
Todos os descritores que tiverem o atributo CLASS=verde sero afetados, por exemplo: <P class=verde>, <h3 class=verde>, <table class=verde>, etc.
13.9. Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com <A>, possvel atribuir propriedades diferentes para cada estado:
A:link {color: red} A:active {color: 660011} A:visited {color: black; text-decoration: none} A:hover {color: blue; text-decoration: underline}
muda as caractersticas dos links no-visitados, ativos e visitados. Assim como qualquer seletor, os links podem ser combinados com outros descritores:
P, A:link, H2 {color: red}
13.10. Seletores de contexto

Voc tambm pode definir seletores que s sero aplicados se estiverem no contexto de um outro seletor, por exemplo:
P.verde EM {color: 000040}
indica que o EM s ter sua cor alterada se ocorrer dentro de um bloco P da classe "verde". Os seletores de contexto podem ser bem longos:
.bispo P UL UL LI A.classX:link {font-style: italic }
far com que apenas os links no visitados da classe "classX" que estejam dentro de itens de lista de segundo nvel situados dentro de um pargrafo dentro de um bloco qualquer da classe "bispo" sejam mostradas em itlico.
13.11. Cascata de folhas de estilo

Existem seis diferentes folhas de estilo que podem ser definidas. Alm das trs formas que mostramos em seo anterior deste captulo, h ainda, segundo a especificao, mais trs folhas de estilos que podem afetar uma pgina: 1) uma folha de estilos que importada por outra folha de estilos (isto diferente daquela que vinculada ao HTML, dentro de um
77
<link>), 2) uma folha de estilos definida pelo usurio (ou leitor da pgina) e 3) a folha de estilos default do browser (que usada quando outra folha no define os estilos). Todas estas folhas de estilo diferentes podem provocar uma grande confuso se no houver uma regra clara de como devem ser consideradas. Ainda h um stimo fator que a formatao introduzida pelo HTML, como nos descritores <font> e atributos align=center. Listando todas as folhas de estilos que podem afetar um texto, temos: 1. Folha de estilos default do browser: todos os browsers possuem regras comuns para formatar um texto. A especificao HTML no impe um formatao padro. Netscape Navigator por exemplo usa um fundo cinza como padro e links azuis sublinhados. J o Internet Explorer prefere um fundo branco. 2. Folha de estilos definida pelo leitor: a especificao define a possibilidade do leitor estabelecer uma folha de estilos prpria. Isto parcialmente conseguido quando o browser permite que se escolha diferentes cores para fundo, texto e links. 3. Folha de estilos vinculada ao HTML: a folha de estilos que importada pelo arquivo HTML atravs do descritor de ligao <link> 4. Folha de estilos importada: uma folha de estilos externa (arquivo CSS) pode ser importada de dentro de outra folha de estilos (um outro arquivo CSS ou bloco <style> no HTML) usando um comando especial @import:
@import url (outroestilo.css)
5. Folha de estilos embutida no HTML: a folha de estilos que aparece na pgina HTML entre os descritores <style> e </style>. 6. Folha de estilos local: aquela que aplicada localmente a um descritor usando o atributo style="lista de declaraes". 7. Estilo definido pelo HTML: atributos e descritores podem provocar alteraes na aparncia do texto, por exemplo: <font size>, <big>, <body bgcolor>, <p align=center>, etc. Um browser que siga a especificao CSS risca obedece a seguinte ordem de precedncia: 1. Local, 2. Embutida, 3. Vinculada, 4. Importada, 5. HTML, 6. Leitor, 7. Browser Na prtica, as coisas no so to bonitas. No Internet Explorer para Macintosh, a ordem respeitada. Na verso do Internet Explorer 3.0 para Windows, os estilos vinculados ao HTML tm mais importncia que os embutidos (o mesmo ocorre com Explorer 4 e Navigator 4). No Netscape Navigator 4 e Internet Explorer 4, os estilos aplicados via HTML tm precedncia mxima (no Internet Explorer 3 a precedncia funciona corretamente, mas no no 4). Com as diferenas existentes nos browsers de hoje, no vale a pena ainda se aprofundar neste assunto. A soluo ainda testar, testar, testar antes de colocar no ar.
78
14. Fontes
Fontes so estilos de apresentao consistentes aplicados a alfabetos. Uma fonte consiste de atributos que alteram a aparncia de um smbolo, sem alterar o seu significado. Oferecem as informaes necessrias para que uma letra ou smbolo possa ser representado graficamente. Os atributos essenciais de uma fonte so:

Seu tipo (ou famlia) Seu tamanho Seu estilo (regular, itlico, outline, etc.) Seu peso (normal, negrito, light, black)
Para representar qualquer texto, portanto, preciso escolher uma fonte, ou seja: um tipo, um estilo, um peso e um tamanho. Letras maisculas e minsculas no so consideradas fontes diferentes, pois tm um significado distinto. Os quatro atributos acima podem ser definidos em CSS atravs das propriedades fontfamily, font-size, font-style e font-weight. No preciso definir todas pois sempre tm valores default. CSS oferece ainda font-variant, que permite considerar outras variaes de uma fonte.
14.1. font-family
Uma famlia de fontes (tipo) selecionada com a propriedade font-family. Esta propriedade aceita uma lista de valores separados por vrgulas representando nomes de fontes existentes ou no no sistema do usurio. No final da lista, pode ser includa uma referncia a uma famlia genrica, que ser usada caso nenhum dos nomes coincida com o nome de uma fonte do sistema. A sintaxe :
font-family: fonte1, fonte2, fonte3, ..., fonte-genrica
Exemplos:
H1 H2 H3 H4 { { { { font-family: font-family: font-family: font-family: garamond } arial, helvetica, sans-serif } courier, "courier new", monospaced } monospaced }
79
As fontes sans-serif e monospaced so nomes genricos. No se referem a uma fonte em particular mas a um grupo genrico. Os outros so serif, cursive e fantasy.
O browser usar a primeira fonte da lista se a encontrar. Se no encontrar, ir procurar a fonte seguinte. Se o nome de uma fonte tiver mais de uma palavra, este dever ser colocado entre aspas. As aspas podem ser apstrofes simples (') ou aspas duplas ("). Os apstrofes so necessrios quando for preciso especificar estilos dentro de um atributo HTML:
<p style="font-family: 'times new roman', sans-serif">...</p>
14.2. font-size
O tamanho de uma fonte alterado usando font-size. Pode ser especificado em valores absolutos ou relativos. Para especificar um valor absoluto, pode-se usar:
font-size: nmero(pt | px | cm | mm | pc | in) font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho tambm pode ser especificado relativo ao elemento no qual o atual objeto est contido.
font-size: tamanho_relativo (smaller, larger) font-size: comprimento (em ou ex) font-size: porcentagem%
Exemplos:
H1 { font-size: 24pt} H1 { font-size: x-large} H1 { font-size: smaller} H1 { font-size: 1.5em} H1 { font-size: 150%} <H1 style="font-size: 1cm">
Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usurios nos browsers atuais. As unidades vlidas so: pt (pontos), px (pixels), pc (paicas), cm (centmetros), mm (milmetros) e in (polegadas).
80
Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tamanhos de 1 a 7 do descritor <font size> e podem variar de acordo com a famlia de fontes usada (variam bastante entre plataformas tambm). Veja um exemplo comparativo e o resultado no Internet Explorer para Windows:
<style> p {font-family: serif} .t1 {font-size: xx-small} .t2 {font-size: x-small} .t3 {font-size: small} .t4 {font-size: medium} .t5 {font-size: large} .t6 {font-size: x-large} .t7 {font-size: xx-large} </style> (...) <p><span class=t1>xx-small</span> | <span class=t2>x-small</span> | <span class=t3>small</span> | <span class=t4>medium</span> | <span class=t5>large</span> | <span class=t6>x-large</span> | <span class=t7>xx-large</span> <br> <font size="1">size=1</font> | <font size="2">size=2</font> | <font size="3">size=3</font> | <font size="4">size=4</font> | <font size="5">size=5</font> | <font size="6">size=6</font> | <font size="7">size=7</font> |</p>
Os tamanhos relativos funcionam como o <BIG> e <SMALL>, aumentando a fonte atual por 150%. A diferena que podem passar alm do limite xx-large (ou <font size=7>) ou xx-small (font size=1>). Os comprimentos referem-se a unidades comuns em tipografia. Um "em" uma distncia horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho, um em corresponde a uma distncia de 20 pixels de largura). Um "ex" a altura das letras de caixa-baixa (sem incluir as hastes ascendentes e descendentes). Tanto "em" como "ex" usam valores relativos ao elemento que contm o elemento atual. So teis principalmente em espaamento, sendo pouco usados em fontes.
81
As porcentagens so afetadas pela herana, por exemplo:

<style> .sec {font-size: 18pt}; .sec H1 {font-size: 200%} .sec P {font-size: 50%} </style> </head> <body> <div class=sec>Este o texto desta seo. <h1>2 vezes maior</h1> <p>Este um pargrafo da seo. O texto tem 50% do tamanho do texto da seo.</p> </div>
As porcentagens de 50% e 200% so aplicadas na fonte atual, que a fonte do bloco que contm os dois elementos (<DIV>), e que tem tamanho 18pt. O resultado que o <H1> ser exibido em tamanho 26pt e <P> em tamanho 9pt.
14.3. font-style e font-weight

O estilo de uma fonte afetado atravs de duas diferentes propriedades: font-weight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinao. Sintaxe:
font-style: normal (ou italic, oblique)
Exemplos:
H1 { font-style: italic } I { font-style: normal } <p style="font-style: oblique">...</p>
Sintaxe:
82
font-weight: normal | bold (normal=400 e bold = 700) font-weight: bolder | lighter (valores relativos) font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemplos:
H1 { font-weight: normal } B { font-weight: 900 } <b> ... <b style="font-weight: bolder">...</b> ... </b>
A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic uma fonte distinta da normal, e no, meramente uma verso inclinada da mesma. Os browsers, porm, no encontrando um equivalente "italic", "oblique", "kursiv" ou similar iro inclinar o texto, simulando um itlico. Os valores numricos para font-weight oferecem um controle excepcional sobre o peso da fonte na tela, embora isto esteja limitado aos nveis disponveis nas fontes instaladas (para um mesmo nome de fonte). Na prtica, dos 9 nveis disponveis de peso, se consegue 4 ou 5 nveis diferentes de mais pesado ou mais leve. 700 o "bold" tpico e 400 o "normal". O exemplo a seguir ilustra o efeito com a fonte "Tahoma" (Windows):
<style type=text/css> P {font-family: tahoma; font-size: 18pt;} .b100 {font-weight: 100} .b200 {font-weight: 200} .b300 {font-weight: 300} .b400 {font-weight: 400} .b500 {font-weight: 500} .b600 {font-weight: 600} .b700 {font-weight: 700} .b800 {font-weight: 800} .b900 {font-weight: 900} .nor {font-weight: normal} .bol {font-weight: bold} </style> (...) <p><span class=b100>100</span> <span class=b200>200</span> <span class=b300>300</span> <span class=b400>400</span> <span class=b500>500</span> <span class=nor>normal</span><br> <span class=b600>600</span><br> <span class=b700>700</span> <span class=b800>800</span> <span class=bol>bold</span><br> <span class=b900>900</span></p> 83
Os valores lighter e bolder especificam pesos de fontes relativos a algum valor herdado. Eles avanam ou retrocedem na escala de 100 a 900 relativos aos pesos de fontes.
14.4. font-variant
Atualmente a nica opo disponvel para esta propriedade small-caps, que deve colocar o texto selecionado em maisculas, porm menores que as capitulares. Na prtica, at as maisculas so reduzidas no Internet Explorer. Sintaxe:
font-variant: small-caps
Exemplos:
<style> .sm {font-variant: small-caps} .tc {font-size: 120%} </style> </head> <body> <p>Um texto simples sem SmallCaps...</p> <p class=sm>Um texto simples com SmallCaps...</p> <p>Os small-caps acima, no Internet Explorer 4, so falsos. As letras maisculas no deveriam ter sido afetadas.</p> <p><span class=sm><span class=tc>U</span>m texto simples com <span class=tc>S</span>mall<span class=tc>C</span>aps... verdadeiros</span>.</p>
84
14.5. A propriedade font

Para especificar vrias propriedades de um seletor de uma vez s, pode-se usar a propriedade font em vez de definir em separado font-size, font-weight, font-family, etc. Nesta sintaxe, a ordem dos fatores importante, porm nem todos os elementos precisam estar presentes:
font: font-style font-variant font-weight font-size line-height font-family
Exemplos:
H1 {font: italic 700 24pt Tahoma, Arial, sans-serif }
85
15. Atributos de texto

As propriedades desta seo tratam de transformaes e atributos aplicados a texto, no afetando a exibio das fontes. Os atributos tipogrficos afetam a forma como o texto apresentado na tela como o espaamento entre linhas, entre palavras, entre letras, o alinhamento de pargrafos e a endentao. A propriedade text-transform permite colocar letras em maisculas ou minsculas e a propriedade text-decoration permite acrescentar ou tirar efeitos decorativos do texto como riscados e sublinhados.
15.1. text-transform
A propriedade text-transform realiza transformaes no formato caixa-alta ou caixabaixa do texto. Sintaxe:
text-transform: text-transform: text-transform: text-transform: capitalize uppercase lowercase none (valor default)
Exemplos:
H1 {text-transform: capitalize}
Capitalize coloca a primeira letra de cada palavra em maisculas. Uppercase coloca tudo em maisculas e lowercase coloca tudo em minsculas. None remove qualquer transformao deixando o texto da forma como foi definido antes das transformaes.
<style> p {font-weight: bold} span {font-weight: normal} .non {text-transform: none} .upp {text-transform: uppercase} .cap {text-transform: capitalize} .low {text-transform: lowercase} </style> (...) <p>Sem transformao: <span class=non> preciso conhecer bem HTML e CSS</span></p>
86
<p>Uppercase: <span class=upp> preciso conhecer bem HTML e CSS</span></p> <p>Capitalize: <span class=cap> preciso conhecer bem HTML e CSS</span></p> <p>Lowercase: <span class=low> preciso conhecer bem HTML e CSS</span></p>
15.2. text-decoration
A propriedade text-decoration permite colocar (ou tirar) sublinhados, linhas sobre e atravessando o texto, etc. Sintaxe:
text-decoration: text-decoration: text-decoration: text-decoration: text-decoration: underline (default em links) overline line-through blink none (default)
Exemplos:
h1 {text-decoration: overline} <a href="algumlugar.html" style="text-decoration: none">Link sem sublinhado</a> <style> .und {text-decoration: underline} .ovr {text-decoration: overline} .blk {text-decoration: blink} .lin {text-decoration: line-through} .non, .non a {text-decoration: none} </style> (...) <p><span class=und>Underline. <a href="#">Link</a></span> ----<span class=ovr>Overline. <a href="#">Link</a></span></p> <p><span class=blk>Blink. <a href="#">Link</a></span> ----<span class=lin>Line-through. <a href="#">Link</a></span> ----<span class=non>None. <a href="#">Link</a></span></p> 87
Vnculos (links) so normalmente sublinhados na maior parte dos browsers. O sublinhado pode ser removido com a propriedade text-decoration: none. O browser Netscape 4 no suporta a propriedade overline. O Internet Explorer no suporta a propriedade blink.
15.3. text-align e vertical-align

CSS oferece propriedades que permitem controlar o alinhamento horizontal do texto, seu alinhamento vertical e endentao do texto na primeira linha. O alinhamento horizontal o mesmo conseguido com o atributo align do HTML, s que o da folha de estilos tem precedncia. A sintaxe :
text-align: left | right | center | justify
O alinhamento s se aplica a elementos de bloco (<P>, <DIV>, H1, etc.) e elementos como applets e imagens. A caracterstica herdada para sub-blocos. O valor default sempre left. Exemplo:
DIV { text-align: center }
Alinhamento vertical em HTML s pode ser aplicado a tabelas e imagens. Com CSS, esta propriedade estendida a qualquer elemento de texto e imagens. A sintaxe :
vertical-align: baseline | top | text-top | middle | bottom | text-bottom vertical-align: sub | super vertical-align: porcentagem %
O valor default baseline. As porcentagens referem-se a altura da linha (line-heght) do prprio elemento. Usando porcentagens negativas consegue-se sobrepor elementos. Na prtica, apenas o Internet Explorer 4 suporta vertical-align com os valores sub e super (coloca elementos em subscrito ou sobrescrito).
88
15.4. text-indent
A propriedade text-indent se aplica a elementos de bloco e realiza a endentao da primeira linha. A sua sintaxe :
text-indent: comprimento text-indent: porcentagem
A porcentagem ocorre em relao largura do elemento que contm o seletor. Pode ser a largura total da pgina, a largura da clula de uma tabela, etc. Exemplos:
P { text-indent: 1 cm } P {text-indent: 50% } <P style="text-indent: 1in">
A endentao tratada aqui apenas para uma linha de texto. Para endentar blocos inteiros, deve-se usar as margens (em seo mais a frente).
15.5. line-height
Este atributo usado para controlar o espao que existe antes e depois de uma linha de texto. Ela especifica a altura total de uma linha de texto. Se voc tem um texto de 10 pontos e uma line-height de 20 pontos (line-height: 2), haver 5 pontos antes e 5 pontos depois de cada linha de texto (espao duplo). O espao simples equivale geralmente a lineheight: 120%. Uma line-height menor que o tamanho da fonte produzir sobreposio de texto. Embora ambos os browsers mais populares suportem este recurso, ele no ocorre da maneira correta. Os browsers no acrescentam a mesma quantidade de espao antes e depois como esperado. Um bug no Internet Explorer 3 faz com que ele interprete valores absolutos (sem unidade) como valores em pixels. Por exemplo, 1.5 indica espao 1 e meio ou 150%. No Internet Explorer 3 as linhas ficam sobrepostas pois o browser interpreta a unidade como 1.5 pixels. Evite, portanto, usar valores absolutos (use porcentagens). A sintaxe :
line-height: nmero_absoluto line-height: comprimento ou unidade line-height: porcentagem
89
Exemplos:
H1 H1 H1 H1 {line-height: {line-height: {line-height: {line-height: 0 } // sobreposio de linhas 2 } // espao duplo 0.3em } 150% } // espao 1 e meio
Se voc usar um valor percentual menor que 100%, um valor absoluto menor que 1 ou uma unidade menor que o tamanho da fonte, haver sobreposio de linhas.
15.6. letter-spacing
A propriedade letter-spacing altera o espao entre as letras. A sua sintaxe :
letter-spacing: normal letter-spacing: comprimento
As unidades podem ser quaisquer uma das unidades vlidas para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, mais comum usar "em" como medida de espaamento por ser proporcional ao tamanho da fonte. Pode-se usar tambm valores negativos para sobrepor caracteres, criar ligaduras (usadas em kerning) e caracteres especiais (por exemplo, sobrepondo / com \). O suporte a letter-spacing nos principais browsers ainda inconsistente. O Netscape (verso 4) no o suporta.
90
16. Cores
Com as propriedades de cores, podemos controlar as cores de vrias partes da pgina, do texto, do fundo da pgina e de elementos HTML. Alm disso, podemos aplicar imagens de fundo em qualquer elemento, no s no elemento BODY como j se faz em HTML. As cores definidas em CSS, assim como em HTML, podem ser especificadas por um nmero em hexadecimal (representando um cdigo RGB) ou por um nome. Alm dessas duas formas, podem ainda ser especificadas por trs nmeros decimais, representando tambm o cdigo RGB da cor. Os cdigos RGB informam a quantidade de luz vermelha, verde e azul que compe a cor, respectivamente. Cada cor pode ter 16 nveis de intensidade: 0 a 256 (00 a FF, em hexadecimal). O total de combinaes possveis de 16.777.216 cores. A exibio correta das cores depende da capacidade do vdeo onde sero vistas. Poucos sistemas tm capacidade de mostrar mais que 65.536 cores simultneas. A maioria s mostra 256. A tabela abaixo relaciona em negrito os 16 nomes padro, suportados por todos os browsers que exibem cores, e seus respectivos cdigos RGB em hexadecimal e decimal. Cor Nome red lime blue yellow aqua fuchsia white black Cd. Decimal 255, 0, 0 0, 255, 0 0, 0, 255 255, 255, 0 0, 255, 255 255, 0, 255 255, 255, 255 0, 0, 0 Cd. Hexa ff0000 00ff00 0000ff ffff00 00ffff ff00ff ffffff 000000 Cor Nome maroon green navy olive teal purple silver gray Cd. Decimal 128, 0, 0 0, 128, 0 0, 0, 128 128, 128, 0 0, 128, 128 128, 0, 128 192, 192, 192 0, 0, 0 Cd. Hexa 800000 008000 000080 808000 008080 800080 c0c0c0 808080
H muito mais cores com nomes suportadas pelo Netscape e Internet Explorer. Estas listadas so as nicas que fazem parte da especificao oficial do HTML 4. So todas "seguras", ou seja, fazem parte da paleta bsica de 216 cores.
91
16.1. color
Define a cor do texto. A propriedade color substitui totalmente o descritor <FONT COLOR> com vantagens. Pode ser aplicada localmente em um descritor (usando o atributo style) ou globalmente na pgina e no site, como qualquer outra propriedade de estilo. A sintaxe da propriedade color :
color: nome_de_cor color: #nmero_hexadecimal color: rgb(vermelho, verde, azul)
Exemplos:
H1 { color: green } P { color: #fe0da4 } EM { color: rgb (255, 127, 63) } <EM STYLE="color: rgb (100%, 50%, 25%)">
Os nomes so qualquer nome vlido de cor. Se o browser no encontrar o nome ao qual o estilo se refere, deve exibir a cor default (ou herdada). O smbolo "#" opcional no cdigo hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percentagens (0.0-100.0%).
16.2. background-color
As cores de fundo de qualquer elemento podem ser alteradas atravs da propriedade background-color. A sintaxe :
background-color: background-color: background-color: background-color: transparent (valor default) nome_de_cor #nmero_hexadecimal rgb(vermelho, verde, azul)
Exemplos:
H1 { background-color: green } P { background-color: #fe0da4 } EM { background-color: rgb (255, 127, 63) } <EM STYLE="background-color: rgb (100%, 50%, 25%)">
O fundo transparente simplesmente deixa mostra o fundo do objeto que o contm. O fundo, para texto, ocupa todo o espao da fonte (inclusive espao em branco acima e abaixo que fazem parte da fonte). A cor no estendida quando o espaamento entre linhas aumentado em alguns browsers.
92
16.3. background-image
Com background-image possvel atribuir a qualquer elemento HTML uma imagem que ser exibida no fundo, assim como as cores de fundo. A sintaxe :
background-image: none (valor default) background-image: url(URL_da_imagem)
Exemplos:
H1 { background-image: url(http://www.xyz.com/abc.jpg) } B {background-image: url(../monstro.gif) navy <TD STYLE="background-image: url(dinheiro.gif)">...</TD>
As URLs so relativas localizao do arquivo que contm a folha de estilos (pode ser a prpria pgina ou no). A cor de backup usada para 'vazar' pelas partes transparentes da imagem ou prevenir contra o no carregamento do fundo (para permitir a leitura em fundo escuro pode-se usar preto como cor de backup de uma imagem escura).
16.4. background-repeat
CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maneira como a mesma ir se repetir. A propriedade background-repeat. Sintaxe:
background-repeat: background-repeat: background-repeat: background-repeat: repeat repeat-x repeat-y no-repeat (default)
Exemplos:
BODY {background-image: url(china.jpg); background-repeat: repeat-x } TABLE{background-image: url(corinthians.gif) background-repeat: no-repeat }
O valor repeat default e faz com que a imagem ocupe toda a tela. repeat-x faz com que a imagem seja repetida apenas horizontalmente e repeat-y faz com que ela seja repetida apenas verticalmente. no-repeat faz com que a imagem no seja repetida de forma alguma (aparecer uma imagem apenas no canto superior esquerdo). Para fazer a imagem aparecer em outros lugares, pode-se usar as propriedades de posicionamento do fundo da tela.
16.5. background-position e background-attachment

O posicionamento e a forma de exibio do papel de parede so controlados pelas propriedades background-attachment e background-position. A primeira define se o fundo
93
ir ou no se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do fundo em um local exato da tela. Infelizmente essas duas propriedades no tm suporte universal pelos browsers comerciais (apenas o Internet Explorer os suporta). Sintaxe:
background-attachment: fixed background-attachment: scroll
Exemplo:
BODY {background-image: url (china.jpg); background-attachment: fixed }
Sintaxe:
background-position: porcentagem_horiz% porcentagem_vert% background-position: comprimento comprimento background-position: posio_vertical posio_horizontal
Exemplos:
BODY {background-image: url(china.jpg); background-repeat: no-repeat; background-position: 50% 100% } BODY {background-image: url(china.jpg); background-repeat: no-repeat; background-position: 25pt 2.5cm } BODY {background-image: url(china.jpg); background-repeat: no-repeat; background-position: center top } BODY {background-image: url(china.jpg); background-repeat: no-repeat; background-position: left bottom }
Os valores de porcentagem so relativos posio do elemento sobre o qual se aplica o estilo. As posies so sempre dadas em pares, tendo os valores separados por espaos. O primeiro valor sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma "caixa invisvel" e a posiciona de acordo com as porcentagens. Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invisvel" contra a margem direita do browser. Os valores de comprimento, assim como os de porcentagem tambm so dados em pares. O primeiro a distncia da margem horizontal a partir do canto superior esquerdo do objeto; o segundo a distncia da margem superior. As unidades vlidas so as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par.
94
Os valores de posio so palavras-chave usadas tambm aos pares. So equivalentes das porcentagens bsicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%).
16.6. background
A propriedade background pode ser usada para definir vrias caractersticas de fundo de uma nica vez. Na sintaxe abaixo, a ordem dos fatores importante. A sua sintaxe :
background: background-color background-image background-repeat background-attachment background-position
Deve haver pelo menos um valor definido, mas qualquer nmero de valores pode ser atribudo de uma vez. Exemplos:
BODY {background: url(../duke.gif) white no-repeat fixed 50% 25%}
95
17. Propriedades de classificao

Estas propriedades classificam os elementos em categorias que podem receber estilos. Categorias podem ser listas, blocos, trechos de blocos ou itens invisveis.
17.1. display
Esta propriedade define como um elemento mostrado. A propriedade none desliga o elemento e fecha o espao que o objeto antes ocupava (torna o objeto invisvel). block abre uma nova caixa onde o objeto posicionado, relativo aos outros blocos, list-item um bloco com um marcador de lista e inline define um elemento como parte de um bloco. Sintaxe:
display: block | inline | list-item | none
Exemplo:
P {display: list-item} IMG {display: none} // desliga todas as imagens
17.2. white-space
Define como o espao em branco do elemento gerenciado (se as linhas devem ser quebradas para que apaream na tela ou no (nowrap) ou se os espaos em branco, tabulaes, etc. devem ser considerados (pre).
white-space: normal | pre | nowrap
96
17.3. list-style
Esta propriedade e as propriedades list-style-type, list-style-image e liststyle-position definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e posio. Esses elementos no so suportados no Netscape.
list-style-type: disc | circle | square | decimal | lower-roman upper-roman | lower-alpha | upper-alpha | none list-style-image: url(url_da_imagem) list-style-position: inside | outside
Exemplo:
list-style-image: url(bullet.gif)
possvel definir as trs propriedades atravs de um atalho usando list-type. A ordem dos fatores importante neste caso.
list-style: list-style-type list-style-image list-style-position
Exemplo:
list-style: url(bullet.gif) list-style: square outside
97
18. Controle de blocos

Uma caixa uma propriedade de qualquer elemento de bloco no HTML (H1, P, DIV, etc. que automaticamente definem seu prprio bloco ou pargrafo). A caixa de um objeto consiste das partes seguintes: O elemento em si (texto, imagem) As margens internas do elemento (padding) A borda em torno das margens internas (border) A margem em torno da borda (margin)
Todo elemento de bloco tem essas propriedades. As propriedades CSS que veremos nesta seo mostraro como alter-las. A cor e tamanho da borda podem ser alterados assim como o fundo (como vimos na seo anterior). A margem externa sempre transparente mas a margem interna herda a cor de fundo do objeto. Tambm so alterveis as margens internas e externas, larguras de borda, cor de borda e estilo de borda de cada um dos quatro lados de uma caixa individualmente, identificados pelos nomes top, right, bottom e left:
98
18.1. margin e padding

As margens externas so definidas usando a propriedade margin (que afeta todas as margens ao mesmo tempo) ou as propriedades margin-top, margin-bottom, margin-right e margin-left que permite alterar as margens individualmente. Sintaxe:
margin-top: comprimento | porcentagem % | auto margin-bottom: comprimento | porcentagem % | auto margin-right: comprimento | porcentagem % | auto margin-left: comprimento | porcentagem % | auto
Exemplo:
margin-top: 1cm; margin-left: 12pt;
A propriedade margin afeta vrios aspectos das margens externas de uma vez s. A ordem dos fatores importante. Podem ser includos todos quatro valores, apenas um (todas as margens iguais) ou dois (margens horizontais e verticais). Sintaxe:
margin: margin: margin: margin: margin-top margin-right margin-bottom margin-left margin-top% margin-right% margin-bottom% margin-left% espao_vertical espao_horizontal margem_de_todos_os_lados
Exemplos:
margin: 5cm // vale para as quatro margens margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais margin: 5cm 3cm 2cm 1cm // sent. horrio: top, right, bottom, left // (em cima 5; direita 3; em baixo 2;...
As margens internas (padding) so definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades padding-top, paddingbottom, padding-right e padding-left. Sintaxe:
padding-top: comprimento | porcentagem % padding-bottom: comprimento | porcentagem % padding-right: comprimento | porcentagem % padding-left: comprimento | porcentagem %
A propriedade padding afeta vrios aspectos das margens internas de uma vez s. A ordem dos fatores importante. Podem ser includos todos quatro valores ou apenas um. Sintaxe:
padding: padding-top padding-right padding-bottom padding-left padding: padding-top% padding-right% padding-bottom% padding-left%
99
padding: espao_vertical espao_horizontal padding: margem_de_todos_os_lados
18.2. border-width
Pode se controlar vrios aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (tambm cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apaream preciso primeiro que o estilo (borderstyle) seja definido. Por exemplo:
border-style: solid
A espessura das bordas pode ser controlada atravs da propriedade border-width, afetando as espessuras de todos os lados da borda, ou individualmente atravs de border-topwidth, border-bottom-width, border-right-width e border-left-width. Sintaxe:
border-top-width: comprimento | thin | medium | thick border-bottom-width: comprimento | thin | medium | thick border-right-width: comprimento | thin | medium | thick border-left-width: comprimento | thin | medium | thick
Exemplos:
border-bottom-width: thick; border-right-width: 5.5px; border-left-width: 0.2cm
As propriedades das bordas podem ser tratadas em grupo, com border-width. A ordem dos fatores importante. Podem ser includos todos os quatro valores, dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
border-width: border-top-width border-right-width border-bottom-width border-left-width
Exemplos:
border-width: 5cm // vale para as quatro bordas border-width: 5cm 2cm // 5cm verticais, 2cm horizontais border-width: 5cm 3cm 2cm 1cm // horrio: top, right, bottom, left
18.3. border-color
A propriedade border-color um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que tambm podem ser definidas individualmente atravs de border-top-color, border-bottom-color, border-right-color e border-left-color.
border-top-color: cor (nome ou cdigo) border-bottom-color: cor (nome ou cdigo)
100
border-right-color: cor (nome ou cdigo) border-left-color: cor (nome ou cdigo)
Exemplos:
border-bottom-color: rgb(231,45,112); border-right-color: 0fa97b; border-left-color: navy
As propriedades das bordas podem ser tratadas em grupo, com border-color. A ordem dos fatores importante. Podem ser includos todos os quatro valores, dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
border-color: border-top-color border-bottom-color border-right-color border-left-color
Cada um dos border-xxx-color acima uma cor (RGB, hexadecimal ou nome). Podese alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente. Exemplos:
border-color: border-color: border-color: border-color: border-color: red // red para as quatro bordas rgb(255, 0, 0) // red rgb(100%, 0, 0) // red red 0000ff // red verticais, 0000ff horizontais red blue yellow cyan // 4 cores sentido horrio
18.4. border-style
O estilo de cada uma das quatro bordas pode ser alterado com border-style. Tambm possvel defini-los individualmente usando border-top-style, border-bottom-style, border-right-style e border-left-style. So vrios os estilos disponveis (tracejado, pontilhado, vrias verses de 3D, etc.).
border-top-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset border-bottom-style: nome de estilo (um dos nomes acima) border-right-style: nome de estilo border-left-style: nome de estilo
Exemplos:
border-bottom-style: none border-right-style: solid; border-left-style: inset
As propriedades das bordas podem ser tratadas em grupo, com border-style. A ordem dos fatores importante. Podem ser includos todos os quatro valores, dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
border-style: border-top-style border-bottom-style border-right-style border-left-style
101
Exemplos:
border-style: solid none inset outset; border-style: solid border-style: inset outset
Cada um dos border-xxx-style acima um dos seguintes valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer, funcionam os estilos solid, inset (efeito baixo-relevo) e outset (efeito alto-relevo). No Netscape solid default mas no Explorer, o default none, portanto, uma borda no aparece se a propriedade border-style no for definida antes.
18.5. border
As propriedades border-top, border-bottom, border-left e border-right agrupam as propriedades de cor, estilo e espessura para cada uma das quatro bordas.
border-top: border-bottom: border-left: border-right: border-width border-width border-width border-width border-style border-style border-style border-style border-color border-color border-color border-color
A propriedade border uma forma reduzida de definir tudo isto de uma vez s para todas as bordas e de forma idntica (no possvel especificar valores diferentes para as bordas neste caso). Todos os itens no precisam aparecer, mas a ordem dos fatores importante:
border: border-width border-style border-color
18.6. width e height

As propriedades width e height modificam a altura e largura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de bloco. Sintaxe:
width: comprimento | auto height: comprimento | auto
18.7. float
A propriedade float permite que um bloco qualquer seja posicionado direita ou esquerda da janela do browser, fazendo com que o texto restante flua em sua volta. Permite que qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e align=right no HTML. Sintaxe:
float: left | right | none
102
18.8. clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que utiliza a propriedade float, existe a propriedade clear, que deve ser atribuda a um bloco ou pargrafo que afetado pela flutuao de um bloco. Faz a mesma coisa que o atributo clear, usado no <BR> em HTML, s que aqui ela suportada em qualquer elemento (bloco ou no).
clear: none | left | right | both
Primeiro pargrafo flui ao lado da imagem. Outro pargrafo que no devia fluir.
Primeiro pargrafo flui ao lado da imagem.
Outro pargrafo que no devia fluir (com clear).
103
19. Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou relativos usando CSS 2. As propriedades permitem o posicionamento em trs dimenses (horizontal, vertical e em camadas). Embora os recursos de posicionamento no faam parte do CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam.
19.1. position, top e left

Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A origem da posio absoluta ser a posio do objeto no nvel imediatamente superior. O posicionamento relativo se refere posio anterior do objeto. Sintaxe:
position: absolute | relative left: comprimento | porcentagem | auto top: comprimento | porcentagem | auto
Exemplo: considere as quatro imagens a seguir:
104
<div class="imagem1"> <img src="T1.gif" width=150 height=72 border=1> 1 Posio 0 0 </div> <div class="imagem2"> <img src="T2.gif" width=150 height=72 border=1> 2 Posio 0 200 </div> <div class="imagem3"> <img src="T3.gif" width=150 height=72 border=1> 3 Posio -25 -25 </div> <div class="imagem4"> <img src="T4.gif" width=150 height=72 border=1> 4 Posio 100 0 </div>
Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente sua localizao original obtemos a imagem ao lado. Os retngulos claros indicam a posio original da imagem:
DIV.imagem1 { position: relative; top: 0px; left: 0px; } DIV.imagem2 { position: relative; top: 0px; left: 200px; } DIV.imagem3 { position: relative; top: -25px; left: -25px; } DIV.imagem4 { position: relative; top: 100px; left: 0px; }
Usando posicionamento absoluto, o bloco movido em relao ao canto superior esquerdo do browser.
105
DIV.imagem1 { position: absolute; top: 0px; left: 250px; } DIV.imagem2 { position: absolute; top: 100px; left: 0px; } DIV.imagem3 { position: absolute; top: 160px; left: 120px; } DIV.imagem4 { position: absolute; top: 200px; left: -80px; }
19.2. z-index
A propriedade z-index permite ordenar os objetos em camadas. um eixo de profundidade. Para us-la, basta definir em cada objeto:
z-index: nmero
onde nmero a camada de exibio. Quanto maior o nmero, mais alta a camada. o corresponde camada do texto. Se um objeto tiver z-index menor que zero aparecer atrs do texto. Se z-index for maior que zero, aparecer na frente. Quando no definido ou quando z-index: 0 o bloco ocupar a mesma camada que o texto.
19.3. visibility
Esta propriedade serve para tornar um bloco visvel ou invisvel. Difere de display porque no remove o espao antes ocupado pela imagem:
visibility: hidden | visible
Exemplo:
IMG {visibility: hidden} // torna invisveis todas as imagens
106
20. Exerccios
20.1. Testes sobre Folhas de Estilo
1. Qual das seguintes regras de estilo est incorreta? Marque uma. a) a:link {color: rgb(0%,40%,40%)} b) div.code pre {margin-bottom: 0px} c) body {font-size: 0.5cm, color: yellow, background: black} d) .botcor {font-size: 16pt; font-family: tahoma, sans-serif;} e) Esto todas corretas. 2. Qual dos seguintes trechos de cdigo ilegal dentro de um arquivo .css? Marque uma. a) span.value {color: maroon} b) /* <H1>Titulo</H1> */ c) @import url(http://ww.estilos.org/estilo.css); d) <STYLE> e) Nenhuma das alternativas ilegal dentro de um arquivo CSS. 3. Qual das regras abaixo, de uma folha de estilos, declara que os pargrafos e clulas de dados de tabelas tero texto vermelho? a) P TD {color: red} b) P: TD {color: ff0000} c) P, TD {color: rgb(100%, 0%, 0%)} d) P; TD {color: rgb(255, 0, 0)} e) P, TD {color=red} 4. Qual das declaraes abaixo, contida em uma pgina HTML, a vincula folha de estilos basico.css, localizada no mesmo diretrio que a pgina? a) <LINK REL=StyleSheet HREF="basico.css"> b) <LINK REL=StyleSheet SRC="basico.css"> c) <A HREF="basico.css" TITLE="StyleSheet">Folha de estilos</A> d) <FRAME SRC="basico.css" REL="StyleSheet"> e) <A HREF="basico.css">Folha de estilos</A> 5. Considere o seguinte trecho de cdigo HTML:
107
<div> <p>Pargrafo</p> </div>
Quais declaraes abaixo, em um bloco <STYLE> do arquivo que contm o trecho acima, faro com que o texto do pargrafo tenha tamanho 10pt em um browser que suporte folhas de estilo? Marque uma ou mais. a) div {font-size: 20pt}
p {font-size: 50%}
b) div {font-size: 10pt} c) p {font-size: 10pt} d) div {font-size: 5pt}

p {font-size: 100%} e) p div {font-size: 10pt}
6. Considere a seguinte folha de estilos, com uma nica regra, vinculada a uma pgina HTML.
P {color: green}
Dentro dessa pgina, logo depois da instruo que vincula o estilo pgina, h um bloco <STYLE>, com a seguinte regra:
P {color: red}
A pgina possui dez pargrafos. Um deles atribui um estilo local usando o atributo STYLE, da forma:
<P STYLE="color: blue">Pargrafo</P>
Supondo que a pgina seja visualizada em um browser que suporte folhas de estilo CSS, qual a cor da maior parte dos pargrafos dessa pgina? a) azul (blue) b) vermelha (red) c) verde (green) d) preta (black) e) indefinida 7. Identifique as alternativas que contm HTML ou CSS incorretos: a) <span style="color: red; font-size: 24pt">Texto</span> b) <span color=red font-size="24pt">Texto</span> c) <div class="sec1">Tem <span class=item1>mais texto</span>.</div> d) <span>Itens e <div class="sec1">sees</div> especiais.</span> e) <div style="P {color: yellow}"><P>Texto amarelo</P></div> 8. Considere o cdigo HTML abaixo:
<div class=sec2> <p class=novo>Texto modificado</p> </div>
108
Quais das regras de estilo abaixo far com que o pargrafo seja exibido na cor azul, em um browser que suporte folhas de estilos CSS? a) P {color: blue} b) .sec2 {color: blue} c) P.novo {color: blue} d) .sec2 .novo {color: blue} e) P.sec2 {color: blue} 9. Qual das regras abaixo retira o sublinhado apenas dos links visitados? Marque uma. a) a: visited {text-decoration: none} b) a, visited {text-decoration: none} c) a.visited {text-decoration: none} d) a visited {text-decoration: none} e) Nenhuma das regras anteriores. 10. Marque apenas as alternativas verdadeiras a) Uma mesma folha de estilos pode ser usada por vrias pginas. b) Uma mesma pgina pode usar vrias folhas de estilo. c) Se um browser no suportar uma folha de estilos requerida pela pgina, poder haver uma degradao na qualidade da apresentao mas nunca haver perda de informao. d) possvel construir um site inteiro usando apenas CSS. e) A linguagem CSS usada para construir folhas de estilo uma recomendao do W3C consrcio de empresas que estabelece os padres para a Web.
20.2. Exerccios com Folhas de Estilo

Os exerccios a seguir tm a finalidade de explorar as principais propriedades do CSS e permitir que se verifique o suporte a elas nos browsers populares. Eles so mais didticos do que teis. O objetivo apenas praticar com folhas de estilos. Para realiz-los, use os arquivos disponveis no disquete (ou no Website).
Conceitos bsicos
1. Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo StyleTest.html. 2. Nesta folha de estilos, usando o mnimo de declaraes possvel, declare:
a) b) c) d) e) f) que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma no existir que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos que todos os H1, H2 e H3 sejam vermelhos que os H1 tenham tamanho 24 pontos que os H2 tenham tamanho 18 pontos que os H3 tenham tamanho 14 pontos
3. Mude a cor do fundo da pgina para azul marinho (navy) e a cor default do texto para branco em uma nica declarao.
109
4. Faa com que todo texto marcado em itlico aparea em azul ciano (cyan).
Formas de usar CSS

5. Carregue a folha de estilos basico.css em outros arquivos HTML e veja o que acontece.
Faa com que uma dessas outras pginas tenha uma cor de fundo clara (amarela, por exemplo) e cor de texto escuro (diferente daquela definida por basico.css) sem que isto altere as outras paginas que usam o mesmo arquivo.
6. Faa com que o primeiro pargrafo do arquivo StyleTest.html tenha texto verde. 7. Faa com que a clula do meio da tabela de StyleTest.html tenha texto vermelho sobre
fundo amarelo (a tabela 3x3 encontra-se no meio da pgina).
Classes, links, seletores de contexto

Para os exerccios abaixo, desligue a folha de estilos usada nos exerccios anteriores (mude o nome ou remova o elemento <LINK>) para que a pgina fique limpa outra vez. Use uma nova folha de estilos para aplicar as alteraes a seguir. 8. Defina classes sec2, sec3, sec31 e sec32 para as sees (<DIV>) do documento StyleTest.html. As sees esto indicadas em comentrios HTML (por exemplo: <!--Seo 2 ->). Aplique um fundo diferente (imagem ou cor) nessas sees para diferenci-las das outras. 9. Tire os sublinhados de todos os links e substitua-os por um fundo cinza claro. 10. Faa com que o link ativo (active) fique em negrito; que o link normal tenha tamanho 10pt e que mostre fundo amarelo quando o mouse estiver sobre ele (hover); e que o link visitado no tenha mais cor de fundo mas recupere o sublinhado. Obs: Para fazer um link ainda no visitado, faa um link para qualquer recurso do sistema de arquivos; para ver o link ativo, clique no link e segure o mouse. 11. Faa com que: a) todos os itlicos dentro de negritos sejam colocados em maisculas (use texttransform: uppercase). b) todos os negritos dentro de itlicos sejam sublinhados c) todos os negritos que estejam dentro de um bloco itlico que est dentro de um bloco LI que est dentro de uma UL que est em outra UL, sejam colocados em fonte arial, em maisculas e em vermelho.
Fontes
Crie uma nova folha de estilos (fontes.css) para aplicar fontes. Vincule (LINK) ou importe-a (@import) em seus arquivos.
110
12. a) Aplique Verdana como fonte default em todo o site. Garanta que, se Verdana no existir, Arial ser usada, e se esta no existir, ser usada a default sans-serif. Para testar, mude os nomes das primeiras fontes para nomes desconhecidos do sistema. b) Teste a compatibilidade dos dois browsers em relao ao suporte de fontes com nomes longos (entre aspas) em folhas de estilo locais e remotas. 13. Faa com que os <B> de seus pargrafos sejam 20% maiores que o texto normal destes pargrafos.
Atributos de texto e classificao

Crie uma nova folha de estilos para esses exerccios. 14. a) Aplique um espaamento de 1 cm entre palavras de um pargrafo seu texto (isto poder no funcionar devido falta de suporte dos browsers). b) Aplique um espaamento de 1 cm entre as letras de outro pargrafo. Teste nos dois browsers. 15. Defina todos os ttulos H2 como sendo caixa alta (uppercase). 16. Experimente com as propriedades text-decoration (use overline e outras propriedades em blocos <SPAN> criados para mostrar cada propriedade. 17. Elimine o espaamento entre os pargrafos (<P>) usando {margin-top: 0pt}, endente a primeira linha e coloque todos os seus pargrafos, com exceo dos pargrafos da terceira seo, com alinhamento justificado. O alinhamento deve ser aplicado apenas nos pargrafos e no em listas ou tabelas.
Cores
18. Experimente com cores, aplicando cores em textos, backgrounds de diversos componentes da pgina, inclusive formulrios (<INPUT> e <SELECT>). Use as trs formas (url(r, g, b), rrggbb e nomes) e veja como ocorre o suporte dos browsers em folhas de estilo locais e externas. Dica: crie uma folha de estilos s para este exerccio.
Fundos, Imagens e Repeties

19. Inclua a imagem rabbit.gif (ou outra qualquer do subdirectrio 3_Imagens do CD do ASIT) no fundo da pgina StyleTest.html (usando uma nova folha de estilos: background.css). Experimente com posicionamento, fazendo a imagem ficar fixa em vez de rolar na tela. Teste nos dois browsers. Experimente com repeties, fazendo a imagem repetir na vertical, na horizontal e no repetir. Veja o que acontece nos dois browsers. 20. Numa outra folha de estilos (para este exerccio), posicione a imagem no centro da pgina, sem repeties e uma outra imagem no centro da tabela, tambm sem repeties. 21. Posicione (outra folha de estilos) o rabbit.gif (ou outra imagem) em uma posio a 4cm da margem esquerda e a 7cm da margem superior. Na seo 2 (sec2), posicione bart.gif, repe-
111
tindo somente na vertical, afastado 11cm da margem esquerda e iniciando 1 cm abaixo da margem superior.
Posicionamento e Layout
22. Remova o espao entre todos os pargrafos de StyleTest.html. Aplique um text-indent de 1cm em cada pargrafo. 23. Faa com que os blocos (pargrafos e cabealhos) da seo 3.1 e 3.2 (DIV) tenham 0,3 cm de margem esquerda e direita, e 0,5cm de margem superior e inferior, em relao s bordas da seo. 24. Faa com que as sees 3.2 e 3.1 tenham uma margem externa de 0,5 cm em relao seo 3. 25. Aplique uma borda azul, slida, de 3mm acima da seo 2 (<DIV>), uma outra, tambm de 3mm, abaixo, na cor amarelo. Dos lados, coloque bordas vermelhas, de 5mm. 26. Aplique uma borda verde, de 4mm esquerda de todos os pargrafos da seo 2. Entre a borda e o texto deve haver um espao de 5mm. Entre a borda e a margem da pgina, mais 5mm (sem levar em conta o offset). 27. Sem usar tabelas, aplique uma largura mxima de 500 pixels em toda a pgina. 28. Faa com que a seo 3.1 tenha largura mxima de 220 pixels e flutue para a direita, deixando o restante do texto fluir em volta dela.
Posicionamento absoluto
29. Monte o quebra-cabeas do exerccio 1, da parte 4 (Recursos Avanados) sem usar tabelas (usando apenas posicionamento de folhas de estilo). 30. Diagrame a pgina do exerccio 2, da parte 4, sem usar tabelas (usando apenas posicionamento de folhas de estilo).
112
Parte 4 Recursos avanados
Recursos Avanados
113
Contedo
21. Diagramao com tabelas ................................................................................. 115
21.1. GIF de um pixel ..........................................................................................................115 21.2. Layout de pgina com tabelas....................................................................................116 21.3. Imagens recortadas .....................................................................................................116
22. Frames.............................................................................................................. 118

22.1. Introduo....................................................................................................................118 22.2. Estrutura bsica ...........................................................................................................119 22.3. Controle dos alvos dos vnculos ...............................................................................121
23. Multimdia ....................................................................................................... 122

23.1. Imagens mapeadas ......................................................................................................122 23.2. udio, vdeo e plug-ins...............................................................................................123 Audio .................................................................................................................................124 Vdeo..................................................................................................................................124 23.3. Flash ..............................................................................................................................125 Configurao do servidor ...............................................................................................125
24. Applets Java ..................................................................................................... 126

24.1. O que so applets Java?..............................................................................................126 24.2. Quando usar applets ...................................................................................................126 24.3. Como incluir um applet em uma pgina..................................................................128 24.4. Concluso .....................................................................................................................129
25. Exerccios ......................................................................................................... 130
114
21. Diagramao com tabelas

Vimos na primeira parte deste curso os principais usos das tabelas HTML. Neste captulo mostraremos exemplos de tabelas aplicadas diagramao da pgina. Os recursos aqui apresentados so totalmente substituveis por folhas de estilo, porm, a visualizao da pgina poder ser prejudicada seriamente se o browser no suportar CSS. Como as tabelas existem h mais tempo, muito mais raro encontrar browsers que no suportam tabelas, embora os que no suportam posicionamento com folhas de estilo esto bastante prximos, nos browsers verso 3.0. Para diagramar com tabelas preciso saber como alinhar objetos dentro de tabelas, como combinar duas ou mais clulas em uma, remover os espaos entre clulas e entre a clula e o texto alm de criar tabelas dentro de tabelas. As sees seguintes trataro de alguns desses temas. Por no ser uma linguagem apropriada diagramao, HTML impe diversas limitaes quando organizao do texto e imagens em uma pgina. Como vimos na seo anterior, as tabelas oferecem algum controle. Um pouco mais controle conseguido utilizando imagens invisveis (pois a dimenso das imagens certa enquanto a das tabelas no ). Mas h ainda vrias outras limitaes tambm referentes a colocao das imagens que s se resolvem com folhas de estilo. Em programas como o PageMaker, voc coloca o texto e as imagens onde voc quer. HTML sem folhas de estilo no oferece esse tipo de manipulao bidimensional. necessrio usar truques para simular este controle se voc no puder depender de folhas de estilo.
21.1. GIF de um pixel

Este truque, proposto por David Siegel em seu livro Criando Sites Arrassadores consiste da utilizao de uma imagem de um pixel (1x1) de cor transparente ou igual cor de fundo da pgina. A imagem resultante invisvel e pode ser usada numa pgina HTML para empurrar textos, colunas e linhas de tabelas, imagens, etc.
115
A imagem pode ser esticada usando os atributos HEIGHT E WIDTH ou usar margens, atravs dos atributos HSPACE e VSPACE. Por exemplo:
<IMG SRC="pixel.gif" HEIGHT=11> ou <IMG SRC="pixel.gif" VSPACE=5> <IMG SRC="pixel.gif" WIDTH=11> ou <IMG SRC="pixel.gif" HSPACE=5>
Espao vertical de 11 pixels
Espao horizontal de 11 pixels
A imagem alinha-se geralmente com a base do texto ou da outra imagem que est ao seu lado. Isto pode ser alterado atravs dos atributos ALIGN. possvel definir larguras mnimas precisas para tabelas criando uma linha <TR> que contenha blocos <TD> contendo, cada um, uma nica imagem de 1 pixel de altura/largura pelo valor desejado de largura/altura.
21.2. Layout de pgina com tabelas

Tabelas sem bordas dentro de tabelas sem bordas podem ser usadas para realizar o layout de texto e imagens em uma pgina HTML. Com essa tcnica pode-se construir um espelho de diagramao sofisticado e organizar texto e imagens de forma criativa, fugindo do estilo tradicional das pginas HTML. Deve-se desligar as bordas da tabela e fazer o cellspacing e cellpadding iguais a zero. Use uma largura absoluta para a tabela e para as clulas para se ter maior controle. Hevendo necessidade de espao em branco, pode-se usar tanto cellspacing como cellpadding.
21.3. Imagens recortadas

Para colar imagens horizontalmente ou verticalmente a melhor opo, quando no se tem folhas de estilo, usar tabelas. O controle maior entre plataformas. A fragmentao e colagem das imagens uma tcnica que visa diminuir o tempo de transferncia das imagens, se aproveitando do cache do browser, que no carrega imagens repetidas. A imagem partida em pedaos de forma que as partes que mudam sejam imagens diferentes das partes que se mantm atravs das pginas.
116
Antes de dividir uma imagem pelas clulas de uma tabela, ela precisa ser recortada. Isto pode ser feito manualmente em um programa como o Adobe PhotoShop ou de forma automtica no Macromedia Fireworks, por exemplo. Ao acrescentar as imagens dentro das clulas, elas se acomodaro e ocuparo o espao que for necessrio. Se for preciso colocar duas imagens sobre outra ou imagens ao lado de uma imagem deve-se usar os atributos COLSPAN e ROWSPAN para rearrumar a tabela e permitir que as peas se encaixem. No final, deve-se desligar o espao entre clulas, as margens e as bordas para que a imagem volte a ser uma s. preciso ter o cuidado de no deixar espaos nem quebras de linha dentro do bloco <TD> ... </TD> que contm a imagem . Se isto ocorrer podem acontecer situaes como a pgina ao lado, onde a imagem no se recompe totalmente.
117
22. Frames
22.1. Introduo
Frames (quadros) so painis que dividem a rea de visualizao do browser em subjanelas, cada uma capaz de exibir uma pgina diferente. Para mostrar duas pginas ao mesmo tempo dentro de uma janela do browser preciso ter pelo menos trs arquivos. Dois so os arquivos HTML das pginas que sero exibidas. O outro uma pgina HTML que contm apenas as instrues para que o browser saiba se dividir em subjanelas. Logo, para dividir uma janela em frames, preciso criar essa pgina HTML que especifica as dimenses relativas ou absolutas das subjanelas em relao janela que ir conter a pgina. Uma pgina de frames no um documento HTML, pois no contm informao. Todo documento HTML, como sabemos, deve ter a forma:
<html> <head> ... </head> <body> ... </body> </html>
O bloco <body> contm a informao da pgina. O bloco <head>, contm metainformao, ou seja, informao sobre a pgina. Pginas que definem a estrutura de subjanelas (pginas de frames) tm uma estrutura diferente:
<html> <head> ... </head> <frameset atributos> ... </frameset> </html>
e no podem conter blocos <body>1.
At podem conter blocos <BODY>, mas isto ou os transforma em pginas de informao, ou no causa efeito algum. Um bloco <BODY> antes do <FRAMESET> faz com que o browser ignore o <FRAMESET>. Um bloco <BODY> aps o <FRAMESET> ser ignorado por browsers que suportam frames, mas ser lido por browsers antigos que no os suportam.
1
118
22.2. Estrutura bsica

O bloco <frameset> define a diviso da janela em linhas (usando o atributo rows) ou colunas (usando o atributo cols) ou simultaneamente em linhas e colunas (usando ambos os atributos). Os atributos especificam a largura ou altura de cada frame usando valores absoultos, em pixels, ou relativos, em percentagens da largura ou altura da janela principal. Por exemplo, um <FRAMESET> com a forma mostrada figura ao lado definido pelo cdigo
<FRAMESET COLS="25%,25%,50%"> ... </FRAMESET>
que divide a janela principal em trs colunas, tendo as duas primeiras da largura total, e a ltima, metade da largura total. De forma semelhante pode-se dividir a janela em linhas. Neste outro exemplo (figura ao lado):
<FRAMESET ROWS="100,200,*,100"> ... </FRAMESET>
a janela foi dividida em quatro linhas, tendo a primeira e quarta 100 pixels cada de altura, a segunda 200 pixels e a terceira, o espao restante. Combinando os dois argumentos obtm-se uma janela com 12 subjanelas. Um bloco <FRAMESET>...</FRAMESET> s pode conter dois tipos de elementos: descritores <FRAME>, que definem a pgina HTML que ocupar uma janela. A pgina HTML poder ser uma pgina de informao comum ou outra pgina de frames que dividir a subjanela novamente em linhas e/ou colunas. sub-blocos <FRAMESET> ... </FRAMESET> que dividiro outra vez a subjanela (em linhas e/ou colunas) e podero conter descritores <FRAME> e novos subblocos <FRAMESET>.
O nmero de sub-blocos para cada <FRAMESET> depender do nmero de linhas (ou colunas) definidas. Para dividir uma janela em linhas e colunas de forma irregular (com clulas que atravessam mais de uma linha ou coluna), pode-se proceder de duas formas: usar um nico <FRAMESET>, contendo elementos <FRAME> que referem-se a pginas de frames (pginas que tambm definem um <FRAMESET>), ou usar vrios <FRAMESET> em cascata na mesma pgina.
Usaremos as duas formas para montar a janela ao lado. Na primeira

119
verso, utilizaremos dois arquivos de frames: frset1.html dividir a janela principal em duas colunas, e frset2.html dividir a segunda coluna em duas linhas. Na segunda verso, precisaremos de apenas um arquivo de frames (frset.html). As duas verses utilizaro trs arquivos de informao: um.html, dois.html e tres.html. Visualmente, o resultado final o mesmo, mas as duas formas podem ser manipuladas de forma diferente. Na primeira verso temos dois arquivos. Os trechos em negrito indicam as ligaes entre eles. O primeiro frset1.html, que referencia uma pgina de informao:
<html> <head> ... </head> <frameset cols="50%,50%"> <frame name="janela1" src="um.html"> <frame name="janela2" src="frset2.html"> </frameset> </html>
e chama frset2.html, com mais duas pginas de informao, listado abaixo:

<html> <head> ... </head> <frameset rows="35%,65%"> <frame name="janela2_1" src="dois.html"> <frame name="janela2_2" src="tres.html"> </frameset> </html>
A figura abaixo mostra a organizao das pginas de informao e das pginas de frames na janela do browser.
pgina de informao pgina de frames
frset1.html
pgina de frames
dois.html
Pgina Web
ich aus et in unnus buus zich aus char wultt dus
Pgina Web
ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus zich aus char wultt dus par stak can litte sim
janela 1
Formulrio
janela 2-1
pginas de informao
Pgina Web
ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus
Formulrio
a
ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus zich aus char wultt dus par stak can litte sim
janela 2
janela 2-2
Formulrio
um.html
frset2.html
Janela do browser (janela 0)
tres.html
120
Observe que h trs nveis de pginas. No nvel mais alto est a pgina frset1.html, que ocupa toda a janela do browser. No segundo nvel esto os arquivos um.html e frset2.html. E no terceiro nvel, encontramos os arquivos dois.html e tres.html, que esto dentro de frset2.html. Na segunda verso, temos apenas um arquivo de frames contendo referncias para os trs arquivos de informao. Em negrito est mostrado o segundo frameset (observe que ele substitui o elemento <FRAME> que chamava frset2.html no ltimo exemplo.)
<html> <head> ... </head> <frameset cols="50%,50%"> <frame name="janela1" src="um.html"> <frameset rows="35%,65%"> <frame name="janela2_1" src="dois.html"> <frame name="janela2_2" src="tres.html"> </frameset> </frameset> </html>
Esta segunda verso possui apenas dois nveis. No primeiro, a pgina de frames frset.html, no segundo, as pginas de informao. A aparncia final a mesma, nas duas verses, mas na primeira verso h uma janela a mais (janela2) que pode ser manipulada via JavaScript ou HTML.
22.3. Controle dos alvos dos vnculos

O comportamento usual dos browsers o de abrir uma nova pgina sempre dentro da janela atual. possvel alterar esse comportamento atravs do atributo TARGET em vnculos de hipertexto <A HREF> e elementos <BASE>. Se a janela2 for utilizada como alvo de um link HTML:
<a href="pagina.html" TARGET="janela2"> link </A>
os frames janela2_1 e janela2_2, que esto em um nvel abaixo de janela2 deixaro de existir e pagina.html ocupar toda a segunda coluna da janela do browser. Isto no poder ser feito na segunda verso, pois ela s possui dois nveis. Se o link estiver dentro da pgina dois.html ou tres.html, a sintaxe abaixo, usando o nome especial _parent causar um resultado equivalente:
<a href="pagina.html" TARGET="_parent"> link </A>
121
23. Multimdia
23.1. Imagens mapeadas
Para fazer com que uma imagem sirva como origem de um vnculo de hipertexto basta coloc-la dentro de um bloco <A HREF>. Mas se o que se deseja que partes diferentes da imagem apontem para lugares diferentes, preciso usar imagens mapeadas ou imagemaps. Imagens mapeadas so muito usadas em barras de navegao, mapas, diagramas, etc. Sempre que for necessrio selecionar uma rea irregular de uma imagem e fazer com que ela esteja relacionada a um destino (pgina, ncora local, etc.) pode-se us-la. H basicamente dois tipos de imagens mapeadas: as que funcionam no servidor (no seu provedor) e as que funcionam do lado do cliente (no seu computador). O primeiro tipo necessita de um programa CGI e um arquivo especial que contm as coordenadas das reas ativas armazenados no servidor. uma soluo obsoleta e mais complicada. O segundo realiza tudo sem acessar a rede e portanto mais rpido e mais eficiente. Todos os browsers mais recentes (desde as verses 2.0) suportam imagens mapeadas do lado do cliente. Para criar uma imagem mapeada necessrio ter uma imagem e calcular as coordenadas de suas reas ativas. A maior parte dos editores HTML possuem ferramentas para gerar coordenadas, mas se a sua no tiver, voc pode sempre obter ferramentas gratuitas na rede como o MapEdit para Windows (http://www.boutell.com/mapedit/) ou o MapMaker para Mac (http://www.kickinit.com/mapmaker/). Imagens mapeadas so imagens comuns. A diferena que tm um atributo adicional informando o nome do bloco que define o mapa que ser utilizado. O atributo USEMAP:
<BODY> <IMG SRC="banner.gif" USEMAP="#isoptera" ALT="Menu de Opes"> </BODY>
O atributo USEMAP acima possui um valor #isoptera que corresponde ao nome de um mapeamento. Inclumos uma estrutura de mapeamento na pgina atravs do bloco <MAP>. Todo o bloco <MAP> gerado pelo programa que calcula as coordenadas. Para a imagem abaixo (banner.gif) o mapa, sem as coordenadas, o seguinte:
122
<MAP NAME="isoptera"> <AREA SHAPE="rect" COORDS="..." <AREA SHAPE="rect" COORDS="..." <AREA SHAPE="rect" COORDS="..." <AREA SHAPE="rect" COORDS="..." <AREA SHAPE="rect" COORDS="..." <AREA SHAPE="rect" COORDS="..." </MAP>
HREF="core.html" target=_top> HREF="livraria.html"> HREF="cdshop.html"> HREF="eventos.html"> HREF="pulgas.html"> HREF="sair.html" target=_top>
Para selecionar as reas ativas da figura, voc precisar descrev-las, informando a forma (POLY, RECTANGLE ou CIRCLE) e suas coordenadas (lista de nmeros separados por vrgulas) alm da URL que devem seguir (atributo HREF). Esses atributos do descritor <AREA> definem a rea utilizada. Os polgonos (SHAPE="poly") so definidos em termos das coordenadas de seus vrtices. Cada coordenada (par de dois nmeros) corresponde a um vrtice (x, y) do mesmo. A origem (0,0) corresponde ao canto superior esquerdo da imagem banner.gif. Crculos (SHAPE="circle") devem incluir trs nmeros separados por vrgulas como coordenadas. Os dois primeiros so a coordenada do centro do crculo e o ltimo seu raio. Retngulos (SHAPE="rectangle") so definidos em termos de quatro nmeros: as coordenadas no canto superior esquerdo e do canto inferior direito. O bloco <MAP> pode estar em qualquer lugar da pgina pois identificado pelo nome e s se torna ativo depois que a pgina inteira for carregada.
23.2. udio, vdeo e plug-ins

Componentes Flash e Shockwave, imagens e vdeos podem ser includos em uma pgina usando o elemento <EMBED> ou o elemento <OBJECT>. Embora o ltimo seja recomendado pela especificao do HTML 4.0, o suporte a <EMBED> mais antigo e funciona tanto nos browsers Internet Explorer como Netscape.
123
Os atributos de <EMBED> variam conforme o componente instalado. Na maior parte dos casos, o componente ocupa uma parte da pgina como uma imagem, e pode ser alinhado e redimensionado usando os mesmos atributos disponveis em <IMG>. A sintaxe mnima de <EMBED> :
<EMBED SRC="URL do componente" HEIGHT=100 WIDTH=150> </EMBED>
Audio
H vrios formatos de udio suportados na Web. Os que possuem maior suporte so os formatos .au e .mid suportados pelo componente LiveAudio disponvel no browser Netscape ou Internet Explorer. Mais recentemente tem crescido o suporte ao formato .mp3. O LiveAudio exibe (opcionalmente) um controle de tela que permite ao usurio manipular o som. O elemento <EMBED> usado para incluir udio possui vrios atributos adicionais. A sintaxe tpica :
<EMBED SRC="musica.mid" CONTROLS=console HEIGHT=60 WIDTH=150 AUTOSTART=false></EMBED>
O atributo CONTROLS pode receber os valores console, smallconsole, playbutton, pausebutton, stopbutton ou volumelever e alterar a aparncia do display. O atributo LOOP pode ter os valores true, false ou um nmero indicando o nmero de vezes que o som deve tocar. AUTOSTART pode ser true ou false indicando se o som deve comear imediatamente ou esperar pela deciso do usurio. VOLUME varia de 0 a 100 e estabelece o volume do som. No Internet Explorer (e apenas no Internet Explorer) som de fundo pode ser includo usando o elemento <BGSOUND>:
<BGSOUND SRC="musica.mid" LOOP=3>
Vdeo
Assim como os recursos de udio, vrios formatos de vdeo como .mpg, .mov, .avi, .rm, etc. podem ser includos em pginas HTML usando o elemento <EMBED>. A sintaxe tpica :
<EMBED SRC="filme.mov" CONTROLS=console HEIGHT=260 WIDTH=450 AUTOPLAY=false></EMBED>
Cada plug-in tem seus prprios atributos que podem ser acrescentados ao descritor <EMBED>. O formato .mov (QuickTime) suporta vrios outros atributos, entre eles CONTROLLER=true ou false, para ligar ou desligar o controle do vdeo; LOOP = true, false ou palindrome para fazer o vdeo executar continuamente e de trs para frente. No Internet Explorer (e somente no Internet Explorer) possvel incluir vdeos usando o atributo DYNSRC de <IMG>:
<IMG DYNSRC="filme.mov">
124
23.3. Flash
Flash um formato de multimdia desenvolvido pela Macromedia que oferece a possibilidade de criar animaes, interatividade e integrao com udio e vdeo. Os arquivos so muito menores que os utilizados nas tecnologias padro da Web pois o formato das imagens e animaes do Flash se baseia em vetores (vector) e no em bitmaps. Imagens vetoriais descrevem os desenhos, fontes e comportamentos em termos de equaes, que ocupam bem menos espao de armazenamento que as animaes baseadas em bitmaps, que consistem da repetio de arquivos que contm o mapa completo de cores e pixels de cada tela. H diversas vantagens no formato oferecido pela tecnologia Flash. Os arquivos so menores, so escalveis sem perda de qualidade, suportam som integrado, podem ser desenvolvidos sem a utilizao de programao, contam com amplo suporte e ainda podem ser controlados atravs de parmetros passados em HTML ou JavaScript. As desvantagens se baseiam principalmente em se tratar de um formato proprietrio. preciso adquirir um software para produzir arquivos Flash. Para exibi-lo, preciso fazer o download de um plug-in. No h suporte em Linux ou Unix e nem para browsers nogrficos, que perdem totalmente o contedo da pgina. Para criar componentes Flash preciso ter o pacote Macromedia Flash 4. H uma verso de demonstrao que vale por 30 dias no site http://www.flash.com/. O objetivo desta seo apenas mostrar como se pode usar um componente Flash genrico que j foi criado previamente.
Configurao do servidor
Pode ser necessrio configurar o servidor Web para que ele saiba servir arquivos Flash. Informe-se no seu provedor sobre a configurao. Se voc for o webmaster responsvel por um servidor, voc dever acrescentar a seguinte relao tipo MIME/extenso de arquivo para que o servidor reconhea o formato: Tipo/subtipo: application/x-shockwave-flash Extenso: .swf Para acrescentar Flash em uma pgina HTML, use o elemento <EMBED>. A sintaxe mnima :
<EMBED SRC="filme.swf" HEIGHT=260 WIDTH=450> </EMBED>
125
24. Applets Java

24.1. O que so applets Java?
A Web popular porque suas informaes, na forma de texto e imagens, so visveis independente da plataforma (tipo de mquina e sistema operacional) do usurio. Nem sempre possvel ver determinado vdeo dependente de plug-in, ou um certo site interativo dependente de Flash, pois s vezes o programa necessrio execuo da aplicao depende de plataforma e pode ser at que no exista para a plataforma onde roda seu browser. Applets so pequenas aplicaes independentes de plataforma (por isso populares na Web), geralmente escritas em uma linguagem de programao chamada Java, que tm sua execuo iniciada pelo browser. Diferentemente do que ocorre com as linguagens embutidas em blocos <SCRIPT> (JavaScript), o cdigo Java escrito pelo programador da aplicao no interpretado nem visualizado pelo browser, j que foi antes compilado para uma linguagem de mquina. Browsers que suportam Java possuem uma plataforma virtual, a Java Virtual Machine, que simula uma mquina Java em sistemas operacionais diferentes como Windows, Macintosh, Unix, etc. S a mquina virtual Java capaz de interpretar a linguagem de mquina Java. Atravs dela, browsers so capazes de rodar programas sofisticados que podem desde oferecer uma interface de formulrios mais segura interativa, at mostrar udio, vdeo, 3D e sistemas de comunicao visual interativa em qualquer plataforma.
24.2. Quando usar applets

Applets podem ser usados para desenvolver aplicaes que seriam impossveis em HTML com ou sem linguagens embutidas (como JavaScript) e fugir das limitaes do HTML, do protocolo HTTP e do prprio browser. Com um applet, possvel estender um browser fazendo-o suportar, por exemplo, novos protocolos de comunicao e segurana, novos formatos de mdia, etc. O preo dessa liberdade sua fraca integrao com o HTML da pgina. Aplicaes Web baseadas em Java pouco ou nada aproveitam do HTML da pgina a no ser um espao grfico para sua exibio. O browser simplesmente reserva um espao para rodar o programa, e o programa assume aquele espao e faz o que bem quiser (limitado apenas por
126
restries de segurana). possvel aumentar essa integrao com linguagens embutidas no HTML como JavaScript. Applets so aplicaes grficas e precisam de uma pgina HTML para poderem executar. So exibidos na pgina de forma semelhante a imagens: carregam um arquivo externo, ocupam um espao com determinada altura e largura, e podem ter seu alinhamento em relao ao texto definido pelos mesmos atributos presentes em <IMG>. A sintaxe do elemento HTML <APPLET> est mostrada abaixo. Tudo o que no estiver em negrito opcional:
<APPLET CODE="nome_do_programa.class" HEIGHT="altura em pixels" WIDTH="largura em pixels" NAME="nome_do_objeto" CODEBASE="diretrio base do arquivo de classe Java" ARCHIVE="arquivo .jar contendo o programa" ALT="texto descritivo" HSPACE="margens externas laterais em pixels" VSPACE="margens externas verticais em pixels" ALIGN="left" ou "right" ou "top" ou "middle" ou "bottom" ou "texttop" ou "absmiddle" ou "absbottom" ou "baseline" MAYSCRIPT> <PARAM NAME="nome" VALUE="valor"> <PARAM NAME="nome" VALUE="valor"> ... <PARAM NAME="nome" VALUE="valor"> </APPLET>
Diferentemente de <IMG>, o elemento <APPLET> um bloco e possui um descritor de fechamento </APPLET>. Entre <APPLET> e </APPLET> pode haver nenhum ou vrios elementos <PARAM>, que contm parmetros necessrios ou no (depende do applet) para o funcionamento da aplicao. Cada elemento <PARAM> contm um par de atributos obrigatrios. O valor do atributo NAME definido pelo programador do applet. Atravs dele, o programa pode recuperar um valor que o autor da pgina (que no precisa saber Java) definiu no atributo VALUE. Os atributos CODEBASE e ARCHIVE so usados opcionalmente para localizar applets em outros servidores e importar outros mdulos do programa, respectivamente. O atributo MAYSCRIPT necessrio se o applet pretende ter acesso ao cdigo JavaScript da pgina. Sem este atributo, qualquer tentativa do applet de acessar variveis ou executar funes ou mtodos JavaScript causar em uma exceo de segurana no applet. No HTML 4.0, applets tambm podem ser includos em uma pgina usando o bloco genrico <OBJECT>, que tambm serve para importar imagens, plug-ins e construir frames internos. Existem muitos applets teis disponveis gratuitamente na Web que podem ser usados por autores de pginas Web e programadores JavaScript sem que precisem saber Java. Os mais populares implementam banners para rolagem de texto, cones inteligentes, grficos, planilhas
127
de dados e interfaces para bancos de dados. A maioria so configurveis atravs de parmetros que o autor da pgina define em elementos <PARAM>. No apndice A h uma lista de sites onde se pode encontrar tais applets. Exemplos so o Gamelan (http://www.gamelan.com) e o site da Sun sobre Java (http://java.sun.com). A seo a seguir mostrar como incluir um applet obtido em um desses sites.
24.3. Como incluir um applet em uma pgina

O exemplo a seguir mostra como incluir o applet Clock2 em uma pgina Web. Este applet distribudo pela Sun gratuitamente em http://java.sun.com e juntamente com o ambiente de desenvolvimento Java. O applet pode ser includo na pgina da forma default, sem especificar parmetros, ou de forma personalizada, definindo parmetros que alteram a cor de fundo, dos ponteiros e do mostrador. Como que o autor de uma pgina HTML saber quais parmetros usar e configurar? Vendo-o funcionar! O applet distribudo com uma pgina HTML que mostra como us-lo. Ele deve ser includo na pgina HTML usando o nome do arquivo executvel java, que neste caso Clock2.class e deve ocupar uma rea de no mnimo 170x150 pixels (tudo isto est na pgina):
<applet code="Clock2.class" height=150 width=170></applet>
Com o cdigo acima, o relgio aparece na pgina como mostrado na figura, com ponteiros azuis, visor com letras pretas e fundo branco. O autor do applet permite, porm, que o autor da pgina altere esses parmetros atravs de descritores <PARAM>. Os trs parmetros modificveis so: bgcolor cor de fundo (branco default) fgcolor1 cor dos ponteiros e dial (azul default) fgcolor2 cor dos nmeros e ponteiro de seguntos (preto default) Todos os parmetros devem receber como valor um nmero hexadecimal representando uma cor no formato RGB (mesmo formato usado em HTML): ff0000 vermelho, ffffff branco, 0000ff azul, etc. Portanto, para incluir o relgio acima em uma pgina com um fundo cinza claro, ponteiros marrons e letras douradas, o cdigo seria:
<applet code="Clock2.class" width=170 height=150> <param name=bgcolor value="dddddd"> <param name=fgcolor1 value="800000">
128
<param name=fgcolor2 value="808000"> </applet>
Applets remotos
Caso o applet esteja em um diretrio diferente daquele onde est a pgina, ser necessrio usar o atributo CODEBASE, para informar a URL base. Por exemplo, se o arquivo .class que usamos acima estiver em http://www.abc.com/clocks/, precisamos usar:
<applet codebase="http://www.abc.com/clocks/" code="Clock2.class" ... > ... </applet>
24.4. Concluso
Applets oferecem um meio para escapar das limitaes do browser e do HTML sem limitar o pblico-alvo da pgina de acordo com a plataforma de computao que possuem. preciso, porm, lembrar que podem ocorrer problemas. Como applets so programas, podem conter ou provocar erros. Geralmente esses erros no so graves a ponto de comprometer a segurana do usurio, pois os browsers que suportam applets possuem um rigoroso mecanismo que restringe o que applets podem fazer. Eles no podem, por exemplo, escrever no seu disco ou imprimir. Mas os erros podem levar o applet a no funcionar, ou pior, a consumir os recursos de memria do browser e do sistema, forando o usurio a abandonar sua execuo (e possivelmente a do browser). Applets escritos para as verses Java 2 podem no funcionar at em browsers recentes, como o Internet Explorer 4. Embora funcionem em plataformas diferentes, applets podem rodar at 30 vezes mais rpido em certas plataformas. Isto depende da qualidade da mquina virtual suportada pelo browser. Levando em conta todas essas questes, voc deve usar applets quando for necessrio incluir recursos que o browser e o HTML sozinhos no seriam capazes de oferecer. preciso, porm, levar em conta o risco de inacessibilidade caso o applet no funcione por um motivo ou outro. Se possvel, deve haver uma forma alternativa de obter a informao que ele guarda ou a funcionalidade que ele implementa. Se o seu pblico-alvo permitir, voc talvez decida que melhor usar outra tecnologia mais simples, visvel em menos plataformas, mas que atenda seus objetivos.
129
25. Exerccios
1. Monte o quebra cabeas abaixo com as imagens im-01.jpg a im-05.jpg do kit1 (disponveis no site do curso), juntamente com as imagens, esquerda.jpg, direita.jpg e baixo.jpg para obter o desenho abaixo usando tabelas HTML.
2. Organize o texto (do kit2) da forma mostrada nas figuras abaixo
130
131
Anexos
WebDesigner / IBPINET

Anexos Avaliao e Projetos Publicao do site
Anexos pgina 1
Anexos
1. Avaliao e Projetos
1.1. Questes
As questes tratam de assuntos discutidos em sala de aula e/ou no material didtico distribudo. So 30 questes distribudas entre os captulos da apostila e que podero ser encontradas no site
http://www.ibpinet.net/helder/wd/cws1/avaliacao/
As instrues para envio das respostas estaro disponveis na prpria pgina. As resposta devem ser enviadas at o dia ________. Assuntos: Web e Internet Fundamentos do HTML Folhas de estilo
1.2. Projeto (publicar no seu site)

O objetivo do projeto construir o site de uma revista cultural fictcia e public-lo. Os recursos disponveis so textos e imagens que podem ser obtidas atravs da Internet em http://www.ibpinet.net/helder/wd/cws1/projeto.zip. No preciso usar todas as imagens. Analise os textos e imagens disponveis, elabore uma estrutura de navegao, decida sobre um estilo para o site, teste a navegao e depois decida o que usar. Quando concluir o site (ou at antes, se desejar), publique-o em seu site no endereo
http://www.ibpinet.net/wd/seulogin/projeto1/
Quando tiver terminado, solicite a avaliao do site atravs da URL:

http://www.ibpinet.net/helder/wd/cws1/avaliacao/
at o dia _______. O site ser avaliado segundo os critrios descritos na seo a seguir. Recursos que ainda no foram vistos como JavaScript, rollovers, tratamento de imagens, etc. podem ser usados mas no contaro pontos (podem contar pontos negativos, porm, se prejudicarem a navegao, identidade, esttica ou outro critrio avaliado).
Anexos pgina 2
Anexos
1.2.1. Estrutura do site

Voc pode decidir por outra estrutura do site, se desejar. As pginas disponveis contm apenas texto em arquivos HTML (com uma ou duas excees). H tambm duas folhas de estilo disponveis que podem ou no servir para todas as pginas (voc pode alter-las ou criar uma nova ou no usar folhas de estilo. Os arquivos disponveis so: index.html pgina inicial (voc decide sobre o contedo).
einstein.html, calendario.html, corvo.html, shakespeare.html, bandeira.html, dante.html, platao.html,vinicius.html artigos diver-
sos. Aplique um estilo uniforme nessas pginas. Use barras de navegao. Decore com imagens se achar necessrio ou adequado. galeria.html pgina de uma galeria de imagens. Deve haver links para imagens nesta pgina ou em pginas de alguma maneira ligadas a esta. ensaios.css, ensaios2.css folhas de estilo (use se achar conveniente) menulat_esc.gif, menulat_cla.gif menu (barra de navegao) vertical nos estilos claro e escuro (use um estilo ou outro se desejar aproveitar essas imagens). preciso implementar imagens mapeadas para usar este menu. menusup_cla.gif, menusup_esc.gif menu (barra de navegao) horizontal nos estilos claro e escuro (use um estilo ou outro se desejar aproveitar essas imagens). preciso implementar imagens mapeadas para usar este menu.
m_home.gif, m_educ.gif, m_terr.gif, m_viag.gif, m_gale.gif, m_duvi.gif, m_cart.gif, m_idei.gif, m_atit.gif, m_dese.gif barra
de navegao vertical em pedaos menores. aeternus.jpg, aeternus2.jpg imagem opcional para primeira pgina (dois estilos) e aeternus_s.gif, aeternus2_s.gif verses reduzidas da imagem da primeira pgina. corvo.jpg, einstein1.jpg, einstein2.gif, shake1.gif ilustraes de uso opcional (voc no precisa us-las e pode usar outras se desejar).
No subdiretrio imagens h uma coleo de imagens e thumbnails (verses reduzidas) que podem ser usadas para montar a galeria. Se desejar usar frames, ser necessrio implement-los (criar as pginas necessrias). A nica coisa que o site deve preservar a informao contida nos textos. Voc deve usar estilos e imagens para tornar a navegao mais eficiente e agradvel. Todas as imagens so opcionais. Voc pode usar outras ou no us-las se desejar (conseguir fazer um bom site sem imagens tambm um desafio). Voc tambm no precisa usar frames, tabelas ou folhas de estilo. A deciso de usar ou no essas tecnologias, de quanto us-las sua.
Anexos pgina 3
Anexos
1.3. Critrios de avaliao

O seu site ser avaliado de acordo com o sucesso das decises que voc tomar para torn-lo acessvel, navegvel e esteticamente atraente. Voc tambm deve cuidar para que ele seja fcil de manter pois ele ser estendido no mdulo seguinte. O projeto vale 10 pontos, dos quais: 5 pontos correspondem viabilizao do projeto completo de navegao, ou seja, deve ser possvel acessar o site http://www.ibpinet.net/wd/seulogin/projeto1/ e a partir da pgina inicial chegar em todas as pginas secundrias e voltar pgina inicial (navegabilidade). mais 1 ponto se a estrutura das pginas e informao na forma de texto, cores e imagens for preservada entre browsers nas verses 4 em diante do Internet Explorer e Netscape para Windows (estrutura e compatibilidade). mais 1 ponto se voc utilizar recursos de acessibilidade (visveis no Internet Explorer) como os atributos ALT de imagens e TITLE. Devo ser capaz de navegar pelo site caso as imagens no carreguem (acessibilidade). mais 1 ponto se voc usar recursos modernos de layout de pginas (folhas de estilo e/ou tabelas) para controlar a aparncia do site desde que esses recursos no prejudiquem os critrios de navegabilidade, acessibilidade e compatibilidade (criatividade e uso de tecnologia). mais 1 ponto se voc oferecer a opo de um mecanismo eficiente de navegao para a galeria de fotos (no precisa ser necessariamente baseado em frames). (tcnicas de navegao) mais 1 ponto se o seu site estiver visualmente atraente e tiver um estilo consistente. Tenha cuidado e evite abusar de fontes, cores, imagens e recursos especiais (unidade e estilo). Critrios alcanados parcialmente (com exceo do primeiro) recebero 0,5 pontos.
Anexos pgina 4
Anexos
2. Publicao do seu site

2.1. Organizao do seu site
A sua conta no provedor IBPINET acessvel de duas formas: atravs da emulao do terminal da mquina Unix, usando um programa Telnet, ou atravs de um programa FTP, para transferncia de arquivos. Para usar Telnet preciso conhecer o sistema Linux, onde a conta reside. Existem algumas restries de segurana. Nesta etapa do curso no ser necessrio entrar na sua conta via Telnet. Atravs de FTP ser possvel transferir arquivos de e para a sua conta, criar e remover diretrios e alterar as permisses de leitura, alterao e execuo de seus arquivos remotos. A sua conta tem um espao limitado inicialmente a 2MB. Nela voc poder armazenar as pginas HTML, imagens e outros arquivos necessrios visualizao e navegao do seu site. Voc pode utilizar o seu site principal para qualquer fim no comercial, respeitando as condies estabelecidas pelo IBPINET para cesso do espao com as quais voc dever concordar. Para o curso, voc dever utilizar os subdiretrios reservados especialmente para este fim onde sero armazenados os projetos e exerccios propostos durante todo o treinamento. Na seo seguinte ser dada uma breve descrio do programa cliente FTP que voc dever usar para poder administrar o seu site, transferindo arquivos e alterando suas propriedades.
2.2. Como usar FTP

Para transferir o seu site montado em disco local para o provedor de acesso, preciso usar um programa de transferncia de arquivos baseado no protocolo FTP. H vrios clientes FTP de graa e com uso legal limitado a 30 dias na Internet. Qualquer um pode ser usado, at mesmo o FTP do MS-DOS, orientado a caracter. Veja em http://www.ibpinet.net/wd/ uma lista de clientes FTP para Windows, Macintosh e Linux. Siga as instrues de instalao e utilize a documentao de ajuda, se necessrio, para oper-lo. As sees abaixo descrevem o procedimento para transferir arquivos da sua mquina para o servidor FTP do IBPINET que tornar seus arquivos visveis a partir da Web. O seu diretrio casa, no Linux (sistema operacional usado no provedor), est mapeado URL
Anexos pgina 5
Anexos
/wd/seulogin/, ou seja, tudo o que voc colocar no seu diretrio / ser visvel em www.ibpinet.net/wd/seulogin/. As etapas abaixo utilizaro o software CuteFTP mas voc pode repeti-las com qualquer outro programa cliente FTP.
2.2.1. Cadastrando o seu site

Ao abrir o CuteFTP pela primeira vez ou clicando no cone (Site Manager) voc poder cadastrar o site do IBPINET para fcil conexo futura. Na janela de dilogo h uma lista de pastas esquerda. Cliqie na ltima delas (Personal FTP Sites). Aperte o boto Add Site. Deve aparecer a seguinte janela:
No Site Label crie o nome atravs do qual voc deseja identificar este site (IBPINET). Em Host Address escreva o nome ou endereo IP do IBPINET (200.231.191.10). Em User ID escreva o seu nome de login no IBPI (s o nome sem o @ibpinet.net). Em Password escreva sua senha. Aperte OK. Para conectar, selecione o site desejado na lista de sites (IBPINET) e aperte Connect. Durante a tentativa de conexo, mensagens rolaro na janela superior do CuteFTP e em pouco tempo seu diretrio casa no Linux dever aparecer na janela direita. esquerda est o sistema de arquivos do Windows.
2.2.2. Transferindo arquivos

Embora o CuteFTP se assemelhe ao Explorer do Windows, seu funcionamento no idntico. Uma vez conectado, possvel transferir arquivos de um lado para outro arrastandoos com o mouse. S possvel arrastar arquivos e no diretrios e preciso estar dentro de um diretrio antes de copiar um arquivo para ele.
Anexos pgina 6
Anexos
Antes de enviar qualquer coisa via FTP, verifique sempre o diretrio destino. Se voc gravar por cima de um arquivo com mesmo nome voc no conseguir recuper-lo.
Se voc passar muito tempo no CuteFTP sem transferir arquivos, ter que conectar outra vez pois o cliente poder se desconectar por timeout. Para mudar (entrar) de diretrio basta clicar na pasta correspondente. Para mudar de drive local preciso usar o boto direito do mouse dentro da rea que lista os arquivos e selecionar a opo correspondente. O boto direito tambm serve para criar diretrios no Windows e no Linux, mov-los e apag-los. Todos os arquivos que voc transferir para o seu diretrio raiz sero visveis a partir da URL http://www.ibpinet.net/wd/seulogin/. Aproveite a oportunidade para criar o subdiretrio projeto1/ onde voc armazenar o seu projeto e exerccios. Troque tambm a pgina index.html do seu diretrio raiz / por outra pgina, dando boas vindas ao seu site.
Anexos pgina 7

(HELDER DA ROCHA) Criação de Web Sites I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(HELDER DA ROCHA) Criação de Web Sites I

Uploaded by

Copyright:

Available Formats

Helder da Rocha

Apresentao Prefcio Parte 1: Web e Internet

Parte 3: Folhas de Estilo

Parte 4: Recursos Avanados

O que voc j deve saber

Mdia eletrnica e atualizaes

Helder L. S. da Rocha So Paulo, 16 de maro de 2000.

Criao de Web Sites I

Parte 1 Web e Internet

2. Criao de Web Sites............................................................................................ 19

Parte 1 Web e Internet

1.1. Breve histria da Internet

Parte 1 Web e Internet

Parte 1 Web e Internet

O poder da Web como meio de comunicao

1.2. Como funciona a Web e a Internet

Parte 1 Web e Internet

Parte 1 Web e Internet

Servidor HTTP Comunicao Aparente TCP IP PPP

Servio de Nomes (DNS Domain Name Service)

Parte 1 Web e Internet

Portas e servios da Internet

A Web entre os servios da Internet

Parte 1 Web e Internet

1.3. A plataforma Web

Parte 1 Web e Internet

Parte 1 Web e Internet

Veja algumas outras URLs:

Acesso a servidor de newsgroups para ler o grupo comp.lang.java

Acesso ao grupo comp.lang.java atravs de servidor default (definido localmente)

Acesso pgina default disponvel no diretrio raiz do servidor Web de

Parte 1 Web e Internet

Acesso janela de envio de e-mail do cliente de correio eletrnico local.

Parte 1 Web e Internet

1.4. Tecnologias de Apresentao

Parte 1 Web e Internet

Parte 1 Web e Internet

Parte 1 Web e Internet

Parte 1 Web e Internet

Parte 1 Web e Internet

Parte 1 Web e Internet

2. Criao de Web Sites

Editores grficos (WYSIWYG)

Parte 1 Web e Internet

Parte 1 Web e Internet

2.2. Por que se preocupar com o perfil dos visitantes?

2.3. Por que aprender HTML?

Parte 1 Web e Internet

Criao de Web Sites I

4. Pargrafos e blocos ................................................................................................ 35

3.1. Elementos e descritores (tags)

3.3. Caracteres de escape

Por exemplo, para produzir as seguintes linhas no browser:

preciso digitar no editor de textos (cdigo HTML):

pode-se usar, no editor de textos:

3.5. Estrutura do documento

3.6. Elementos do HEAD

3.7. Elementos de BODY

4.1. Pargrafos <P>

vai resultar em: Um pargrafo Outro pargrafo

4.2. Cabealhos <H1> a <H6>

4.3. Quebras de linha <BR>

4.4. Linhas horizontais <HR>