Vous êtes sur la page 1sur 28
Criação de páginas Web

Criação de páginas Web

Copyright

Copyright(c) 2006EscolaSecundáriaArtísticade SoaresdosReis

É permitido copiar, distribuir e/ou modificar este documento de acordo com os termos da GNU Free Documentation

License- versão1.2 (http://www.gnu.org/copyleft/fdl.html) ou outramaisrecentepublicadapela FreeSoftwareFoundation.

Autores

AlexandreManuelPintoMartins

FernandoJ. Leal

Maio2006

Índice

1.WorldWideWeb

5

1.1.Introdução

5

1.2.Noçõeselementaresdo seu funcionamento

6

Hipertexto

6

URLe endereçoIP

6

Modelocliente-servidor

7

PáginasWebe o HTML

7

ProtocoloHTTP(HyperTextTransferProtocol)

7

1.3.Percursode umaligação

8

1.4.Literaturade apoio

8

2.A linguagemHTML

9

2.1.Estruturado ficheiroHTML

9

Cabeçalho

10

Corpo

11

2.2.Principaiselementosdo HTML

11

Títulos

11

Parágrafos

11

Listas

12

Imagens

13

Tabelas

14

Ligações(Hyperlinks)

16

Formulários

17

Frames

19

2.3.Leiturade apoio

20

3.Introduçãoao CSS

21

3.1.Sintaxedo CSS

22

FicheiroHTMLcomCSSexterno

23

FicheiroHTMLcomCSSinterno

23

Esquemasde Cores

25

Estilosem Cascata

25

Classesde Estilos

26

3.2.Literaturade apoio

27

Criação de páginas Web

1. WorldWideWeb

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ãosãosinónimos.A Internetsurgiubastantetempoantese apenasna décadade 90 surgiuo WWW.

A origemda Internetestá na ARPA(AdvancedResearchProjectsAgency), umainstituiçãocriadanos 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 essasinstituições.A redecriadafoi designadaARPANETe é consideradao embriãodo queviria a ser a Internet.

A essa rede foram-se ligando durante os anos 70 e 80 diversas universidades, centros de investigação e grandes

empresascomeçaramtambéma ligar-se no sentido de desenvolver a investigação.Mais tarde essa rede, passou para a ser

geridapela NSF(NationalScienceFoundation)e continuoua alargar-se.

Pode-se afirmar que a Internet não é uma rede de computadores, mas sim um vasto conjunto de redes de

computadoresinterligadasentresi.

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 computadorestêm de seguir para

poderemcomunicarentresi.

Nosprimeirostemposda Internet, foramcriadosum conjuntode serviçosque os computadoresligadosutilizavam:

E-mail;

News: equivalenteaos actuaisfórunsde discussãoou mailinglists;

Loginremoto(telnet): permitea umutilizadorentrar numcomputadorremoto(distante)e trabalharcomose

estivesseno seu computadorlocal;

FTP(File TransferProtocol): permitetransferir ficheirosentre dois computadores.

Apenasem 1991 é que surgiu a World Wide Web que veio tornar a utilizaçãoda 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çãoentre investigadores.O primeirobrowser(softwareparanavegarna Web)surgiu“apenas”em 1993!

Criação de páginas Web

1.2. Noçõeselementaresdo seufuncionamento

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

combinaçãode quatroconceitos 1 :

hipertexto

Identificadoresde recursos

Modelocliente-servidor

Linguagemde marcas

Hipertexto

Por hipertexto designam-se os documentos que contêm ligações para outros documentos. O utilizador pode assim,

clicar nas hiperligaçõespara acedera outrodocumentorelacionadocoma palavraou expressãoondeclicou.

URLe endereçoIP

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 é

194.210.67.2

composto por

quatro números 2

(de

0

a

255) separados por pontos, por exemplo,

No caso dos utilizadores residenciais este endereço é fornecido temporariamente pela empresa que fornece o

serviçode Internetao utilizador,designadoISP (InternetServiceProvider).

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

servidoresde DNS.

1 Adaptadode: http://en.wikipedia.org/wiki/Www

2 Esta estruturadeveráser substituídagradualmentepor umaoutra designadapor IPv6(IP versão6).

Criação de páginas Web

Modelocliente-servidor

Todosos serviçosexistentesna Internet(email, Web,FTP,

etc) baseiam-se numa estrutura designada cliente-servidor. Como

se poderá depreender pelas designações, os clientes efectuam

pedidos que serão atendidos pelos servidores. Na prática um

cliente será um programa que está no computador do utilizador e

um servidoré um computadorqueestá alguresna Internetmasque

contém software específico para responder ao pedido de um

softwarecliente.

No caso da Web, um programa cliente será o browser

Figura 1: Modelocliente-servidor

Figura 1: Modelocliente-servidor

(designação genérica dos programaspara navegar na Web, por exemplo, o Mozilla Firefox, Internet Explorer, Safari, Opera,

etc) que "pede" servidor uma determinadapágina. O servidor contémum softwareque medianteo pedidodo cliente, procura

o ficheirosdessapáginano seu discorígidoe envia-a parao cliente.

Em termos de software, um servidor poderá ser um computador absolutamente normal, apenas terá de conter

softwarepararesponderaospedidosdos clientes.

PáginasWebe o HTML

Uma página Webenviadapelos servidorespara o nosso computadoré um ficheiro de texto escrito numalinguagem

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

paraoutraspáginas.

ProtocoloHTTP(HyperTextTransferProtocol)

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

InformationSystem(IIS) da Microsoftou o Apacheda Mozilla Foundation.

Criação de páginas Web

1.3. Percursode umaligação

O

queacontecequandonosligamosa partir de nossacasae acedemosa umadeterminadapáginaWeb?

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

circulamna redetelefónicaou redecabo).

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

eventualmenteoutrosficheirosde imagens,vídeos,sonsou animaçõesqueestejamcontidosna página.

1.4. Literaturade apoio

A WorldWideWebna Wikipedia. http://en.wikipedia.org/wiki/World_wide_web

A propostaoriginal parao sistemaWWWde TimBerners-Lee - http://www.w3.org/History/1989/proposal.html

Umresumoda históriada WorldWideWeb- http://www.w3.org/History.html

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

Criação de páginas Web

2. A linguagemHTML

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 várias versões desta

linguagem, sendo que a versão actual estabilizou na versão 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 fácil manutenção e processamento automático das página e,

fundamentalmente, procura separar conteúdo da apresentação, o que

nãoacontececomo HTML.

Normalmente um ficheiro HTML tem a extensão .html, no

Figura2: Exemplode códigoHTML

Figura2: Exemplode códigoHTML

entanto, para compatibilidade com sistemas mais antigos, o software actual também suporta a extensão com três letras,

.htm.

2.1. EstruturadoficheiroHTML

Em HTML usam-se marcas, ou tags (do inglês), para indicar, por exemplo, o início e o fim dum parágrafo. Estas

marcasaparecementreos símbolos< e >. Umparágrafopor exemplo,é identificadoda seguinteforma:

<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

nomeé precedidodo símbolo/.

Existemmarcascomdiferentesobjectivos[1]:

Marcasestruturais:descrevemo propósito/funçãodo texto. Por exemplo,

<h2>Golf</h2>

indica ao browser para mostrar Golf como um título de segundo nível (algo como um sub-título). Estas marcas

não definem a formatação com que serão apresentadas, mas normalmente os browsers tem formatações pré-

definidasparaestasmarcas(ex.: tamanhomaiordo que o texto normal,negrito, etc).

Marcas

de

apresentação:

indicam

ao

propósito/função.Por exemplo:

browser

como

apresentar

o

texto,

independentemente

do

seu

Criação de páginas Web

<b>boldface</b>

é normalmenteapresentadocomonegrito(bold).

Marcasde hipertexto:permitemestabelecerligaçõesa outrosdocumentos.Por exemplo,

<a href="http://wikipedia.org/">Wikipedia</a>

é apresentadocoma palavra“Wikipedia”comumahiperligaçãoparao URL

http://wikipedia.org.

O início do ficheiro HTML é indicado pela marca <html>, e o fim pela correspondente marca de fim </html>.

Tudoaquiloquepossaaparecerapósa marcade fim é ignorado.

Na actual versão do HTML(4.01 Transitional) há um elementoadicional: a primeira linha deve identificar a versão e

o tipo de ficheiro HTML,de acordocomas normasda W3C.Um documento"normal" (um texto, por ex.) em HTMLidentifica-

se comono exemplo:

<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

(

)

</html>

O ficheiroHTMLpodeser divididoem dois blocos:o cabeçalhoe o corpodo documento.

Cabeçalho

O cabeçalhoé delimitadopelas tags <head>e </head>.Nele aparecemelementosinformativospara o browser,que

nãosãomostradosno documento.Por exemplo:

<head> <title>T í tulo</title> <meta http­equiv="Content­Type" content="text/html;charset=iso­

8859­1">

</head>

Nesteexemplo,dentrodo cabeçalhodo documentotemosduastagssignificativas:

a

primeira indica o título do documento, que é normalmente apresentado pelo browser na barra de título da sua

janela, no ambientegráfico;

a segunda indica o tipo de conteúdo do ficheiro (text/html) e a codificação usada na escrita (o iso-8859-1

correspondeaoscaracteresportugueses).

Criação de páginas Web

Corpo

O corpo do documento HTML é delimitado pelas marcas <body> e </body>. É nesta secção que aparece todo

o conteúdoqueo autor do documentopretendedisponibilizarao leitor.

Convémnestemomentointroduzir a noçãode estilo. Umestilo, em termosde composiçãográfica, é um conjuntode

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 devemser 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,

veremoscomocaracterizaros estilosdos nossoselementosgráficos.

2.2. PrincipaiselementosdoHTML

Os elementosmaiscomunsque constituemumdocumentosão:

Títulos

Os títuloschamam-se headingsem Inglês,e distinguem-se consoanteo 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í

adiante. Em HTML, usam-se as marcas <h1>, <h2>, <h3>

Exemplo:

<h1>Isto é um t í tulo</h1> <h2>Isto é um sub­t í 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

temsemprea suacorrespondentemarcade fim.

Exemplo:

<p>Isto é um par á grafo<br>"quebrado" a meio.</p>

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

<i> indica itálico.

<p>Isto é um par á grafo com palavras em <b>negrito</b> e em <i>it á lico</i>.</p>

Listas

Há várias formas de definir listas em HTML: podem ser listas com elementos não-numerados, listas em que os

elementos aparecemnumerados, ou ainda (menos habituais) listas com elementos que possuemuma descrição extra. Para

qualquerumdestestiposde lista é possívelinserir listasdentrode listas,obtendo-se assimdiferentesníveisdentroda lista.

Exemplode lista semnumeração:

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

O resultadoé algo como:

Item1

Item2

Item3

Exemplode lista numerada:

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

Resultado:

1. Item1

2. Item2

3. Item3

Exemplode lista comdescriçõespara cadaitem:

<dl> <dt>Item 1</dt> <dd>Descri çã o item 1</dd> <dt>Item 2</dt> <dd>Descri çã o item 2</dd> <dt>Item 3</dt> <dd>Descri çã o item 3</dd> </dl>

Resultado:

Item1

Criação de páginas Web

Descriçãoitem1

Item2

Descriçãoitem1

Item3

Descriçãoitem1

As listaspodemcontersub-items.Atente-se, por exemplo,no seguintecódigo:

<ol> <li>Teste</li> <li>Experi ê ncia <ol> <li>Sub­experi ê ncia 1</li> <li>Sub­experi ê ncia 2</li> </ol> </li> <li>Outro teste</li> </ol>

Cujoresultadoé umalista comváriosníveis, e ordenadacomotal:

1. Teste

2. Experiência

1.

Sub-experiência1

2.

Sub-experiência2

3.

Outroteste

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

imagenssão carregadasa partir de ficheirosde imagem(emformatosJPEG,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 determinadaposiçãoqueremosinserir uma imagem- é necessárioespecificar qual imagem,

ondeestáo ficheiroquecontéma informaçãoda imagem.Paratal, usa-se a marcacoma seguintesintaxe:

<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

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émreferir que as imagens, dos vários elementosque podemconstituir uma página HTML,são dos que podem

contermaiorquantidadede informação.Convém,portanto,fazer umautilizaçãocriteriosadesterecurso.

Emboraa Banda Larga seja hoje uma realidade, quandodisponibilizamosum recursos na Internet estamosa 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

interessadonela.

Tabelas

As tabelas são dos elementos mais usados em HTML, muitas vezes até de forma invisível para o leitor do

documento(coma bordainvisível - largurazero), apenasparaposicionaroutroselementos.

Uma tabela é uma matriz de linhas e colunas, como num jogo de batalha naval. Eventualmente, algumas dessas

linhasou colunaspodemestar agrupadas.Podeexistir umalinhainicial comumaformataçãoespecial (os títulosda 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>

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 exemploacimaresultana seguintetabela: O atributo border="1" da marca <table> indica que a borda à
O
exemploacimaresultana seguintetabela:
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

defineo intervalointerior, em cadacélula, entreos seuslimitese o conteúdo.

Atributos como rowspan e colspan podem ser usados para juntar células entre lihnas e/ou colunas. Por

exemplo,o códigoanterioralteradopara:

<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 colspan="2">linha 1, coluna 1</td> <td>linha 1, coluna 3</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> <td rowspan="2">linha 2, coluna 3</td> </tr> <tr> <td>linha 3, coluna 1</td> <td>linha 3, coluna 2</td> </tr>

Criação de páginas Web

</table>

Produza seguintealteração:

páginas Web </table> Produza seguintealteração: Outras formatações, como alinhamentos, cores, tipos de

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

CSS(CascadingStyle Sheets).

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

básicoque permitea "navegação"na Internet.

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

Paraindicarumendereçode correioelectrónico,podefazer-se:

<p>O meu e­mail: <a href="mailto:eu@exemplo.com">eu@exemplo.com</a></p>

No caso de se pretenderemreferências para o interior de uma página devemser 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>

Alguresna mesmapágina,umlink paraeste pontoseria:

Criação de páginas Web

<a href="#cap_1">link para cap. I</a>

Note-se a utilizaçãodo caracter# precedendoo nome.Se o link fossedefinidonoutrapá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

páginaestar divididaemframes), podefazer-se:

<a href="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

deveindicar-se o nomedo framedesejado,ou umde quatrovalorespré-definidos:

_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

parentedo actual.

Formulários

Os formulários são blocos, dentro das páginas HTML,que permitema interacçãocom o utilizador, oferecendo-lhe a

possibilidade de submeter informaçãopara o servidor. Caracterizam-se por possuíremum conjunto de camposde escrita ou

escolhade valores,e normalmenteumbotãoparasubmeteressainformação.

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

Umexemplode umformuláriomuitosimplesé:

<form name="formulario" method="post" action="resposta.php"> <p>Nome: <input type="text" name="nome"></p> <p><input type="submit" value="submeter"></p> </form>

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

estudodestalinguagemestá fora do âmbitodestecurso.)

A marca input define um campo de interacção com o utilizador. No exemplo acima é usada uma caixa de texto,

Criação de páginas Web

definida no atributo type (type="text"). Os diferentes tipos de campos de interacção são:

text

Define uma caixa de texto. O número máximo de caracteres pode ser definido pelo atributo maxlength. O

atributo size indica o tamanho da caixa, e o value indica o texto inicial.

password

Idêntico ao anterior, mas o texto aparece mascarado com o caracter "*" (contudo, é enviado ao servidor como

texto normal).

checkbox

Defineuma caixa de selecção. Esta caixa tem dois estados,"on" e "off", e só é submetidainformaçãoao 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

nome (atributo name) e diferentes valores (atributo value).

submit

Produzum botãode submissãodo formulário.O texto destebotãoé indicadono atributovalue.

reset

Defineumbotãode limpezado formulário.O texto é indicadono atributovalue.

file

Define um controlo de upload de ficheiros. Tipicamente, é apresentado como uma caixa de texto seguida de um

botãoparaprocurarficheirosno discodo local. Múltiplosficheirospodemnormalmenteser indicadosem simultâneo.

hidden

Define uma caixa de texto escondida, imutável e impreceptível para o utilizador. O conteúdo de uma tal caixa é

normalmentealteradousandoumscript (normalmente,escrito emJavaScript).

image

Produzum botãode submissãodo formuláriocomumaimagememvez dumalegenda.O atributo

Criação de páginas Web

align controla o alinhamento da imagem.

Em todos estes campos de interacção 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

porçãoda páginaHTMLcompleta).Umframeseté umapáginaHTMLque não temconteúdo(o que normalmenteaparecena

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

umadessasdivisões.A cadadivisãochama-se um frame.

Exemplode 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 http­equiv="Content­Type"

content="text/html;charset=iso­8859­1">

</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&atilde;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,

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

A utilização de frames foi muito popular há alguns anos atrás - actualmente, é muito limitada. Um dos mais fortes

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çõesdirectas, nos resultadosdas buscas, às páginasque compõemo 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

Criação de páginas Web

(off-line).

A zonadefinidapela marcanoframesdestina-se a um conteúdoalternativo,que será exibidoapenascasoo browser

não tenhacapacidadepara mostrar frames. (Todosos browsersmodernostêmessacapacidade.)Nestazona, tipicamente,é

definida uma secção body que segue as regras normais para o corpo do documento, mas só é usada caso o browser não

possamostraro frameset.

2.3. Leiturade apoio

W3C-WorldWideWebConsortium- http://www.w3.org

GettingStartedWithHTML,DaveRagget,Maiode 2005- http://www.w3.org/MarkUp/Guide

HTML4.01Specification- http://www.w3.org/TR/html401

HTMLna Wikipedia- http://en.wikipedia.org/wiki/Html

Ajudae ferramentason-line da WebDesignGroup- http://www.htmlhelp.com

Validadorde páginasHTMLda W3C- http://validator.w3.org/

Validadorde códigoHTMLda WDG- http://www.htmlhelp.com/tools/validator/direct.html

Criação de páginas Web

3. Introduçãoao CSS

CSSsignifica CascadingStyle Sheets, algo comoEstilos em Cascataem Português.São essencialmentecolecçõ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 ficheiroCSS).Um mesmodocumentoHTMLpode, assim,ter aspectos

totalmente diferentes consoante a folha de estilos (o ficheiro CSS) adoptada, mantendo-se a informação contida no ficheiro

inalterada.Comoexemplo,é quaseobrigatórioconhecero site CSSZenGarden 1 .

Cada marca (ou tag) do ficheiro HTML pode (e deve) ter a sua caracterização em termos do ficheiro de estilos. Se

nãotiver, o browserassumirávalorespor omissãopara a representar.

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 http­equiv="Content­Type"

content="text/html;charset=iso­8859­1">

<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

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

forma, a folha de estilos será aplicada em todas as situações. Também é possível definir folhas de estilos para diferentes

situações - por exemplo, estilos que só serão aplicados quando a página é vista num ecrã (acrescentando o atributo

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

(atributo media="print").

Os estilos podem tambémser 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

assimsobrecarregaras "bibliotecas"de estilosque múltiplosdocumentosusamcomestilosquesó umavez são usados.

Nestecaso,a sintaxeserá:

1

http://www.csszengarden.com/

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 http­equiv="Content­Type"

content="text/html;charset=iso­8859­1">

<style type="text/css">

(

</style>

</head>

<body>

(

)

</body>

</html>

)

Há ainda umaterceira opção, válida em HTML4.01 Transitional mas que deve ser evitada: a utilizaçãode estilos in-

line comas marcasHTML.Por exemplo:

<p style="color: red">Isto é um par á grafo escrito a vermelho.</p>

A indicaçãodo estilo comose de um atributo da marcaHTMLse tratassepodedar jeito em determinadassituaçõ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. É,

portanto,umapráticaquedeveser evitada.

3.1. Sintaxedo CSS

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

possíveisé a páginaCSSProperties 1 , da WDG.

Algunsexemplos:

FicheiroHTMLcomCSSexterno

Retomando o exemplo anterior em que o código CSS estava num ficheiro externo ao HTML chamado

styles.css, esse ficheiro poderia ser:

body { background­color: yellow;

1

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

Criação de páginas Web

margin: 10px;

}

h1 { font­family: helvetica, sans­serif; font­size: x­large;

font­weight: bold; text­align: left; color: black;

}

h2 { font­family: helvetica, sans­serif;

font­size: large; font­weight: bold; text­align: left; color: black;

}

p

{

font­family: helvetica, sans­seif; font­size: medium; text­align: 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 à

direita, e de cor #202020 (ligeiramente mais claro que o negro).

FicheiroHTMLcomCSSinterno

As mesmasdefiniçõespodiamser carregadasdirectamenteno ficheiroHTMLda seguinteforma:

<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <title>Teste</title> <meta http­equiv="Content­Type"

content="text/html;charset=iso­8859­1">

<style type="text/css"> body { background­color: yellow; margin: 10px;

}

h1 { font­family: helvetica, sans­serif; font­size: x­large; font­weight: bold;

Criação de páginas Web

text­align: left; color: black; } h2 { font­family: helvetica, sans­serif; font­size: large; font­weight: bold;
text­align: left;
color: black;
}
h2 {
font­family: helvetica, sans­serif;
font­size: large;
font­weight: bold;
text­align: left;
color: black;
}
p
{
font­family: helvetica, sans­seif;
font­size: medium;
text­align: justify;
color: #202020;
}
</style>
</head>
<body>
(
)
</body>
</html>

Esta técnicatem a desvantagemde não permitir que as definiçõesCSSsejamúteis senãoao ficheiroHTMLem 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 ficheirosHTML.Em todo o caso, é semprepossível dividir o códigoCSSpor vários ficheiros, e incluir em cada ficheiro

HTMLapenaso(s) CSS que lhe diga(m) respeito. A separaçãoentre a marcaçãodo documento(conseguidocomHTML)e o

seu aspecto num determinada meio de apresentação (missão do CSS) é sempre benéfica, quanto mais não seja pela

"limpeza"do códigoassimconstruído.

Esquemasde 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 256 3 cores possíveis, ou seja,

16.777.216cores.É capazde ser suficienteparaa maioriadasaplicações

;)

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

Criação de páginas Web

percentagem.Por exemplo:

color: rgb(0%, 50%, 25%)

Nota:há umatabelaútil de corese seusvaloreshexadecimaisnesteendereço 1 .

EstilosemCascata

O mesmo grupo de estilos pode ser aplicado a várias marcas HTML sem ser necessário repeti-lo. Por exemplo, a

seguintesintaxeaplicaa cor azul (blue) ao título de nível 1 e ao parágrafo:

h1, p { color: blue;

}

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

esteja dentrode marcasde parágrafo:

p

{

 

color: blue;

}

p

i

{

 

color: red;

}

Se o segundoblocode códigonão estivessepresente,o texto em itálico dentrodos parágrafos(azuis) seria também

impressoem azul, porqueherdariaessacaracterística(a cor da letra) do seunível imediatamentesuperiorno HTML,já que a

marca<i>, por si só, nadadefineemrelaçãoà cor do texto.

Na realidade, num documento HTML, é possível definir uma "árvore" de marcas, começando pelo corpo do

documento(<body>).Se numdocumentofor definidopor CSSqueeste elementodeveter cor verde,por exemplo,e nadafor

especificado quanto aos parágrafos que lhe estejam imediatamente anexos (sem nenhumoutro elemento HTML pelo meio),

entãoessesparágrafosherdarãoa cor verde.Daquivema noçãode "estilosemcascata".

Classesde Estilos

Suponhamosquequeremosdefinir umestilo genéricoparaparágrafos,masquehá algunsparágrafosespeciais(por

exemplo,citações)quedevemobedecera umestilo diferente.Comodistingui-los?

Uma hipótese é definir classes de estilos, que podem ser aplicadas a qualquer marca HTML. Os nomes destas

classes não devemser os mesmosdas marcasHTML (para evitar confusão), e são declaradosnos blocos CSS começando

por umponto.Por exemplo:

1

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

Criação de páginas Web

p

{

color: black; margin­left: 1cm; font­family: helvetica, sans­serif; font­size: normal;

}

.citacao { color: darkblue; margin­left: 2cm; font­style: 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. Masapenasesseparágrafoem 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 estadosem que alguns elementosHTMLse

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.

Vejamosumexemplo:

a, a:visited { color: #800000; text­decoration: none;

}

a:hover {

color:#800000;

text­decoration: underline;

}

Este exemplocaracterizaos links HTML"normais" (por usar) e depois de visitadosde um tom vermelho-tinto, e sem

qualqueroutra decoração(semsublinhado).Contudo,quandoo utilizadorpassao rato sobreum desseslinks, a cor mantém-

se masa decoraçãomudapara sublinhado(underline).Estaé umaformade usar CSSpararespondera eventos.

Criação de páginas Web

3.2. Literaturade apoio

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

CascadingStyleSheets,da WDG- http://www.htmlhelp.com/reference/css/

CascadingStyleSheets,na Wikipedia- http://en.wikipedia.org/wiki/Cascading_Style_Sheets

CSSZen Garden,referênciafundamentalpara a compreensãodo poderdo CSS- http://www.csszengarden.com/

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