Criao de pginas Web

Copyright
Copyright (c) 2006 Escola Secundria Artstica de Soares dos Reis
permitido copiar, distribuir e/ou modificar este documento de acordo com os termos da GNU Free Documentation
License - verso 1.2 (http://www.gnu.org/copyleft/fdl.html) ou outra mais recente publicada pela Free Software Foundation.

Autores
Alexandre Manuel Pinto Martins
Fernando J. Leal

Maio 2006

ndice
1.World Wide Web...........................................................................................................................................................5
1.1.Introduo............................................................................................................................................................5
1.2.Noes elementares do seu funcionamento ...........................................................................................................6
Hipertexto.............................................................................................................................................................6
URL e endereo IP ...............................................................................................................................................6
Modelo cliente-servidor..........................................................................................................................................7
Pginas Web e o HTML.........................................................................................................................................7
Protocolo HTTP (HyperText Transfer Protocol)........................................................................................................7
1.3.Percurso de uma ligao.......................................................................................................................................8
1.4.Literatura de apoio................................................................................................................................................8
2.A linguagem HTML........................................................................................................................................................9
2.1.Estrutura do ficheiro HTML....................................................................................................................................9
Cabealho..........................................................................................................................................................10
Corpo.................................................................................................................................................................11
2.2.Principais elementos do HTML.............................................................................................................................11
Ttulos................................................................................................................................................................11
Pargrafos..........................................................................................................................................................11
Listas..................................................................................................................................................................12
Imagens..............................................................................................................................................................13
Tabelas..............................................................................................................................................................14
Ligaes (Hyperlinks)..........................................................................................................................................16
Formulrios.........................................................................................................................................................17
Frames...............................................................................................................................................................19
2.3.Leitura de apoio..................................................................................................................................................20
3.Introduo ao CSS......................................................................................................................................................21
3.1.Sintaxe do CSS...................................................................................................................................................22
Ficheiro HTML com CSS externo..........................................................................................................................23
Ficheiro HTML com CSS interno..........................................................................................................................23
Esquemas de Cores............................................................................................................................................25
Estilos em Cascata..............................................................................................................................................25
Classes de Estilos...............................................................................................................................................26
Eventos..............................................................................................................................................................27

3.2.Literatura de apoio..............................................................................................................................................27

Criao de pginas Web

1. World Wide Web

1.1. Introduo
Ao contrrio do que se possa pensar, o termo Internet e WWW (World Wide Web ou apenas Web, para abreviar)
no so sinnimos. A Internet surgiu bastante tempo antes e apenas na dcada de 90 surgiu o WWW.
A origem da Internet est na ARPA (Advanced Research Projects Agency), uma instituio 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
instituies militares de forma a quer se ocorresse um ataque nuclear nos E.U.A. fosse possvel manter as comunicaes
entre essas instituies. A rede criada foi designada ARPANET e considerada o embrio do que viria a ser a Internet.
A essa rede foram-se ligando durante os anos 70 e 80 diversas universidades, centros de investigao e grandes
empresas comearam tambm a ligar-se no sentido de desenvolver a investigao. Mais tarde essa rede, passou para a ser
gerida pela NSF (National Science Foundation) e continuou a alargar-se.
Pode-se afirmar que a Internet no uma rede de computadores, mas sim um vasto conjunto de redes de
computadores interligadas entre si.
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 tm de seguir para
poderem comunicar entre si.
Nos primeiros tempos da Internet, foram criados um conjunto de servios que os computadores ligados utilizavam:

E-mail;

News: equivalente aos actuais fruns de discusso ou mailing lists;

Login remoto (telnet): permite a um utilizador entrar num computador remoto (distante) e trabalhar como se
estivesse no seu computador local;

FTP (File Transfer Protocol): permite transferir ficheiros entre dois computadores.

Apenas em 1991 que surgiu a World Wide Web que veio tornar a utilizao da Internet mais fcil para o utilizador
comum e, como utilizava hipertexto, imagens, som e vdeo, mais atractiva. A WWW foi criada por Tim Berners-Lee, um
investigador do CERN (Organisation Europenne pour la Recherche Nuclaire) na Sua, com o objectivo de partilhar a
informao entre investigadores. O primeiro browser (software para navegar na Web) surgiu apenas em 1993!

Escola Secundria Artstica de Soares dos Reis

Criao de pginas Web

1.2. Noes elementares do seu funcionamento

Alguns dos conceitos de funcionamento descritos nesta seco so comuns a todos os servios disponveis na
Internet (email, FTP, etc), no entanto, o WWW contm algumas particularidades. Pode-se dizer que a Web resulta da
combinao de quatro conceitos1:

hipertexto

Identificadores de recursos

Modelo cliente-servidor

Linguagem de marcas

Hipertexto
Por hipertexto designam-se os documentos que contm ligaes para outros documentos. O utilizador pode assim,
clicar nas hiperligaes para aceder a outro documento relacionado com a palavra ou expresso onde clicou.

URL e endereo IP
Considere-se o caso da rede telefnica existente. Cada telefone que est ligado rede necessita de ter um nmero
de nico de forma a distinguir-se de todos os outros. Tambm 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 esto
ligados. A este identificador chama-se endereo IP (a sigla IP refere-se ao nome do protocolo Internet Protocol, referido
anteriormente).
Este endereo composto por quatro nmeros2 (de 0 a 255) separados por pontos, por exemplo,

194.210.67.2
No caso dos utilizadores residenciais este endereo fornecido temporariamente pela empresa que fornece o
servio de Internet ao utilizador, designado ISP (Internet Service Provider).
Este endereo permite identificar cada computador na Internet sem haver dois repetidos. Como estes nmeros so
muito difceis de fixar foi criado um sistema textual mais fcil designado por URL (Universal Resource Locator). Assim, em
vez de utilizar, por exemplo, o endereo 66.102.9.99 basta utilizar o URL www.google.com.
Para fazer a converso entre nomes de domnio e endereos IP, existe um conjunto de computadores designados
servidores de DNS.

Adaptado de: http://en.wikipedia.org/wiki/Www

Esta estrutura dever ser substituda gradualmente por uma outra designada por IPv6 (IP verso 6).

Escola Secundria Artstica de Soares dos Reis

Criao de pginas Web

Modelo cliente-servidor
Todos os servios existentes na Internet (email, Web, FTP,
etc) baseiam-se numa estrutura designada cliente-servidor. Como
se poder depreender pelas designaes, os clientes efectuam
pedidos que sero atendidos pelos servidores. Na prtica um
cliente ser um programa que est no computador do utilizador e
um servidor um computador que est algures na Internet mas que
contm software especfico para responder ao pedido de um
software cliente.
No caso da Web, um programa cliente ser o browser

Figura 1: Modelo cliente-servidor

(designao genrica dos programas para navegar na Web, por exemplo, o Mozilla Firefox, Internet Explorer, Safari, Opera,
etc) que "pede" servidor uma determinada pgina. O servidor contm um software que mediante o pedido do cliente, procura
o ficheiros dessa pgina no seu disco rgido e envia-a para o cliente.
Em termos de software, um servidor poder ser um computador absolutamente normal, apenas ter de conter
software para responder aos pedidos dos clientes.

Pginas Web e o HTML

Uma pgina Web enviada pelos servidores para o nosso computador um ficheiro de texto escrito numa linguagem
designada HyperText Markup Language (HTML) que contm as instrues que permitem ao browser construir a pgina tal
como a vemos. Por exemplo, podero existir instrues que indicam ao browser a cor e tamanho do texto que dever
apresentar no ecr; a indicao e nome dos respectivos ficheiros das imagens includas nas pginas ou as hiperligaes
para outras pginas.

Protocolo HTTP (HyperText Transfer Protocol)

Ao conjunto de regras e procedimentos que os vrios clientes e servidores utilizam para pedir e enviar as pginas,
chama-se Hypertext Transfer Protocol (HTTP). esta sigla que normalmente aparece na barra de endereos do browser.
Por exemplo, no endereo 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
Information System (IIS) da Microsoft ou o Apache da Mozilla Foundation.

Escola Secundria Artstica de Soares dos Reis

Criao de pginas Web

1.3. Percurso de uma ligao

O que acontece quando nos ligamos a partir de nossa casa e acedemos a uma determinada pgina Web?
O primeiro passo a ligao a um servidor pertencente ao ISP que atribui ao nosso computador um endereo IP
temporrio. Esta ligao feita atravs de um modem e, normalmente, realizada atravs da rede telefnica pblica ou rede
de cabo. Um modem um dispositivo que converte os bits (os e 1s existentes no computadores em sinais elctricos que
circulam na rede telefnica ou rede cabo).
Aps termos o endereo IP, podemos ento utilizar um programa para navegar na Web, genericamente designado
browser e digitar na barra de endereos o respectivo endereo da pgina a visualizar (por exemplo,

http://www.essr.net). Assim que inserimos esse endereo, o nosso computador contacta um servidor de DNS
para converter o URL num endereo IP. O servidor de DNS responde com o respectivo endereo IP (ex.:

194.210.67.2). Posteriormente o nosso browser, contacta o servidor com esse endereo, "pedindo" a respectiva
pgina. O servidor que contm um software especfico para responder a pedidos de HTTP, envia-lhe a respectiva pgina e
eventualmente outros ficheiros de imagens, vdeos, sons ou animaes que estejam contidos na pgina.

1.4. Literatura de apoio

A World Wide Web na Wikipedia . http://en.wikipedia.org/wiki/World_wide_web

A proposta original para o sistema WWW de Tim Berners-Lee - http://www.w3.org/History/1989/proposal.html

Um resumo da histria da World Wide Web - http://www.w3.org/History.html

Oficina de Internet, porTIC - http://www.portic.ese.ipp.pt/oficina.html?tipo=1

Escola Secundria Artstica de Soares dos Reis

Criao de pginas Web

2. A linguagem HTML

O HTML foi originalmente criado por Tim Berners-Lee e

actualmente um standard gerido pelo Word Wide Web Consortium
(W3C). Ao longo do tempo foram surgindo vrias verses desta
linguagem, sendo que a verso actual estabilizou na verso 4.01. No
entanto, o W3C criou um novo standard, designado por XHTML que se
pretende vir a substituir gradualmente o HTML. O XHTML permite uma
mais fcil manuteno e processamento automtico das pgina e,
fundamentalmente, procura separar contedo da apresentao, o que
no acontece com o HTML.
Normalmente um ficheiro HTML tem a extenso .html, no

Figura 2: Exemplo de cdigo HTML

entanto, para compatibilidade com sistemas mais antigos, o software actual tambm suporta a extenso com trs letras,

.htm.

2.1. Estrutura do ficheiro HTML

Em HTML usam-se marcas, ou tags (do ingls), para indicar, por exemplo, o incio e o fim dum pargrafo. Estas
marcas aparecem entre os smbolos < e >. Um pargrafo por exemplo, identificado da seguinte forma:

<p>Istoumpargrafo.</p>
O fim de uma marca indicado (salvo raras excepes como a tag <img>) por uma marca idntica, mas cujo
nome precedido do smbolo /.
Existem marcas com diferentes objectivos [1]:

Marcas estruturais: descrevem o propsito/funo do texto. Por exemplo,

<h2>Golf</h2>
indica ao browser para mostrar Golf como um ttulo de segundo nvel (algo como um sub-ttulo). Estas marcas
no definem a formatao com que sero apresentadas, mas normalmente os browsers tem formataes prdefinidas para estas marcas (ex.: tamanho maior do que o texto normal, negrito, etc).

Marcas de apresentao: indicam ao browser como apresentar o texto, independentemente do seu

propsito/funo. Por exemplo:

Escola Secundria Artstica de Soares dos Reis

10

Criao de pginas Web

<b>boldface</b>
normalmente apresentado como negrito (bold).

Marcas de hipertexto: permitem estabelecer ligaes a outros documentos. Por exemplo,

<ahref="http://wikipedia.org/">Wikipedia</a>
apresentado com a palavra Wikipedia com uma hiperligao para o URL

http://wikipedia.org.

O incio do ficheiro HTML indicado pela marca <html>, e o fim pela correspondente marca de fim </html>.
Tudo aquilo que possa aparecer aps a marca de fim ignorado.
Na actual verso do HTML (4.01 Transitional) h um elemento adicional: a primeira linha deve identificar a verso e
o tipo de ficheiro HTML, de acordo com as normas da W3C. Um documento "normal" (um texto, por ex.) em HTML identificase como no exemplo:

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
(...)
</html>
O ficheiro HTML pode ser dividido em dois blocos: o cabealho e o corpo do documento.

Cabealho

O cabealho delimitado pelas tags <head> e </head>. Nele aparecem elementos informativos para o browser, que
no so mostrados no documento. Por exemplo:

<head>
<title>Ttulo</title>
<metahttpequiv="ContentType"content="text/html;charset=iso
88591">
</head>
Neste exemplo, dentro do cabealho do documento temos duas tags significativas:

a primeira indica o ttulo do documento, que normalmente apresentado pelo browser na barra de ttulo da sua
janela, no ambiente grfico;

a segunda indica o tipo de contedo do ficheiro (text/html) e a codificao usada na escrita (o iso-8859-1
corresponde aos caracteres portugueses).

Escola Secundria Artstica de Soares dos Reis

11

Criao de pginas Web

Corpo
O corpo do documento HTML delimitado pelas marcas <body> e </body>. nesta seco que aparece todo
o contedo que o autor do documento pretende disponibilizar ao leitor.
Convm neste momento introduzir a noo de estilo. Um estilo, em termos de composio grfica, um conjunto de
caractersticas que so comuns a um determinado elemento grfico. Por exemplo, um pargrafo, 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
verso do HTML (verso 4), os estilos de cada elemento grfico devem ser indicados parte do ficheiro HTML (num ficheiro
CSS). Por ora, vamos deixar que o browser use os estilos por omisso que entender mais adequados. Mais frente,
veremos como caracterizar os estilos dos nossos elementos grficos.

2.2. Principais elementos do HTML

Os elementos mais comuns que constituem um documento so:

Ttulos
Os ttulos chamam-se headings em Ingls, e distinguem-se consoante o nvel (ttulo, sub-ttulo, sub-sub-ttulo, etc.)
Assim, um ttulo principal (de um captulo, por ex.), um "heading 1", um sub-ttulo um "heading 2", e por a
adiante. Em HTML, usam-se as marcas <h1>, <h2>, <h3>...
Exemplo:

<h1>Istoumttulo</h1>
<h2>Istoumsubttulo</h2>
<p>Istoumpargrafo,comojtnhamosvisto.</p>

Pargrafos
Como j foi referido, um pargrafo aparece delimitado entre marcas <p> e </p>. No necessrio ao autor
preocupar-se com o fim da linha - consoante a largura disponvel na janela do browser, este ajustar o texto e dividi-lo- por
tantas linhas quantas as necessrias. 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 no termina o
pargrafo. Em HTML 4.01 (a verso actual), esta marca tambm uma das poucas excepes regra de que uma marca
tem sempre a sua correspondente marca de fim.
Exemplo:

<p>Istoumpargrafo<br>"quebrado"ameio.</p>

Escola Secundria Artstica de Soares dos Reis

12

Criao de pginas Web

Outras marcas podem aparecer no meio de um pargrafo. Por exemplo, a marca <b> indica negrito, e a marca

<i> indica itlico.

<p>Istoumpargrafocompalavrasem<b>negrito</b>eem
<i>itlico</i>.</p>

Listas
H vrias formas de definir listas em HTML: podem ser listas com elementos no-numerados, listas em que os
elementos aparecem numerados, ou ainda (menos habituais) listas com elementos que possuem uma descrio extra. Para
qualquer um destes tipos de lista possvel inserir listas dentro de listas, obtendo-se assim diferentes nveis dentro da lista.
Exemplo de lista sem numerao:

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
O resultado algo como:

Item 1

Item 2

Item 3

Exemplo de lista numerada:

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Resultado:
1. Item 1
2. Item 2
3. Item 3

Exemplo de lista com descries para cada item:

<dl>
<dt>Item1</dt>
<dd>Descrioitem1</dd>
<dt>Item2</dt>
<dd>Descrioitem2</dd>
<dt>Item3</dt>
<dd>Descrioitem3</dd>
</dl>
Resultado:
Item 1

Escola Secundria Artstica de Soares dos Reis

13

Criao de pginas Web

Descrio item 1
Item 2
Descrio item 1
Item 3
Descrio item 1

As listas podem conter sub-items. Atente-se, por exemplo, no seguinte cdigo:

<ol>
<li>Teste</li>
<li>Experincia
<ol>
<li>Subexperincia1</li>
<li>Subexperincia2</li>
</ol>
</li>
<li>Outroteste</li>
</ol>
Cujo resultado uma lista com vrios nveis, e ordenada como tal:

1. Teste
2. Experincia
1. Sub-experincia 1
2. Sub-experincia 2
3.

Outro teste

Imagens
A introduo de imagens num ficheiro HTML faz-se pela tag <img>. Esta marca outra excepo regra de que
cada marca deve ter uma marca de fim, dado que no necessrio indicar ao browser onde uma imagem acaba. As
imagens so carregadas a partir de ficheiros de imagem (em formatos JPEG, PNG, etc.)
Assim, a tag <img> tem alguns atributos que tm obrigatoriamente que ser indicados. Por exemplo, e como
bvio, no basta indicar que em determinada posio queremos inserir uma imagem - necessrio especificar qual imagem,
onde est o ficheiro que contm a informao da imagem. Para tal, usa-se a marca com a seguinte sintaxe:

<imgsrc="wanda_the_fish.png"alt="Wanda">
Os atributos das marcas, quando aplicveis, devem ser sempre delimitados por aspas (embora o HTML 4.01 no
obrigue a esta prtica, ela constitui um bom hbito porque a evoluo 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 directrio do ficheiro HTML. O atributo alt uma

Escola Secundria Artstica de Soares dos Reis

14

Criao de pginas Web

representao alternativa da imagem que o browser usar caso no consiga encontrar o ficheiro. A sua incluso
obrigatria.
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 detm 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:

<imgsrc="wanda_the_fish.png"alt="Wanda"title="Opeixe
Wanda">
Convm referir que as imagens, dos vrios elementos que podem constituir uma pgina HTML, so dos que podem
conter maior quantidade de informao. Convm, portanto, fazer uma utilizao criteriosa deste recurso.
Embora a Banda Larga seja hoje uma realidade, quando disponibilizamos um recursos na Internet estamos a tornlo acessvel a todo o Mundo, no apenas aos vizinhos e amigos prximos. Em muitas localidades, no h ainda Banda
Larga. (Em muitos pases, no h ainda Internet...) Dado que muitos utilizadores da Internet vem-se obrigados a usar
ligaes muito lentas, convm resumir ao mnimo a quantidade de informao a transmitir - tirar uma fotografia com uma
cmara digital a 4 MegaPixel e coloc-la directamente numa pgina HTML quase sempre um erro crasso! Quando muito,
pode usar-se uma verso de baixa resoluo dessa imagem (tratando-a num programa de tratamento de imagem como o
GIMP), que sirva de ligao (link) verso de resoluo superior, qual s aceder, de forma consciente, quem estiver
interessado nela.

Tabelas
As tabelas so dos elementos mais usados em HTML, muitas vezes at de forma invisvel para o leitor do
documento (com a borda invisvel - 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 formatao especial (os ttulos da tabela).
Uma tabela define-se pela marca <table> (e termina com </table>). Cada linha delimitada pelas marcas

<tr> e </tr> ("tr" vem do ingls table row), e cada coluna por <td> e </td> (do ingls table division). Uma clula
especial com ttulos pode ser marcada como <th> em vez de <td> (do ingls table heading). Por exemplo:

<tableborder="1"cellspacing="2"cellpadding="2">
<tr>
<th>Ttulocoluna1</th>
<th>Ttulocoluna2</th>
<th>Ttulocoluna3</th>
</tr>
<tr>
<td>linha1,coluna1</td>
<td>linha1,coluna2</td>
<td>linha1,coluna3</td>
</tr>
Escola Secundria Artstica de Soares dos Reis

15

Criao de pginas Web

<tr>
<td>linha2,coluna1</td>
<td>linha2,coluna2</td>
<td>linha2,coluna3</td>
</tr>
<tr>
<td>linha3,coluna1</td>
<td>linha3,coluna2</td>
<td>linha3,coluna3</td>
</tr>
</table>

O exemplo acima resulta na seguinte tabela:

O atributo border="1" da marca <table> indica que a borda volta das clulas da tabela deve ter 1 pxel
de espessura; o atributo cellspacing define o valor do espaamento entre as clulas; e o atributo cellpadding
define o intervalo interior, em cada clula, entre os seus limites e o contedo.
Atributos como rowspan e colspan podem ser usados para juntar clulas entre lihnas e/ou colunas. Por
exemplo, o cdigo anterior alterado para:

<tableborder="1"cellspacing="2"cellpadding="2">
<tr>
<th>Ttulocoluna1</th>
<th>Ttulocoluna2</th>
<th>Ttulocoluna3</th>
</tr>
<tr>
<tdcolspan="2">linha1,coluna1</td>
<td>linha1,coluna3</td>
</tr>
<tr>
<td>linha2,coluna1</td>
<td>linha2,coluna2</td>
<tdrowspan="2">linha2,coluna3</td>
</tr>
<tr>
<td>linha3,coluna1</td>
<td>linha3,coluna2</td>
</tr>
Escola Secundria Artstica de Soares dos Reis

16

Criao de pginas Web

</table>
Produz a seguinte alterao:

Outras formataes, como alinhamentos, cores, tipos de letra, etc., para cada clula ou para a totalidade da tabela
podem ser definidas directamente no HTML, mas essas definies esto a cair em desuso a favor da utilizao de ficheiros
CSS (Cascading Style Sheets).

Ligaes (Hyperlinks)
Uma das funcionalidades mais interessantes das pginas da Internet como as conhecemos a facilidade de se
fazer um "clique" com o rato sobre um link e aceder a outra pgina, ou outro local na mesma pgina. Este o mecanismo
bsico que permite a "navegao" na Internet.
Para definir ligaes entre pginas (links), usa-se a marca anchor, abreviada apenas pela primeira letra, seguida
do atributo href para indicar o endereo para onde ligar. Por exemplo:

<p>Istoumpargrafocomum<a
href="http://www.wikipedia.org">linkparaaWikipedia</a>.</>
Para indicar um endereo de correio electrnico, pode fazer-se:

<p>Omeuemail:<a
href="mailto:eu@exemplo.com">eu@exemplo.com</a></p>
No caso de se pretenderem referncias para o interior de uma pgina devem ser definidos os "alvos" dos links com
a marca <a> seguida do atributo name. Por exemplo, no incio de um captulo poder-se--ia fazer:

<h1><aname="cap_1">CaptuloI</a></h1>

Algures na mesma pgina, um link para este ponto seria:

Escola Secundria Artstica de Soares dos Reis

17

Criao de pginas Web

<ahref="#cap_1">linkparacap.I</a>
Note-se a utilizao do caracter # precedendo o nome. Se o link fosse definido noutra pgina, seria, por exemplo:

<ahref="xpto.html#cap_1">linkparacap.Inapgina
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
pgina estar dividida em frames), pode fazer-se:

<ahref="destino.html"target="nome_do_frame">xpto</a>
O atributo target da marca <a> permite definir o frame onde o link deve ser aberto. No valor deste atributo
deve indicar-se o nome do frame desejado, ou um de quatro valores pr-definidos:

_blank - o link ser aberto numa nova pgina (provavelmente, numa nova janela do browser).

_self - o link ser aberto no prprio frame onde se situa (comportamento por omisso).

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

Formulrios
Os formulrios so blocos, dentro das pginas HTML, que permitem a interaco com o utilizador, oferecendo-lhe a
possibilidade de submeter informao para o servidor. Caracterizam-se por possurem um conjunto de campos de escrita ou
escolha de valores, e normalmente um boto para submeter essa informao.
Para definir um formulrio usa-se a marca form, com dois atributos importantes: method identifica o mtodo de
submisso (post ou get) e action identifica o ficheiro que, no servidor, receber a resposta (a submisso por parte
do utilizador).
Um exemplo de um formulrio muito simples :

<formname="formulario"method="post"action="resposta.php">
<p>Nome:<inputtype="text"name="nome"></p>
<p><inputtype="submit"value="submeter"></p>
</form>
Este formulrio ser submetido usando o mtodo post do protocolo HTTP, e o servidor invocar o ficheiro

resposta.php para tratar a informao submetida. Para trabalhar a informao que o servidor recebe necessrio
dispor de uma ferramenta de programao do lado do servidor. Neste exemplo, usado um ficheiro com extenso php, o
que significa que ser executado no servidor, como resposta submisso do do formulrio, um script escrito em PHP. (O
estudo desta linguagem est fora do mbito deste curso.)
A marca input define um campo de interaco com o utilizador. No exemplo acima usada uma caixa de texto,

Escola Secundria Artstica de Soares dos Reis

18

Criao de pginas Web

definida no atributo type (type="text"). Os diferentes tipos de campos de interaco so:

text
Define uma caixa de texto. O nmero mximo de caracteres pode ser definido pelo atributo maxlength. O
atributo size indica o tamanho da caixa, e o value indica o texto inicial.

password
Idntico ao anterior, mas o texto aparece mascarado com o caracter " *" (contudo, enviado ao servidor como
texto normal).

checkbox
Define uma caixa de seleco. Esta caixa tem dois estados, "on" e "off", e s submetida informao 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 seleco num grupo de vrias seleces possveis. O atributo checked numa das caixas
do grupo indica a que deve estar inicialmente seleccionada. Todas as caixas de seleco de um grupo devem ter o mesmo
nome (atributo name) e diferentes valores (atributo value).

submit
Produz um boto de submisso do formulrio. O texto deste boto indicado no atributo value.

reset
Define um boto de limpeza do formulrio. O texto indicado no atributo value.

file
Define um controlo de upload de ficheiros. Tipicamente, apresentado como uma caixa de texto seguida de um
boto para procurar ficheiros no disco do local. Mltiplos ficheiros podem normalmente ser indicados em simultneo.

hidden
Define uma caixa de texto escondida, imutvel e impreceptvel para o utilizador. O contedo de uma tal caixa
normalmente alterado usando um script (normalmente, escrito em JavaScript).

image
Produz um boto de submisso do formulrio com uma imagem em vez duma legenda. O atributo

Escola Secundria Artstica de Soares dos Reis

19

Criao de pginas Web

align controla o alinhamento da imagem.

Em todos estes campos de interaco o atributo name define o nome do campo.

Frames
Um tipo especial de ficheiro HTML o que se designa por frameset (conjunto de frames, sendo cada frame uma
poro da pgina HTML completa). Um frameset uma pgina HTML que no tem contedo (o que normalmente aparece na
seco body do ficheiro HTML), mas antes a informao sobre a forma de dividir o ecr em vrios pedaos ("fatias"
verticais oU horizontais, ou uma grelha com vrias linhas e colunas) e o endereo do ficheiro HTML a carregar para cada
uma dessas divises. A cada diviso chama-se um frame.
Exemplo de frameset:

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Exemplodeframeset</title>
<metahttpequiv="ContentType"
content="text/html;charset=iso88591">
</head>
<framesetrows="100,,50">
<framename="topo"src="topo.html">
<framename="principal"src="principal.html">
<framename="rodape"src="rodape.html">
<noframes>
<body>
<p>Oseubrowsern&atilde;osuportaframes.</p>
</body>
</noframes>
</frameset>
</html>
Este exemplo define trs frames horizontais: o primeiro (topo) com 100 pxeis de altura; o segundo (principal)
ocupar o mximo de espao que lhe for possvel (pois a medida no se encontra definida); e o terceiro (rodap), com 50
pxeis de altura. As pginas HTML que sero carregadas em cada um deles so, respectivamente, topo.html,

principal.html e rodape.html, tal como definido no atributo src de cada frame.

A utilizao de frames foi muito popular h alguns anos atrs - actualmente, muito limitada. Um dos mais fortes
argumentos contra a utilizao de frames a forma como os motores de busca (tal como o Google) indexam os sites na
Internet, que resulta em menes directas, nos resultados das buscas, s pginas que compem o frameset. Assim, quando
um utilizador segue um desses links, obtm apenas uma parte do site (visto que este composto por vrias partes, vrios
frames). Por este motivo (e alguns outros, mais de natureza esttica), a utilizao de frames est actualmente limitada a
sites de intranets (redes internas de organizaes) e pequenos sistemas de documentao que funcionam em modo local

Escola Secundria Artstica de Soares dos Reis

20

Criao de pginas Web

(off-line).
A zona definida pela marca noframes destina-se a um contedo alternativo, que ser exibido apenas caso o browser
no tenha capacidade para mostrar frames. (Todos os browsers modernos tm essa capacidade.) Nesta zona, tipicamente,
definida uma seco body que segue as regras normais para o corpo do documento, mas s usada caso o browser no
possa mostrar o frameset.

2.3. Leitura de apoio

W3C -World Wide Web Consortium - http://www.w3.org

Getting Started With HTML, Dave Ragget, Maio de 2005 - http://www.w3.org/MarkUp/Guide

HTML 4.01 Specification - http://www.w3.org/TR/html401

HTML na Wikipedia - http://en.wikipedia.org/wiki/Html

Ajuda e ferramentas on-line da Web Design Group - http://www.htmlhelp.com

Validador de pginas HTML da W3C - http://validator.w3.org/

Validador de cdigo HTML da WDG - http://www.htmlhelp.com/tools/validator/direct.html

Escola Secundria Artstica de Soares dos Reis

21

Criao de pginas Web

3. Introduo ao CSS

CSS significa Cascading Style Sheets, algo como Estilos em Cascata em Portugus. So essencialmente coleces
de estilos que, uma vez aplicadas ao ficheiro HTML, caracterizam os elementos desse ficheiro em termos de cores, tipos e
tamanhos de letra, posicionamentos, espaamentos, alinhamentos, etc. A ideia separar claramente o que a estrutura do
documento (no ficheiro HTML) da sua formatao (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 informao contida no ficheiro
inalterada. Como exemplo, quase obrigatrio conhecer o site CSS Zen Garden1.
Cada marca (ou tag) do ficheiro HTML pode (e deve) ter a sua caracterizao em termos do ficheiro de estilos. Se
no tiver, o browser assumir valores por omisso para a representar.
A ligao entre um ficheiro HTML e um ficheiro CSS faz-se por uma informao na seco head do ficheiro HTML:

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<metahttpequiv="ContentType"
content="text/html;charset=iso88591">
<linkhref="styles.css"rel="stylesheet"type="text/css">
</head>
<body>
(...)
</body>
</html>
A marca link no cabealho do ficheiro HTML indica a relao com uma folha de estilos (atributo

rel="stylesheet", definido pela marca href="styles.css", cujo tipo type="text/css". Desta

forma, a folha de estilos ser aplicada em todas as situaes. Tambm possvel definir folhas de estilos para diferentes
situaes - por exemplo, estilos que s sero aplicados quando a pgina vista num ecr (acrescentando o atributo

media="screen"), quando projectada (atributo media="projection"), ou apenas quando impressa

(atributo media="print").
Os estilos podem tambm ser definidos directamente no cabealho do prprio ficheiro HTML. Alis, vulgar alguns
documentos HTML usarem folhas de estilos globais para caracterizar a maior parte dos seus elementos, e alguns estilos
definidos localmente, na sua seco head, quando a utilizao desses estilos se limita a um nico documento, evitando
assim sobrecarregar as "bibliotecas" de estilos que mltiplos documentos usam com estilos que s uma vez so usados.
Neste caso, a sintaxe ser:
1

http://www.csszengarden.com/

Escola Secundria Artstica de Soares dos Reis

22

Criao de pginas Web

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<metahttpequiv="ContentType"
content="text/html;charset=iso88591">
<styletype="text/css">
(...)
</style>
</head>
<body>
(...)
</body>
</html>
H ainda uma terceira opo, vlida em HTML 4.01 Transitional mas que deve ser evitada: a utilizao de estilos inline com as marcas HTML. Por exemplo:

<pstyle="color:red">Istoumpargrafoescritoa
vermelho.</p>
A indicao do estilo como se de um atributo da marca HTML se tratasse pode dar jeito em determinadas situaes,
mas acaba normalmente por se revelar inconveniente quando se pretende alterar todo o aspecto (o layout) do documento,
porque neste caso as definies dos estilos deixam de estar centralizadas, passam a estar distribudas pelo documento. ,
portanto, uma prtica que deve ser evitada.

3.1. Sintaxe do CSS

Os ficheiros CSS so ficheiros de texto, tal como os ficheiros HTML. Cada marca HTML possui um conjunto de
atributos passveis de serem caracterizados por CSS. Uma das melhores referncias para esses atributos e seus valores
possveis a pgina CSS Properties1, da WDG.
Alguns exemplos:

Ficheiro HTML com CSS externo

Retomando o exemplo anterior em que o cdigo CSS estava num ficheiro externo ao HTML chamado

styles.css, esse ficheiro poderia ser:

body{
backgroundcolor:yellow;
1

http://www.htmlhelp.com/reference/css/properties.html

Escola Secundria Artstica de Soares dos Reis

23

Criao de pginas 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 interpretao 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 so associados valores. Por exemplo, os valores que
caracterizam o corpo do documento (seco <body> do HTML) definem a cor amarela para o fundo e uma margem de
10 pxeis entre os limites do documento e o seu contedo. So depois caracterizados dois nveis de ttulos (<h1> e <h2>)
e o elemento pargrafo (<p>). O primeiro nvel de ttulo ter uma letra do tipo helvetica (famlia sans-serif), um tamanho
"extra-grande", ser escrito em negrito, alinhado esquerda e de cor negra; o segundo nvel de ttulo ser um pouco mais
pequeno (tamanho "grande", apenas); e qualquer pargrafo ter uma letra de tamanho mdio, justificada esquerda e
direita, e de cor #202020 (ligeiramente mais claro que o negro).

Ficheiro HTML com CSS interno

As mesmas definies podiam ser carregadas directamente no ficheiro HTML da seguinte forma:

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<metahttpequiv="ContentType"
content="text/html;charset=iso88591">
<styletype="text/css">
body{
backgroundcolor:yellow;
margin:10px;
}
h1{
fontfamily:helvetica,sansserif;
fontsize:xlarge;
fontweight:bold;

Escola Secundria Artstica de Soares dos Reis

24

Criao de pginas 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 tcnica tem a desvantagem de no permitir que as definies CSS sejam teis seno ao ficheiro HTML em que
esto inseridas. Outros ficheiros HTML no podero beneficiar do mesmo cdigo, a no ser que o repitam nas suas
respectivas seces <head>. Mas tem a vantagem de, no caso de o CSS em questo ser especfico de um nico ficheiro
HTML, estar localizado nesse ficheiro e no ocupar espao (no "pesar") em ficheiros CSS que podem ser includos que
vrios ficheiros HTML. Em todo o caso, sempre possvel dividir o cdigo CSS por vrios ficheiros, e incluir em cada ficheiro
HTML apenas o(s) CSS que lhe diga(m) respeito. A separao entre a marcao do documento (conseguido com HTML) e o
seu aspecto num determinada meio de apresentao (misso do CSS) sempre benfica, quanto mais no seja pela
"limpeza" do cdigo assim construdo.

Esquemas de Cores
Uma cor pode ser definida, essencialmente, de duas formas: pelo nome (h tabelas de correspondncia 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 possveis. Juntando os trs componentes, temos um total de 2563 cores possveis, ou seja,
16.777.216 cores. capaz de ser suficiente para a maioria das aplicaes... ;)
Referir cores por nomes no seguro, porque nada garante que diferentes browsers atribuam exactamente o
mesmo valor a um nome (ou at que o conheam). O mtodo mais rigoroso usar valores numricos. costume esses
valores serem expressos em hexadecimal (precedidos do caracter #), mas tambm perfeitamente correcto usar notao
decimal, octal, ou outra - ou ainda a funo rgb(valor_r, valor_g, valor_b). Neste ltimo caso, os
valores podem ser escritos segundo vrias notaes, sendo as mais comuns como inteiros no intervalo [0, 255] ou em
Escola Secundria Artstica de Soares dos Reis

25

Criao de pginas Web

percentagem. Por exemplo:

color:rgb(0%,50%,25%)
Nota: h uma tabela til de cores e seus valores hexadecimais neste endereo1.

Estilos em Cascata
O mesmo grupo de estilos pode ser aplicado a vrias marcas HTML sem ser necessrio repeti-lo. Por exemplo, a
seguinte sintaxe aplica a cor azul (blue) ao ttulo de nvel 1 e ao pargrafo:

h1,p{
color:blue;
}
Vrias marcas HTML podem ser mencionadas no mesmo bloco CSS, desde que separadas por vrgulas. Contudo,
se estiverem separadas por espaos, a interpretao muito diferente - aqui que entra verdadeiramente o conceito de
"cascata". Por exemplo, o bloco seguinte aplica a cor azul a marcas de pargrafo, e a cor vermelha a texto em itlico que
esteja dentro de marcas de pargrafo:

p{
color:blue;
}
pi{
color:red;
}
Se o segundo bloco de cdigo no estivesse presente, o texto em itlico dentro dos pargrafos (azuis) seria tambm
impresso em azul, porque herdaria essa caracterstica (a cor da letra) do seu nvel imediatamente superior no HTML, j que a
marca <i>, por si s, nada define em relao cor do texto.
Na realidade, num documento HTML, possvel definir uma "rvore" de marcas, comeando 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 pargrafos que lhe estejam imediatamente anexos (sem nenhum outro elemento HTML pelo meio),
ento esses pargrafos herdaro a cor verde. Daqui vem a noo de "estilos em cascata".

Classes de Estilos
Suponhamos que queremos definir um estilo genrico para pargrafos, mas que h alguns pargrafos especiais (por
exemplo, citaes) que devem obedecer a um estilo diferente. Como distingui-los?
Uma hiptese definir classes de estilos, que podem ser aplicadas a qualquer marca HTML. Os nomes destas
classes no devem ser os mesmos das marcas HTML (para evitar confuso), e so declarados nos blocos CSS comeando
por um ponto. Por exemplo:
1

http://www.htmlhelp.com/icon/hexchart.gif

Escola Secundria Artstica de Soares dos Reis

26

Criao de pginas Web

p{
color:black;
marginleft:1cm;
fontfamily:helvetica,sansserif;
fontsize:normal;
}
.citacao{
color:darkblue;
marginleft:2cm;
fontstyle:italic;
}
O cdigo acima define pargrafos escritos a cor negra, com uma margem de 1cm esquerda, uma letra da famlia
"sans-serif" ("helvetica", se possvel), e um tamanho normal. Isto vlido para todos os pargrafos do documento. Mas se a
um pargrafo for aplicada a classe citacao, o seu estilo muda - passa a ter cor azul-escura, 2cm de margem esquerda e
a estar escrito em itlico. Mas apenas esse pargrafo em questo! Por exemplo:

(...)
<p>Istoumpargrafonormal,afectadopeloestilodefinido
paraospargrafos.</p>
<pclass="citacao">Estepargrafoumacitao.</p>
(...)

Eventos

O sinal ":" (dois-pontos) pode ser usado para distinguir entre diferentes estados em que alguns elementos HTML se
encontrem, funo de eventos que aconteam. O exemplo tpico o caso da ncora (o vulgar link), que por omisso os
browsers costumam representar de uma cor se no 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 decorao (sem sublinhado). Contudo, quando o utilizador passa o rato sobre um desses links, a cor mantmse mas a decorao muda para sublinhado (underline). Esta uma forma de usar CSS para responder a eventos.

Escola Secundria Artstica de Soares dos Reis

27

Criao de pginas Web

3.2. Literatura de apoio

Cascading Style Sheets, da W3C - http://www.w3.org/Style/CSS/

Cascading Style Sheets, da WDG - http://www.htmlhelp.com/reference/css/

Cascading Style Sheets, na Wikipedia - http://en.wikipedia.org/wiki/Cascading_Style_Sheets

CSS Zen Garden, referncia fundamental para a compreenso do poder do CSS - http://www.csszengarden.com/

Validador de CSS, da W3C - http://jigsaw.w3.org/css-validator/

Escola Secundria Artstica de Soares dos Reis

28