Arquitetura Web

Web 1 Arquitetura da Web
WEB 1
Arquitetura da Web
ESTE MDULO FORNECE UMA INTRUDUO PLATAFORMA WEB. Apresenta um

breve histrico de Web e fala sobre as principais tecnologias de apresentao
usadas para organizar as informaes de um site e fornece uma viso geral das
tecnologias interativas utilizadas no desenvolvimento de aplicaes Web.
Tpicos abordados neste mdulo

Arquitetura e componentes da plataforma Web
Viso geral das tecnologias de apresentao
Cliente, servidor e protocolo Web (HTTP)
Viso geral das tecnologias interativas
ndice
1.1.A Plataforma Web ............................................................................................ 2
Um breve histrico .................................................................................................................. 2
Browsers e servidores .............................................................................................................. 4
URLs .......................................................................................................................................... 4
Tipos MIME ............................................................................................................................. 5
1.2.Tecnologias de Apresentao ......................................................................... 6
HTML e CSS............................................................................................................................. 6
XML e XSL ............................................................................................................................... 7
1.3.O protocolo HTTP .......................................................................................... 8
Mtodos ..................................................................................................................................... 9
Requisies HTTP e mtodo GET....................................................................................... 9
Respostas HTTP ....................................................................................................................10
1.4.Tecnologias interativas................................................................................... 12
Aplicaes Web com recursos lado-cliente............................................................................13
Aplicaes Web com recursos lado-servidor .........................................................................13
Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-1

Objetivos
No final deste mdulo voc dever ser capaz de:
Descrever as principais caractersticas e componentes da arquitetura
Web.
Explicar o funcionamento bsico do protocolo HTTP, de um browser e
de um servidor.
Diferenciar as principais tecnologias Web e saber quando, onde e porque
so usadas.
1.1. A Plataforma Web
Um breve histrico
A Internet nunca mais foi a mesma desde que Tim Berners-Lee props em
maro de 1989, que a gerncia do CERN adotasse um sistema de informaes
distribudo baseado em hipertexto, como soluo para os problemas de
comunicao da instituio. 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, acabou por convencer seus gerentes e 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. Hoje a Internet a World Wide
Web. Todos os servios da Internet se renderam ao poder da Web e linguagem
HTML Hypertext Markup Language, 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 evoluiu e ocupou todos os espaos fazendo jus ao nome World

Wide. Pginas interligadas por hipertexto no so mais novidade. Existem tantas
hoje que difcil separar o joio do trigo, e seria impossvel encontrar alguma
coisa se a Web no tivesse evoludo e se tornado mais interativa ainda. As pginas
deixaram de ser meras pginas e passaram a se comportar como aplicaes. O
browser evoluiu junto e passou a ser tratado como uma interface universal, capaz
de oferecer ao usurio acesso interativo e uniforme a programas remotos em
diversas plataformas. E a Web deixou de ser um mero servio. Passou a ser uma
enorme plataforma, estimulando a criao de novas linguagens e tecnologias.
Os primeiros obstculos foram as primeiras solues. HTML a
linguagem que tornou tudo possvel foi construda apenas para estruturar
pginas de hipertexto. Como poderia realizar buscas na Web ou enviar e-mail?
Esta necessidade impulsionou pesquisas por organizaes abertas e fabricantes
de produtos para a Web. Vrias propostas surgiram. Algumas propunham at a
substituio do HTML por outra linguagem. Poucas idias, porm, tiveram
aceitao to ampla quanto a tecnologia CGI que ainda hoje bastante popular.
CGI sigla de Common Gateway Interface tornou possvel o surgimento das
primeiras verdadeiras aplicaes da plataforma Web, permitindo que o cliente
manipulasse aplicaes remotas usando o seu browser como interface. Isto
provocou uma revoluo no desenvolvimento de aplicaes distribudas, pois
HTML com CGI tornou possvel a criao de interfaces baratas, fceis de
desenvolver, fceis de usar e ao mesmo tempo poderosas, uma vez que CGI
poderia servir de ponte para qualquer aplicao remota.
A plataforma Web continuou evoluindo e hoje temos pginas HTML que
no so mais estticas, e que respondem de forma mais interativa s aes do
usurio. Com os applets Java, e depois com os plug-ins ActiveX, as aplicaes que
tnhamos no desktop podiam manter a sua aparncia mesmo a quilmetros de
distncia. Com o JavaScript, o prprio HTML pde se tornar competitivo e
oferecer uma interface interativa sem a necessidade de applets e ActiveX que
podem limitar o pblico de uma aplicao.
Neste curso de dois mdulos, teremos uma breve apresentao da
plataforma Web e depois conheceremos as suas tecnologias de apresentao de
informao: as linguagens HTML e CSS.

Browsers e servidores
O servio WWW um servio TCP/IP baseado no protocolo HTTP
(HyperText Transfer Protocol). Hipertexto uma forma no linear de publicao de
informaes onde palavras que aparecem no decorrer do texto podem levar a
outras sees de um documento, outros documentos ou at outros sistemas de
informao, fugindo da estrutura linear original. O hipertexto baseia-se em
ligaes entre duas ncoras. Uma ncora-origem est interligada a uma ncora-
destino. Estas ligaes so chamadas de vnculos (links) ou hipervnculos
(hyperlinks).
O protocolo HTTP funciona de forma semelhante ao protocolo FTP File
Transfer Protocol protocolo de comunicao, servidor e cliente usados na Web
para operaes de transferncia de arquivos. Ambos oferecem aos seus clientes
um sistema de arquivos virtual onde podem localizar recursos e transferi-los. A
principal funo de um servidor Web , portanto, administrar um sistema de
arquivos e diretrios virtual e atender requisies dos clientes HTTP, que, na
maior parte das vezes, enviam comandos solicitando recursos.
URLs
Todas as comunicaes na plataforma Web utilizam a sintaxe chamada URL
Uniform Resource Locator para localizar os recursos que so transferidos. O
servio HTTP depende da URL que usada para localizar qualquer coisa na
Internet. Contm duas informaes essenciais: 1) COMO transferir o objeto; 2)
ONDE encontr-lo. O formato tpico de uma URL :
protocolo://maquina:porta/caminho/recurso
As URLs mais comuns so os endereos da Web:

http://www.minhamaquina.com.br/caminho/para/minha/pgina/texto.html
Um servidor Web precisa mapear os diretrios do sistema onde est

instalado em URLs parciais (que no contm protocolo ou nome da mquina)
para que possa oferecer o servio Web. Por exemplo, um servidor pode ter o
seguinte mapeamento:
/ c:\documentos
/scripts c:\programas
/scripts/cgi/ c:\perl\cgi\novos\

O / corresponde raiz de documentos. Qualquer subdiretrio de

c:\documentos ser, na maioria dos servidores, mapeado automaticamente
abaixo de /. Mesmo diretrios que no esto abaixo de c:\documentos podem
ser mapeados abaixo de /, como c:\programas no exemplo acima. Entre o
browser e o servidor o nico sistema de arquivos que existe o sistema de arquivos
virtual. Se um browser, estando atualmente no diretrio /scripts/cgi/
(c:\perl\cgi\novos), envia um comando para o servidor para mudar para ../
(diretrio anterior), o servidor o posicionar no diretrio /scripts/ e no em
c:\perl\cgi\.
A URL usada internamente no servidor contm apenas o caminho absoluto
dentro do mesmo. O browser, como est remoto, precisa utilizar uma URL
completa que contenha o nome da mquina onde roda o servidor, a porta de
servios (se no for 80) e o protocolo de acesso (que pode no ser HTTP). As
pginas HTML, porm, como j esto armazenadas em determinada mquina e
diretrio, freqentemente podem usar URLs relativas sua localizao. Por
exemplo, uma pgina pode se referir a um arquivo que ocupa um diretrio
anterior no servidor usando ../arquivo.txt para localiz-lo. Quando fizer a
requisio, o browser complementar a URL relativa com o diretrio atual,
formando uma URL absoluta que o servidor compreenda.
Resumindo: servidores e browsers s localizam recursos usando URLs. No
faz sentido escrever C:\qualquercoisa\x.txt no browser a no ser que voc
deseje ver um arquivo local, sem passar pelo servidor. Tambm no faz sentido
usar caminhos desse tipo em arquivos HTML. Eles podem at funcionar
localmente, sem servidor, mas no mais funcionaro quando forem publicados
em um servidor Web.
Tipos MIME
O tipo dos dados recebido pelo browser importante para que o browser
saiba representar a informao na tela, que pode ser uma imagem, um arquivo
HTML, ou at um formato no suportado. A representao precisa ser padro,
portanto, o servidor envia o tipo dos dados para o browser baseando-se no
padro universal MIME Multipart Internet Mail Extensions.
O servidor possui internamente tabelas MIME que relacionam os tipos de
dados com a extenso dos arquivos l armazenados. Como o browser no est

lendo o arquivo do disco, ele precisa desta informao que enviada pelo
servidor. O formato de um tipo MIME utiliza a sintaxe:
tipo/subtipo
Alguns exemplos:
image/jpg .jpe, .jpg, .jpeg
text/html .html, .htm, .jsp, .asp, .shtml
text/plain .txt
x-application/java .class
1.2. 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
um alto nvel de interatividade com o usurio. Elas podem 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). Nesta seo apresentaremos uma viso geral das
tecnologias de apresentao.
HTML e CSS
HTML, ou HyperText Markup Language, a linguagem usada para marcar os
arquivos de texto lidos pelos browsers e enviados pelos servidores. No se trata
de uma linguagem de programao. apenas 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. Um arquivo HTML um arquivo de
texto comum recheado de marcadores que se destacam do texto pelos caracteres
especiais < e >. Por exemplo, para fazer um texto aparecer em negrito no
browser, voc pode fazer:
<B>um texto</B>

no texto de um arquivo HTML. Os descritores <B> e </B> so a marcao HTML

(compare com o ^B do WordStar). H uma hierarquia de descritores (nem todos
podem ser usados em todos os lugares). No prximo mdulo teremos um
contato maior com HTML.
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 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 browser. A folha de estilos tambm pode ser definida pelo programador.
Para isto existe uma outra linguagem chamada CSS Cascading Style Sheets. A
folha de estilos pode ser vinculada pgina e 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 para a Web e Internet. 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
??ML, definir seus prprios marcadores e esquemas para aplicaes bem
especficas, por exemplo, poderia conter algo como:
<compra id="xyz"><data>26/12/1999</data>...</compra> ...
Depois voc pode usar CSS ou XSL para definir a aparncia dos seus
marcadores no browser. Para que um browser XML seja capaz de compreender a
linguagem que voc criou, preciso definir 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 ser capaz de formatar a informao que voc
estruturou com sua linguagem e apresentar as informaes na tela de acordo com
as regras de estilo definidas no CSS ou XSL.

1.3. O protocolo HTTP

A plataforma Web est centrada no protocolo HTTP um dos principais
meios de comunicao entre um browser e um servidor Web. HTTP significa
Hypertext Transfer Protocol. A especificao, elaborada pelo W3C1, o define como:
HTTP um protocolo de nvel de aplicao para sistemas de hipermdia, colaborativos e
distribudos. um protocolo genrico, sem estado e orientado a objetos que pode ser usado para
diversas tarefas, tais como servidores de nomes e sistemas de gerenciamento de objetos distribudos,
atravs da extenso de seus mtodos de requisio [RFC2068].
A W3C define HTTP como um protocolo sem estado (stateless). Isto quer
dizer que o protocolo no preserva informaes de estado entre requisies ao
servidor (ele no mantm sesso). Se um servidor recebe uma seqncia de 3
requisies de trs clientes ao mesmo tempo ele no saber separar as requisies
por cliente de forma a considerar informaes da primeira requisio que podem
influenciar na segunda ou terceira. Isto quer dizer que no ser possvel, por
exemplo, implementar aplicaes que dependam de informaes de estado
definidas em pginas separadas, como aplicaes de comrcio online, sem
recorrer a mecanismos externos ao protocolo.
A figura abaixo ilustra a forma como as transferncias de informao
ocorrem na plataforma Web. Observe que cada conexo do browser contm
uma, e apenas uma requisio, que seguida por uma resposta do servidor. Aps
a resposta a conexo cai e o browser precisar abrir nova conexo se quiser
buscar algo mais. Para que um browser monte uma pgina HTML que contenha
10 imagens, por exemplo, precisar fazer 11 conexes uma vez que HTML
contm apenas texto e as imagens so objetos separados que o browser carrega
com base em instrues embutidas no cdigo HTML da pgina.
1 World Wide Web Consortium (http://www.w3.org)

Mtodos
HTTP define um conjunto de mensagens chamados de mtodos de requisio
HTTP que so usados pelo cliente geralmente um browser como o Netscape
Navigator ou Microsoft Internet Explorer, para enviar uma requisio ao servidor. Esta
requisio , na maior parte das vezes, uma solicitao para que o servidor
devolva uma pgina HTML, uma imagem, um componente ou recurso
multimdia. O mtodo HTTP usado neste tipo requisio o mtodo GET que,
alm de requisitar pginas, imagens ou programas, pode requisitar informaes
geradas na sada de um dispositivo ou programa executado pelo servidor.
Vrios outros mtodos so definidos pelo protocolo HTTP. O protocolo
tambm garante a possibilidade de extenses. A verso HTTP 1.1 define 7
mtodos bsicos, que so: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS. Um
servidor Web mnimo, que suporte HTTP 1.1, deve ser capaz de entender pelo
menos os mtodos GET e HEAD. Um servidor Web tpico recebe normalmente
requisies GET, HEAD e POST, sendo a grande maioria requisies GET.
As mensagens passadas em HTTP podem ser requisies ou respostas. As
requisies so formadas e enviadas por um cliente HTTP. As respostas so
retornadas por um servidor. A porta de comunicaes onde o servidor aguarda
requisies , por default, a porta de servios TCP/IP de nmero 80. Esta a
porta reservada para este servio. Pode-se utilizar outra. Se outra porta for
utilizada, ela dever constar da requisio (o browser sempre supe que 80 a
no ser que a URL que ele recebe informe o contrrio).
Requisies HTTP e mtodo GET

A requisio HTTP obedece a um formato padro [RFC2068]:
<mtodo HTTP> <URL do recurso solicitado> <verso HTTP>
<cabealhos formato RFC 822>
<dados>
O cabealho inclui informaes adicionais essenciais ou no. Tipicamente

contm o nome do host (se separado da URL na requisio), a data, o nome e
verso do cliente, etc. Sempre termina com uma linha em branco. Algumas requisies
(POST, por exemplo) enviam dados adicionais aps o cabealho. Nestes casos, o
cabealho deve conter ainda o tamanho e tipo dos dados enviados.

O mtodo GET tem a finalidade de recuperar informaes do servidor. A

especificao [RFC] o define como um mtodo seguro e idempotente, ou seja,
deve produzir o mesmo resultado se repetido vrias vezes. GET no envia dados
aps o cabealho e possui a seguinte sintaxe mnima:
GET <URL_relativa> HTTP/1.1
<linha em branco (CRLF)>
Por exemplo:
GET /index.html HTTP/1.1
Host: www.xyz.com.br
Faz uma conexo porta 80 da mquina www.xyz.com.br e solicita ao

servidor o arquivo default (talvez index.html ou default.htm) localizado na
raiz de documentos. A requisio acima normalmente contm vrias outras linhas
de cabealho antes da linha em branco. Abaixo est uma requisio para buscar a
pgina index.html, formada ao se clicar em um link no Microsoft Internet Explorer:
GET /index.html HTTP/1.1
User-Agent: Mozilla 4.0 (compatible; MSIE 4.01; Windows98)
Accept: image/gif, image/x-bitmap, image/jpeg, image/pjpeg, image/png
Host: www.xyz.com.br
Respostas HTTP
Aps receber uma requisio, um servidor HTTP sempre responde. A
resposta pode consistir de uma mensagem de erro, de redireo ou de sucesso. A
sintaxe das respostas :
<verso HTTP> <cdigo de status> <informaes de status>
<cabealhos formato RFC822>
<dados>
O cdigo de status um nmero de trs dgitos que pode ter a forma 1xx,
2xx, 3xx, 4xx ou 5xx, onde x qualquer dgito de 0 a 9. Cdigos comeando em 4
ou 5 indicam mensagens de erro. Iniciando em 2 indicam sucesso. 3xx usado
para indicar requisio incompleta ou redirecionamento. 1xx usado para
retornar informaes durante o processamento.
Como resposta requisio GET acima, o servidor poderia ter retornado:
HTTP/1.0 200 OK
Server: Netscape-FastTrack/2.0a
Date: Mon, 4 Jan 1999 18:37:47 GMT

Content-type:text/html
Content-length: 19920
Last-modified: Sun, 13 Dec 1998 5:11:59 GMT
<!DOCTYPE ... </html> (19920 bytes de informao)
Poderia tambm ter retornado um erro:

HTTP/1.0 403 Forbidden
Server: servletrunner/2.0
Content-type:text/html
Content-length: 135
Date: Mon, 4 Jan 1999 18:39:55 GMT
<html><head><title></title></head>
<h1>403 Forbidden</h1><body>
Will not serve files, only servlets
</body></html>
Observe a linha em branco separando os dados (o contedo de uma pgina)

do cabealho (gerado pelo servidor).
O cabealho Content-type um dos mais importantes. Ele informa o tipo
dos dados que o browser est recebendo. Sem ele, o browser no seria capaz de
distinguir uma pgina HTML de uma imagem GIF. O cabealho Content-type
contm o tipo MIME dos dados que viro a seguir. O cabealho Content-
length, no menos importante, informa quantos caracteres o browser ter que
ler antes que toda a informao seja recebida.

Qualquer coisa que esteja armazenada nos diretrios de documentos do

servidor HTTP ser retornada para o browser se houver permisso. Pode ser
uma pgina HTML, mas tambm pode ser um arquivo executvel Windows.
Suponha que a raiz de documentos (/) de um determinado servidor Web
rodando em Windows seja o diretrio C:\WINDOWS\COMMAND. Se o browser
solicitar
GET /format.com HTTP/1.0
o servidor devolver:
HTTP/1.0 200 OK
Server: Caranguejeira/1.0
Date: Mon, 4 Jan 1999 21:10:33 GMT
Content-type: application/x-msdownload
Content-length: 41604
Last-modified: Sat, 24 Aug 1996 11:11:00 GMT
Converted MZx U I ! (...)
Voltaremos a discutir outros mtodos HTTP (como POST) em um mdulo

futuro quando formos introduzidos s aplicaes Web. No mdulo seguinte
conheceremos as tecnologias de apresentao HTML e CSS.
1.4. Tecnologias interativas

Com HTML e CSS apenas, a nica aplicao Web que se pode construir
aquela que permite a navegao dentro de um banco de informaes em
hipertexto. Esta aplicao bsica e fornecida por qualquer browser.
Para ir alm da navegao, preciso estender as capacidades bsicas do
HTML atravs de programas de roteiro (scripts) ou componentes (plug-ins). Esses
recursos no estendem o protocolo HTTP mas podem estender as capacidades de
um cliente ou servidor. Desta forma, as extenses podem ser classificadas em
relao sua localizao dentro da arquitetura cliente-servidor. Recursos lado-
cliente executam no browser, e s dependem do browser para funcionar. Recursos
lado-servidor executam no servidor e s precisam do suporte do servidor. Um
browser, porm, pode iniciar uma aplicao que executar no servidor e o
servidor poder enviar pginas ou componentes que s sero interpretados ou
executados no browser. Freqentemente, uma aplicao Web utiliza tanto
recursos lado-cliente quanto lado-servidor.

Aplicaes Web com recursos lado-cliente

Existem dois tipos de extenses lado-cliente: os componentes, que funcionam
como extenses executadas como se fossem parte do browser; e os scripts
(roteiros), que so interpretados pelo browser juntamente com o HTML.
Os componentes, como os Java Applets, controles ActiveX ou plug-ins, podem
acrescentar novos recursos ao browser, permitir que o mesmo suporte outros
formatos de multimdia, ou realizar tarefas bem especficas. So aplicaes
completas e geralmente interagem pouco com a pgina HTML, utilizando-a
somente como contexto grfico para exibio da sua prpria interface.
Componentes so objetos externos pgina, e, como qualquer objeto
independente do texto, so carregados atravs de uma requisio parte (como
feito com as imagens).
Os scripts estendem a linguagem HTML. Geralmente so embutidos dentro
do prprio cdigo HTML. So interpretados enquanto o browser carrega a
pgina. O prprio cdigo HTML um script que interpretado pelo browser para
definir a estrutura da pgina. Um possvel bloco CSS (Cascading Style Sheets)
embutido no HTML outro script que estende o cdigo HTML para definir a
apresentao e layout de uma pgina. Estruturas de programao podem ser
embutidas em uma pgina usando JavaScript, que introduz no HTML a
capacidade de manipular eventos, realizar controle de fluxo, suporte a operaes
matemticas, acesso a variveis do browser entre outras possibilidades. JavaScript
no um padro da W3C, mas suportado pela recomendao ECMA-2622.
Enquanto as tecnologias lado-cliente so timas para realizar operaes locais
como validao, gerao de grficos, etc. no servem para a maior parte das
operaes que exigem persistncia de dados. Operaes de acesso a rede que
utilizam disco local geralmente so desabilitadas ou bastante restritas no cliente,
por questes de segurana. Tambm podem ser pouco eficientes. Nesses casos, a
melhor alternativa apelar s tecnologias lado-servidor.
Aplicaes Web com recursos lado-servidor

Existem vrias arquiteturas diferentes que implementam suporte a extenses
em servidores Web. A mais popular a tecnologia CGI Common Gateway
2 ECMA um consrcio europeu que define padres abertos para comunicaes. URL: http://www.ecma.org.

Protocol, que fornece uma especificao que permite o desenvolvimento de

aplicaes gateway que servem como ponte para que o browser possa realizar
tarefas no servidor. CGI no linguagem. apenas uma especificao que pode
ser implementada usando qualquer linguagem. Aplicaes CGI podem ter sua
execuo solicitada por uma requisio do browser e podem servir de ponte para
qualquer aplicao ou dados localizados no servidor. A figura abaixo ilustra duas
requisies e respostas HTTP. A segunda requisio usa CGI.
O preo da portabilidade do CGI est no baixo desempenho. Um programa
CGI no faz parte do servidor. um processo externo, separado do servidor,
portanto, no reutiliza recursos alocados ao mesmo. Essa e outras limitaes tm
incentivado o mercado a procurar alternativas a esta tecnologia, mais fortemente
integradas ao servidor. O resultado foi um coquetel de solues incompatveis:
desde APIs que permitem o desenvolvimento de componentes que interagem
diretamente com as funes do servidor (ISAPI, NSAPI3), at rotinas (scripts)
embutidas em pginas HTML para serem interpretadas pelo servidor antes de
uma resposta (ASP, JSP, LiveWire, Cold Fusion4). A maior parte das solues
pouco ou nada porttil. Entre as que oferecem maior portabilidade, atravs de
uma API independente de servidor e linguagem de programao, est a Java
Servlet API, que permite que aplicaes em Java possam ser usadas internamente
por qualquer servidor. Por ser Java, roda em qualquer plataforma onde h uma
mquina virtual Java. Por ser uma tecnologia que no depende do servidor, roda,
atravs de um plug-in (quando no est embutida no servidor) em todos os
(1)
(2)
(3)
(4)
Browser fazendo requisio GET (1) ao servidor Web para

obter pgina (2); segunda requisio POST (3) para executar
programa CGI. Veja [RFC2068] para maiores informaes
sobre requisies e respostas HTTP.

servidores mais populares.

O objetivo deste mdulo est cumprido ao apresentar uma viso geral de
todas as tecnologias. No prximo mdulo veremos as tecnologias de
apresentao HTML e CSS e em mdulos futuros, varis tecnologias interativas
lado-cliente (mdulos JavaScript I e II) e lado-servidor (mdulos HTTP I a V).
Material complementar a este mdulo

1. Palestra (slides projetados pelo instrutor): Aplicaes Web.
Referncias e fontes de informao adicionais

[RFC2068] R. FIELDING et al. Hypertext Transfer Protocol - HTTP/1.1. Request for
Comments: 2068. IETF, January 1997.
[ROCH99] Helder da ROCHA. Desenvolvendo Web Sites Interativos com JavaScript. Apostila
ASIT. IBPINET/COPPE-UFRJ, 4a. Rev. Janeiro 1999.
[BERN89] Tim Berners-Lee. Information Management: A Proposal. CERN European
Laboratory for Particle Physics, March 1989, May 1990. URL:
http://www.w3.org/History/1989/proposal.html.
[CERN97] CERN European Laboratory for Particle Physics. An Overview of the World
Wide Web - History and Growth. 1997. URL:
http://www.cern.ch/Public/ACHIEVEMENTS/WEB/history.html.
[W3C] W3C World Wide Web Consortium: Site do consrcio que define os padres da
World Wide Web. Contm especificaes e software experimental. URL:
http://www.w3.org/.
Questes para recapitulao

Verifique se voc aprendeu os principais tpicos deste captulo
respondendo s questes abaixo:
1. Marque verdadeiro ou falso nos itens abaixo:
a) O servidor Web gerencia um sistema de arquivos virtual que pode ser bem
diferente do sistema de arquivos real ao qual est mapeado.
b) No se deve em hiptese alguma incluir caminhos do sistema operacional
(que no sejam URLs) em marcadores HTML pois o browser s consegue
localizar recursos no servidor usando URLs.
3 Marcas registradas.

c) Se uma pgina tem 10 imagens, uma folha de estilos externa (arquivo CSS)
e um applet Java o browser precisar conectar-se pelo menos 13 vezes ao
servidor para poder completar a pgina.
d) Pode-se implementar um contador de acessos usando uma tecnologia
lado-cliente como JavaScript.
e) possvel implantar-se uma aplicao Web sofisticada usando tecnologias
modernas como servlets e ASP para uso atravs de um browser antigo que
no suporta JavaScript, VBScript ou applets Java.
f) CGI uma linguagem de programao que permite que o browser inicie a
execuo de aplicaes remotas via servidor.
g) O servidor Web no precisa saber nada de HTML. Quando uma pgina
HTML lhe solicitada, ele sequer olha o contedo do arquivo.
h) Se um browser enviar para o servidor uma requisio contendo a URL de
um programa executvel, o servidor o executar e enviar a resposta do
programa de volta para o browser.
2. O browser utiliza uma porta TCP/IP para obter o servio Web. Atravs dessa
porta ele recebe um fluxo contnuo de bytes que correspondem informao
que ele requisitou. Como ele identifica o que ele est recebendo? (Ser uma
imagem, um texto? E se for uma imagem, de que tipo ? Como o browser
sabe o que ele est recebendo?)
3. Se voc pretende desenvolver uma aplicao Web para acesso a banco de
dados, entre JavaScript, CSS e CGI, qual a tecnologia mais apropriada para
realizar o seu objetivo?
4. O que significa a afirmao que o protocolo HTTP um protocolo sem
estado (stateless)? H vantagens nesse modelo? Quais? Quais so as
implicaes dessa caracterstica para as aplicaes Web de comrcio
eletrnico, por exemplo?
5. Neste mdulo no foram discutidas alternativas de persistncia para o HTTP.
Uma das solues a tecnologia conhecida como Cookies (veja mais nos
slides). Qual a importncia de uma tecnologia que garanta a persistncia dos
dados entre requisies e respostas HTTP para as aplicaes Web?

Web 2 HTML e CSS
WEB 2
HTML e CSS
ESTE MDULO APRESENTA A LINGUAGEM HTML e mostra como us-la para

construir pginas e interfaces para aplicaes Web. um mdulo prtico. As
pginas podem ser criadas em qualquer editor de textos. Para este exerccio
utilizaremos uma ferramenta que facilita a criao do cdigo, sem, no entanto,
escond-lo. No final, sero apresentadas noes de CSS a linguagem utilizada
para criar folhas de estilo e controlar a aparncia de um conjunto de pginas.
Tpicos abordados neste mdulo

Estrutura bsica do HTML
Blocos
Imagens e vnculos
Tabelas e Listas
Marcadores de texto (inline tags)
Elementos de estilo (deprecados)
Formulrios
Folhas de estilo CSS: fundamentos
ndice
2.1.Fundamentos do HTML ................................................................................. 3
Caracteres de escape................................................................................................. 6
Elementos estruturais .............................................................................................. 8
Elementos do HEAD............................................................................................ 9
Elementos de BODY............................................................................................ 10
2.2.Construo de um documento HTML ....................................................... 10
Blocos de texto ...................................................................................................... 10

Web 2 HTML e CSS
Controle de fluxo................................................................................................... 12
Listas ................................................................................................................... 13
Mais blocos ........................................................................................................... 15
Blocos pr-formatados ............................................................................................ 15
Sees.................................................................................................................... 16
Imagens................................................................................................................. 16
Formatao de caracteres ....................................................................................... 19
Tabelas................................................................................................................. 19
Vnculos ............................................................................................................... 21
Elementos de estilo (deprecados no HTML 4.0).................................................... 21
2.3.Formulrios ..................................................................................................... 22
Elemento <FORM>........................................................................................... 22
Elemento <INPUT>.......................................................................................... 24
Caixas de checagem (TYPE=CHECKBOX)..................................................... 27
Elemento <TEXTAREA> .............................................................................. 28
Elemento <SELECT> e <OPTION> ............................................................ 28
2.4.Folhas de estilo ............................................................................................... 29
Para que servem as folhas de estilo......................................................................... 30
Regras Bsicas ...................................................................................................... 32
Fontes e Tipografia ............................................................................................... 43
Atributos de texto................................................................................................. 48
Cores .................................................................................................................... 51
Controle de blocos.................................................................................................. 56
Propriedades de classificao .................................................................................. 60
Posicionamento...................................................................................................... 61
Objetivos
No final deste mdulo voc dever ser capaz de:
Saber da importncia de escolher uma ferramenta de criao de pginas
Web que gere cdigo de acordo com o padro.
Analisar o cdigo de uma pgina Web e conseguir identificar as suas
principais estruturas
Construir uma pgina usando um editor de textos ou uma ferramenta de
cdigo como o HomeSite. Esta pgina pode conter ttulos, pargrafos,
tabelas e listas.
Saber como criar uma interface de formulrios para aplicaes Web

Web 2 HTML e CSS
Conhecer a tecnologia CSS e saber utiliz-la para alterar a aparncia de

uma pgina ou de todo um site.
2.1. Fundamentos do HTML

Uma pgina Web uma pgina de texto. Mesmo tendo imagens, applets, plug-ins
e outros recursos, por trs de tudo h uma pgina de texto. 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 HTML texto e pode ser editada em qualquer editor
de texto.
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 marcador
HTML e no deve ser mostrado na tela. Se o marcador for desconhecido ele
simplesmente o ignora (e no mostra o contedo na tela) mas se realmente for
um elemento HTML, 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
marcadores. Se no houver marcadores, a informao aparecer em um nico

Web 2 HTML e CSS
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 foram usados
descritores HTML. J na segunda figura eles foram includos.
A maioria dos elementos HTML possui um marcador inicial e um marcador

final, cercando o texto que marcado por eles. A sintaxe bsica
<Elemento> Texto marcado por Elemento </Elemento>
O texto marcado passa a ser representado como um objeto do tipo

Elemento. Alm de geralmente causar uma exibio diferente no browser (depende
da folha de estilos), esta estrutura permite que o objeto possa ser referenciado
por programas embutidos na pgina, como JavaScript, folhas de estilo CSS e
Dynamic HTML. Observe que o marcador final tem o mesmo nome de elemento
HTML que o marcador inicial, mas precedido por uma barra ("/").
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 marcador inicial

separados por espaos, logo aps o nome do elemento. No deve haver
quaisquer espaos dentro do atributo. Se o valor atribudo propriedade tiver

Web 2 HTML e CSS
espaos, preciso coloc-lo entre aspas. 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 pelo browser como trs

atributos e no um (no pode haver espaos!). Veja alguns exemplos de
elementos HTML com atributos obrigatrios:
Vnculos (links): descritor <A> com atributo HREF (indica URL destino)
<A HREF="www.atlanta.olympic.org"> Link para Jogos de Atlanta</A>
Imagens: descritor <IMG> com atributo SRC (indica URL de uma imagem
interna): <IMG SRC="boeing.jpg">

Web 2 HTML e CSS
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,
precisa-se utilizar uma seqncia de escape. Esta seqncia iniciada por um &
seguido de uma abreviao e um ponto-e-vrgula, que indica o final da seqncia.
Como o & tambm caractere especial, h tambm 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:

144 < 25 + x < 36 + y
Fulano, Sicrano & Cia.

Web 2 HTML e CSS
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
hndb!ger
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
Nota: o descritor <BR> necessrio no exemplo acima para que as palavras

fiquem em linhas separadas.
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 e eles fazem parte do conjunto
de caracteres ISO-Latin-1. Todos os browsers h mais de 4 anos entendem
acentos e cedilha sem que seja necessrio digitar os cdigos.
indiferente se usamos letras maisculas ou minsculas para o nome do
marcador 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
(quando no h espaos no texto, o contedo no precisa vir entre aspas). O
contedo o valor que atribudo ao atributo (que est direita do sinal de
=). Em alguns casos, principalmente quando se lida com URLs, o formato
maisculo ou minsculo faz diferena e deve ser respeitado.

Web 2 HTML e CSS
Elementos estruturais
A maioria dos elementos HTML segue uma estrutura hierrquica. H uma
estrutura bsica (mnima) para uma pgina HTML construda de acordo com a
especificao 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 Transitional//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

1
3.2//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. Na ausncia da declarao acima, o browser no saber qual a verso de
HTML que se est usando2. Apesar de recomendado por todas as especificaes,
este descritor pouco usado na prtica e muitos editores o ignoram.
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>.
1 SGML - Standard Generalized MarkUp Language

2 Na prtica, isso faz pouca diferena hoje, mas pode ser importante no futuro.

Web 2 HTML e CSS
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 usada para adicionar novos
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">
LINK
<LINK> usado para vincular uma pgina a outro recurso. Veremos
exemplos do uso de LINK na seo sobre folhas de estilo.
<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. Por default, a URL base de

Web 2 HTML e CSS
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 ./). O autor pode alterar a URL base para que as imagens e links
sejam buscados em outros lugares. Por default, a janela atual (_self) a
responsvel por receber o resultado dos vnculos. O autor pode fazer com que
links abram em outra janela, em novas janelas (_blank) ou em outras partes da
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 -->
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. A maioria dos elementos que apresentaremos nas pginas a seguir,
estaro dentro da estrutura de <BODY>.
2.2. Construo de um documento HTML

Antes de iniciar esta seo o instrutor dever apresentar uma ferramenta de
desenvolvimento Web que voc poder usar para desenvolver as pginas. Todos
os elementos desta parte em diante tratam da formatao do texto (ou imagens)
da pgina e devem, portanto, estar presentes no bloco BODY.
Blocos de texto
pargrafos
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. Escrevendo:
<P>Um pargrafo</P><P>Outro pargrafo</P>
no seu arquivo HTML far com que aparea no browser:
Um pargrafo

Web 2 HTML e CSS
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
Um outro bloco importante na organizao do texto o cabealho. O ttulo

do documento no aparece na pgina. Uma forma de criar um ttulo usando o
descritor <H1>:
<h1>La Cosa Nostra Pizzaria i Ristorante</h1>
Observe que o texto aparece grande e em negrito.

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>

Web 2 HTML e CSS
Alm do H1, h mais 5 nveis de cabealho que podem ser usados para
organizar os pargrafos de uma pgina em vrias sees. Veja na figura abaixo o
cdigo e o resultado no browser de textos marcados com H1, H2, H3, H4, H5 e
H6.
Controle de fluxo
Os pargrafos sempre tem uma linha em branco separando-os dos outros blocos.
Pode-se quebrar uma linha e ainda assim se manter no mesmo pargrafo usando
o marcador <BR>. BR quebra a linha na posio onde for colocado:
<p align=center>"Tradio, qualidade e<br>
segurana so nossas<br>prioridades"</p>
Linhas horizontais 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>

Web 2 HTML e CSS
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%>
Listas
HTML define vrias formas de apresentar listas em um documento. Toda
lista um 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>. A
especificao formal do HTML ainda cita mais dois tipos de lista: MENU e DIR
mas os principais browsers as tratam da
mesma forma que <UL>.
Nas listas UL e OL, 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
usa-se o seguinte cdigo:

Web 2 HTML e CSS
<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>
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>
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, etc.
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).
Consiste de trs descritores: <DL> e
</DL> que delimitam toda a lista;
<DT></DT> que marca o termo; e
<DD></DD> marca a definio.
O exemplo a seguir deixa mais
claro o mistrio por trs das listas de
definies. A imagem ao lado foi
produzida com os descritores abaixo:
<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>

Web 2 HTML e CSS
<dd>A deusa da Terra.</dd>

<dt>Cronos</dt>
<dd>Saturno. Filho da unio de
Gaia com Urano. Deus do Tempo.</dd>
</dl>
Mais blocos
Existem alguns descritores HTML cuja funo agrupar um a parte da pgina
dentro do BODY que tem certas caractersticas especiais. As listas UL, OL e DL
so um exemplo. Outros so FORM, usado para definir formulrios, TABLE,
usado para definir tabelas, OBJECT, APPLET e EMBED usados para incluir
programas externos dentro da pgina. Todos esses merecem sees parte. O
restante veremos a seguir, j que so mais simples.
Com a funo de dar o destaque
de um bloco de citao em um texto,
foi criado o descritor <BLOCK-
QUOTE>. Alguns browsers o
formatavam em itlico, outros em
fonte menor, outros endentavam.
Hoje, todos os browsers formatam
um bloco BLOCKQUOTE
endentado e com uma linha em
branco antes e depois. Sua funo
acabou sendo a de um bloco de
pargrafos endentados:
<blockquote>
<p>"Tradio, qualidade e<br>
segurana so nossas<br>
prioridades"</p>
</blockquote>
Blocos pr-formatados
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 novas-linhas, espaos e tabulaes:
<pre>

Web 2 HTML e CSS
<p>Nmero de Assassinatos La Cosa Nostra La Santa Camorra

Janeiro 1 12
Fevereiro 7 12
Maro 0 6
Abril 3 9
Total 11 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.
Sees
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.
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

Web 2 HTML e CSS
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.
<IMG> como <BR> e <HR> que no marcam blocos, 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.
A imagem pode ser alinhada de vrias formas em relao ao texto. Veja
abaixo alguns exemplos.
<img src="pizza_calabresa.gif" align=middle> e outros...
Melhor ainda seria se o texto pudesse correr esquerda ou direita da

pizza. E pode! Use ALIGN=left ou ALIGN=right que voc consegue
exatamente este efeito:
<img src="pizza_calabresa.gif" align=left>

Web 2 HTML e CSS
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 reduz-la desperdcio assim como h perda de qualidade ao se
ampliar uma imagem pequena.
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 ele 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 que so

height=137 e width=134 (para o JPEG principal use 599 x 200). 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.
<img src="pizza_calabresa.gif" align=left hspace=10>

Web 2 HTML e CSS
Formatao de caracteres
H vrios descritores que tem 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 divididos em duas partes: os
lgicos (aqueles que tem uma funo) e os fsicos (aqueles que no tem funo
estrutural, s aparncia). A nica diferena entre eles est no nome: CITE
(lgico) representa funcionalmente uma citao e aparece na tela em itlico. I
(fsico) representa texto em itlico (funcionalmente no nada), e se apresenta na
tela da mesma forma que CITE. Se voc no est preocupado com estrutura
tanto faz usar um ou outro. A figura ao lado ilustra vrios deles.
Tabelas
Uma desvantagem de usar <PRE> que ficamos condenados a usar uma fonte
de largura fixa, como Courier. Com tabelas, podemos usar qualquer fonte. Alm
disso, temos muito mais poder para desenvolver coisas bem mais sofisticadas.
O recurso de tabelas foi introduzido no HTML recentemente, a partir da
verso 3. um recurso muito poderoso com o qual, com criatividade, pode-se
controlar vrios aspectos da formatao de uma pgina, como uso de margens,
uso de duas colunas, etc. Os descritores <TABLE> .. </TABLE> marcam o
incio e final de uma tabela. <TABLE> s pode conter dois descritores: <TR>
(Table Row), que marca uma linha de tabela; e <CAPTION>, que marca a
legenda da tabela. Cada linha de tabela pode conter uma ou mais clulas de
dados, marcadas como <TD> (Table Data) ou <TH> (Table Header). Todas as
linhas devem ter o mesmo nmero de clulas de dados. O exemplo abaixo
mostra a listagem HTML de uma tabela simples:
<p><table border>
<tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr>

</table>
que resulta na seguinte formatao:

1,1 1,2 1,3
2,1 2,2 2,3
3,1 3,2 3,3

Web 2 HTML e CSS
Se o atributo BORDER do descritor <TABLE> for omitido, a tabela no

ter bordas visveis.
Exemplo:
<table border>
<tr><th>Nmero de Assassinatos</th><th>La Cosa Nostra</th><th>La Santa
Camorra</th></tr>
<tr><td>Janeiro </td><td> 1 </td><td> 12</td></tr>
<tr><td>Fevereiro </td><td> 7 </td><td> 12</td></tr>
<tr><td>Maro </td><td> 0 </td><td> 6 </td></tr>
<tr><td>Abril </td><td> 3 </td><td> 9 </td></tr>
<tr><td>Total </td><td> 11</td><td> 39</td></tr>
</table>
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) e
muitos outros, que
aumentam a cada nova
verso do HTML. Consulte o guia de referncia no apndice e experimente com
outros atributos de tabela.
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
como o FrontPage. s vezes necessrio fazer pequenas alteraes por causa de

Web 2 HTML e CSS
diferenas entre browsers e saber identificar as clulas de uma tabela no cdigo

essencial.
Vnculos
A sintaxe bsica para criar um link a seguinte:
<A HREF=URL>Texto em destaque na pgina</A>
s isto. A pgina agora aponta para a outra. Clique no vnculo e veja o

que acontece.
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.
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. H uma tabela de cores no
apndice desta apostila e outra, mais detalhada no livro que a acompanha.
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">

Web 2 HTML e CSS
Cores de texto individuais, fontes e tamanhos podem ser alterados com um

descritor chamado <FONT>, que pode receber trs atributos: SIZE, que
informa o tamanho (variando de 1 a 7 ou de -3 a +3); FONT, que informa o
nome exato de uma fonte ou uma lista delas separadas por vrgula; e COLOR,
que informa uma cor em cdigo hexadecimal ou pelo nome, da mesma forma
como feito em BODY. FONT totalmente dispensvel se utiliza folhas de
estilo, mas, como muitos browsers no suportam ainda folhas de estilo, ainda so
usados para garantir uma aparncia melhor s pginas Web. No entraremos
muito em detalhes sobre este descritor, j que este tipo de alterao mais
facilmente realizada atravs de
editores, como o FrontPage.
2.3. Formulrios
Os componentes de formulrio so
campos de entrada de dados dentro
de um bloco HTML, como botes,
caixas de seleo, caixas de texto e
botes de rdio. Eles so a principal forma de entrada de dados disponvel no
HTML.
Os elementos de formulrio so apenas trs: <INPUT>, <SELECT> e
<TEXTAREA>, mas produzem 12 efeitos diferentes. Todos devem ser usados dentro
de um bloco <FORM>.
O objetivo deste captulo apresentar esses elementos do HTML que so
essenciais no desenvolvimento de aplicaes Web usando CGI. No se trata de
um texto detalhado sobre o assunto mas um pequeno guia de referncia.
Elemento <FORM>
O elemento <FORM> o mais importante dos elementos de formulrio. Ele define
o bloco de formulrio que deve ser atrelado a um programa no servidor. A sua
sintaxe est mostrada abaixo:
<FORM
ACTION="url para onde ser enviado o formulrio"
METHOD="mtodo HTTP (pode ser GET ou POST)"

Web 2 HTML e CSS
ENCTYPE="formato de codificao"
TARGET="janela alvo de exibio da resposta do formulrio"
" >
... corpo do formulrio ...
</FORM>
A sintaxe do elemento FORM elemento contm no mnimo dois atributos, para uso
com CGI e demais aplicaes de servidor: ACTION, que indica a URL do programa CGI
que ir processar o contedo do formulrio e, METHOD, que ir indicar o mtodo de
requisio HTTP que ser usado na transferncia de informaes. Os outros elementos
que so usados dentro do bloco <FORM>, sempre tm como atributo obrigatrio um
campo NAME que identifica a varivel que ir armazenar um valor fornecido pelo
usurio/visitante da pgina Web. Os dados so sempre passados ao servidor atravs de
pares nome=valor, interligados pelo caractere &, onde o nome o identificador da
varivel usado pelo programa CGI e o valor do atributo NAME do componente de
formulrio:
Eis um exemplo de uso de <FORM>:
<FORM ACTION="http://www.acme.com/cgi-bin/pedido.pl" METHOD="POST">
<P>Seu Nome: <INPUT TYPE="text" NAME="nome">
<P>Seu endereo: <INPUT TYPE="text" NAME="endereco">
(...)
</FORM>
Este bloco de formulrio ter seus valores de entrada processados pelo programa
http://www.acme.com/cgi-bin/pedido.pl, que ser requisitado pelo browser usando
o mtodo POST. Na tela aparecero dois campos de texto. Suponha que o usurio digite
como nome Joo Lobo e como endereo Rua Dois, 2. Os dados sero enviados
para o programa CGI em uma string, contendo:
nome=Jo%E3o+Lob%E3o&endereco=Rua+Dois%22+2
funo do programa CGI, extrair as informaes essenciais dessa string.

A hierarquia de componentes (elementos HTML) da interface de formulrios a
seguinte:
<form>...</form>
|__ <input>
|__ <select>...</select>

Web 2 HTML e CSS
| |__ <option>...</option>
|__ <textarea>...</textarea>
Os elementos <input> so dez, diferenciados pelo seu atributo type, e se

apresentam na tela do browser de forma bastante diferente. O elemento <select>
representa uma caixa de seleo com uma ou mais opes contidas entre os
descritores <option> e </option>. <textarea> representa uma caixa de texto.
Maiores detalhes sobre cada componente so apresentados nas sees a seguir.
Elemento <INPUT>
O elemento <INPUT> usado para construir botes, caixas de texto, botes
de rdio, caixas de checagem e para armazenar variveis invisveis. O que
distingue um objeto do outro o seu atributo TYPE. A sintaxe geral de <INPUT> :
<input atributos>
onde os atributos podem ser diferentes, dependendo do valor do atributo type,

que pode ter os valores:
" type=text
" type=password
" type=radio
" type=checkbox
" type=submit
" type=reset
" type=hidden
" type=image
" type=file
Botes (TYPE=BUTTON, SUBMIT ou RESET)

Os botes so criados com os atributos type=button, type=reset e
type=submit. A sua sintaxe bsica :
<INPUT TYPE="button" VALUE="rtulo do boto"> ou

<INPUT TYPE="submit" VALUE="rtulo do boto"> ou
<INPUT TYPE="reset" VALUE="rtulo do boto">

Web 2 HTML e CSS
Os botes do tipo SUBMIT e RESET reagem a eventos. O boto do tipo BUTTON

nada faz. Serve apenas se for programado em JavaScript ou VBScript. Ao apertar o
boto SUBMIT, o usurio envia os dados do formulrio ao programa no servidor
indicado pelo atributo ACTION
de <FORM>. Ao apertar RESET,
o usurio reinicializa o
formulrio com seus valores
iniciais.
O atributo VALUE
permite alterar o texto que
aparece dentro do boto. Em
botes RESET e SUBMIT, VALUE
possui um valor default. Em
objetos Button, o default para
VALUE um string vazio,
portanto, a menos que este atributo seja definido, o boto aparecer vazio. A figura ao
lado mostra a aparncia dos botes em um browser Netscape Navigator rodando em
Windows 95 com e sem o atributo VALUE.
Campos de texto de uma linha (TYPE=TEXT ou PASSWORD)

Campos de texto de uma nica linha so definidos pelos componentes <INPUT>
que possuem atributos TYPE com os valores PASSWORD ou TEXT. Eles tm a mesma
aparncia, mas o texto dos objetos Password no exibido na tela. A sintaxe de um
elemento TEXT em HTML a seguinte:
<INPUT TYPE="text"
NAME="nome_do_campo_de_texto"
VALUE="texto inicial do campo de textos"
SIZE="nmero de caracteres visveis"
MAXLENGTH="nmero mximo de caracteres permitido">
Todos os atributos, exceto o atributo TYPE so opcionais. Se SIZE no for

definido, a caixa de texto ter 20 caracteres de largura. Se MAXLENGTH no for definido,

Web 2 HTML e CSS
no haver limite para o nmero de caracteres digitado no campo de textos. A figura

abaixo ilustra a aparncia de componentes TEXT em um browser Netscape 4.5 rodando
em Windows 95.
O elemento do tipo PASSWORD criado da mesma forma, mas com um atributo
TYPE diferente:
<INPUT TYPE="password" ... >
Os caracteres do texto digitado em componentes PASSWORD no aparecem na tela,
como mostrado na figura abaixo (Windows95):
Campos ocultos (TYPE=HIDDEN)

O componente do tipo HIDDEN um campo de entrada de dados invisvel, que o
usurio da pgina no tem acesso. Serve para que o programador passe informaes
ao servidor, ocultando-as no cdigo HTML da pgina. bastante til na
transferncia de informaes entre formulrios distribudos em mais de uma
pgina. Sua sintaxe a seguinte:
<INPUT TYPE="hidden"
NAME="nome_do_campo_oculto"
VALUE="valor armazenado" >
Os atributos NAME e VALUE so obrigatrios.
Botes de rdio (TYPE=RADIO)

O componente do tipo RADIO representa um dispositivo de entrada booleano cuja
informao relevante consiste em saber se uma opo foi selecionada ou no.
Botes de radio so organizados em grupos de descritores com o mesmo nome
(atributo NAME). Cada componente aparece na tela como um boto ou caixa de
dois estados: ligado ou desligado. Dentro de um grupo de componentes (todos com
o mesmo atributo NAME), somente um deles poder estar ligado ao mesmo tempo.
A sintaxe de um componente RADIO em HTML a seguinte:
<INPUT TYPE="radio"
VALUE="valor (o valor que ser enviado ao servidor)"

Web 2 HTML e CSS
CHECKED 

> Rtulo do componente
A figura abaixo mostra dois grupos de botes de rdio (em um browser

Netscape rodando em Windows95). Observe que os atributos NAME distinguem um
grupo do outro. O atributo CHECKED indica um boto previamente ligado mas que
pode ser desligado pelo usurio ao clicar em outro boto.
Caixas de checagem (TYPE=CHECKBOX)

Cada elemento <INPUT> do tipo CHECKBOX aparece na tela como um boto ou
caixa que pode assumir dois estados: ligado ou desligado. Diferentemente dos
componentes RADIO, vrios componentes CHECKBOX de um mesmo grupo podem estar
ligados ao mesmo tempo, no havendo, portanto, necessidade de organizar tais objetos
em um grupo. A sintaxe de um elemento CHECKBOX em HTML praticamente idntica
de RADIO, mudando apenas o valor do atributo TYPE:
<INPUT TYPE="checkbox" ...
VALUE="valor (o valor que ser enviado ao servidor)"
CHECKED 
> Rtulo do componente
A figura abaixo mostra um grupo de caixas de checagem (em um browser Netscape

rodando em Windows95. O atributo CHECKED indica um boto previamente ligado mas
que pode ser desligado pelo usurio ao clicar em outro boto.

Web 2 HTML e CSS
Elemento <TEXTAREA>
O elemento <TEXTAREA> um bloco (possui descritor inicial e final) e define uma
rea onde se pode ler ou digitar texto em vrias linhas. A sintaxe para criar um
elemento <TEXTAREA> em HTML a seguinte. Os atributos em negrito so
obrigatrios:
<TEXTAREA
ROWS="nmero de linhas visveis"
COLS="nmero de colunas visveis"
NAME="nome_do_campo_de_texto"
ONBLUR="handlerText"
ONFOCUS="handlerText"
ONCHANGE="handlerText"
ONSELECT="handlerText" >
Texto inicial
</TEXTAREA>
A figura abaixo mostra a aparncia de componentes <TEXTAREA>:
Elemento <SELECT> e <OPTION>

Caixas e listas de seleo como as
mostradas nas figuras ao lado so
criadas com o elemento HTML
<SELECT>. Este componente no
contm texto mas consiste de
vrias opes, representadas pelo
elemento <OPTION>, que pode
conter texto com opes.
Os componentes <SELECT>
podem ter uma aparncia e

Web 2 HTML e CSS
comportamento diferente dependendo se possuem ou no os atributos SIZE e

MULTIPLE. A figura ao lado ilustra o efeito desses atributos, transformando uma caixa
de seleo em uma lista que permite seleo de mltiplas opes. A sintaxe de um
elemento HTML <SELECT> est mostrada abaixo:
<SELECT
NAME="nome_do_componente"
SIZE="nmero de opes visveis"
MULTIPLE 
>
<OPTION ...> Opo 1 </OPTION>
...
<OPTION ...> Opo n </OPTION>
</SELECT>
Todos os atributos so opcionais. A existncia do atributo NAME

obrigatria em formulrios que tero dados enviados ao servidor. Os elementos
<OPTION> tm a seguinte sintaxe:
<OPTION
VALUE="Valor da opo"
SELECTED >
Texto descrevendo a opo
</OPTION>
O atributo VALUE opcional. Se os dados forem enviados ao servidor, o

texto contido entre <OPTION> e </OPTION> enviado somente se um atributo
VALUE no tiver sido definido.
2.4. 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

Web 2 HTML e CSS
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 qualquer (ISO-Latin1) com
a extenso .css. Para vincul-lo a uma pgina HTML, esta deve ter o seguinte
marcador dentro do seu bloco <HEAD> ... </HEAD>:
<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 exaustivo. Omitimos propriedades e
recursos no suportados nos browsers e nos limitados queles recursos que
constam da especificao (no inclumos recursos proprietrios). Para uma
abordagem mais completa, consulte a documentao oficial do W3C:
http://www.w3.org/Style/.
Para que servem as folhas de estilo

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

Web 2 HTML e CSS
de estilos especial somente para impresso, onde haveria informaes de quebra

de pginas, etc. (este recurso no faz parte da verso 1 do CSS).
2. 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.
3. 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).
4. 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 alinhamento, 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

Web 2 HTML e CSS
a famlia de fontes Arial, ou, se esta no existir, Helvetica, ou ento a fonte sem-
serifa default do sistema. CSS linguagem interpretada e armazenada
geralmente em um arquivo de texto. 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 especifidadas, 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
essencial.
Regras Bsicas
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

Web 2 HTML e CSS
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 uma 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 { font-size: 24pt }
H1 { color: blue }
H1 { 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 }.
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 }
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:

Web 2 HTML e CSS
BODY {background : navy;

color : white }
H1 {color: blue;
font-size: 18 pt;
font-family: Arial }
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 { font: 12pt "Times New Roman" bold }
H2 { 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.
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 sempre tm menos precedncia que
os locais (ou seja, os locais podem sobrepor os importados). A sintaxe da
instruo @import :

Web 2 HTML e CSS
@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 C: entre /* e */:
/* este texto ignorado at que seja encontrado
um asterisco seguido por uma barra */
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 {color: red}
P {color: ff0000}
P {color: rgb(100%, 0%, 0%)}
P {color: rgb(255, 0, 0)}

Web 2 HTML e CSS
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:
P {background-image: url(../imagens/tijolos.gif)}
P {background-image: url(http://longe.com/imagens/pedras.png)}
Herana
Os estilos herdam propriedades de vrias maneiras. Uma das formas
atravs da prpria hierarqua 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.

Web 2 HTML e CSS
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, j que no quebra a linha antes ou
depois. Ele se assemelha 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.
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 cham-lo 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>

Web 2 HTML e CSS
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>
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 (<!e -->) para proteger browsers antigos da exibio indesejada do
cdigo:
<style type="text/css">

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

Web 2 HTML e CSS
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">  </style>
</HEAD>
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.
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

Web 2 HTML e CSS
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 atribuindo-lhe 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 }
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.

Web 2 HTML e CSS
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}
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}
Seletores de contexto
Voc tambm pode definir seletores que s sero aplicados se 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.
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 <link>), 2) uma folha de
estilos definida pelo usurio (ou leitor da pgina) e 3) a folha de estilos default do
browser (que usada para formatar o texto 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:

Web 2 HTML e CSS
1. Folha de estilos default do browser: todos os browsers possuem regras default

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.
O antigo Cello (browser dos tempos do Mosaic) exibia os cabealhos H1,
H2, etc. em fonte sem serifa. Esta definio padro de estilos realizada
pela folha de estilos do browser.
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: alguns atributos e descritores podem provocar
alteraes na aparncia do texto, por exemplo: <font color>, <font size>,
<big>, <body bgcolor>, <p align=center>, etc.
Um browser que siga a especificao CSS risca (nenhum dos que esto
disponveis at mar/99 com exceo do W3C Amaya) trata as folhas de estilo
com a seguinte ordem de precedncia:
1. Local
2. Embutida
3. Vinculada
4. Importada
5. HTML

Web 2 HTML e CSS
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).
H muitos outros problemas tambm em relao hierarquia e resoluo de
coliso em folhas de estilos. Por exemplo: quando um ID define uma coisa, um
atributo CLASS define outra e ainda h uma definio local qual estilo vale?
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.
Fontes e Tipografia
A Web sempre foi pobre em fontes. Durante muito tempo, s tnhamos
disposio 7 tamanhos diferentes de Courier e Times Roman (e seus equialentes).
Com o aparecimento de <font face> pudemos usar todas as fontes disponveis
no sistema do leitor, mas ainda ficamos restritos aos 7 tamanhos bsicos. Para
fazer fontes de tamanhos diferentes, era comum utilizar-se de imagens.
Com a especificao CSS1, os designers finalmente se vem livres do
mundo montono das duas fontes HTML e seus sete tamanhos (de 1 a 7). A
especificao permite definir no s uma lista de famlias de fontes a serem
usadas (dependendo do sistema do leitor) como atribuir ao texto qualquer
tamanho (no somente 1 a 7). Com folhas de estilo, o controle total... bem,
quase... ainda h o velho problema de ter que chamar as fontes pelo nome: o que
fazer se o leitor no tiver Helvetica, mas Arial?
A especificao CSS1 define um complexo algoritmo na hora de carregar as
fontes de forma a fazer o possvel para exibir a fonte escolhida pelo autor da
pgina na mquina do leitor. Se um determinado tamanho no existe, ser
tentado um outro tamanho com uma tolerncia de 20%; se uma variao, tipo
small-caps, no for encontrada, o estilo tentar adaptar letras de caixa-alta para

Web 2 HTML e CSS
simular o estilo; se a famlia exata, especificada no for encontrada, o estilo ir

procurar em uma lista e exibir uma outra fonte, de uma lista especificada pelo
autor. Se tudo falhar, a informao no se perde. O resto da formatao ocorre e
o sistema usa a fonte default para formatao.
font-family
Uma famlia de fontes 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 leitor. No final da lista, pode
ser includa uma referncia a uma famlia de fontes genrica, que ser usada caso
nenhum dos nomes conicida com o nome de uma fonte do sistema.
A sintaxe :
font-family: fonte1, fonte2, fonte3, ..., fonte-genrica
Exemplos:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
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>
font-size
O tamanho da fonte alterado usando font-size. As sintaxes permitidas
so:
font-size: tamanho_absoluto_Unidade (pt, px, cm, mm, pc ou in)
font-size: tamanho_absoluto (xx-small, x-small, small,
medium, large, x-large, xx-large)
font-size: tamanho_relativo_Unidade (smaller, larger)

Web 2 HTML e CSS
font-size: comprimento_Unidade (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).
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).
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.
As porcentagens so afetadas pela herana, por exemplo:
<HTML>
<HEAD>
P {font-size: 12pt }
B {font-size: 300%}
--> </style>
</HEAD>
<BODY>
(...)
<P> Eu era pequeno mas... <b> fiquei enorme! </b>

Web 2 HTML e CSS
</BODY>
A porcentagem de 300% aplicada na fonte atual, que a fonte de <P>,

que tem tamanho 12pt. O resultado que o <B> ser exibido em tamanho 24.
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:
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, disponvel em
sistemas Windows95:
<html><head>

Web 2 HTML e CSS
<style type=text/css>
P {font-family: Tahoma, Arial, sans-serif;
font-size: 24pt;
line-height: 0%}
.b100 {font-weight: 100}
</style>
</head><body>
<p class=b100>Font-Weight: 100</p>
</body></html>
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.
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.
Sintaxe:
font-variant: small-caps
Exemplos:

Web 2 HTML e CSS
P.titulo { font-variant: small-caps }

<p style="font-variant: small-caps">...</p>
Sintaxe:
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 }
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.
text-transform
Propriedade text-transform. Sintaxe:
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: 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.

Web 2 HTML e CSS
text-decoration
Propriedade: text-decoration. Sintaxe:
text-decoration: underline (default em links)
text-decoration: overline
text-decoration: line-through
text-decoration: blink
text-decoration: none (default)
Exemplos:
h1 {text-decoration: overline}
<a href="algumlugar.html"
style="text-decoration: none">Link sem sublinhado</a>
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 text-align com os valores
sub e super (coloca elementos em subescrito ou sobrescito).

Web 2 HTML e CSS
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).
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 line-height: 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.
A sintaxe :
line-height: nmero_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
Exemplos:
H1 {line-height: 0 } // sobreposio de linhas
H1 {line-height: 2 } // espao duplo
H1 {line-height: 0.3 em }
H1 {line-height: 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

Web 2 HTML e CSS
sobreposio de linhas. Isto pode ser desejado, por exemplo, para fazer com que
uma imagem fique sobre um texto ou vice-versa, mas a forma como os browsers
tratam este efeito pode no resultar no efeito desejado.
H propriedades melhores para sobrepor imagens e texto com menos
problemas (veremos na seo sobre layout e margens).
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.
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.

Web 2 HTML e CSS
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.
Nome Cd. Decimal Cd. Hexa Nome Cd. Decimal Cd. Hexa
red 255, 0, 0 ff0000 maroon 128, 0, 0 800000
lime 0, 255, 0 00ff00 green 0, 128, 0 008000
blue 0, 0, 255 0000ff navy 0, 0, 128 000080
yellow 255, 255, 0 ffff00 olive 128, 128, 0 808000
aqua 0, 255, 255 00ffff teal 0, 128, 128 008080
fuchsia 255, 0, 255 ff00ff purple 128, 0, 128 800080
white 255, 255, 255 ffffff silver 192, 192, 192 c0c0c0
black 0, 0, 0 000000 gray 0, 0, 0 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 3.2. So todas seguras, ou seja, fazem parte da paleta de 216 cores.
color
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%).

Web 2 HTML e CSS
background-color
As cores de fundo de qualquer elemento podem ser alteradas atravs da
propriedade background-color. A sintaxe :
background-color: transparent (valor default)
background-color: nome_de_cor
background-color: #nmero_hexadecimal
background-color: 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.
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-color: none (valor default)
background-color: 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).

Web 2 HTML e CSS
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: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
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.
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 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 mar/99).
Sintaxe:
background-attachment: fixed
background-attachment: scroll
Exemplo:
BODY {background-image: url (china.jpg);
background-attachment: fixed }
Sintaxe:

Web 2 HTML e CSS
background-position: porcentagem_horiz% porcentagem_vert%

background-position: comprimento unidade comprimento unidade
background-position: posio_vertical posio_horizontal
Exemplos:
background-repeat: no-repeat;
background-position: 50% 100% }
background-position: 25pt 2.5cm }
background-position: center top }
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.
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%).
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 :

Web 2 HTML e CSS
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(../imagens/duke.gif) white no-repeat fixed 50% 25%}
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).
Consiste das partes seguintes:
elemento em si (texto, imagem)
As margens internas do elemento (padding)
A borda em torno das margens internas
A margem em torno da borda
As propriedades que veremos nesta seo mostraro como alterar estas
propriedades. A cor e tamanho da borda podem ser alterados assim como o
fundo (como vimos na seo anterior). A margem sempre transparente.
O tamanho da caixa do elemento a soma de todas estas partes.
Os nomes a seguir sero usados como propriedades:
top a parte de cima da caixa (incluindo padding, borda e margem). De
forma semelhante, bottom a parte de baixo, left outer edge o limite
esquerdo da caixa e right outer edge o limite direito.
inner top a parte de cima do elemento, sem contar padding, borda ou
margem. De forma semelhante, inner bottom a parte de baixo do
elemento, right inner edge o limite direito do elemento e left inner edge o
seu limite esquerdo.
width refere-se largura do elemento. height a sua altura.
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.
Sintaxe:

Web 2 HTML e CSS
margin-top: comprimento unidade | porcentagem % | auto

margin-bottom: comprimento unidade | porcentagem % | auto
margin-right: comprimento unidade | porcentagem % | auto
margin-left: comprimento unidade | porcentagem % | auto
A propriedade margin afeta vrios aspectos das margens externas de uma

vez s. A ordem dos fatores importante. Podem ser incluidos todos quatro
valores ou apenas um (todas as margens iguais) ou dois (margens horizontais e
verticais). Sintaxe (unidades omitidas):
margin: margin-top margin-right margin-bottom margin-left
margin: espao_vertical espao_horizontal
margin: margem_de_todos_os_lados
margin: margin-top% margin-right% margin-bottom% margin-left%
margin: auto
Exemplos:
margin: 5cm // vale para as quatro margens
margin: 5cm 2cm // 5cm margens verticais, 2cm margs horizontais
margin: 5cm 3cm 2cm 1cm // sentido 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, padding-bottom, padding-right e padding-left.
Sintaxe:
padding-top: comprimento unidade | porcentagem %
padding-bottom: comprimento unidade | porcentagem %
padding-right: comprimento unidade | porcentagem %
padding-left: comprimento unidade | porcentagem %
A propriedade padding afeta vrios aspectos das margens internas de uma vez
s. A ordem dos fatores importante. Podem ser incluidos todos quatro valores
ou apenas um. Sintaxe:
padding: padding-top padding-right padding-bottom padding-left
padding: espao_vertical espao_horizontal
padding: margem_de_todos_os_lados
padding: padding-top% padding-right% padding-bottom% padding-left%
border, border-width, border-style e border-color

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

Web 2 HTML e CSS
(idem). Isto pode ser feito de diversas maneiras. Para que as bordas apaream
preciso primeiro que o estilo (border-style) seja definido. Por esemplo:
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-top-width, border-bottom-width, border-right-width e
border-left-width.
Sintaxe:
border-top-width: comprimento unidade
border-top-width: thin | medium | thick
border-bottom-width: comprimento unidade | thin | medium | thick
border-right-width: comprimento unidade | thin | medium | thick
border-left-width: comprimento unidade | thin | medium | thick
As propriedades das bordas podem ser tratadas em grupo, com border-

width. A ordem dos fatores importante. Podem ser incluidos todos quatro
valores ou apenas um. 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
A propriedade border-color permite que se altere a cor de um ou de todas

as quatro bordas ao redor de um elemento. Sintaxe:
border-color: border-top-color border-right-color border-bottom-
color
border-left-color
Cada um dos border-xxx-color acima uma cor (RGB, hexadecimal ou

nome)
Exemplos:
border-color: red // red para as quatro bordas
border-color: rgb(255, 0, 0) // red
border-color: rgb(100%, 0, 0) // red
border-color: red 0000ff // red verticais, blue horizontais
border-color: red blue yellow cyan // 4 cores sentido horrio

Web 2 HTML e CSS
O estilo de cada uma das quatro bordas pode ser alterado com border-
style. So vrios os estilos disponveis (tracejado, pontilhado, vrias verses de
3D, etc.). Para que uma borda seja visvel preciso que border-style seja definida
(com solid, pelo menos) Sintaxe:
border-style: border-top-style border-right-style
border-bottom-style border-left-style
Exemplos:
border-style: solid; border-color: red
Cada um dos border-xxx-style acima um dos seguintes valores: none,

dotted, dashed, solid, double, groove, ridge, inset, outset.
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. A propriedade border uma forma 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:
Sintaxe:
border-top: border-top-width border-style border-color
border-bottom: border-top-width border-style border-color
border-left: border-top-width border-style border-
color
border-right: border-top-width border-style border-color
border: border-width border-style border-color
width e height
As propriedades width e height fazem a mesma coisa que os atributos
width e height usados em imagens e applets no HTML. Com folhas de estilos,
eles podem ser usados tambm para redimensionar a caixa de qualquer
elemento de bloco. Sintaxe:
width: comprimento | auto
height: comprimento | auto
float
A propriedade float faz o que os atributos align=left e align=right fazem
com as imagens no HTML, s que aqui, novamente, eles valem para qualquer
objeto, seja imagem ou caixa de elemento de bloco. Sintaxe:

Web 2 HTML e CSS
float: left | right | none
clear
E finalmente, para evitar que um bloco flua em torno de uma imagem, h a
propriedade clear, que, faz a mesma coisa que o atributo clear, usado no <BR>
em HTML, s que, novamente, aqui ela suportada em qualquer elemento
(bloco ou no). Sintaxe:
clear: none | left | right | both
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.
display
Esta propriedade define como um elemento mostrado. A propriedade
none desliga o elemento e fecha o espao que o objeto antes ocupava. 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
white-space
Define como o espeo 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

Web 2 HTML e CSS
list-style-type, list-style-image,
list-style-position e list-style
Definem atributos para objetos de lista, como tipo de marcador, imagem de

marcador, posio, etc.
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
list-style: list-style-type list-style-image list-style-position
Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos
absolutos ou relativos usando CSS. A propriedade bsica chama-se position, que
define o tipo de posicionamento.
position
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 duas imagens a seguir:

<div class="imagem1"><p>
<img src="imagem1.gif" height=200 width=200>
</p></div>
<div class="imagem2"><p>
<img src="imagem2.gif" height=100 width=100>
</p></div>
e a seguinte folha de estilos:

DIV.imagem1 {
position: absolute;

Web 2 HTML e CSS
top: 0 px;
left: 0 px;
}
DIV.imagem2 {
position: absolute;
top: 50 px;
left: 50 px;
}
--></style>
A imagem menor deve aparecer sobre e no meio da imagem maior.
z-index
A propriedade z-index, que permite ordenar os objetos de forma que se
possa prever a ordem de sobreposio. 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.
Por default, z-index: 0 corresponde a posio do texto. Objetos com z-index
menor que zero ficam, portanto, atrs do texto e com z-index positivo, na sua
frente.
Resumo: principais elementos HTML
pargrafos e controle de fluxo

<Hn> Texto </Hn> (onde n = 1, 2, 3, 4 ,5 ou 6)
Marca um cabealho de nvel n. Pode ainda receber um atributo
align=posio, onde posio pode ser left, center ou right.
<P> Pargrafo </P>
Marca um pargrafo. O descritor de fechamento pode, em geral, ser omitido.

Tambm pode receber um atributo align=posio como ocorre com
<Hn>.

Web 2 HTML e CSS
<BR>
Marca a posio onde ocorre uma quebra-de-linha em um pargrafo ou

cabealho.
blocos
<BLOCKQUOTE> Bloco de Texto </BLOCKQUOTE>
Citao de bloco. Geralmente aparece endentado.

<PRE> Bloco de Texto </PRE>
Preserva a formatao original (espaos, tabulaes, novas-linhas) de um bloco

de texto.
<DIV> Bloco de Texto </DIV>
Define uma seo. Pode ainda receber um atributo align=posio,

onde posio pode ser left, center ou right.
<DIV> Bloco de Texto </DIV>
<DIV align=center> faz o mesmo que <CENTER>.

<ADDRESS> Texto </ADDRESS>
Marca um texto como endereo (a formatao varia de browser para browser).
listas
<UL> ... </UL>
Lista no-ordenada
<OL> ... </OL>
Lista ordenada
<LI> ... </LI>
Elemento de lista. O descritor final pode ser omitido. Tanto <LI> como <UL>
e <OL> podem receber atributos que modificam a apresentao da lista
<DL> ... </DL>
Lista de definies
<DT> ... </DT>
Termo. O descritor final pode ser omitido.

<DD> ... </DD>
Definio do termo de lista. O descritor final pode ser omitido.

Web 2 HTML e CSS
tabelas
<TABLE atributos> ... </TABLE>
Define uma tabela. O atributo border torna visveis as bordas das clulas.
<CAPTION> Legenda </CAPTION>
Legenda da tabela
<TR> ... </TR>
Linha de uma tabela. O descritor final pode ser omitido. S pode incluir
descritores <TH> e <TD>.
<TD> ... </TD>
Clula comum. O descritor final pode ser omitido.

<TH> ... </TH>
Clula de cabealho. O descritor final pode ser omitido.
links
<A HREF="URL do recurso vinculado"> ... </A>
Faz com que o texto marcado seja um link para a URL especificada.
imagens
<IMG SRC="URL da imagem" atributos>
Inclui uma imagem na pgina. SRC localiza a imagem atravs de uma URL.
Principais atributos
ALT="comentrio"
Inclui um comentrio que ser visto por quem no conseguir visualizar a

imagem.
BORDER="n"
Cria uma borda em torno da imagem. BORDER="0" remove a borda

presente ao redor das imagens ativas (que so links).
ALIGN="bottom | middle | top | left | right"
Alinha uma figura em relao ao texto. As trs primeiras opes alteram a

posio vertical da figura. As duas ltimas fixam a mesma em um dos lados
da pgina, fazendo o texto fluir ao redor.

Web 2 HTML e CSS
HSPACE="n"; VSPACE="n"
Colocam espao horizontal e/ou vertical ao redor de uma imagem.
formatao de caracteres
<Elemento> Texto </Elemento>, onde Elemento pode ser:
TT texto de espaamento fixo
I texto em itlico
B texto em negrito
STRIKE texto riscado
BIG texto em fonte maior
SMALL texto em fonte menor
SUB texto sub-escrito
SUP texto sobre-escrito
EM texto grifado
STRONG texto fortemente grifado
DFN definio
CODE cdigo
SAMP amostra
KBD teclado
VAR varivel
CITE citao
atributos de pgina (deprecados no HTML 4)

<BODY atributos> ... todo o documento ... </BODY>
BGCOLOR="#rrggbb" ou BGCOLOR="nome_da_cor"
Muda a cor do fundo da rea de visualizao. #rrggbb o cdigo RGB das
16,8 milhes de cores possveis. nome_da_cor pode ser uma das 16 cores
universalmente conhecidas ou uma das 465 suportadas pelo Netscape.
TEXT="#rrggbb" ou TEXT="nome_da_cor"
Mudam a cor de todo o texto que aparece no documento, com exceo dos links.
LINK="#rrggbb" ou LINK="nome_da_cor"
Muda a cor dos links ainda no selecionados.

Web 2 HTML e CSS
VLINK="#rrggbb" ou VLINK="nome_da_cor"
Muda a cor dos links j visitados.
BACKGROUND="URL_de_imagem"
Inclui uma imagem cobrindo todo o fundo da tela.
separadores
<HR atributos>
WIDTH=m% ou WIDTH=n
Determina a largura horizontal da linha, em porcentagem da largura da pgina ou

em pixels.
SIZE=n
Determina a altura da linha em pixels.

ALIGN="left | center | right"
Alinha um separador pela esquerda, pelo centro ou pela direita.

Arquitetura Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Arquitetura Web

Загружено:

Авторское право:

Доступные форматы

Web 1 Arquitetura da Web

ESTE MDULO FORNECE UMA INTRUDUO PLATAFORMA WEB. Apresenta um

Tpicos abordados neste mdulo

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-1

1.1. A Plataforma Web

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-2

A Web evoluiu e ocupou todos os espaos fazendo jus ao nome World

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-3

As URLs mais comuns so os endereos da Web:

Um servidor Web precisa mapear os diretrios do sistema onde est

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-4

O / corresponde raiz de documentos. Qualquer subdiretrio de

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-5

1.2. Tecnologias de Apresentao

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-6

no texto de um arquivo HTML. Os descritores <B> e </B> so a marcao HTML

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-7

1.3. O protocolo HTTP

1 World Wide Web Consortium (http://www.w3.org)

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-8

Requisies HTTP e mtodo GET

O cabealho inclui informaes adicionais essenciais ou no. Tipicamente

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-9

O mtodo GET tem a finalidade de recuperar informaes do servidor. A

Faz uma conexo porta 80 da mquina www.xyz.com.br e solicita ao

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-10

<!DOCTYPE ... </html> (19920 bytes de informao)

Poderia tambm ter retornado um erro:

Observe a linha em branco separando os dados (o contedo de uma pgina)

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-11

Qualquer coisa que esteja armazenada nos diretrios de documentos do

Converted MZx U I ! (...)

Voltaremos a discutir outros mtodos HTTP (como POST) em um mdulo

1.4. Tecnologias interativas

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-12

Aplicaes Web com recursos lado-cliente

Aplicaes Web com recursos lado-servidor

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-13

Protocol, que fornece uma especificao que permite o desenvolvimento de

Browser fazendo requisio GET (1) ao servidor Web para

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-14

servidores mais populares.

Material complementar a este mdulo

Referncias e fontes de informao adicionais

Questes para recapitulao

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-15

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W1-16

ESTE MDULO APRESENTA A LINGUAGEM HTML e mostra como us-la para

Tpicos abordados neste mdulo

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W2-1

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W2-2

Conhecer a tecnologia CSS e saber utiliz-la para alterar a aparncia de

2.1. Fundamentos do HTML

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W2-3

A maioria dos elementos HTML possui um marcador inicial e um marcador

O texto marcado passa a ser representado como um objeto do tipo

Quando presentes, os atributos aparecem apenas no marcador inicial

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W2-4

espaos, preciso coloc-lo entre aspas. No pode haver espao entre a

O segundo exemplo acima ser interpretado pelo browser como trs

Copyright 1999, Helder L. S. da Rocha. Todos os direitos reservados. EP:SF-Rio/D99 W2-5

Caractere Seqncia de Escape

Por exemplo, para produzir as seguintes linhas no browser:

preciso digitar no editor de textos: