Академический Документы
Профессиональный Документы
Культура Документы
Copyright
É permitido copiar, distribuir e/ou modificar este documento de acordo com os termos da GNU Free Documentation
License - versão 1.2 (http://www.gnu.org/copyleft/fdl.html) ou outra mais recente publicada pela Free Software Foundation.
Autores
Fernando J. Leal
Maio 2006
1.1.Introdução............................................................................................................................................................5
Hipertexto.............................................................................................................................................................6
Modelo cliente-servidor..........................................................................................................................................7
1.4.Literatura de apoio................................................................................................................................................8
Cabeçalho..........................................................................................................................................................10
Corpo.................................................................................................................................................................11
Títulos................................................................................................................................................................11
Parágrafos..........................................................................................................................................................11
Listas..................................................................................................................................................................12
Imagens..............................................................................................................................................................13
Tabelas..............................................................................................................................................................14
Ligações (Hyperlinks)..........................................................................................................................................16
Formulários.........................................................................................................................................................17
Frames...............................................................................................................................................................19
2.3.Leitura de apoio..................................................................................................................................................20
3.Introdução ao CSS......................................................................................................................................................21
3.1.Sintaxe do CSS...................................................................................................................................................22
Esquemas de Cores............................................................................................................................................25
Estilos em Cascata..............................................................................................................................................25
Classes de Estilos...............................................................................................................................................26
Eventos..............................................................................................................................................................27
3.2.Literatura de apoio..............................................................................................................................................27
Criação de páginas Web
1.1. Introdução
Ao contrário do que se possa pensar, o termo Internet e WWW (World Wide Web ou apenas Web, para abreviar)
não são sinónimos. A Internet surgiu bastante tempo antes e apenas na década de 90 surgiu o WWW.
A origem da Internet está na ARPA (Advanced Research Projects Agency), uma instituição criada nos anos 60, com
o intuito de desenvolver uma rede de dados capaz de sobreviver a um ataque nuclear. Essa rede iria interligar as diversas
instituições militares de forma a quer se ocorresse um ataque nuclear nos E.U.A. fosse possível manter as comunicações
entre essas instituições. A rede criada foi designada ARPANET e é considerada o embrião do que viria a ser a Internet.
A essa rede foram-se ligando durante os anos 70 e 80 diversas universidades, centros de investigação e grandes
empresas começaram também a ligar-se no sentido de desenvolver a investigação. Mais tarde essa rede, passou para a ser
Pode-se afirmar que a Internet não é uma rede de computadores, mas sim um vasto conjunto de redes de
Para que todos os computadores pudessem comunicar entre si, tinham de “falar a mesma linguagem”. A essa
linguagem, designada tecnicamente por protocolo, chamou-se TCP/IP (Transport Control Protocol/Internet Protocol). Um
protocolo poderá ser definido, de uma forma simples, como um conjunto de regras que os computadores têm de seguir para
Nos primeiros tempos da Internet, foram criados um conjunto de serviços que os computadores ligados utilizavam:
• E-mail;
• Login remoto (telnet): permite a um utilizador entrar num computador remoto (distante) e trabalhar como se
• FTP (File Transfer Protocol): permite transferir ficheiros entre dois computadores.
Apenas em 1991 é que surgiu a World Wide Web que veio tornar a utilização da Internet mais fácil para o utilizador
comum e, como utilizava hipertexto, imagens, som e vídeo, mais atractiva. A WWW foi criada por Tim Berners-Lee, um
investigador do CERN (Organisation Européenne pour la Recherche Nucléaire) na Suíça, com o objectivo de partilhar a
informação entre investigadores. O primeiro browser (software para navegar na Web) surgiu “apenas” em 1993!
6
Criação de páginas Web
Alguns dos conceitos de funcionamento descritos nesta secção são comuns a todos os serviços disponíveis na
Internet (email, FTP, etc), no entanto, o WWW contém algumas particularidades. Pode-se dizer que a Web resulta da
• hipertexto
• Identificadores de recursos
• Modelo cliente-servidor
• Linguagem de marcas
Hipertexto
Por hipertexto designam-se os documentos que contêm ligações para outros documentos. O utilizador pode assim,
clicar nas hiperligações para aceder a outro documento relacionado com a palavra ou expressão onde clicou.
URL e endereço IP
Considere-se o caso da rede telefónica existente. Cada telefone que está ligado à rede necessita de ter um número
de único de forma a distinguir-se de todos os outros. Também na Internet cada computador que está ligado à Internet
necessita de um identificador único em toda a Internet que o permita distinguir de todos os outros computadores que estão
ligados. A este identificador chama-se endereço IP (a sigla IP refere-se ao nome do protocolo Internet Protocol, referido
anteriormente).
Este endereço é composto por quatro números2 (de 0 a 255) separados por pontos, por exemplo,
194.210.67.2
No caso dos utilizadores residenciais este endereço é fornecido temporariamente pela empresa que fornece o
Este endereço permite identificar cada computador na Internet sem haver dois repetidos. Como estes números são
muito difíceis de fixar foi criado um sistema textual mais fácil designado por URL (Universal Resource Locator). Assim, em
vez de utilizar, por exemplo, o endereço 66.102.9.99 basta utilizar o URL www.google.com.
Para fazer a conversão entre nomes de domínio e endereços IP, existe um conjunto de computadores designados
servidores de DNS.
2 Esta estrutura deverá ser substituída gradualmente por uma outra designada por IPv6 (IP versão 6).
7
Criação de páginas Web
Modelo cliente-servidor
software cliente.
Figura 1: Modelo cliente-servidor
No caso da Web, um programa cliente será o browser
(designação genérica dos programas para navegar na Web, por exemplo, o Mozilla Firefox, Internet Explorer, Safari, Opera,
etc) que "pede" servidor uma determinada página. O servidor contém um software que mediante o pedido do cliente, procura
Em termos de software, um servidor poderá ser um computador absolutamente normal, apenas terá de conter
Uma página Web enviada pelos servidores para o nosso computador é um ficheiro de texto escrito numa linguagem
designada HyperText Markup Language (HTML) que contém as instruções que permitem ao browser construir a página tal
como a vemos. Por exemplo, poderão existir instruções que indicam ao browser a cor e tamanho do texto que deverá
apresentar no ecrã; a indicação e nome dos respectivos ficheiros das imagens incluídas nas páginas ou as hiperligações
Ao conjunto de regras e procedimentos que os vários clientes e servidores utilizam para pedir e enviar as páginas,
chama-se Hypertext Transfer Protocol (HTTP). É esta sigla que normalmente aparece na barra de endereços do browser.
Por exemplo, no endereço http://www.google.com, a sigla http indica que é este o protocolo que se está a
utilizar.
Um servidor Web é um computador com um software de servidor de HTTP. Exemplos deste software é o Internet
8
Criação de páginas Web
O que acontece quando nos ligamos a partir de nossa casa e acedemos a uma determinada página Web?
O primeiro passo é a ligação a um servidor pertencente ao ISP que atribui ao nosso computador um endereço IP
temporário. Esta ligação é feita através de um modem e, normalmente, realizada através da rede telefónica pública ou rede
de cabo. Um modem é um dispositivo que converte os bits (os e 1s existentes no computadores em sinais eléctricos que
Após termos o endereço IP, podemos então utilizar um programa para navegar na Web, genericamente designado
browser e digitar na barra de endereços o respectivo endereço da página a visualizar (por exemplo,
http://www.essr.net). Assim que inserimos esse endereço, o nosso computador contacta um servidor de DNS
para converter o URL num endereço IP. O servidor de DNS responde com o respectivo endereço IP (ex.:
194.210.67.2). Posteriormente o nosso browser, contacta o servidor com esse endereço, "pedindo" a respectiva
página. O servidor que contém um software específico para responder a pedidos de HTTP, envia-lhe a respectiva página e
eventualmente outros ficheiros de imagens, vídeos, sons ou animações que estejam contidos na página.
9
Criação de páginas Web
2. A linguagem HTML
entanto, para compatibilidade com sistemas mais antigos, o software actual também suporta a extensão com três letras,
.htm.
Em HTML usam-se marcas, ou tags (do inglês), para indicar, por exemplo, o início e o fim dum parágrafo. Estas
marcas aparecem entre os símbolos < e >. Um parágrafo por exemplo, é identificado da seguinte forma:
<p>Isto é um parágrafo.</p>
O fim de uma marca é indicado (salvo raras excepções como a tag <img>) por uma marca idêntica, mas cujo
não definem a formatação com que serão apresentadas, mas normalmente os browsers tem formatações pré-
definidas para estas marcas (ex.: tamanho maior do que o texto normal, negrito, etc).
10
Criação de páginas Web
<b>boldface</b>
é normalmente apresentado como negrito (bold).
O início do ficheiro HTML é indicado pela marca <html>, e o fim pela correspondente marca de fim </html>.
Na actual versão do HTML (4.01 Transitional) há um elemento adicional: a primeira linha deve identificar a versão e
o tipo de ficheiro HTML, de acordo com as normas da W3C. Um documento "normal" (um texto, por ex.) em HTML identifica-
se como no exemplo:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
(...)
</html>
O ficheiro HTML pode ser dividido em dois blocos: o cabeçalho e o corpo do documento.
Cabeçalho
O cabeçalho é delimitado pelas tags <head> e </head>. Nele aparecem elementos informativos para o browser, que
• a primeira indica o título do documento, que é normalmente apresentado pelo browser na barra de título da sua
• a segunda indica o tipo de conteúdo do ficheiro (text/html) e a codificação usada na escrita (o iso-8859-1
11
Criação de páginas Web
Corpo
O corpo do documento HTML é delimitado pelas marcas <body> e </body>. É nesta secção que aparece todo
Convém neste momento introduzir a noção de estilo. Um estilo, em termos de composição gráfica, é um conjunto de
características que são comuns a um determinado elemento gráfico. Por exemplo, um parágrafo, que como já vimos, em
HTML, é delimitado pelas marcas <p> e </p>, está associado a um determindo tipo de letra, tamanho, cor, etc. Na actual
versão do HTML (versão 4), os estilos de cada elemento gráfico devem ser indicados à parte do ficheiro HTML (num ficheiro
CSS). Por ora, vamos deixar que o browser use os estilos por omissão que entender mais adequados. Mais à frente,
Títulos
Os títulos chamam-se headings em Inglês, e distinguem-se consoante o nível (título, sub-título, sub-sub-título, etc.)
Assim, um título principal (de um capítulo, por ex.), é um "heading 1", um sub-título é um "heading 2", e por aí
Exemplo:
<h1>Isto é um título</h1>
<h2>Isto é um subtítulo</h2>
<p>Isto é um parágrafo, como já tínhamos visto.</p>
Parágrafos
Como já foi referido, um parágrafo aparece delimitado entre marcas <p> e </p>. Não é necessário ao autor
preocupar-se com o fim da linha - consoante a largura disponível na janela do browser, este ajustará o texto e dividi-lo-á por
tantas linhas quantas as necessárias. No entanto, o autor pode querer, a dada altura, introduzir uma quebra de linha. Para
tal, pode usar a marca <br> (abreviatura de break). Esta marca introduz uma quebra de linha, mas não termina o
parágrafo. Em HTML 4.01 (a versão actual), esta marca é também uma das poucas excepções à regra de que uma marca
Exemplo:
<p>Isto é um parágrafo<br>"quebrado" a meio.</p>
12
Criação de páginas Web
Outras marcas podem aparecer no meio de um parágrafo. Por exemplo, a marca <b> indica negrito, e a marca
Listas
Há várias formas de definir listas em HTML: podem ser listas com elementos não-numerados, listas em que os
elementos aparecem numerados, ou ainda (menos habituais) listas com elementos que possuem uma descrição extra. Para
qualquer um destes tipos de lista é possível inserir listas dentro de listas, obtendo-se assim diferentes níveis dentro da lista.
• Item 1
• Item 2
• Item 3
1. Item 1
2. Item 2
3. Item 3
Item 1
13
Criação de páginas Web
Descrição item 1
Item 2
Descrição item 1
Item 3
Descrição item 1
1. Teste
2. Experiência
1. Sub-experiência 1
2. Sub-experiência 2
3. Outro teste
Imagens
A introdução de imagens num ficheiro HTML faz-se pela tag <img>. Esta marca é outra excepção à regra de que
cada marca deve ter uma marca de fim, dado que não é necessário indicar ao browser onde uma imagem acaba. As
imagens são carregadas a partir de ficheiros de imagem (em formatos JPEG, PNG, etc.)
Assim, a tag <img> tem alguns atributos que têm obrigatoriamente que ser indicados. Por exemplo, e como é
óbvio, não basta indicar que em determinada posição queremos inserir uma imagem - é necessário especificar qual imagem,
onde está o ficheiro que contém a informação da imagem. Para tal, usa-se a marca com a seguinte sintaxe:
<img src="wanda_the_fish.png" alt="Wanda">
Os atributos das marcas, quando aplicáveis, devem ser sempre delimitados por aspas (embora o HTML 4.01 não
obrigue a esta prática, ela constitui um bom hábito porque a evolução da linguagem, o XHTML 1.0, obriga). Assim, no
exemplo acima, estamos a indicar ao browser que queremos inserir no documento uma imagem que está num ficheiro
chamado wanda_the_fish.png, que está no mesmo directório do ficheiro HTML. O atributo alt é uma
14
Criação de páginas Web
representação alternativa da imagem que o browser usará caso não consiga encontrar o ficheiro. A sua inclusão é
obrigatória.
Alguns browsers frequentes no mercado usam erradamente o atributo alt das imagens para mostrar uma
pequena legenda sobre a imagem quando o utilizador sobre ela detém o rato por breves instantes. Este comportamento é
incorrecto de acordo com as normas da W3C, devendo para esse efeito usar-se o atributo (opcional) <title>. No exemplo
acima, ficaria:
<img src="wanda_the_fish.png" alt="Wanda" title="O peixe
Wanda">
Convém referir que as imagens, dos vários elementos que podem constituir uma página HTML, são dos que podem
conter maior quantidade de informação. Convém, portanto, fazer uma utilização criteriosa deste recurso.
Embora a Banda Larga seja hoje uma realidade, quando disponibilizamos um recursos na Internet estamos a torná-
lo acessível a todo o Mundo, não apenas aos vizinhos e amigos próximos. Em muitas localidades, não há ainda Banda
Larga. (Em muitos países, não há ainda Internet...) Dado que muitos utilizadores da Internet vêem-se obrigados a usar
ligações muito lentas, convém resumir ao mínimo a quantidade de informação a transmitir - tirar uma fotografia com uma
câmara digital a 4 MegaPixel e colocá-la directamente numa página HTML é quase sempre um erro crasso! Quando muito,
pode usar-se uma versão de baixa resolução dessa imagem (tratando-a num programa de tratamento de imagem como o
GIMP), que sirva de ligação (link) à versão de resolução superior, à qual só acederá, de forma consciente, quem estiver
interessado nela.
Tabelas
As tabelas são dos elementos mais usados em HTML, muitas vezes até de forma invisível para o leitor do
documento (com a borda invisível - largura zero), apenas para posicionar outros elementos.
Uma tabela é uma matriz de linhas e colunas, como num jogo de batalha naval. Eventualmente, algumas dessas
linhas ou colunas podem estar agrupadas. Pode existir uma linha inicial com uma formatação especial (os títulos da tabela).
Uma tabela define-se pela marca <table> (e termina com </table>). Cada linha é delimitada pelas marcas
<tr> e </tr> ("tr" vem do inglês table row), e cada coluna por <td> e </td> (do inglês table division). Uma célula
especial com títulos pode ser marcada como <th> em vez de <td> (do inglês table heading). Por exemplo:
<table border="1" cellspacing="2" cellpadding="2">
<tr>
<th>Título coluna 1</th>
<th>Título coluna 2</th>
<th>Título coluna 3</th>
</tr>
<tr>
<td>linha 1, coluna 1</td>
<td>linha 1, coluna 2</td>
<td>linha 1, coluna 3</td>
</tr>
15
Criação de páginas Web
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
<td>linha 2, coluna 3</td>
</tr>
<tr>
<td>linha 3, coluna 1</td>
<td>linha 3, coluna 2</td>
<td>linha 3, coluna 3</td>
</tr>
</table>
O atributo border="1" da marca <table> indica que a borda à volta das células da tabela deve ter 1 píxel
de espessura; o atributo cellspacing define o valor do espaçamento entre as células; e o atributo cellpadding
Atributos como rowspan e colspan podem ser usados para juntar células entre lihnas e/ou colunas. Por
16
Criação de páginas Web
</table>
Outras formatações, como alinhamentos, cores, tipos de letra, etc., para cada célula ou para a totalidade da tabela
podem ser definidas directamente no HTML, mas essas definições estão a cair em desuso a favor da utilização de ficheiros
Ligações (Hyperlinks)
Uma das funcionalidades mais interessantes das páginas da Internet como as conhecemos é a facilidade de se
fazer um "clique" com o rato sobre um link e aceder a outra página, ou outro local na mesma página. Este é o mecanismo
Para definir ligações entre páginas (links), usa-se a marca anchor, abreviada apenas pela primeira letra, seguida
do atributo href para indicar o endereço para onde ligar. Por exemplo:
<p>Isto é um parágrafo com um <a
href="http://www.wikipedia.org">link para a Wikipedia</a>.</>
No caso de se pretenderem referências para o interior de uma página devem ser definidos os "alvos" dos links com
a marca <a> seguida do atributo name. Por exemplo, no início de um capítulo poder-se--ia fazer:
<h1><a name="cap_1">Capítulo I</a></h1>
17
Criação de páginas Web
<a href="#cap_1">link para cap. I</a>
Note-se a utilização do caracter # precedendo o nome. Se o link fosse definido noutra página, seria, por exemplo:
<a href="xpto.html#cap_1">link para cap. I na página
xpto.html</a>
Por fim, se se pretender que um link seja seguido num frame diferente daquele onde se situa (isto no caso de a
O atributo target da marca <a> permite definir o frame onde o link deve ser aberto. No valor deste atributo
• _blank - o link será aberto numa nova página (provavelmente, numa nova janela do browser).
• _self - o link será aberto no próprio frame onde se situa (comportamento por omissão).
• _top - o link será aberto na totalidade da janela actual, destruindo quaisquer frames que possam existir.
• _parent - o link será aberto no frame que suporta o frameset onde reside o frame actual, isto é, no frame
parente do actual.
Formulários
Os formulários são blocos, dentro das páginas HTML, que permitem a interacção com o utilizador, oferecendo-lhe a
possibilidade de submeter informação para o servidor. Caracterizam-se por possuírem um conjunto de campos de escrita ou
Para definir um formulário usa-se a marca form, com dois atributos importantes: method identifica o método de
submissão (post ou get) e action identifica o ficheiro que, no servidor, receberá a resposta (a submissão por parte
do utilizador).
Este formulário será submetido usando o método post do protocolo HTTP, e o servidor invocará o ficheiro
resposta.php para tratar a informação submetida. Para trabalhar a informação que o servidor recebe é necessário
dispor de uma ferramenta de programação do lado do servidor. Neste exemplo, é usado um ficheiro com extensão php, o
que significa que será executado no servidor, como resposta à submissão do do formulário, um script escrito em PHP. (O
A marca input define um campo de interacção com o utilizador. No exemplo acima é usada uma caixa de texto,
18
Criação de páginas Web
text
Define uma caixa de texto. O número máximo de caracteres pode ser definido pelo atributo maxlength. O
password
Idêntico ao anterior, mas o texto aparece mascarado com o caracter " *" (contudo, é enviado ao servidor como
texto normal).
checkbox
Define uma caixa de selecção. Esta caixa tem dois estados, "on" e "off", e só é submetida informação ao servidor
caso o seu estado esteja em "on". O atributo checked indica que ela deve inicialmente ter o estado "on".
radio
Produz uma caixa de selecção num grupo de várias selecções possíveis. O atributo checked numa das caixas
do grupo indica a que deve estar inicialmente seleccionada. Todas as caixas de selecção de um grupo devem ter o mesmo
submit
Produz um botão de submissão do formulário. O texto deste botão é indicado no atributo value.
reset
Define um botão de limpeza do formulário. O texto é indicado no atributo value.
file
Define um controlo de upload de ficheiros. Tipicamente, é apresentado como uma caixa de texto seguida de um
botão para procurar ficheiros no disco do local. Múltiplos ficheiros podem normalmente ser indicados em simultâneo.
hidden
Define uma caixa de texto escondida, imutável e impreceptível para o utilizador. O conteúdo de uma tal caixa é
image
Produz um botão de submissão do formulário com uma imagem em vez duma legenda. O atributo
19
Criação de páginas Web
Frames
Um tipo especial de ficheiro HTML é o que se designa por frameset (conjunto de frames, sendo cada frame uma
porção da página HTML completa). Um frameset é uma página HTML que não tem conteúdo (o que normalmente aparece na
secção body do ficheiro HTML), mas antes a informação sobre a forma de dividir o ecrã em vários pedaços ("fatias"
verticais oU horizontais, ou uma grelha com várias linhas e colunas) e o endereço do ficheiro HTML a carregar para cada
Exemplo de frameset:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Exemplo de frameset</title>
<meta httpequiv="ContentType"
content="text/html;charset=iso88591">
</head>
<frameset rows="100,,50">
<frame name="topo" src="topo.html">
<frame name="principal" src="principal.html">
<frame name="rodape" src="rodape.html">
<noframes>
<body>
<p>O seu browser não suporta frames.</p>
</body>
</noframes>
</frameset>
</html>
Este exemplo define três frames horizontais: o primeiro (topo) com 100 píxeis de altura; o segundo (principal)
ocupará o máximo de espaço que lhe for possível (pois a medida não se encontra definida); e o terceiro (rodapé), com 50
píxeis de altura. As páginas HTML que serão carregadas em cada um deles são, respectivamente, topo.html,
argumentos contra a utilização de frames é a forma como os motores de busca (tal como o Google) indexam os sites na
Internet, que resulta em menções directas, nos resultados das buscas, às páginas que compõem o frameset. Assim, quando
um utilizador segue um desses links, obtém apenas uma parte do site (visto que este é composto por várias partes, vários
frames). Por este motivo (e alguns outros, mais de natureza estética), a utilização de frames está actualmente limitada a
sites de intranets (redes internas de organizações) e pequenos sistemas de documentação que funcionam em modo local
20
Criação de páginas Web
(off-line).
A zona definida pela marca noframes destina-se a um conteúdo alternativo, que será exibido apenas caso o browser
não tenha capacidade para mostrar frames. (Todos os browsers modernos têm essa capacidade.) Nesta zona, tipicamente, é
definida uma secção body que segue as regras normais para o corpo do documento, mas só é usada caso o browser não
21
Criação de páginas Web
3. Introdução ao CSS
CSS significa Cascading Style Sheets, algo como Estilos em Cascata em Português. São essencialmente colecções
de estilos que, uma vez aplicadas ao ficheiro HTML, caracterizam os elementos desse ficheiro em termos de cores, tipos e
tamanhos de letra, posicionamentos, espaçamentos, alinhamentos, etc. A ideia é separar claramente o que é a estrutura do
documento (no ficheiro HTML) da sua formatação (no ficheiro CSS). Um mesmo documento HTML pode, assim, ter aspectos
totalmente diferentes consoante a folha de estilos (o ficheiro CSS) adoptada, mantendo-se a informação contida no ficheiro
inalterada. Como exemplo, é quase obrigatório conhecer o site CSS Zen Garden1.
Cada marca (ou tag) do ficheiro HTML pode (e deve) ter a sua caracterização em termos do ficheiro de estilos. Se
A ligação entre um ficheiro HTML e um ficheiro CSS faz-se por uma informação na secção head do ficheiro HTML:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<meta httpequiv="ContentType"
content="text/html;charset=iso88591">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
(...)
</body>
</html>
A marca link no cabeçalho do ficheiro HTML indica a relação com uma folha de estilos (atributo
situações - por exemplo, estilos que só serão aplicados quando a página é vista num ecrã (acrescentando o atributo
Os estilos podem também ser definidos directamente no cabeçalho do próprio ficheiro HTML. Aliás, é vulgar alguns
documentos HTML usarem folhas de estilos globais para caracterizar a maior parte dos seus elementos, e alguns estilos
definidos localmente, na sua secção head, quando a utilização desses estilos se limita a um único documento, evitando
assim sobrecarregar as "bibliotecas" de estilos que múltiplos documentos usam com estilos que só uma vez são usados.
1 http://www.csszengarden.com/
22
Criação de páginas Web
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<meta httpequiv="ContentType"
content="text/html;charset=iso88591">
<style type="text/css">
(...)
</style>
</head>
<body>
(...)
</body>
</html>
Há ainda uma terceira opção, válida em HTML 4.01 Transitional mas que deve ser evitada: a utilização de estilos in-
A indicação do estilo como se de um atributo da marca HTML se tratasse pode dar jeito em determinadas situações,
mas acaba normalmente por se revelar inconveniente quando se pretende alterar todo o aspecto (o layout) do documento,
porque neste caso as definições dos estilos deixam de estar centralizadas, passam a estar distribuídas pelo documento. É,
Os ficheiros CSS são ficheiros de texto, tal como os ficheiros HTML. Cada marca HTML possui um conjunto de
atributos passíveis de serem caracterizados por CSS. Uma das melhores referências para esses atributos e seus valores
Alguns exemplos:
Retomando o exemplo anterior em que o código CSS estava num ficheiro externo ao HTML chamado
body {
backgroundcolor: yellow;
1 http://www.htmlhelp.com/reference/css/properties.html
23
Criação de páginas Web
margin: 10px;
}
h1 {
fontfamily: helvetica, sansserif;
fontsize: xlarge;
fontweight: bold;
textalign: left;
color: black;
}
h2 {
fontfamily: helvetica, sansserif;
fontsize: large;
fontweight: bold;
textalign: left;
color: black;
}
p {
fontfamily: helvetica, sansseif;
fontsize: medium;
textalign: justify;
color: #202020;
}
A interpretação do CSS é simples: para cada marca HTML (<body>, <h1>, <h2> e <p>), identificada apenas
pelo nome, há um conjunto de atributos (entre chavetas) aos quais são associados valores. Por exemplo, os valores que
caracterizam o corpo do documento (secção <body> do HTML) definem a cor amarela para o fundo e uma margem de
10 píxeis entre os limites do documento e o seu conteúdo. São depois caracterizados dois níveis de títulos (<h1> e <h2>)
e o elemento parágrafo (<p>). O primeiro nível de título terá uma letra do tipo helvetica (família sans-serif), um tamanho
"extra-grande", será escrito em negrito, alinhado à esquerda e de cor negra; o segundo nível de título será um pouco mais
pequeno (tamanho "grande", apenas); e qualquer parágrafo terá uma letra de tamanho médio, justificada à esquerda e à
As mesmas definições podiam ser carregadas directamente no ficheiro HTML da seguinte forma:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<meta httpequiv="ContentType"
content="text/html;charset=iso88591">
<style type="text/css">
body {
backgroundcolor: yellow;
margin: 10px;
}
h1 {
fontfamily: helvetica, sansserif;
fontsize: xlarge;
fontweight: bold;
24
Criação de páginas Web
textalign: left;
color: black;
}
h2 {
fontfamily: helvetica, sansserif;
fontsize: large;
fontweight: bold;
textalign: left;
color: black;
}
p {
fontfamily: helvetica, sansseif;
fontsize: medium;
textalign: justify;
color: #202020;
}
</style>
</head>
<body>
(...)
</body>
</html>
Esta técnica tem a desvantagem de não permitir que as definições CSS sejam úteis senão ao ficheiro HTML em que
estão inseridas. Outros ficheiros HTML não poderão beneficiar do mesmo código, a não ser que o repitam nas suas
respectivas secções <head>. Mas tem a vantagem de, no caso de o CSS em questão ser específico de um único ficheiro
HTML, estar localizado nesse ficheiro e não ocupar espaço (não "pesar") em ficheiros CSS que podem ser incluídos que
vários ficheiros HTML. Em todo o caso, é sempre possível dividir o código CSS por vários ficheiros, e incluir em cada ficheiro
HTML apenas o(s) CSS que lhe diga(m) respeito. A separação entre a marcação do documento (conseguido com HTML) e o
seu aspecto num determinada meio de apresentação (missão do CSS) é sempre benéfica, quanto mais não seja pela
Esquemas de Cores
Uma cor pode ser definida, essencialmente, de duas formas: pelo nome (há tabelas de correspondência entre
nomes e valores) e pelo valor em RGB. O sistema RGB (Red-Green-Blue) usa um byte (8 bits) para representar cada
componente. Significa isto que cada componente pode assumir valores discretos (inteiros) entre 0 (zero) e 255, resultando
num total de 256 estados possíveis. Juntando os três componentes, temos um total de 2563 cores possíveis, ou seja,
Referir cores por nomes não é seguro, porque nada garante que diferentes browsers atribuam exactamente o
mesmo valor a um nome (ou até que o conheçam). O método mais rigoroso é usar valores numéricos. É costume esses
valores serem expressos em hexadecimal (precedidos do caracter #), mas também é perfeitamente correcto usar notação
decimal, octal, ou outra - ou ainda a função rgb(valor_r, valor_g, valor_b). Neste último caso, os
valores podem ser escritos segundo várias notações, sendo as mais comuns como inteiros no intervalo [0, 255] ou em
25
Criação de páginas Web
Nota: há uma tabela útil de cores e seus valores hexadecimais neste endereço1.
Estilos em Cascata
O mesmo grupo de estilos pode ser aplicado a várias marcas HTML sem ser necessário repeti-lo. Por exemplo, a
Várias marcas HTML podem ser mencionadas no mesmo bloco CSS, desde que separadas por vírgulas. Contudo,
se estiverem separadas por espaços, a interpretação é muito diferente - aqui é que entra verdadeiramente o conceito de
"cascata". Por exemplo, o bloco seguinte aplica a cor azul a marcas de parágrafo, e a cor vermelha a texto em itálico que
Se o segundo bloco de código não estivesse presente, o texto em itálico dentro dos parágrafos (azuis) seria também
impresso em azul, porque herdaria essa característica (a cor da letra) do seu nível imediatamente superior no HTML, já que a
Na realidade, num documento HTML, é possível definir uma "árvore" de marcas, começando pelo corpo do
documento (<body>). Se num documento for definido por CSS que este elemento deve ter cor verde, por exemplo, e nada for
especificado quanto aos parágrafos que lhe estejam imediatamente anexos (sem nenhum outro elemento HTML pelo meio),
então esses parágrafos herdarão a cor verde. Daqui vem a noção de "estilos em cascata".
Classes de Estilos
Suponhamos que queremos definir um estilo genérico para parágrafos, mas que há alguns parágrafos especiais (por
Uma hipótese é definir classes de estilos, que podem ser aplicadas a qualquer marca HTML. Os nomes destas
classes não devem ser os mesmos das marcas HTML (para evitar confusão), e são declarados nos blocos CSS começando
1 http://www.htmlhelp.com/icon/hexchart.gif
26
Criação de páginas Web
p {
color: black;
marginleft: 1cm;
fontfamily: helvetica, sansserif;
fontsize: normal;
}
.citacao {
color: darkblue;
marginleft: 2cm;
fontstyle: italic;
}
O código acima define parágrafos escritos a cor negra, com uma margem de 1cm à esquerda, uma letra da família
"sans-serif" ("helvetica", se possível), e um tamanho normal. Isto é válido para todos os parágrafos do documento. Mas se a
um parágrafo for aplicada a classe citacao, o seu estilo muda - passa a ter cor azul-escura, 2cm de margem esquerda e
a estar escrito em itálico. Mas apenas esse parágrafo em questão! Por exemplo:
(...)
<p>Isto é um parágrafo normal, afectado pelo estilo definido
para os parágrafos.</p>
<p class="citacao">Este parágrafo é uma citação.</p>
(...)
Eventos
O sinal ":" (dois-pontos) pode ser usado para distinguir entre diferentes estados em que alguns elementos HTML se
encontrem, função de eventos que aconteçam. O exemplo típico é o caso da âncora (o vulgar link), que por omissão os
browsers costumam representar de uma cor se não tiver ainda sido visitado, e de cor diferente caso já tenha sido usado.
Vejamos um exemplo:
a, a:visited {
color: #800000;
textdecoration: none;
}
a:hover {
color:#800000;
textdecoration: underline;
}
Este exemplo caracteriza os links HTML "normais" (por usar) e depois de visitados de um tom vermelho-tinto, e sem
qualquer outra decoração (sem sublinhado). Contudo, quando o utilizador passa o rato sobre um desses links, a cor mantém-
se mas a decoração muda para sublinhado (underline). Esta é uma forma de usar CSS para responder a eventos.
27
Criação de páginas Web
• CSS Zen Garden, referência fundamental para a compreensão do poder do CSS - http://www.csszengarden.com/
28