Sebentafp

HTML, CSS e FrontPage
Curso de Tecnologias de Informao e

Comunicao

Tec nol ogi as de Pr odu o e Comuni c a o
Mul t i mdi a

Sebent a - Mdul o VI I

2. Parte

Dezembro de 2002
Autoria: Silvia Silva
Apoio: Paulo Crispim
Coordenao: Joaquim Pombo

I.E.F.P.
UNIO EUROPEIA
Fundos Estruturais


Pgina 2
1. Captulo - A linguagem HTML
Parte A - A linguagem HTML e o hipertexto
Apresentao da linguagem HTML

Linguagem HTML e documentos HTML
A sigla HTML deriva da expresso HyperText Markup Language e designa uma linguagem de
formatao de documentos. Um documento HTML um documento que contm cdigos de
formatao da linguagem HTML.

Os documentos HTML so criados como ficheiros de texto ASCII. Cada documento HTML
constitudo por um conjunto de elementos. Certos elementos podem conter outros elementos,
criando uma estrutura.

Exemplos
1. Num documento HTML, uma tabela um elemento. Esse elemento pode conter outros
elementos: as linhas da tabela.

2. Uma lista numerada um elemento. Cada item da lista um elemento contido no
elemento que define a lista.

Elementos e tags
Num documento HTML, cada elemento representado por uma sequncia de smbolos que o
identificam. Essa sequncia de smbolos designada por tag.

Exemplo
Um pargrafo de texto um elemento. Esse elemento representado pelo tag inicial <P> e pelo
tag final </P>. Entre o tag inicial e o tag final, pode ser colocado o texto do pargrafo. O
seguinte excerto representa a marcao de um pargrafo num documento HTML:

<P>Este texto um pargrafo.</P>

Um elemento pode ter um tag inicial e um tag final. O tag inicial marca o incio do elemento e o
tag final marca o fim do elemento.

Para alguns elementos, o tag final obrigatrio; para outros, o tag final facultativo (embora a
sua incluso seja recomendada); finalmente, exis tem elementos que no possuem tag final.

Exemplos
1. O elemento TABLE. Tag final obrigatrio. Num documento HTML, uma tabela um
elemento, representado pelo tag inicial <TABLE> e pelo tag final </TABLE>. Para este
elemento, o tag final obrigatrio.

2. O elemento P. Tag final facultativo. O elemento P representa um pargrafo. O tag final
para esse elemento facultativo. O carcter facultativo deve entender-se no seguinte
sentido: se o tag final no for includo no documento, isso no impede que o documento
seja correctamente interpretado. No entanto, recomendvel a sua incluso, sobretudo
quando se pretende utilizar uma pgina como interface programvel de uma aplicao.


Pgina 3
Quando o tag final de um elemento facultativo, os tags desse elemento sero
apresentados, neste texto da seguinte forma, tomando como exemplo o caso do
elemento P:

<P> [</P>]

Chama-se no entanto a ateno para o facto de que os smbolos [ e ] so utilizados
neste texto para indicar que o tag final opcional. Esses smbolos no devem ser
includos no documento.

3. O elemento HR. No possui tag final. O elemento HR cria uma linha horizontal no
documento. Este elemento no possui tag final.

O cdigo seguinte cria uma linha horizontal no documento:

<HR>

Comentrios
Num documento HTML podem ser includas linhas de comentrio. Essas linhas tm como
objectivo fornecer informao sobre o cdigo do documento, mas no tm qualquer efeito em
termos de formatao.

Um comentrio tem um tag inicial e um tag final obrigatrio. O tag inicial :



Exemplo
O excerto seguinte contm um comentrio seguido da definio de um pargrafo:


<P>Este o texto do pargrafo que aparece na janela do documento.</P>

Elementos e atributos
A cada elemento est associado um conjunto de atributos. Esses atributos podem ser utilizados
para identificar o elemento e para definir critrios de formatao.

Os atributos so inseridos no tag inicial, entre o smbolo < e o smbolo >. Esquematicamente, os
atributos podem ser representados do seguinte modo:

<ELEMENTO atributo1 = atributo2= atributoN= >
</ELEMENTO>

Exemplo
O elemento P possui vrios atributos. Apresenta-se um exemplo contendo alguns desses
atributos, com uma breve explicao do seu significado:

<P
ID=p1
CLASS=ParagrafoTexto
ALIGN=left
TITLE=Este pargrafo importante
>

Este o texto do pargrafo. este texto que aparece na pgina do
documento. Os atributos align e title tm um efeito visvel na pgina. Os
atributos id e class so utilizados apenas internamente.
</P>

Pgina 4

Os atributos ID e CLASS so utilizados para a identificao interna do pargrafo. A sua utilizao
ser mais facilmente compreendida no contexto da programao e da definio de estilos
atravs de style sheets.

A atributo ALIGN define o formato de alinhamento do texto do pargrafo. Neste exemplo,
definido o alinhamento esquerda.

O atributo TITLE permite criar uma label ou etiqueta que apresentada quando o ponteiro do
rato colocado sobre esse elemento. Para que se possa visualizar o efeito deste argumento, a
figura seguinte mostra o aspecto deste documento quando o ponteiro do rato colocado sobre o
pargrafo:

Browsers e documentos HTML
Os browsers so aplicaes que interpretam os tags e os atributos dos elementos de um
documento HTML, apresentando-os no ecr do computador como pginas HTML.

A apresentao de documentos HTML pode ser feita atravs de outras aplicaes. A ttulo de
exemplo, pode citar-se o caso da linguagem Visual Basic. Utilizando esta linguagem, possvel
criar uma aplicao que apresenta as funcionalidades bsicas de um browser.

Pgina 5

Nota
Um browser (ou uma aplicao com funcionalidades idnticas) abre um documento HTML
(um documento de texto com extenso .html ou .htm), no mesmo sentido em que a
aplicao Word abre um documento com extenso .doc.

Tal como o Word interpreta os cdigos internos de formatao dos documentos .doc,
tambm o browser interpreta e apresenta visualmente o efeito dos cdig os de formatao
HTML.

A Internet um sistema cliente/servidor. Os clientes so os computadores ligados Internet e
que utilizam um browser (ou uma aplicao com funcionalidades equivalentes) para requisitar
pginas HTML armazenadas em servidores Web.

Os servidores Web so computadores com software especializado para a gesto de documentos
HTML. O browser especifica o documento a que pretende aceder, e o servidor Web envia esse
documento para o computador requisitante.

O documento enviado no formato HTML. No computador cliente, o browser interpreta os tags e
apresenta visualmente o contedo do documento.

No obrigatrio que os documentos acedidos por um browser se encontrem num servidor Web
remoto, na Internet. O browser pode requisitar documentos que se encontrem numa intranet,
numa rede local, ou mesmo documentos que se encontrem no disco do computador.

Hipertexto, links e URLs
Os documentos HTML so documentos hipertexto. O termo hipertexto designa a seguinte
caracterstica: um documento HTML pode conter links ou hiperligaes.

Um link um elemento HTML formatado para conter um apontador para um outro recurso. Esse
recurso pode ser um outro documento HTML ou uma seco dentro do prprio documento em
que o link est inserido.

Um link a origem de uma hiperligao. O recurso para que esse link aponta o destino dessa
hiperligao.

Para que o destino de uma hiperligao possa ser identificado, necessrio fornecer o seu
endereo. Esse endereo designado pela sigla URL de Uniform Resource Locator.

Quando o URL de destino de um link um recurso armazenado num servidor da Internet, o URL
contm a indicao do protocolo a utilizar para aceder a esse recurso, a identificao do servidor
em que esse recurso se encontra disponvel e o caminho para o documento pretendido na
estrutura do servidor.

Exemplo
Para definir a origem de um link utiliza-se o elemento A, identificado pelo tag inicial <A> e pelo
tag final </A>. O elemento A possui vrios atributos. Um dos atributos que tem de ser includo
quando se utiliza o elemento A o atributo HREF. Este atributo utilizado para indicar o URL de
destino do link.

No exemplo seguinte apresentado um pargrafo. Dentro desse pargrafo definido um
elemento como origem de um link. O atributo href indica o URL de destino desse link:

<P>
Para obter mais informaes sobre este produto consulte o site da
<A href=http://www.microsoft.com> Microsoft Corporation.
</A>
</P>

Pgina 6

O resultado deste cdigo pode ser observado na figura seguinte:

O cdigo coloca em evidncia o facto de que nos documentos HTML os pargrafos e as
indentaes includas no texto original do documento no so interpretadas como tal pelo
browser. Para que um novo pargrafo seja criado, esse pargrafo tem de ser explicitamente
declarado como um novo elemento.

Pgina 7
Parte B - A estrutura de um documento HTML
A estrutura bsica de um documento HTML

A estrutura bsica
Os componentes da estrutura bsica
Em termos da sua estrutura bsica, um documento HTML composto pelos seguintes
elementos:

O elemento !DOCTYPE
O elemento HTML
O elemento HEAD
O elemento BODY

a) O elemento !DOCTYPE
Em teoria, o elemento !DOCTYPE deveria constituir o primeiro elemento de qualquer documento
HTML. Esse elemento representado por um nico tag: <!DOCTYPE>.

Este elemento pode ser utilizado para indicar o tipo de standard a cuja conformidade o
documento obedece. Muitos browsers ignoram o contedo deste elemento. A ttulo de exemplo,
apresenta-se um elemento !DOCTYPE que declara a conformidade com a especificao HTML
4.0:

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Strict//EN>

b) O elemento HTML
O elemento HTML define o incio e o fim de um documento. O tag inicial <HTML> e o tag final
</HTML>.

c) O elemento HEAD
O elemento HEAD representa o cabealho e pode conter uma variedade de informaes relativas
ao documento. Todavia, os elementos contidos dentro do elemento HEAD no influenciam
directamente o contedo do documento tal como ele apresentado na janela do browser.

d) O elemento BODY
O elemento BODY contm o corpo do documento, o seu contedo. O tag inicial <BODY> e o
tag final </BODY>. Os vrios elementos que constituem o contedo do documento so
apresentados dentro do elemento BODY.


Pgina 8
A estrutura bsica em esquema

Deste modo, a estrutura bsica de um documento HTML pode ser apresentada da seguinte
forma:

<!DOCTYPE [declarao]>
<HTML [atributos] >
<HEAD [atributos] >

Elementos do cabealho

</HEAD>
<BODY [atributos] >

Elementos do corpo do documento

</BODY>
</HTML>

Elementos do cabealho

Entre o tag inicial e o tag final do elemento HEAD pode ser includo um conjunto de elementos.
Apresenta-se uma sumria descrio desses elementos.

a) O elemento BASE
O elemento BASE utilizado para definir o URL base do documento. Para compreender o
significado do URL base, torna-se necessria a seguinte explicao.

Um URL formado pela especificao de um protocolo, pela identificao do servidor e pela
localizao do documento (ou do fragmento de documento) na hierarquia de directrios do
servidor.

A ttulo de exemplo, considere-se o seguinte URL:

http://abc.com/def/ghi/pgina1.html

A sigla HTTP identifica o protocolo de comunicao (neste caso, o protocolo HyperText
Transport Protocol).

Os smbolos :// so utilizados para separar o protocolo do endereo de recurso.

O servidor identificado por abc.com.

O recurso o ficheiro pgina1.html, que se encontra armazenado no directrio ghi,
directrio que, por sua vez, se encontra em def.

Um link pode conter um URL absoluto. Neste caso, todo o endereo indicado no link.

Por exemplo, o elemento A no cdigo apresentado em seguida, contm um endereo absoluto
(colocado em negrito para maior evidncia):

<P>Para obter mais informaes, consulte a
<A href=http://abc.com/def/ghi/pgina1.html>pgina1.</P>


Pgina 9
Um link pode igualmente conter um endereo relativo. No caso anterior, um endereo relativo
poderia ser constitudo, por exemplo, por qualquer das seguintes parcelas do endereo:

ghi/pgina1.html
def/ghi/pgina1.html
pgina1.html

Um endereo relativo tem de ser complementado com um endereo base, para formar o URL
completo do recurso. O browser tem de saber onde encontrar o endereo base, para conjugar
esse endereo base com o endereo relativo do link, formando o URL completo do recurso.

O elemento BASE pode ser usado precisamente para definir o URL base a partir do qual so
formados os endereos de todos os URLs relativos presentes no documento. Para definir esse
URL base utiliza-se o argumento HREF.

Exemplo
Considere-se o seguinte cdigo:

<HTML>
<HEAD>
<BASE href=http://abc.com/def/>
</HEAD>
<BODY>
<P>Para obter mais informaes, consulte a <A href=ghi/pgina1.html>
pgina1.</P>
</BODY>
</HTML>

Observe que o elemento BASE utilizado para definir o URL base do documento.

No link includo no pargrafo, no includo o URL completo, mas sim um URL relativo:

ghi/pgina1.html

O browser conjuga o endereo definido no elemento BASE com o endereo relativo do link para
formar o endereo completo.

Com este cdigo, o link aponta para o endereo:

http://abc.com/def/ghi/pgina1.html

b) O elemento TITLE
O elemento TITLE pode ser utilizado para identificar o documento. O contedo do elemento
TITLE apresentado na barra de ttulo do browser.

Observe o seguinte documento HTML onde o elemento TITLE aparece dentro do elemento HEAD:

<HTML>
<HEAD>
<BASE href=http://abc.com/def/>
<TITLE>Ttulo do documento</TITLE>
</HEAD>
<BODY>
<P>Para obter mais informaes, consulte a <A href=ghi/pgina1.html>
pgina1.</A></P>
</BODY>
</HTML>

Pgina 10

Na imagem seguinte pode observar o contedo do elemento TITLE na barra de ttulo do
browser:

c) O elemento BGSOUND
Podem criar-se pginas com msica de fundo utilizando o elemento BGSOUND no HEAD do
documento.

O atributo SRC do elemento BGSOUND especifica o ficheiro de som que ser executado quando
a pgina inicializada. O atributo LOOP define quantas vezes o ficheiro de som ser executado.
O atributo volume pode assumir valores entre -10000 e 0. O valor 0 corresponde ao volume
normal. Usando valores inferiores a 0 obtm-se um menor volume de som.

O cdigo seguinte apresenta um exemplo de utilizao do elemento BGSOUND para executar
quatro vezes um ficheiro wave (neste caso, o ficheiro splash.wav no directrio raiz da drive C):

<HTML>
<HEAD>
<BASE href=http://abc.com/def/ >
<BGSOUND src="C:\splash.wav" loop=4 volume= -800>
</HEAD>
<BODY>
<P>Esta pgina tem um som de fundo.</P>
</BODY>
</HTML>

d) O elemento BASEFONT
O elemento BASEFONT pode ser utilizado para definir o tipo de letra e o tamanho que sero
usados no documento, se outro estilo no for definido para um determinado elemento.

Os atributos FACE e SIZE determinam, respectivamente, o tipo de letra e o tamanho.

O tipo de letra e o tamanho de letra a utilizar podem igualmente ser definidos atravs do
elemento FONT no corpo do documento. O elemento FONT utiliza igualmente os atributos FACE e
SIZE para definir o tipo e o tamanho da letra.


Pgina 11
Atributos do elemento BODY
fundamentalmente dentro do elemento BODY que se estrutura o documento. Este elemento
possui alguns atributos que podem ser utilizados para definir algumas caractersticas de
formatao que afectam todo o documento. Apresentam-se em seguida alguns desses atributos.

a) O atributo BGCOLOR
O atributo BGCOLOR pode ser utilizado para definir a cor de fundo do documento.

O cdigo seguinte mostra um documento em que utilizado o atributo BGCOLOR para definir a
cor de fundo do documento. O documento apresentar uma cor de fundo azul:

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=blue>
</BODY>
</HTML>

Nota
Existem duas formas de identificar cores num documento. Uma delas consiste em indicar o
nome da cor. Existem dezasseis cores que podem ser designadas por nome num documento
HTML. Essas cores so as seguintes:

Black, gray, white, maroon, silver, red, green, lime, yellow, navy, blue,
fuchsia, olive, teal, aqua, purple.

As cores do ecr so formadas atravs de uma combinao das cores vermelho, verde e
azul. Cada uma dessas trs cores bsicas pode assumir uma intensidade que vai de 0 a 255.
Em HTML, uma cor pode ser identificada atravs da combinao dos valores de intensidade
de cada uma das trs cores bsicas.
No entanto, os valores numricos devem ser indicados no sistema hexadecimal. Assim, uma
cor uma combinao de seis dgitos hexadecimais: os primeiros, a contar da esquerda,
correspondem cor vermelha; os dois dgitos seguintes correspondem cor verde; os dois
ltimos correspondem cor azul. Para que o browser possa identificar a cor como uma
combinao de valores para as trs cores base, essa sequncia de dgitos, deve ser
precedida do smbolo #. Por exemplo, a cor de fundo vermelha pode ser atribuda ao
atributo BGCOLOR da seguinte forma:

<BODY bgcolor=#FF0000>

b) O atributo TEXT
O atributo TEXT define a cor do texto no corpo do documento. O cdigo seguinte mostra um
documento em que os atributos BGCOLOR e TEXT so utilizados para criar um documento com
fundo vermelho e texto branco:

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FF0000" text="#FFFFFF">
<P>Experincia</P>
</BODY>
</HTML>

Pgina 12
Nota
A sequncia de dgitos FF0000 corresponde cor vermelha e resulta de obter a intensidade
mxima para a cor vermelha (FF em hexadecimal corresponde a 255 em decimal) e
intensidade nula para as duas outras cores bsicas. A sequncia FFFFFF corresponde
mxima intensidade de todas as cores bsicas e d origem cor branca.

c) O atributo BACKGROUND
O atributo BACKGROUND pode ser utilizado para definir a imagem de fundo da pgina. O cdigo
seguinte cria uma pgina em que utilizado o atributo para definir a imagem de fundo da
pgina:

<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND=Biblio.gif">
<P>Texto escrito sobre a imagem de fundo.
Texto escrito sobre a imagem de fundo.
</P>
</HTML>


Pgina 13
A imagem seguinte mostra o resultado deste cdigo:

d) Os atributos LINK, VLINK e ALINK
Os atributos LINK, VLINK e ALINK podem ser utilizados para definir a cor do texto que constitui
a origem de um link. O atributo LINK define a cor que um link apresenta na pgina, antes de ser
activado; o atributo VLINK define a cor de um link visitado; o atributo ALINK define a cor do link
activo.

Pgina 14
Frames
a) O que so frames
As frames so divises da janela do browser. Cada frame passa a ser considerada uma janela na
qual pode ser apresentado um documento HTML.

Com a utilizao de frames, passa a ser possvel apresentar na mesma sesso do browser vrios
documentos HTML ao mesmo tempo.

A figura seguinte apresenta a janela de um browser dividida em trs frames. A janela comea
por ser dividida em duas frames verticais. A frame do lado direito, por sua vez, dividida em
duas frames horizontais:

b)O elemento FRAMESET e o elemento FRAME
Um documento com frames um documento composto. Nesses documentos, o elemento BODY
substitudo pelo elemento FRAMESET. Este elemento define as frames em que a janela do
browser dividida.

O elemento FRAME utilizado para definir as caractersticas bem como o ficheiro que deve ser
apresentado em cada uma das frames criadas atravs do elemento FRAMESET.

Pgina 15
A ttulo de ilustrao, apresenta-se o cdigo necessrio para gerar a estrutura de frames
apresentada na figura anterior. Uma breve explicao preliminar para facilitar a compreenso do
cdigo: o atributo SRC do elemento FRAME especifica o endereo do documento que ser
apresentado nessa frame:

<HTML>
<FRAMESET cols = 40%,60%>
<FRAME src =esquerda.htm>
<FRAMESET rows = 70%,30%>
<FRAME src =direita1.htm>
<FRAME src =direita2.htm>
</FRAMESET>
</FRAMESET>
</HTML>

Pgina 16
Parte C - Criao de documentos HTML
A criao de documentos HTML

Criao manual de ficheiros HTML

Um documento HTML pode ser criado a partir do zero, utilizando qualquer processador de texto
que permita criar ficheiros ASCII.

O programa Notepad do Windows pode ser utilizado para esse efeito.

A figura seguinte mostra uma imagem de um documento HTML criado no Notepad:

O documento criado num processador de texto como o Notepad, deve ser guardado com a
extenso .html.

Este processo de criao de documentos exige que se conheam bem os vrios elementos e
respectivos atributos. Para criao de documentos complexos, trata-se de um processo moroso.


Pgina 17
Editores WYSIWYG

O que um editor WYSIWYG
A sigla WYSIWYG deriva da expresso What You See Is What You Get. Um editor HTML com
caractersticas WYSIWYG fundamentalmente um processador de texto que permite utilizar
comandos directos para a formatao de elementos (por exemplo, negrito, itlico e sublinhado),
inserir objectos (como, por exemplo, tabelas e imagens) e definir links a partir de objectos.

O documento visualmente criado e, quando gravado, gravado no formato de documento
HTML.

Word
O Word pode ser utilizado para criar ficheiros HTML. Em vez de criar cada um dos cdigos de
formatao do documento, podem utilizar-se as funcionalidades de formatao disponibilizadas
pelo Word. A nica coisa a fazer optar por gravar o ficheiro no formato HTML.

A imagem seguinte mostra uma pgina criada no Word:


Pgina 18
Para obter um ficheiro HTML, basta optar por guardar a pgina como uma Web Page, atravs da
correspondente opo no menu File (Ficheiro), como se mostra na imagem seguinte:

Na imagem seguinte pode observar a mesma pgina mas j editada no Internet Explorer, a
partir do ficheiro HTML criado pelo Word:

Nota
Nem todas as funcionalidades de formatao do Word esto disponveis para ser formatadas
em HTML. Por esse motivo, o Word emite uma mensagem advertindo que algumas opes
de formatao do documento podem perder-se quando se opta pelo formato HTML.


Pgina 19
FrontPage
O FrontPage um programa especializado, no apenas para a criao de pginas HTML mas
igualmente para a criao e gesto de sites.

Ao nvel da criao das pginas HTML, as suas funcionalidades so idnticas s de um
processador de texto, tendo em conta as limitaes que o formato HTML pode impor a certo tipo
de formataes.

Porqu aprender HTML?
Criao de pginas profissionais
Para aqueles que apenas necessitam de criar pginas simples, o conhecimento da linguagem
HTML no , em rigor, necessrio, uma vez que existem vrios editores que podem
automaticamente gerar esses documentos.

Os que necessitam de criar pginas HTML de nvel profissional, no podem limitar-se s
funcionalidades automticas proporcionadas pelos editores de HTML porque, nalgumas
circunstncias, pode ser necessrio afinar o comportamento dos documentos. Isso s pode ser
feito manualmente, mesmo que seja sobre o cdigo gerado por um editor de HTML.

Programao de aplicaes
A popularidade da Internet e das tecnologias a ela associadas, tem criado a tendncia para que
as aplicaes de interface com o utilizador (aquilo que genericamente se pode designar por client
side programming) serem desenvolvidas com tecnologias que tm por base a linguagem HTML.

A especificao Dynamic HTML faz das pginas HTML uma plataforma para o desenvolvimento
de aplicaes. Cada elemento de uma pgina um objecto que possui atributos e reconhece
eventos. Os atributos determinam a aparncia e o comportamento desses elementos. Os
eventos podem ser desencadeados pelo sistema ou pelo utilizador.

A cada evento, de cada objecto da pgina, pode ser associado cdigo que executado pelo
browser (ou por uma aplicao equivalente) sempre que esse evento ocorre.

As linguagens de script podem ser utilizadas para associar cdigo aos eventos de uma pgina
HTML. Essas linguagens de script so linguagens interpretadas e executadas pelo browser ou
pela aplicao utilizada com as funcionalidades de browser.

As linguagens de script actualmente mais divulgadas so a linguagem Java Script (e a verso
Jscript da Microsoft) e a linguagem Visual Basic Script, esta ltima geralmente designada por
VBScript.

Todavia, a especificao DHTML estabelece um modelo geral de programao, de objectos e de
eventos. No est associada a nenhuma linguagem em especial.

Com o Visual Basic 6, possvel criar aquilo que designado por DHTML Applications. Uma
DHTML Application uma aplicao que tem por interface uma ou mais pginas HTML. O cdigo
associado aos eventos reconhecidos pelos elementos das pginas compilado no ambiente de
desenvolvimento do Visual Basic.

A vantagem das DHTML Applications reside no facto de o cdigo criado pelo programador ser
protegido atravs do processo de compilao. Ao contrrio do que acontece com as linguagens
de script, cujo cdigo pode ser visualizado, o cdigo criado atravs de aplicaes DHTML em
Visual Basic compilado e no pode ser consultado pelo utilizadores.


Pgina 20
2. Captulo - Formatao de textos e
pargrafos
Parte A - Formatao de cabealhos, pargrafos e
linhas horizontais

A formatao de cabealhos
Em HTML podem ser definidos seis nveis na hierarquia dos cabealhos de texto. O nvel mais
elevado representado pelo nmero 1. O nvel mais baixo representado pelo nmero 6.

O elemento utilizado para definir um cabealho de nvel 1 o elemento H1. O elemento utilizado
para definir um cabealho de nvel 2 o elemento H2. E assim sucessivamente, at ao elemento
H6.

Os diferentes nveis da hierarquia dos cabealhos traduzem-se no maior ou menor tamanho com
que o cabealho apresentado.

Um dos atributos dos elemento Hn o atributo ALIGN. Este atributo pode tomar os valores LEFT,
CENTER e RIGHT. O valor LEFT alinha o cabealho direita. O valor CENTER alinha o cabealho
ao centro. Finalmente, o valor RIGHT alinha o cabealho direita.

O cdigo seguinte mostra um exemplo de apresentao de texto com os vrios nveis de
cabealhos:

<HTML>
<HEAD>
<TITLE>Formatao de Texto</TITLE>
</HEAD>
<BODY>
<H1>OS DIFERENTES NVEIS DE CABEALHOS</H1>
<H1 ALIGN = CENTER>Cabealho de nvel 1</H1>
</BODY>
</HTML>

O resultado pode ser observado na imagem seguinte:


Pgina 21

A formatao de pargrafos e linhas horizontais

Pargrafos
Para criar um pargrafo utiliza-se o elemento P. O tag <P> marca o incio de um novo
pargrafo. O tag final </P> marca o final do pargrafo. Este tag final no obrigatrio, mas a
sua utilizao recomendada.

Em HTML os pargrafos tm de ser explicitamente definidos porque, em princpio, o browser no
interpreta a formatao introduzida no processador de texto que contm o cdigo HTML.

Nota
Existe uma excepo a esta regra geral. O browser reconhece a formatao de pargrafos e
tabulaes introduzidas no cdigo original se for utilizado o elemento PRE.

Pgina 22
Para compreender o modo como o browser interpreta o texto quando no introduzida
nenhuma formatao especfica de pargrafos, observe o cdigo HTML criado atravs do
processador de texto Notepad e apresentado na figura seguinte:

Neste texto so introduzidos pargrafos utilizando apenas a formatao do Notepad. O que
acontece que o browser no interpreta esses pargrafos nem as linhas em branco colocadas
no cdigo de origem. Quando encontra uma mudana de linha, o browser limita-se a colocar um
espao, mesmo que essa mudana de linha seja seguida de vrias linhas em branco.

O resultado do ficheiro anterior, pode ser observado no Internet Explorer na imagem seguinte:


Pgina 23

Como pode verificar, o browser interpreta cada mudana de linha como um simples espao, no
importando quantas linhas em branco foram colocadas entre as palavras.

O atributo ALIGN
O elemento P pode receber o atributo ALIGN. Este atributo, por sua vez, pode ter os valores
LEFT, CENTER, RIGHT e JUSTIFY.

Os valores do atributo ALIGN explicam-se por si prprios mas poder observar o cdigo seguinte
que cria quatro pargrafos, cada um com o seu valor para o atributo ALIGN:

<HTML>
<HEAD>
</HEAD>
<BODY>
<P ALIGN=LEFT>
O texto deste pargrafo alinhado esquerda. O alinhamento esquerda o
alinhamento assumido por defeito.
</P>
<P ALIGN=CENTER>
Este pargrafo alinhado ao centro. O contedo de cada linha do texto do
pargrafo alinhado ao centro, tendo em conta a dimenso da janela do
browser.
</P>
<P ALIGN=RIGHT>
Aqui temos uma pargrafo que alinhado direita. Isto significa que todo
o texto do pargrafo aparece verticalmente alinhado na margem direita, na
janela do browser.
</P>
<P ALIGN=JUSTIFY>
Este o exemplo de um pargrafo justificado, isto , de um pargrafo
alinhado quer esquerda quer direita. Se observar verificar que, na
janela do browser, as linhas se encontram alinhadas verticalmente
esquerda e direita. Esta caracterstica no podia ser implementada nas
primeiras verses da linguagem HTML.
</P>
</BODY>
</HTML>



Pgina 24

Linhas horizontais
O elemento HR introduz no corpo do documento uma linha horizontal. Essa linha poder servir
para facilmente ser visualizada uma diviso lgica do texto.

O elemento HR possui quatro atributos: WIDTH, SIZE, NOSHADE e ALIGN. O atributo WIDTH
indica a largura da linha, o atributo SIZE a altura, o atributo NOSHADE indica se tem ou no
efeito 3D e, finalmente, o atributo ALIGN define o alinhamento.

Os valores atribudos a WIDTH e SIZE podem ser absolutos: pixels (px), points (pt), centmetros
(cm) e polegadas (in). O atributo WIDTH pode ainda tomar valores relativos: percentagem (%)
neste caso da largura do elemento onde se insere.

Observe o cdigo seguinte:


Pgina 25
<HTML>
<HEAD>
<TITLE>Linhas horizontais</TITLE>
</HEAD>
<BODY>
<P>Este texto contm linhas horizontais separando cada um dos pargrafos.
As linhas so formatadas de forma diferente para que se possa observar o
efeito de vrios atributos.
</P>
<HR width = 80% size = 10>
<P>
Este o segundo pargrafo.
</P>
<HR width = 400 size = 20 noshade align = left>
<P>
Temos aqui o terceiro pargrafo.
</P>
<HR width = 300 size = 5 noshade align = right>
</BODY>
</HTML>

O resultado desse ficheiro pode ser observado na imagem seguinte:


Pgina 26
Texto pr-formatado
Quando o browser l um documento, converte um conjunto de espaos, uma tabulao ou uma
linha em branco para um nico espao em branco.

Para que o texto apresentado pelo browser respeite a formatao de espaos, linhas e
tabulaes de acordo com o texto do documento, deve-se incluir esse texto dentro dos tags
<PRE> </PRE>.

Observe o exemplo seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Mapa comparativo de golos de duas equipas:</H3>
<PRE>
-------------------------------
GOLOS
ANO EQUIPA A EQUIPA B
-------------------------------
1999 87 59
2000 75 68
2001 72 75
-------------------------------
</PRE>
</BODY>
</HTML>

O resultado apresentado na imagem seguinte:


Pgina 27
Parte B Elementos de formatao de texto
Formatao de texto

Texto em negrito
O elemento B pode ser utilizado para formatar texto em negrito (bold). O texto que figura entre
o tag inicial <B> e o tag final </B> ser formatado em negrito.

Texto em itlico
O elemento I pode ser utilizado para formatar texto em itlico. O texto que figura entre o tag
inicial <I> e o tag final </I> formatado em itlico.

Texto Sublinhado
O elemento U pode ser utilizado para sublinhar texto. O texto que figura entre o tag <U> e o tag
</U> aparece sublinhado, na janela do browser.

No cdigo e na imagem seguintes apresentado um exemplo:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1><I>Formatar o texto</I></H1>
<P>Pode formatar o texto em <B>negrito</B>,
<I>itlico</I> e <U>sublinhado</U>.</P>
<P><U>NOTA</U>: Utilize o texto formatado em sublinhado com algumas
<B>reservas</B> pois poder ser <B>confundido</B> com um hiperlink!
</BODY>
</HTML>


Pgina 28
O elemento FONT

Finalidade do elemento FONT
O elemento FONT pode ser utilizado para definir o tipo de letra, o tamanho ou a cor de
determinado bloco de texto. A formatao aplicada ao bloco de texto que figura entre o tag
inicial <FONT> e o tag final </FONT>.

O atributo FACE
O atributo FACE permite definir o tipo de letra utilizado no texto contido entre o tag inicial e o
tag final do elemento FONT.

O atributo SIZE
O tamanho do tipo de letra utilizado no texto que figura entre o tag inicial e o tag final do
elemento FONT definido atravs do valor do atributo SIZE. Pode assumir um valor inteiro de 1
a 7.

O atributo COLOR
O valor do atributo COLOR define a cor do texto que figura entre os tags inicial e final do
elemento FONT.

Exemplo
No cdigo seguinte, o elemento FONT utilizado para formatar blocos de texto. Como se
pode verificar, a formatao introduzida atravs do elemento FONT aplica-se a todo o
texto que figura entre o seu tag inicial e o seu tag final, mesmo que entre esses tags
existam vrios pargrafos. Como o exemplo igualmente evidencia, podem encadear-se
vrios elementos FONT:

<HTML>
<HEAD>
<TITLE>Utilizao do elemento FONT</TITLE>
</HEAD>
<BODY>
<FONT FACE="Tahoma" SIZE=2 COLOR=Green>
<P>Os atributos do elemento FONT aplicam-se a todo o bloco de texto
que figura entre o seu tag inicial e o seu tag final.
</P>
<P>Esse bloco de texto pode conter vrios pargrafos.
</P>
</FONT>
<FONT FACE="Times New Roman" SIZE=3 COLOR=Blue>
<P>Podem criar-se elementos FONT dentro de outros elementos FONT,
<FONT FACE="Verdana" SIZE=4 COLOR=Black>como este exemplo</FONT>
demonstra.
</FONT>
</BODY>
</HTML>

O resultado pode observar-se na imagem seguinte:


Pgina 29

Os elementos BR, STRIKE BIG e SMALL
O elemento BR simplesmente fora uma mudana de linha no ponto em que inserido.

O elemento STRIKE coloca um trao sobre o texto que figura entre o tag inicial e o tag final.

Utiliza-se o elemento BIG para provocar o aumento em uma unidade, do texto enquadrado pelo
seu tag inicial e pelo seu tag final, relativamente ao tamanho do texto que se considera como
base.

Utiliza-se o elemento SMALL para provocar a diminuio em uma unidade, do texto a que se
refere, relativamente ao tamanho do texto que se considera como base.

Exemplo
O cdigo seguinte apresenta um exemplo que ilustra a utilizao dos elementos STRIKE,
BIG e SMALL:

Pgina 30

<HTML>
<HEAD>
<TITLE>Utilizao dos elementos STRIKE, BIG e SMALL
</TITLE>
</HEAD>
<BODY>
<P>
O texto seguinte formatado com o elemento strike.
<STRIKE>Este texto formatado com STRIKE.</STRIKE>
<P>
Demonstrao de efeito do elemento BIG.
<BIG>Este texto formatado com o elemento BIG.</BIG>
</P>
<P>
Demonstrao de efeito do elemento SMALL.
<SMALL>Este texto formatado com o elemento SMALL.</SMALL>
</P>
</BODY>
</HTML>

O efeito resultante da utilizao desses elementos pode ser observado na imagem
seguinte:


Pgina 31
Outros elementos de formatao de texto

O elemento STRONG
Este elemento produz o mesmo efeito visual que o elemento B (negrito). A utilizao deste
elemento ao invs do B pode justificar-se perante uma melhor interpretao do documento que
inclui o cdigo HTML. Pode ser mais fcil perceber qual o objectivo do autor desse documento ao
formatar o texto com este elemento. Por outro lado, e como poder haver pessoas a aceder a
esse documento atravs de qualquer tipo de plataforma, garante-se assim o efeito pretendido.

O elemento TT
A maior parte dos tipos de letras utilizados faz o ajuste automtico da largura dos caracteres
utilizados. Desta forma a letra m, por exemplo, ocupa um espao maior que a letra i.

O texto includo entre os tags do elemento TT vai ser apresentado com um espaamento de
caracteres regular. Todas as letras tm a mesma largura.

Observe o seguinte exemplo e a imagem do ficheiro quando apresentado no Internet Explorer:

<HTML>
<HEAD>
<TITLE>Utilizao do elemento TT</TITLE>
</HEAD>
<BODY>
<P>Este um texto escrito em letra normal.</P>
<TT>
<P>Este pargrafo assume o tipo TeleType criado atravs do elemento TT.</P>
</TT>
</BODY>
</HTML


Pgina 32
O elemento ADDRESS
O elemento ADDRESS pode ser utilizado para que, de modo uniforme, o browser proceda a uma
formatao especial do texto includo entre o seu tag inicial e o seu tag final.

geralmente utilizado para endereos ou identificao. Ao utilizar o elemento ADDRESS, o
criador da pgina no exerce um controlo directo sobre a formatao do texto. Essa formatao
ser automaticamente aplicada pelo browser.

Os elementos BLOCKQUOTE e CITE
O elemento BLOCKQUOTE pode ser utilizado quando se inclui um citao longa de um texto de
determinada fonte.

O elemento CITE geralmente utilizado para referenciar uma publicao, um livro ou um autor.
Cada browser utiliza uma formatao especial para os blocos de texto compreendidos entre os
tags destes elementos.

Exemplo
Observe o cdigo seguinte:

<HTML>
<HEAD>
<TITLE>
Exemplos de utilizao de CITE e BLOCKQUOTE
</TITLE>
</HEAD>
<BODY>
<P>Atente-se no seguinte texto extrado do livro
<CITE>Tecnologias da Internet - da coleco Nova Informtica.</CITE>
<BLOCKQUOTE>Os browsers so programas cliente, isto , programas
atravs dos quais um computador cliente pode explorar recursos na
Internet. Inicialmente, os browsers foram criados tendo
fundamentalmente como objectivo explorar os recursos de servidores
da WWW. Todavia, hoje, eles so programas praticamente universais,
permitindo aceder generalidade dos recursos existentes na Rede.
Para muitas tarefas, as funcionalidades bsicas do browser so
implementadas com programas adicionais, designados por plug-ins e
helper applications.</BLOCKQUOTE>
</BODY>
</HTML>



Pgina 33

Os elementos CODE e VAR
O elemento CODE geralmente utilizado para formatar texto que corresponde a cdigo de uma
qualquer linguagem de programao.

O elemento VAR pode ser utilizado para referir o nome de variveis.

Cada browser aplica uma formatao prpria para o texto formatado com estes elementos.


Pgina 34

Exemplo
Considere, como exemplo, o seguinte cdigo:

<HTML>
<HEAD>
<TITLE>Exemplos de utilizao de CODE e VAR</TITLE>
</HEAD>
<BODY>
<P>Eis as primeiras linhas do cdigo:</P>
<CODE>
int iNumHoras<BR>
int iNumDias<BR>
long TotalHoras
</CODE>
<P>A varivel <VAR>iNumHoras</VAR> guarda o nmero de horas por dia
de trabalho.</P>
</BODY>
</HTML>

O modo como o Internet Explorer efectua a formatao destes elementos apresentado
na figura seguinte:

Os elementos SAMP e KBD
O elemento SAMP frequentemente utilizado para formatar texto que constitui o output do
computador. O elemento KBD usa-se para indicar texto que deve ser digitado atravs do
teclado.


Pgina 35
Exemplo
Apresenta-se um exemplo de cdigo que utiliza os elementos SAMP e KBD:

<HTML>
<HEAD>
<TITLE>Exemplos de utilizao de SAMP e KBD</TITLE>
</HEAD>
<BODY>
<P>Nesta fase o programa ser interrompido para que possa introduzir
o nmero de dias:</P>
<SAMP>Quantos dias?</SAMP>
<P>Pode introduzir um nmero qualquer de dias entre 1 e 31.
Introduza o nmero e prima <KBD>ENTER</KBD></P>
</BODY>
</HTML>

Observe o resultado na imagem seguinte:

O elemento INS
Este elemento indica ao browser que deve formatar o texto no sentido de se perceber que esse
texto foi includo, ou revisto, relativamente ao documento original.

Pgina 36
Exemplo
Observe o seguinte cdigo e a imagem resultante no Internet Explorer:

<HTML>
<HEAD>
<TITLE>Exemplo de utilizao de INS</TITLE>
</HEAD>
<BODY>
<P>Texto j existente ...
<INS>Texto acrescentado ao documento.</INS>
</P>
</BODY>
</HTML>

Os elementos SUP e SUB
O elemento SUP utilizado para colocar caracteres com uma elevao superior linha de texto.
til em frmulas matemticas para apresentar expoentes.

O elemento SUB utiliza-se para formatar o texto num nvel inferior linha. Em frmulas
matemticas til para representar ndices.

Exemplo
O cdigo seguinte apresenta exemplos de utilizao dos elementos SUP e SUB. O efeito
pode ser observado na imagem:

<HTML>
<HEAD>
<TITLE>Exemplo de utilizao de SUP e SUB</TITLE>
</HEAD>
<BODY>
<P>A rea deste elemento 25 mm<SUP>2</SUP>.
</P>
<P>As variveis recebem um ndice: x<SUB>i</SUB>
</P>
</BODY>
</HTML>


Pgina 37

O elemento EM
O elemento EM transmite ao browser instrues para dar nfase a determinado bloco de texto.
Cada browser atribui um formato especial (em regra itlico) aos blocos de texto formatados
atravs do elemento EM.

O elemento DFN
Este elemento, que normalmente tambm apresenta o texto formatado em itlico, indica ao
browser que esse texto uma definio.

O elemento DEL
O elemento DEL indica que determinado bloco de texto foi eliminado.

Exemplo
Apresenta-se um exemplo de utilizao do atributo DEL:

<HTML>
<HEAD>
<TITLE>Exemplo de utilizao de DEL</TITLE>
</HEAD>
<BODY>
<P>Outro texto ...
<DEL>Texto apagado no documento original.</DEL>
</P>
</BODY>
</HTML>

O resultado no Internet Explorer o seguinte:


Pgina 38

O elemento NOBR
O elemento NOBR pode ser utilizado para impedir que o browser efectue uma mudana de linha.
O texto contido entre o tag inicial <NOBR> e o tag final </NOBR> permanecer sempre na
mesma linha. Eventualmente, se a linha for muito longa face largura da janela do browser, o
leitor do documento ter de utilizar a barra de deslocamento horizontal para poder observar
todo o contedo da linha.

Exemplo
Apresenta-se um exemplo de cdigo que utiliza o elemento NOBR para impedir que uma
linha seja cortada, qualquer que seja a dimenso da janela do browser:

<HTML>
<HEAD>
<TITLE>Exemplo de utilizao de NOBR</TITLE>
</HEAD>
<BODY>
<NOBR>Esta linha no pode ser cortada.Esta linha no pode ser
cortada.Esta linha no pode ser Cortada.Esta linha no pode ser
cortada.Esta linha no pode ser Cortada.Esta linha no pode ser
cortada.Esta linha no pode ser cortada.Esta linha no pode ser
cortada.
</NOBR>
</BODY>
</HTML>


Pgina 39
O elemento CENTER
O elemento CENTER, delimitado pelos tags <CENTER> e </CENTER> permite centrar todo o
texto e outros objectos colocados entre o seu tag inicial e o seu tag final.

Exemplo
O cdigo seguinte ilustra a utilizao do elemento CENTER. O resultado pode ser
observado na imagem:

<HTML>
<HEAD>
<TITLE>Elemento CENTER</TITLE>
</HEAD>
<BODY>
<CENTER>
<P>Este um pargrafo aparece centrado na janela devido
influncia do elemento CENTER.
</P>
<P>Este pargrafo aparece igualmente centrado pois est dentro do
domnio de influncia do elemento CENTER.
</P>
</BODY>
</HTML>

Os elementos DIV e SPAN

O elemento DIV
O elemento DIV pode ser utilizado para criar e identificar diferentes seces num documento e
aplicar a essas seces uma formatao especial. O contedo enquadrado entre o tag inicial
<DIV> e o tag final </DIV> pertence a uma mesma seco.

O atributo ID pode ser utilizado para identificar a seco. O atributo ALIGN pode ser utilizado
com os valores CENTER, LEFT e RIGHT para posicionar horizontalmente os elementos da seco.


Pgina 40
Exemplo
O cdigo seguinte cria duas seces distintas num documento. As seces so
identificadas atravs do atributo ID. Em cada seco, o atributo ALIGN define o
alinhamento do contedo da seco. O efeito pode ser observado na imagem:

<HTML>
<HEAD>
<TITLE>Elemento DIV</TITLE>
</HEAD>
<BODY>
<DIV ID=Sec1 ALIGN=CENTER>
<P>Este pargrafo pertence seco definida atravs do elemento DIV
e identificada como Sec1 atravs do atributo ID. O texto do
pargrafo centrado devido ao valor CENTER no atributo ALIGN.
</P>
<P>Este pargrafo pertence igualmente seco Sec1.
</P>
</DIV>
<DIV ID=Sec2 ALIGN=RIGHT>
<P>Este pargrafo pertence seco definida atravs do elemento DIV
e identificada como Sec2 atravs do atributo ID. O texto do
pargrafo alinhado direita devido ao valor RIGHT no atributo
ALIGN.
</P>
<P>Este pargrafo pertence igualmente seco Sec2.
</P>
</DIV>
</BODY>
</HTML>


Pgina 41
O elemento SPAN
O elemento SPAN pode ser utilizado para marcar um determinado contedo dentro de um
pargrafo. Este elemento especialmente utilizado para definir estilos atravs da especificao
CSS (Cascading Style Sheets).

Exemplo
Apresenta-se um exemplo em que o elemento SPAN utilizado para fazer aparecer uma
label do tipo tool tip text quando o rato colocado sobre blocos de texto formatados com o
elemento B. O efeito desse cdigo pode ser observado na imagem:

<HTML>
<HEAD>
<TITLE>Elemento SPAN</TITLE>
</HEAD>
<BODY>
<P>Um sistema computacional composto pelo <SPAN><B>software</B>
</SPAN> e pelo <SPAN TITLE="O hardware o conjunto de todos os
dispositivos fsicos do computador"><B>hardware</B>
</SPAN>.
</P>
</BODY>
</HTML>


Pgina 42
3. Captulo Listas
Parte A - Formatao de listas
As listas em HTML

Listas simples
As listas simples em HTML so blocos constitudos por um conjunto de itens. A lista, e cada um
dos seus itens, so objectos. Cada um desses objectos possui atributos prprios. Esses atributos
podem ser utilizados para formatar a aparncia desses elementos.

Listas ordenadas
Nas listas ordenadas, cada um dos itens da lista ordenado em sequncia. Essa ordenao pode
ser feita atravs de nmeros rabes, de nmeros romanos ou atravs de letras.

Listas no ordenadas
Nas listas no ordenadas, os itens so identificados atravs de smbolos especiais. Todavia esses
smbolos no indicam qualquer ordem sequencial para os vrios itens da lista.

Listas encadeadas
possvel criar listas encadeadas, isto , listas dentro de listas.

Listas de definies
As listas de definies podem ser utilizadas para criar glossrios ou listas de definies de
termos.

Estrutura de listas ordenadas
Uma lista ordenada criada atravs do elemento OL (derivado de ordered list). Esse elemento
definido atravs dos tags <OL> e </OL>. Cada item da lista criado atravs do elemento LI
(list item). O elemento LI definido atravs dos tags <LI> e </LI>.

Exemplo
O cdigo seguinte cria uma lista ordenada. O resultado pode ser observado na imagem:

<HTML>
<HEAD>
<TITLE>Listas ordenadas</TITLE>
</HEAD>
<BODY>
<H2>Word</H2>
<H3>Abrir um ficheiro</H3>
<P>Para abrir um ficheiro pode executar a seguintes sequncia:</P>
<OL>
<LI>Execute um clique no menu Ficheiro</LI>
<LI>Escolha a opo Abrir</LI>
<LI>...</LI>
</OL>
</BODY>
</HTML>


Pgina 43

Definio dos smbolos de ordenao
Para alm do sistema de numerao sequencial atravs de numerao rabe, podem
seleccionar-se outros tipos de ordenao da sequncia.

Para escolher o tipo de ordenao utiliza-se o atributo TYPE. As opes so as seguintes:

Valor do atributo TYPE Tipo de ordenao
1 Numerao sequencial: 1, 2, 3,
a Ordenao em letras minsculas: a, b, c,
A Ordenao em letras maisculas: A, B, C,
i Numerao romana minscula: i, ii, iii,
I Numerao romana maiscula: I, II, III,


Pgina 44
Exemplos
1. O cdigo seguinte gera uma listagem ordenada atravs de letras minsculas:

<HTML>
<HEAD>
<TITLE>Ordenao em letras minsculas</TITLE>
</HEAD>
<BODY>
<H2>Word</H2>
<P>Para abrir um ficheiro pode executar a seguinte sequncia:</P>
<OL TYPE=a>
<LI>...</LI>
</OL>
</BODY>
</HTML>

A imagem seguinte mostra o resultado no browser Internet Explorer:


Pgina 45
2. O cdigo para criar uma lista ordenada atravs de numerao romana minscula
apresentado no cdigo seguinte:

<HTML>
<HEAD>
<TITLE>Numerao romana minscula</TITLE>
</HEAD>
<BODY>
<H2>Word</H2>
<P>Para abrir um ficheiro pode executar a seguintes sequncia:</P>
<OL TYPE=i>
<LI>...</LI>
</OL>
</BODY>
</HTML>

Definio do incio da ordenao
O atributo START do elemento OL permite controlar o nmero ou a letra de ordem iniciais de
uma lista ordenada.


Pgina 46
Exemplo
O cdigo seguinte cria uma lista ordenada atravs de letras maisculas. Ao atributo
START atribudo o valor 3, pelo que a lista comea com a letra C. O resultado do
cdigo pode ser observado na figura imagem:

<HTML>
<HEAD>
<TITLE>Definio do incio da ordenao</TITLE>
</HEAD>
<BODY>
<H4>A lista seguinte ordenada com letras maisculas, mas comea na
letra C</H4>
<OL TYPE=A START=3>
<LI>Este o primeiro item</LI>
<LI>Este o segundo item</LI>
<LI>Este o terceiro item</LI>
</OL>
</BODY>
</HTML


Pgina 47
Parte B - Listas encadeadas e listas de ordenao

Estrutura de listas encadeadas
Os elementos que definem as listas ordenadas e as listas no ordenadas so blocos que podem
conter outras listas. Deste facto decorre que podem ser criadas sub-listas dentro de listas.

Por exemplo, para criar uma sub-lista dentro de uma lista definida pelo elemento OL basta criar
a definio dessa lista entre o tag <OL> e o tag </OL>:

Exemplo
O cdigo seguinte exemplifica a criao de listas encadeadas:

<HTML>
<HEAD>
<TITLE>Listas encadeadas em trs nveis</TITLE>
</HEAD>
<BODY>
<H4>Trs nveis de listas encadeadas</H4>
<UL>
<LI>Primeiro item da lista de primeiro nvel</LI>
<LI>Segundo item da lista de primeiro nvel</LI>
<OL>
<LI>Primeiro item da lista de segundo nvel</LI>
<UL>
<LI>Primeiro item da lista de terceiro nvel</LI>
<LI>Primeiro item da lista de terceiro nvel</LI>
</UL>
<LI>Segundo item da lista de segundo nvel</LI>
</OL>
<LI>Terceiro item da lista de primeiro nvel</LI>
<LI>Quarto item da lista de primeiro nvel</LI>
</UL>
</BODY>
</HTML>



Pgina 48

Estrutura de listas de definio
Numa lista de definio, cada item constitudo por dois elementos: o elemento que apresenta o
termo e o elemento que contm a definio.

A lista criada atravs do elemento DL, definido atravs dos tags <DL> e </DL>.

O termo apresentado atravs do elemento DT, definido pelos tags <DT> e [</DT>].

A definio do termo apresentada atravs do elemento DD, definido pelos tags <DD> e
[</DD>].


Pgina 49
Exemplo
Neste exemplo apresentado o cdigo para a criao de uma lista de definies:

<HTML>
<HEAD>
<TITLE>Listas de definies</TITLE>
</HEAD>
<BODY>
<H3>GLOSSRIO</H4>
<DL>
<DT><B>BIT</B></DT>
<DD>O bit a mais pequena unidade de informao. Com um bit
possvel representar, em cada momento, um de dois estados possveis.
Um bit tem uma materializao fsica e tambm uma representao
lgica. Do ponto de vista lgico, os dois estados de um bit podem
ser representados pelos smbolos 0 e 1.
</DD>
<DT><B>BYTE</B></DT>
<DD>Um byte um conjunto de oito bits. Atravs de um byte
possvel representar 2<SUP>8</SUP>= 256 estados diferentes.
</DD>
</DL>
</BODY>
</HTML>



Pgina 50
4. Captulo - Tabelas
Parte A - Noes fundamentais sobre tabelas
Elementos da estrutura de uma tabela
A criao de tabelas em HTML uma tarefa montona e muito sujeita a erros, quando o autor
no possui uma grande familiaridade com os vrios cdigos utilizados para a criao das tabelas.

Trata-se, por esse motivo, daquele tipo de tarefas para as quais vivamente se recomenda a
utilizao de um editor de pginas HTML capaz de gerar automaticamente o cdigo a partir do
desenho visual da tabela, com recurso s funcionalidades de um processador de texto.

Para esta finalidade pode utilizar-se, por exemplo, o Word que permite grande flexibilidade na
definio das tabelas. A opo Gravar como pgina Web permite criar um ficheiro de texto
com o cdigo necessrio para a tabela.

No entanto, a familiaridade com os comandos que permitem criar uma tabela em HTML pode
revelar-se til em vrias circunstncias, sobretudo quando se pretende ir alm do simples
desenho de pginas, e enveredar pelos domnios da criao de aplicaes que tm por base o
interface constitudo por pginas HTML.

O elemento TABLE
O elemento TABLE definido atravs dos tags <TABLE> e </TABLE>. Estes tags marcam
respectivamente o incio e o fim da definio da tabela. Os atributos deste elemento aplicam-se
a toda a tabela.

O elemento TR
O elemento TR marca o incio e o fim da definio de uma linha da tabela. Os atributos deste
elemento aplicam-se a essa linha da tabela.

O elemento TD
O elemento TD define o contedo de uma clula. Os seus atributos so aplicveis a essa clula.

O elemento TH
Numa tabela podem ser criadas linhas e colunas que adquirem um relevo especial. Para criar
essas clulas especiais utiliza-se o elemento TH, que funciona de forma idntica ao elemento TD.
No entanto, o browser coloca automaticamente em relevo o contedo das clulas definidas
atravs do atributo TH.

O elemento CAPTION
O elemento CAPTION permite criar uma caption para a tabela. Essa caption pode ser alinhada
esquerda, ao centro ou direita. Pode ainda ser colocada no topo ou no fundo da tabela.

Para alinhar a tabela no sentido horizontal, pode utilizar-se o atributo ALIGN com os valores
LEFT, TOP e RIGHT. Para definir se a caption figura no topo ou no fundo da tabela, utiliza-se o
atributo VALIGN com um dos seguintes valores: TOP ou BOTTOM.

Criao de tabelas simples
Vamos apresentar alguns exemplos de criao de tabelas:

Pgina 51
Exemplo
O cdigo seguinte mostra o processo de criao de uma tabela com uma nica linha e
uma nica coluna. Na definio dessa tabela so utilizados os elementos TABLE, TR e
TD. Dentro do elemento TD criado um pargrafo de texto. Esse texto constituiu o
contedo da nica clula da tabela. O atributo BORDER=0 determina a espessura do
border da tabela:

<HTML>
<HEAD>
<TITLE>Tabela</TITLE>
</HEAD>
<BODY>
<P>Tabela com uma s linha e uma s coluna
</P>
<TABLE BORDER=1>
<TD>
<P>Contedo da clula</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

O resultado deste cdigo pode ser observado na imagem seguinte:

Como se pode observar do exemplo anterior, o tamanho da linha foi automaticamente ajustado
ao contedo. Isto deve-se ao facto de no ter sido especificado o atributo que determina a
largura da tabela.

No exemplo seguinte, vai ser apresentado um exemplo igualmente simples. Trata-se de uma
tabela que possui uma s linha, mas com trs colunas. Cada coluna criada atravs do
elemento TD:


Pgina 52
Exemplo
O cdigo seguinte mostra o processo de criao de uma tabela com uma nica linha e
uma nica coluna. Na definio dessa tabela so utilizados os elementos TABLE, TR e
TD. Dentro do elemento TD criado um pargrafo de texto. Esse texto constituiu o
contedo da nica clula da tabela. O atributo BORDER=0 determina a espessura do
border da tabela:

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Tabela com uma s linha e uma s coluna
</P>
<TABLE BORDER=1>
<TR>
<TD>
<P>Primeira coluna</P>
</TD>
<TD>
<P>Segunda coluna</P>
</TD>
<TD>
<P>Terceira coluna</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 53
Vamos em seguida analisar o exemplo de um tabela com trs linhas e trs colunas. Nesta tabela
igualmente includa uma caption na parte inferior direita da tabela:

Exemplo
O cdigo seguinte cria uma tabela com trs linhas e trs colunas, bem como uma caption
na parte inferior direita. Essa caption criada atravs do elemento CAPTION:

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Tabela com trs linhas e trs colunas
</P>
<TABLE BORDER=1>
<CAPTION VALIGN=BOTTOM ALIGN=RIGHT>Caption da tabela
</CAPTION>

<TR>
<TD>
<P>Primeira linha-Primeira coluna</P>
</TD>
<TD>
<P>Primeira linha-Segunda coluna</P>
</TD>
<TD>
<P>Primeira linha-Terceira coluna</P>
</TD>
</TR>

<TR>
<TD>
<P>Segunda linha-Primeira coluna</P>
</TD>
<TD>
<P>Segunda linha-Segunda coluna</P>
</TD>
<TD>
<P>Segunda linha-Terceira coluna</P>
</TD>
</TR>

<TR>
<TD>
<P>Terceira linha-Primeira coluna</P>
</TD>
<TD>
<P>Terceira linha-Segunda coluna</P>
</TD>
<TD>
<P>Terceira linha-Terceira coluna</P>
</TD>
</TR>

</TABLE>
</BODY>
</HTML>



Pgina 54

O exemplo seguinte utiliza o elemento TH que funciona como header das colunas:

Exemplo
No cdigo seguinte utilizado o elemento TH par colocar um header em cada uma das
colunas da tabela:

Pgina 55

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Tabela</P>
<TABLE BORDER=1>
<TR>
<TH>
<P>Ano</P>
</TH>
<TH>
<P>Vendas Produto A</P>
</TH>
<TH>
<P>Vendas Produto B</P>
</TH>
</TR>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
<TR>
<TD>
<P>2000</P>
</TD>
<TD>
<P>200000</P>
</TD>
<TD>
<P>300000</P>
</TD>
</TR>
<TR>
<TD>
<P>2001</P>
</TD>
<TD>
<P>300000</P>
</TD>
<TD>
<P>400000</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 56

Os elementos THEAD, TFOOT e TBODY
Uma tabela pode ser estruturada atravs dos elementos THEAD, TFOOT e TBODY.

Os elementos THEAD e TFOOT definem as linhas de cabealho e de fim de toda a tabela ou de
uma parte da tabela. Quando os elementos THEAD e TFOOT so utilizados, as outras linhas da
tabela devem ser enquadradas atravs do elemento TBODY.

A estrutura bsica de uma tabela que utilize os elementos THEAD e TFOOT pode ser apresentada
atravs do seguinte esquema:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1 >
<THEAD>
<TR>
<TH>[contedo]</TH>
<TH>[contedo]</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
<TH>[contedo]</TH>
<TH>[contedo]</TH>
</TR>
</TFOOT>
<TBODY>
<TR>
<TD>[contedo]</TD>
<TD>[contedo]</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Pgina 57

No exemplo seguinte, apresentado o cdigo com um exemplo de criao de uma tabela com
uma estrutura simples de THEAD, TFOOT e TBODY:

Exemplo
Neste exemplo so utilizados os elementos THEAD, TFOOT e TBODY:

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Tabela</P>
<TABLE BORDER=1>
<THEAD>
<TR>
<TH>
<P>Ano</P>
</TH>
<TH>
<P>Vendas Produto A</P>
</TH>
<TH>
<P>Vendas Produto B</P>
</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
<TH>
<P>---</P>
</TH>
<TH>
<P>Vendas anuais</P>
</TH>
<TH>
<P>Vendas anuais</P>
</TH>
</TR>
</TFOOT>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
<TR>
<TD>
<P>2000</P>
</TD>
<TD>
<P>200000</P>
</TD>
<TD>
<P>300000</P>
</TD>
</TR>
<TR>

Pgina 58
<TD>
<P>2001</P>
</TD>
<TD>
<P>300000</P>
</TD>
<TD>
<P>400000</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

O efeito produzido por esse cdigo apresentado na figura seguinte:


Pgina 59
Parte B - Atributos de tabelas e clulas
Atributos do elemento TABLE

O atributo ALIGN
O atributo ALIGN pode ser utilizado para definir o tipo de alinhamento da tabela na janela do
browser. Os valores possveis para este atributo so os seguintes: CENTER, LEFT e RIGHT.

Exemplo
Neste exemplo utilizado o atributo ALIGN com o valor RIGHT:

<HTML>
<HEAD>
<TITLE>Atributo ALIGN de tabelas</TITLE>
</HEAD>
<BODY>
<H3>Tabela alinhada direita</H3>
<TABLE ALIGN=RIGHT BORDER=1>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 60
O atributo BORDER
O atributo BORDER especifica o tamanho da linha que utilizada para delimitar a tabela.

Exemplo
Neste exemplo vamos criar uma pequena tabela atribuindo o valor 5 ao atributo
BORDER:

<HTML>
<HEAD>
<TITLE>Atributo BORDER de tabelas</TITLE>
</HEAD>
<BODY>
<H3>Tabela com border</H3>
<TABLE BORDER=5>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


O atributo CELLPADDING
O atributo CELLPADDING determina o espao que colocado entre o limite da clula e o seu
contedo.

Pgina 61
Para que se possa observar o efeito deste atributo, o exemplo seguinte apresenta o cdigo em
que so criadas duas tabelas, com diferentes valores para o atributo CELLPADDING:

Exemplo
Neste exemplo so utilizados diferentes valores para o atributo CELLPADDING:

<HTML>
<HEAD>
<TITLE>Atributo CELLPADDING de tabelas</TITLE>
</HEAD>
<BODY>
<H3>Diferentes valores de CELLPADDING</H3>
<TABLE BORDER=1 CELLPADDING=1>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
</TABLE>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 62
O atributo CELLSPACING
O atributo CELLSPACING define o espao entre as clulas de uma tabela.

Exemplo
Neste exemplo vamos apresentar duas tabelas com diferentes valores para o atributo
CELLSPACING:

<HTML>
<HEAD>
<TITLE>Atributo CELLSPACING de tabelas</TITLE>
</HEAD>
<BODY>
<H3>Diferentes valores de CELLSPACING</H3>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
</TABLE>
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>
<P>1999</P>
</TD>
<TD>
<P>100000</P>
</TD>
<TD>
<P>200000</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 63
O atributo FRAME
O atributo FRAME utilizado para definir quais os borders externos da janela que sero
apresentados no browser.

Apresenta-se uma breve descrio do significado de alguns dos valores possveis para o atributo
FRAME, acompanhada de um exemplo visual do seu efeito sobre uma tabela com uma s linha e
uma s coluna. A existncia de uma s linha e uma s coluna para a tabela que vai servir de
exemplo, justifica-se para que mais facilmente se compreenda o efeito produzido por cada um
dos valores do atributo FRAME.

A imagem dessa tabela apresentada em seguida. Essa tabela definida com o atributo
BORDER igual a 1:

a) O valor ABOVE
O valor ABOVE apresenta um border no topo da tabela. Exemplifica-se com o valor
FRAME=ABOVE:

<HTML>
<HEAD>
<TITLE>Atributo FRAME</TITLE>
</HEAD>
<BODY>
<H3>FRAME=ABOVE</H3>
<TABLE BORDER=1 FRAME=ABOVE>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 64

b) O valor BELOW
O valor BELOW apresenta o border na parte inferior da tabela. Apresenta-se um exemplo:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=BELOW</H3>
<TABLE BORDER=1 FRAME=BELOW>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Observe o efeito na imagem seguinte:


Pgina 65
c) O valor BORDER
O valor BORDER assumido por defeito. Apresenta um border em todas as extremidades da
tabela. O valor FRAME=BORDER produz o efeito apresentado no cdigo e na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=BORDER</H3>
<TABLE BORDER=1 FRAME=BORDER>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

d) O valor HSIDES
O valor HSIDES apresenta um border horizontal no topo e no fundo da tabela. O efeito
produzido pelo valor FRAME=HSIDES mostrado no cdigo e na figura seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=HSIDES</H3>
<TABLE BORDER=1 FRAME=HSIDES>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Pgina 66

e) O valor VSIDES
O valor VSIDES apresenta um border nas duas extremidades verticais da tabela. O efeito
apresentado no cdigo e figura seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=VSIDES</H3>
<TABLE BORDER=1 FRAME=VSIDES>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 67

f) O valor LHS
O valor LHS apresenta um border no lado esquerdo da tabela. O efeito resultante de
FRAME=LHS apresentado atravs do cdigo e da figura seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=LHS</H3>
<TABLE BORDER=1 FRAME=LHS>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

g) O valor RHS
O valor RHS apresenta um border do lado direito da tabela. O efeito deste valor para o atributo
FRAME mostrado no cdigo e na imagem seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=RHS</H3>
<TABLE BORDER=1 FRAME=RHS>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Pgina 68

h) O valor VOID
O valor VOID remove todos os borders exteriores da tabela. O efeito produzido por este valor
apresentado no cdigo e na imagem seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>FRAME=VOID</H3>
<TABLE BORDER=1 FRAME=VOID>
<TR>
<TD>
<P>Exemplo</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 69
O atributo RULES
O atributo RULES serve para especificar o tipo de linhas que sero utilizadas no interior da
tabela.

Apresentam-se alguns dos valores que esse atributo pode assumir. Para que se possa
compreender bem o efeito de cada um dos valores deste atributo, vai tomar-se como exemplo
uma tabela com trs linhas e trs colunas. Nessa tabela, o atributo BORDER igual a 1 e o
atributo FRAMES igual a BORDER. Ou seja: a tabela apresenta todos os seus borders externos.
A partir daqui, pode observar-se o efeito produzido por cada um dos valores do atributo RULES.

Na imagem seguinte apresentada a imagem da tabela sem o atributo RULES:

a) O valor ALL
O valor ALL determina que sejam aplicados borders separadores horizontais e verticais. Quando
este valor utilizado a tabela apresenta separadores em todas as suas linhas e colunas.

O cdigo e a figura seguintes mostram o efeito deste valor:


Pgina 70
<HTML>
<HEAD>
<TITLE>Atributo RULES</TITLE>
</HEAD>
<BODY>
<H3>RULES=ALL</H3>
<TABLE BORDER=1 RULES=ALL>
<TR>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 71
b) O valor ROWS
O valor ROWS aplica borders horizontais entre as vrias linhas da tabela. O efeito deste valor
apresentado no cdigo e na figura seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>RULES=ROWS</H3>
<TABLE BORDER=1 RULES=ROWS>
<TR>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 72
c) O valor COLS
O valor COLS aplica borders verticais entre as vrias colunas da tabela. O efeito deste valor
apresentado no cdigo e na figura seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>RULES=COLS</H3>
<TABLE BORDER=1 RULES=COLS>
<TR>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 73
d) O valor NONE
O valor NONE desactiva todos os borders internos da tabela. O efeito deste valor pode ser
observado no cdigo e na figura seguintes:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>RULES=NONE</H3>
<TABLE BORDER=1 RULES=NONE>
<TR>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 74
Os atributos HEIGHT e WIDTH
Os atributos HEIGHT e WIDTH podem ser utilizados para determinar, respectivamente, a altura
e a largura de uma tabela. Os valores destes atributos podem ser fixados em pixels ou em
percentagem.

Exemplo
Este exemplo apresenta o cdigo para a criao de uma tabela com a atribuio de
valores absolutos aos atributos HEIGHT e WIDTH:

<HTML>
<HEAD>
<TITLE>Atributos HEIGHT e WIDTH</TITLE>
</HEAD>
<BODY>
<H3>HEIGHT=50, WIDTH=200</H3>
<TABLE BORDER=1 HEIGHT=50 WIDTH=200>
<TR>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Pgina 75
Atributos do elemento TR
O atributo ALIGN
O atributo ALIGN define o alinhamento do contedo da linha. Pode assumir um dos seguintes
valores: CENTER, LEFT e RIGHT.

Exemplo
Neste exemplo apresentado o cdigo para a criao de uma tabela em que o contedo
da primeira linha centrado e o contedo da segunda alinhado direita:

<HTML>
<HEAD>
<TITLE>Atributo ALIGN de TR</TITLE>
</HEAD>
<BODY>
<TR ALIGN=CENTER>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR ALIGN=RIGHT>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
O resultado deste cdigo apresentado na imagem seguinte:


Pgina 76
O atributo BGCOLOR
O atributo BGCOLOR define a cor de fundo da linha da tabela.

O atributo BORDERCOLOR
O atributo BORDERCOLOR define a cor do border do elemento.

Exemplo
Neste exemplo so utilizadas diferentes cores para os atributos BGCOLOR e
BORDERCOLOR:

<HTML>
<HEAD>
<TITLE>Atributo BORDERCOLOR</TITLE>
</HEAD>
<BODY>
<TR BGCOLOR=RED BORDERCOLOR=Yellow>
<TD>
<P>A</P>
</TD>
<TD>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TR BGCOLOR="#FFFF00" BORDERCOLOR=BLACK>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Na imagem seguinte pode observar o resultado:


Pgina 77

Neste caso so utilizados nomes de cores aceites pelo atributo. No entanto, para uma
mais perfeita definio da cor, deve usar-se a notao RGB (Red, Green, Blue). Cada cor
pode assumir valores de 0 a 255. Os valores devem exprimir-se em hexadecimal. Por
exemplo, a cor amarela, que resulta da juno de cem por cento de Red e Green,
definida assim "#FFFF00".

Note-se que FF em hexadecimal corresponde a 255 em decimal. importante no
esquecer igualmente o smbolo # antes da sequncia de nmeros em hexadecimal. Este
tipo de definio de cor utilizada para definir como amarelo a cor de fundo da segunda
linha da tabela.

Atributos do elemento TD
O atributo ALIGN
O atributo ALIGN do elemento TR permite definir o alinhamento geral para as vrias clulas da
linha. O atributo ALIGN do elemento TD permite definir individualmente o alinhamento em cada
clula.

Exemplo
O exemplo apresentado no cdigo seguinte permite verificar que o alinhamento definido
ao nvel de cada clula se sobrepe ao alinhamento definido ao nvel da linha:

<HTML>
<HEAD>
<TITLE>Atributo ALIGN de TR</TITLE>
</HEAD>
<BODY>
<TR ALIGN=CENTER>
<TD ALIGN=RIGHT>
<P>A</P>
</TD>
<TD ALIGN=LEFT>
<P>B</P>
</TD>
<TD>
<P>A</P>
</TD>
</TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 78

O atributo COLSPAN
O atributo COLSPAN determina o nmero de colunas que uma clula ocupa.

Exemplo
Neste exemplo utilizado o atributo COLSPAN:

<HTML>
<HEAD>
<TITLE>Atributo COLSPAN</TITLE>
</HEAD>
<BODY>
<TR ALIGN=CENTER>
<TD COLSPAN=2>
<P>A</P>
</TD>
<TD ALIGN=LEFT>
<P>B</P>
</TD>
</TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 79

O atributo ROWSPAN
O atributo ROWSPAN utilizado para definir o nmero de linhas que uma determinada clula
ocupa.

Exemplo
Neste exemplo, utilizado o atributo ROWSPAN:

<HTML>
<HEAD>
<TITLE>Atributo ROWSPAN</TITLE>
</HEAD>
<BODY>
<TR ALIGN=CENTER>
<TD COLSPAN=2>
<P>A</P>
</TD>
<TD ALIGN=LEFT>
<P>B</P>
</TD>
</TR>
<TD>
<P>D</P>
</TD>
<TD>
<P>E</P>
</TD>
<TD>
<P>F</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 80

Criao de grupos de colunas
Os elementos COLGROUP e COL
Os elementos COLGROUP e COL podem ser utilizados conjugadamente para criar grupos de
colunas com atributos especficos.

O elemento COLGROUP define um conjunto de colunas. O atributo SPAN permite definir o
nmero de colunas do grupo. Quando esse atributo omitido, o nmero de colunas
considerado igual a 1. O atributo WIDTH define a largura da coluna. O atributo ALIGN determina
o alinhamento do contedo dentro de cada clula do grupo.

Exemplo
Este exemplo apresenta o cdigo em que utilizado o elemento COLGROUP para definir
dois grupos de colunas de uma tabela.

O primeiro grupo corresponde s primeiras seis colunas da tabela (atributo SPAN=6). O
segundo grupo compreende as quatro colunas seguintes. No primeiro grupo, o atributo
WIDTH igual a 10. No segundo, igual 80. Ainda no segundo grupo, o atributo ALIGN
colocado com o valor CENTER:


Pgina 81
<HTML>
<HEAD>
<TITLE>COLSGROUP</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<COLGROUP SPAN=6 WIDTH=10></COLGROUP>
<COLGROUP SPAN=4 WIDTH=80></COLGROUP>
<TR>
<TD>1.1</TD>
<TD>1.2</TD>
<TD>1.3</TD>
<TD>1.4</TD>
<TD>1.5</TD>
<TD>1.6</TD>
<TD>1.7</TD>
<TD>1.8</TD>
<TD>1.9</TD>
<TD>1.10</TD>
</TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD>
<TD>2.3</TD>
<TD>2.4</TD>
<TD>2.5</TD>
<TD>2.6</TD>
<TD>2.7</TD>
<TD>2.8</TD>
<TD>2.9</TD>
<TD>2.10</TD>
</TR>
</TABLE>
</BODY>
</HTML>

O resultado pode ser observado na imagem seguinte.


Pgina 82
O elemento COL pode ser utilizado em conjugao com o elemento COLGROUP para definir
formatao especfica para colunas do grupo. A formatao definida no elemento COLGROUP
aplicvel, em princpio a todas as colunas do grupo, excepto se essa formatao for alterada
pela formatao definida ao nvel de cada elemento COL.

Exemplo
Neste exemplo definido um conjunto de seis colunas atravs do elemento COLGROUP.
Dentro desse elemento so colocados elementos COL.

O primeiro elemento COL, atravs do atributo SPAN define uma formatao especfica
para as duas primeiras colunas (SPAN=2). Essa formatao especfica define uma
largura de 200 (WIDTH=200) e um alinhamento direita (ALIGN=right). O segundo
elemento COL define uma formatao especfica para as trs colunas seguintes
(SPAN=3). O atributo WIDTH passa a ser 100 e o atributo ALIGN passa a ser CENTER.
Desta forma, os atributos das primeiras cinco colunas passam a ser definidos atravs dos
elementos COL. A sexta coluna mantm os atributos definidos atravs do elemento
COLGROUP:

<HTML>
<HEAD>
<TITLE>COLSGROUP</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<COLGROUP SPAN=6 WIDTH=10>
<COL SPAN=2 WIDTH=200 ALIGN=RIGHT>
<COL SPAN=3 WIDTH=100 ALIGN=CENTER>
</COLGROUP>
<TR>
<TD>1.1</TD>
<TD>1.2</TD>
<TD>1.3</TD>
<TD>1.4</TD>
<TD>1.5</TD>
<TD>1.6</TD>
<TD>1.7</TD>
<TD>1.8</TD>
<TD>1.9</TD>
<TD>1.10</TD>
</TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD>
<TD>2.3</TD>
<TD>2.4</TD>
<TD>2.5</TD>
<TD>2.6</TD>
<TD>2.7</TD>
<TD>2.8</TD>
<TD>2.9</TD>
<TD>2.10</TD>
</TR>
</TABLE>
</BODY>
</HTML>



Pgina 83


Pgina 84

5. Captulo - Hiperlinks
Parte A - Hipertexto e endereos
Hipertexto e Hipermdia
A sigla HTML deriva de Hyper Text Markup Language. A palavra chave, neste caso, hipertexto.
O que d a um documento HTML a caracterstica de hipertexto a existncia de links. Esses
links estabelecem a ligao entre elementos de uma pgina com elementos dessa mesma pgina
ou de outras pginas, situadas no mesmo servidor ou em servidores distintos.

O sistema de hiperlink funciona como, a seguir, sumariamente se descreve:

Ao criar uma pgina, o autor decide que determinado elemento (uma palavra, uma frase, uma
imagem) deve permitir o acesso a um outro recurso. Para esse efeito cria um hiperlink nesse
elemento. Esse elemento passa a ser a ori gem de um link.

O destino de um link pode ser:

n Uma seco dentro do mesmo documento.
n Uma outra pgina, localizada no mesmo servidor.
n Uma pgina localizada em qualquer servidor Web, em qualquer parte do mundo.

Cada recurso na Web identificado por um endereo. Esse endereo designado pela sigla URL
(de Uniform Resource Locator). Do ponto de vista de um utilizador cujo computador se encontra
ligado Internet, a Web pode ser vista como um conjunto de recursos (documentos de texto,
documentos multimdia, programas) que tanto podem estar disponveis no computador local
com num dos milhares de servidores espalhados pelo mundo. Qualquer que seja a localizao
fsica do recurso, o seu endereo identificado por um URL.

O termo hipertexto foi inicialmente utilizado quando os links eram criados ent re documentos de
texto. Uma palavra ou uma frase constituam a origem de um link que conduzia a um outro
documento de texto.

Actualmente, o conceito de hiperlink mais vasto. A origem e o destino de um hiperlink tanto
pode ser texto como praticamente qualquer elemento multimdia. Por exemplo, uma imagem
num documento pode constituir a origem de um link que conduz a uma sequncia de animao
multimdia.

Por essa razo, o termo hipertexto comea a ser substitudo por um termo de significao mais
ampla: o termo hipermdia.

URL
Cada recurso existente na Internet referenciado por um URL - Uniform Resource Locator. Esse
URL constitui o endereo desse recurso.

O recurso referenciado por um URL , em regra um ficheiro. Esse ficheiro encontra-se
armazenado num determinado directrio de um disco, instalado num computador que funciona
como servidor.

Pode todavia dar-se a circunstncia de o URL apontar, no para um ficheiro mas sim para uma
determinada seco dentro de um ficheiro. Para que isso possa acontecer, necessrio que o
ficheiro de destino contenha seces identificveis e s quais o URL possa fazer referncia.

Pgina 85
A estrutura de um URL
A estrutura de um endereo URL constituda por vrias partes. Por exemplo, os URL utilizados
para aceder a pginas na World Wide Web possuem uma estrutura que obedece ao seguinte
esquema geral:

protocolo://localizao do servidor/Localizao do recurso no servidor

Os vrios componentes de um URL so apresentados em seguida, atravs de uma breve
descrio:

a) Protocolo
Num endereo URL, um protocolo designa o tipo de protocolo utilizado para a comunicao.

Na Internet so utilizados vrios protocolos. Apresenta-se adiante uma breve descrio dos
principais protocolos utilizados para a comunicao entre clientes e servidores na Internet.

Http
O protocolo HTTP utilizado para aceder a servidores Web. Esses servidores contm pginas
HTML que podem ser acedidas atravs de um browser. O protocolo utilizado nessa transferncia
o Hiper Text Transport Protocol, abreviadamente designado pela sigla HTTP. O URL
apresentado em seguida utiliza o protocolo http para aceder ao servidor abc.com:

http://abc.com

Como se pode observar no exemplo anterior, o nome do protocolo seguido de : e de //.

Ftp
A sigla ftp deriva de File Transfer Protocol. Trata-se de um protocolo utilizado para transferir
ficheiros de um computador para outro na Internet.

O exemplo seguinte mostra o URL do ficheiro def.exe, ficheiro esse que se encontra no servidor
abc.com. Esse servidor um servidor ftp que recebe pedidos de um cliente para o download de
ficheiros:

ftp://abc.com/def.exe

Quando se pretende aceder a um ficheiro especfico pode ser necessrio incluir, alm do nome
do ficheiro, o path (caminho) para esse ficheiro na hierarquia de directri os do servidor.

Quando se acede a um servidor ftp pode ainda ser necessrio fornecer uma password mas, na
maioria dos casos, os servidores ftp so aquilo que se designa por anonymous. Esto abertos a
todos. frequente que, em vez de uma password especfica, o utilizador digite apenas o seu
endereo de correio electrnico.

Mailto
Um URL do tipo mailto geralmente utilizado para activar um programa de correio electrnico.
O formato genrico desse URL o seguinte:

mailto:endereo_de_correio?Subject=Assunto

Note-se que, neste caso, no so utilizadas as barras // depois dos dois pontos :.

A ttulo de exemplo pode considerar-se o seguinte URL:

mailto:rita@mail.telepac.pt?Subject=Assunto Principal

Pgina 86

File
Para aceder a documentos que se encontram no disco do computador local ou no disco de um
computador de uma rede pode utilizar-se a seguinte estrutura para o URL:

file://computador/caminho/ficheiro

b) Localizao do servidor
Cada servidor na Internet possui um endereo que o identifica. Esse endereo uma sequncia
numrica e designa-se por endereo IP.

Todavia, na prtica, e ao nvel daquilo que em geral visvel para o utilizador, utilizam-se
nomes que podem ter significado para o utilizador. Por exemplo, o servidor da Microsoft, ao qual
est atribudo um endereo numrico IP, designado por microsoft.com.

Esta designao torna-se muito mais facilmente perceptvel do que uma sequncia de nmeros
cujo significado apenas pode ser interpretado pelos computadores.

Os nomes atribudos aos servidores baseiam-se num sistema hierrquico designado por Domain
Name System. No topo da hierarquia existem dois tipos de domnios: genricos e pases.

Os domnios genricos definem grupos de organizaes e so identificados pelos seguintes
conjuntos de trs letras:

int - Organizaes internacionais
com - Empresas
edu - Instituies de ensino
gov - Instituies do governo do Estados Unidos
mil - Foras Armadas dos Estados Unidos
org - Organizaes sem finalidades lucrativas
net - Fornecedores de servios de rede

Os pases so identificados por letras que sugerem o nome do pas. Por exemplo us (Estados
Unidos), jp ( Japo), pt (Portugal).

Nos Estados Unidos, praticamente todas as organizaes esto localizadas dentro de um dos
domnios genricos. Noutros pases, em geral, o endereo dos servidores das organizaes fica
sob o domnio genrico que identifica o pas.

Por exemplo, microsoft.com identifica uma organizao comercial. Do mesmo modo, telepac.pt
identifica uma organizao em Portugal. A partir dos domnios de topo, a estrutura pode
desenvolver-se, em obedincia ao seguinte princpio: dentro de cada domnio, a atribuio de
nomes deve garantir a unicidade.

Por exemplo, no mesmo domnio .com no podero existir dois domnios iguais. No possvel
que existam dois domnios designados por abc.com.

Todavia, possvel criar, dentro de abc.com, um subdomnio designado por def. O domnio def
seria, neste caso, um subdomnio de abc que, por sua vez, um subdomnio de com.

A referncia a esse subdomnio seria feita do seguinte modo:

def.abc.com


Pgina 87
Assim, perfeitamente possvel criar os seguintes domnios, sem risco de ambiguidade:

def.abc.com
ghi.abc.com

Ou, ainda, para apresentar outros exemplos:

xyz.abc.com
xyz.def.com
xyz.abc.com
xyz.abc.edu

c) Localizao do recurso no servidor
Num servidor, os recursos esto geralmente armazenados em ficheiros, numa estrutura de
directrios. Para localizar um recurso, necessrio indicar o caminho (path) para esse ficheiro.

Considere-se o seguinte exemplo. O ficheiro xyz.html reside no servidor companhiax.com. Nesse
servidor, o ficheiro est localizado no directrio ghi. Este directrio, por sua vez, um
subdirectrio de def. O directrio def um subdirectrio de abc. A indicao do domnio e do
caminho para este ficheiro ser feita do seguinte modo:

companhiax.com/abc/def/ghi/xyz.html

Um ficheiro pode conter bookmarks ou seja, marcas que identificam diferentes seces de um
documento. Se o destino for uma determinada seco de um documento, possvel incluir o
bookmark dessa seco no endereo. Quando o bookmark indicado, o contedo do ficheiro
apresentado na seco referenciada pelo bookmark.

A ttulo de exemplo, admitamos que o ficheiro xyz.html possui um bookmark designado por
tpico5. Esse bookmark define o incio de uma determinada seco do documento. Para que o
destino do hiperlink seja o incio dessa seco, o caminho para o ficheiro pode incluir o nome do
bookmark, precedido do smbolo #, como se mostra em seguida:

companhiax.com/abc/def/ghi/xyz.html#tpico5

Endereos absolutos e relativos
Num hiperlink podem utilizar-se endereos absolutos e endereos relativos. Um endereo
absoluto constitudo pelo endereo completo do recurso. Um endereo relativo um endereo
parcial que toma por base o endereo do documento em que est inserido.

Para que se compreenda bem a diferena entre um endereo absoluto e um endereo relativo,
imagine-se a seguinte situao.

Um determinado documento possui o seguinte URL:

http://abc.com/curso/pagina1.html

Admita que neste documento se encontra um link para o documento pagina2.html e que este
documento se encontra armazenado no mesmo servidor e na mesma directoria. Se for utilizado
um URL absoluto, esse URL dever ser escrito da seguinte forma:


Se for utilizado um endereo relativo, basta indicar o nome do segundo documento:

pagina2.html

Pgina 88
O browser identificar esse endereo como um endereo relativo e construir o endereo
da pgina da seguinte forma:

1. Considera que a parte inicial do endereo constituda pelo contedo do
endereo do documento em que o link se encontra, at ao ltimo smbolo /
encontrado.

Por exemplo, no caso anterior, a parte inicial do novo endereo ser a
seguinte:

http://abc.com/curso/

2. O endereo completado com o endereo relativo ou parcial includo no link.

Neste exemplo: pagina2.html. O endereo final resulta da concatenao
desses dois componentes e tem como resultado:



Pgina 89
Parte B - Hiperligaes
Origem de Links

O elemento A
Uma das razes que motivaram a grande popularidade dos documentos HTML tem um nome:
hipertexto. Sumariamente, hipertexto significa a possibilidade de criar links entre recursos.

No sentido restrito, hipertexto significa ligao entre diferentes recursos de texto. A origem da
ligao um texto (uma letra, uma palavra, uma frase) e o destino um documento ou uma
seco de um documento.

No sentido mais amplo, o termo hipertexto pode ser substitudo pelo termo hipermdia. O termo
hipermdia justifica-se porque a origem do link pode ser um elemento grfico e o destino pode
igualmente ser uma imagem, um programa ou qualquer outro recurso multimdia.

O elemento A, com o tag inicial <A> e com o tag final </A>, deriva de anchor e pode ser
utilizado para marcar a origem de um link.

O atributo HREF
Quando o elemento A utilizado como origem de um link, o atributo HREF utilizado para
especificar o destino desse link.

A utilizao mais frequente do elemento A como origem de um link consiste na ligao entre um
elemento de texto num documento com outro elemento de texto.

O processo atravs do qual o utilizador da pgina pode activar o link consiste em executar um
clique sobre a origem do link. O texto que constitui a origem do link aparece em regra
sublinhado e numa cor diferente.

todavia possvel associar combinaes de teclas para activar um link. Nesse caso, em vez de
executar um clique sobre a origem do link, o utilizador pode executar a combinao de teclas
definida. Para associar uma combinao de teclas a um link, utiliza-se o atributo ACCESSKEY.

Links com origem em texto
Apresenta-se em seguida um exemplo de utilizao de um link ligando uma frase de um
documento a um outro documento. Neste exemplo, utilizado um URL absoluto para referenciar
o destino do link:

<HTML>
<HEAD>
</HEAD>
<BODY>
Para obter mais informaes sobre este produto, visite <A
HREF=http://www.microsoft.com> o site da Microsoft</A>
</BODY>
</HTML>

Na imagem seguinte, pode observar-se na janela do browser a pgina que constitui o destino do
link:


Pgina 90

Links com origem em imagens
A origem de um link pode ser uma imagem. O cdigo seguinte mostra um exemplo em que o
elemento A utilizado para criar um link com origem numa imagem.

possvel criar um link em que a origem seja uma imagem e um texto. Um exemplo deste tipo
de link apresentado em seguida:

<HTML>
<HEAD>
</HEAD>
<BODY>
Se quiser saber as especificaes do computador clique na imagem
seguinte.</P>
<A HREF="documento1.html"><IMG SRC=mycomp.bmp></A>
</BODY>
</HTML>

O resultado pode ser observado na imagem seguinte.


Pgina 91
Nota
Para experimentar este exemplo deve ter uma imagem na mesma pasta onde se encontra o
ficheiro .htm. Para alm disso, igualmente necessrio (para que o link funcione) que exista
igualmente no mesmo directrio o ficheiro documento1.html que o ficheiro de destino do
link. Tratando-se de um exemplo, recomenda-se que recrie este exemplo em qualquer pasta
do seu computador.

O elemento BASE e os elementos relativos
O elemento BASE pode ser colocado no cabealho do documento para especificar o endereo
base a partir do qual todos os endereos relativos utilizados nesse documento sero derivados.

O exemplo seguinte utiliza o elemento BASE no cabealho de um documento. Os endereos
relativos desse documento sero criados a partir desse endereo base.

<HTML>
<HEAD>
<BASE href=D:\HTML\></BASE>
</HEAD>
<BODY>
Se quiser saber as especificaes do meu computador <A
HREF=documento1.html> <IMG SRC=mycomp.gif></A> clique na imagem.
</BODY>
</HTML>

Criar links dentro do mesmo documento

Criar seces num documento como destinos de links
O elemento A pode ser utilizado para marcar uma seco dentro de um documento. O nome que
identifica a seco definido atravs do atributo NAME do elemento A. O ponto onde colocado
esse elemento, marca o incio da seco.

Esse procedimento permite estruturar um documento longo em seces e cada uma dessas
seces pode ser destino de um link.

Quando for feita uma referncia a essa seco num link, o browser apresenta o documento
comeando no texto dessa seco.

Para marcar o incio de uma seco de um documento utiliza-se o elemento A e o atributo NAME.
O cdigo seguinte mostra a criao de uma hipottica seco designada por seco1, dentro de
um documento:

<A NAME=seco1">

Links dentro de um mesmo documento
O exemplo apresentado em seguida ilustra o processo de utilizao da tcnica que consiste em
manter num mesmo documento vrios links que apontam para seces distintas dentro do
prprio documento. O efeito produzido por esse cdigo pode ser visualizado em seguida:


Pgina 92

<HTML>
<HEAD>
<TITLE>Sistema operativo Windows XP</TITLE>
</HEAD>
<BODY>
<H1>Windows XP</H1>
<P> <A HREF="#Captulo1">Captulo 1 - Introduo ao Windows XP</A></P>
<P> <A HREF="#Captulo2">Captulo 2 - O Ambiente de trabalho</A></P>
<HR>
<B><A NAME="Captulo1">Captulo 1 - Introduo ao Windows XP</A></B>
<P>Texto do captulo 1 ....
<HR>
<B><A NAME="Captulo2">Captulo 2 - O Ambiente de trabalho</A></B>
<P>Texto do captulo 2 ....
</BODY>
</HTML>

Quando se pretende referenciar, no um documento, mas uma seco dentro de um documento,
deve colocar-se o nome da seco precedido do smbolo #, imediatamente a seguir ao nome do
ficheiro, no URL de destino do link.

Por exemplo, para referenciar a seco3 do ficheiro apresentao.html no servidor
companhiax.com, pode utilizar-se o seguinte URL:

http://www.companhiax.com/apresentao.html#seco3

Pgina 93
6. Captulo - Multimdia e hipermdia
Parte A - Imagens
O elemento IMG

O elemento IMG
A colocao de imagens no corpo de um documento HTML pode ser conseguida atravs do
elemento IMG.

Este elemento pode igualmente ser utilizado para incluir sequncias de vdeo, quando se utiliza o
browser Internet Explorer.

O elemento IMG no possui tag de finalizao.

Atributo do elemento IMG

O atributo SRC
A identificao da imagem feita atravs do atributo SRC. Este atributo especifica o URL da
imagem a apresentar.

Nota
Para experimentar este exemplo deve ter uma imagem na mesma pasta onde se encontra o
ficheiro .htm.

Apresenta-se de seguida o cdigo de um documento em que utilizado o elemento IMG e o
atributo SRC para apresentar uma imagem:

<HTML>
<HEAD>
<TITLE>Apresentar imagens</TITLE>
</HEAD>
<BODY>
A colocao de imagens no corpo de um documento HTML pode ser conseguida
atravs do elemento IMG.
<P>
<center><IMG SRC=computador.bmp></center>
<P>
A identificao da imagem feita atravs do atributo src. Este atributo
especifica o URL da imagem a apresentar.
</BODY>
</HTML>

O efeito produzido por este cdigo pode ser observado na figura seguinte:


Pgina 94

O atributo ALIGN
O atributo ALIGN utilizado para definir o alinhamento da imagem face aos restantes elementos
da pgina.

Este atributo pode assumir vrios valores. Os mais usuais so: BOTTOM, LEFT, MIDDLE, RIGHT
e TOP.

Apresenta-se um exemplo de cdigo onde so colocadas duas imagens dentro de um pargrafo
de texto. Numa dessas imagens, o atributo ALIGN colocado com o valor LEFT. Na outra
colocado com o valor RIGHT:

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC=computador.bmp Align=right>
<IMG SRC=computador.bmp Align=left>
<center>Apresenta-se um exemplo de cdigo onde so colocadas duas imagens
dentro de um pargrafo de texto. Numa dessas imagens, o atributo align
colocado com o valor left. Na outra colocado com o valor right.</center>
</BODY>
</HTML>

O resultado pode ser observado na figura seguinte:


Pgina 95

O atributo BORDER
O atributo BORDER pode ser utilizado para que a imagem seja apresentada com um border. Se
o atributo for omitido, ou se assumir o valor 0, a imagem apresentada sem border.

Apresenta-se de seguida o cdigo para a insero de uma imagem com vrios valores para o
atributo BORDER. O efeito de cada um desses valores pode ser observado na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
O atributo border pode ser utilizado para que a imagem seja apresentada com
um border. Se o atributo for omitido, ou se assumir o valor 0, a imagem
apresentada sem border.
<P>
<IMG SRC=install.bmp>
<IMG SRC=install.bmp border=1>
<IMG SRC=install.bmp border=3>
</BODY>
</HTML>


Pgina 96

Os atributos HEIGHT e WIDTH
O atributo HEIGHT determina o espao, em altura, reservado para a imagem. O atributo WIDTH
determina o espao em largura. A medida pode ser expressa em pixels ou em percentagem.

Quando estes atributos no so utilizados, o browser apresenta a imagem com o seu tamanho
original. Os valores destes atributos podem distorcer a imagem.

O cdigo atravs do qual uma imagem apresentada fixando valores para os atributos HEIGHT
e WIDTH o seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC=install.bmp>
<IMG SRC=install.bmp height=40 width=250>
</BODY>
</HTML>

Atravs deste exemplo, pode observar-se, na figura seguinte, a distoro que a imagem pode
sofrer:


Pgina 97

Os atributos HSPACE e VSPACE
O atributo HSPACE pode ser utilizado para definir a margem horizontal do documento, ou seja, a
quantidade de espao vazio colocado pelo browser nas extremidades laterais da imagem.

O atributo VSPACE determina o espao vazio que ser colocado na extremidade superior e
inferior da imagem.

Apresenta-se de seguida o cdigo para insero de imagens com vrios valores para os atributos
HSPACE e VSPACE:

<HTML>
<HEAD>
</HEAD>
<BODY>
<PRE>
O atributo hspace pode ser utilizado para definir a margem horizontal do
documento, ou seja, a quantidade de espao vazio colocado pelo browser nas
extremidades laterais da imagem.
<IMG SRC=install.bmp hspace=5 vspace=5>
O atributo vspace determina o espao vazio que ser colocado na extremidade
superior e inferior da imagem.
<IMG SRC=install.bmp hspace=30 vspace=50>
O cdigo seguinte apresenta a insero de imagens com vrios valores para
os atributos hspace e vspace.
<PRE>
</BODY>
</HTML>

Os resultados podem ser observados na figura seguinte:


Pgina 98

O atributo TITLE
O atributo TITLE pode ser utilizado para fazer aparecer uma label do tipo tool tip text quando o
ponteiro do rato colocado sobre a imagem.

Apresenta-se o cdigo que utiliza o argumento TITLE num elemento IMG. O efeito produzido
quando o ponteiro do rato colocado sobre a imagem pode observar-se na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC=Computador.bmp TITLE = "O cone O Meu Computador representa um
objecto que contm quase todos os outros objectos do sistema">
</BODY>
</HTML>


Pgina 99

O atributo ALT
O atributo ALT pode ser utilizado para especificar texto alternativo, que ser apresentado no
caso de o browser no possuir a capacidade de apresentar imagens, ou no caso de o utilizador
ter desactivado essa funcionalidade para um mais rpido download de documentos.

Apresenta-se de seguida um exemplo de cdigo em que, no elemento IMG utilizado o atributo
ALT com um texto alternativo:

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC=Computador.bmp title = "O cone O Meu Computador representa um
objecto que contm quase todos os outros objectos do sistema" alt=cone de
O Meu Computador>
</BODY>
</HTML>

A figura seguinte mostra o efeito produzido no Internet Explorer 5.5, quando a opo Show
pictures se encontra desactivada:


Pgina 100
Parte B Vdeo, som e applets
Apresentar vdeo

Apresentar vdeo atravs do elemento IMG
No Internet Explorer, o elemento IMG tem o atributo DYNSRC. Atravs deste elemento
possvel apresentar sequncias de vdeo numa pgina. O atributo LOOP usado em conjunto com
o atributo DYNSRC permite definir o nmero de vezes que o ficheiro ser executado. Apresenta-
se em seguida o cdigo para colocar um ficheiro de vdeo na pgina:

<HTML>
<HEAD>
<TITLE>Apresentar vdeo</TITLE>
</HEAD>
<BODY>
<IMG DYNSRC=clock.avi LOOP = 2>
<P>Nesta pgina apresentado um ficheiro de vdeo.
</P>
</BODY>
</HTML>

Uma imagem esttica desse vdeo pode ser observada na figura seguinte:


Pgina 101
Apresentar vdeo atravs do elemento EMBED
O elemento EMBED e o seu atributo SRC permitem apresentar sequncias de vdeo numa
pgina. Os atributos HEIGHT e WIDTH definem o tamanho da rea de projeco.

Apresenta-se o cdigo para mostrar uma sequncia de vdeo na pgina:

<HTML>
<HEAD>
<TITLE>Apresentar vdeo</TITLE>
</HEAD>
<BODY>
<EMBED SRC=clock.avi >
<P>Nesta pgina apresentado um ficheiro de vdeo atravs do elemento
EMBED.
</P>
</BODY>
</HTML>

A figura seguinte apresenta uma imagem esttica dessa pgina:


Pgina 102
Apresentar som

Apresentar som atravs do elemento A
O elemento A pode ser utilizado para apresentar um ficheiro de som numa pgina HTML. Para o
efeito utiliza-se o atributo HREF com referncia ao ficheiro de som que se pretende executar. O
browser cria um link e o ficheiro de som executado quando se activa o link.

Apresenta-se de seguida um exemplo de cdigo para incluir um ficheiro de som com o elemento
A:

<HTML>
<HEAD>
<TITLE>Apresentar som</TITLE>
</HEAD>
<BODY>
<A HREF=Chimes.wav>O som Chimes.</A>
<P>Nesta pgina apresentado um ficheiro de som.</P>
</BODY>
</HTML>


Pgina 103
Apresentar som atravs do elemento EMBED
O elemento EMBED com o atributo SRC pode ser utilizado para apresentar um ficheiro de som
numa pgina HTML.

Um exemplo dessa utilizao apresentado no cdigo seguinte:

<HTML>
<HEAD>
<TITLE>Apresentar som</TITLE>
</HEAD>
<BODY>
<P><B>Som atravs do elemento EMBED</B></P>
<EMBED SRC=zebraper.mid>
</BODY>
</HTML>

Image Maps

O que so image maps
Os image maps constituem uma extenso dos links que tm por origem uma imagem.

A diferena reside no facto seguinte: quando uma imagem constitui a origem de um link, esse
link activado quando se executa um clique em qualquer ponto dessa imagem. Com a tcnica
de image map, a imagem pode ser dividida em zonas diferentes, constituindo cada uma dessas
zonas a origem de um hiperlink.

Atravs da tcnica de image map, podem ser criadas numa imagem zonas dos seguintes tipos:
rectangulares, circulares e poligonais.

A figura seguinte mostra o esquema de funcionamento de um image map. A imagem base o
rectngulo que contm vrias imagens que constituem origem de links. Uma rea rectangular
aponta para a pgina abc.htm. Uma rea circular constitui a origem de um link para a pgina
def.htm. A rea poligonal aponta para a pgina ghi.htm:

Pgina 104

A tcnica de criao de um image map
A tcnica de criao de um image map pode ser descrita em vrias fases:

1. Criao da imagem.
Um image map tem de ter por base uma imagem, como evidente.

2. Identificao das zonas que constituem origens de links dentro dessa imagem.

Esta identificao feita atravs de um sistema de coordenadas. Para se compreender
como funciona o sistema de coordenadas, considere-se uma imagem rectangular com
100 de largura e 50 de altura, tal como aquela que apresentada na figura seguinte. O
valor da coordenada x varia entre 0 e 100. O valor da coordenada y varia entre 0 e 50:

Cada ponto, dentro da imagem, referenciado por um par de coordenadas x, y. Por
exemplo, o ponto correspondente s coordenadas x=80 e y=30 representado pelo par
(80,30), tal como pode observar na figura seguinte:

Pgina 105

Uma rea rectangular representada atravs de dois pares de valores: o primeiro par
respeita s coordenadas do canto superior esquerdo e o segundo par respeita s
coordenadas do canto inferior direito. No total, tero de ser indicados os seguintes
quatro valores:

canto superior esquerdo x
canto superior esquerdo y
canto inferior direito x
canto inferior direito y

Uma rea circular identificada atravs de trs valores: os valores das coordenadas x e
y do centro do crculo, e o valor do raio. Os trs valores a indicar so os seguintes:

centro x
centro y
raio

Para definir uma rea poligonal, necessrio indicar todos os pontos atravs dos quais
se define o polgono. Para cada ponto ser necessrio indicar as respectivas
coordenadas.

3. Criao do cdigo do image map

No cdigo HTML, um image map criado atravs do elemento MAP. O atributo NAME
deste elemento identifica esse image map.

No interior do elemento MAP, cada rea origem de link criada atravs do elemento
AREA. O tipo de rea identificado atravs do atributo SHAPE. Este atributo pode
assumir os valores RECT, CIRCLE e POL Y, para identificar, respectivamente um
rectngulo, um crculo e um polgono. As coordenadas da rea so especificadas no
atributo COORDS. O destino do link especificado atravs do atributo HREF. A imagem
que constitui a base do image map apresentada atravs do elemento IMG. Neste
elemento, o atributo SRC utilizado para identificar o ficheiro da imagem, e o atributo
USEMAP contm o valor do atributo NAME do elemento MAP.

Apresenta-se de seguida o cdigo para a criao de um image map. A imagem base
corresponde ao ficheiro imagemap.bmp. Como pode observar esse o valor que figura
no atributo SRC do elemento IMG. O atributo USEMAP contm o valor que figura no
atributo NAME do elemento MAP, precedido do smbolo #.


Pgina 106
O elemento MAP contm dois elementos AREA. Ambos definem uma rea do tipo
rectangular (atributo SHAPE=rect) com as respectivas coordenadas. Em cada elemento
AREA, o atributo HREF indica o URL de destino do link:

<HTML>
<HEAD>
<TITLE>Exemplo</TITLE>
</HEAD>
<BODY>
<H3>Esta imagem um image map</H3>
<IMG SRC=imagemap.bmp USEMAP=#imagem>
<MAP NAME=imagem>
<AREA SHAPE=rect COORDS=0,0,170,50" HREF=60.html>
<AREA SHAPE=rect COORDS=0,50,170,100" HREF=61.html>
</MAP>
</BODY>
</HTML>

APPLETS

O que um applet
Um applet uma aplicao criada atravs da linguagem Java e especialmente concebida para
ser executada num browser.

Este tipo de aplicaes permite criar praticamente todas as funcionalidades interactivas prprias
de um verdadeiro programa de computador, numa pgina HTML.

Todavia, por razes de segurana, os applets Java no podem aceder ao sistema de ficheiros do
disco do computador cliente. Os applets Java, depois de compilados, possuem a extenso .class.

Incluir um applet numa pgina
Para incluir um applet numa pgina pode utilizar-se o elemento APPLET.
O cdigo necessrio para incluir um applet o seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Exemplo de applet</H3>
<APPLET CODE=Animate.class HEIGHT=200 WIDTH=200>
</BODY>
</HTML>

Texto Animado

O que um marquee
O Internet Explorer permite criar uma rea no documento dentro da qual possvel colocar texto
animado. A animao consiste na movimentao do texto, dentro da rea definida para o
marquee, na horizontal e na vertical.


Pgina 107
Criao de um marquee
Um marquee criado atravs do elemento MARQUEE. A esse elemento corresponde o tag inicial
<MARQUEE> e o tag final </MARQUEE>. Entre o tag inicial e o tag final colocado o texto que
ser movimentado dentro da rea definida para o elemento.

O tamanho da rea do marquee definida atravs dos atributos HEIGHT e WIDTH. A cor de
fundo definida atravs do atributo BGCOLOR.

O tipo de animao definido atravs dos atributos BEHAVIOR e DIRECTION. O atributo
BEHAVIOR pode assumir os valores ALTERNATE, SCROLL e SLIDE. O atributo DIRECTION pode
assumir os valores DOWN, LEFT, RIGHT e UP.

O valor ALTERNATE do atributo BEHAVIOR provoca a movimentao do texto alternadamente,
da direita para a esquerda e da esquerda para a direita. Apresenta -se de seguida um exemplo
de cdigo atravs do qual pode ser criado um marquee com um texto que, permanentemente,
se desloca da direita para a esquerda e da esquerda para a direita:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Texto animado</H3>
<MARQUEE BEHAVIOR=alternate HEIGHT=20 WIDTH=300 BGCOLOR=YELLOW>Compre
j!</MARQUEE>
</BODY>
</HTML>

O valor SCROLL faz com que o texto do marquee se desloque na direco especificada no
atributo DIRECTION e retome de novo o mesmo deslocamento ao chegar ao fim da rea
delimitada pelos atributos HEIGHT ou WIDTH.


Pgina 108
Apresenta-se de seguida o cdigo de um exemplo em que o texto se desloca permanentemente
de cima para baixo na rea definida para o marquee:

<HTML>
<HEAD>
</HEAD>
<BODY>
<MARQUEE BEHAVIOR=scroll DIRECTION=down HEIGHT=200 WIDTH=100
BGCOLOR=YELLOW>Compre j!</MARQUEE>
</BODY>
</HTML>

O valor SLIDE determina um deslocamento no sentido indicado pelo valor do atributo
DIRECTION. O nmero de deslocamentos pode ser especificado atravs do atributo LOOP.

O cdigo, para um marquee com o valor SLIDE no atributo BEHAVIOR e que efectua duas vezes
o deslocamento indicado no valor do DIRECTION, o seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<MARQUEE BEHAVIOR=slide DIRECTION=up LOOP=2 HEIGHT=200 WIDTH=100
BGCOLOR=YELLOW>Compre j!</MARQUEE>
</BODY>
</HTML>


Pgina 109
7. Captulo - FORMS
Parte A - Os elementos FORM, INPUT e TYPE

O elemento FORM
O elemento FORM criado atravs do tag <FORM> ... </FORM>. O tag inicial <FORM> e o tag
final </FORM> marcam o incio e o fim da definio da form.

No entanto, o contedo apresentado ao utilizador determinado pelos elementos que podem ser
colocados entre o tag inicial e o tag final.

As forms possuem uma caracterstica especial: a sua finalidade a de provocar a interaco com
o utilizador. Dessa forma coloca-se, para as forms, uma questo que no se coloca quando se
trata de utilizar elementos que apenas apresentam informao. A questo a seguinte: como
que a informao digitada pelo utilizador numa form tratada?

Existem basicamente dois tipos de tratamento dessa informao: comunicao com o servidor e
processamento no cliente.

Um exemplo tpico que ilustra a necessidade de comunicao entre o cliente e o servidor
verifica-se quando uma form utilizada para recolher a informao que identifica um utilizador.
Tipicamente, o utilizador digita na form a sua identificao e a sua password. Essa informao
tem de ser enviada ao servidor para processamento e validao.

Noutras circunstncias, pode ser desnecessria a comunicao com o servidor. Imagine-se o
seguinte cenrio. Uma form utilizada para apresentar um questionrio cujo objectivo avaliar
os conhecimentos adquiridos pelo utilizador numa lio.

Neste caso, as respostas podem ser tratadas e avaliadas na mquina cliente, atravs de cdigo
includo no prprio documento. Depois de completar as respostas, o utilizador confirma
executando um clique num boto. Ao executar esse clique gera-se um evento. O cdigo de
tratamento das respostas est associado a esse evento. Por outras palavras, esse cdigo
executado quando o evento ocorre. Desta forma, o input do utilizador tratado ao nvel do
browser, sem necessidade de comunicao com o servidor.

O elemento FORM possui vrios atributos. Alguns desses atributos esto associados ao
tratamento a dar ao input recebido do utilizador.

Os atributos ACTION e METHOD
O atributo ACTION contm o endereo do programa utilizado para processar os dados da form.
O atributo METHOD pode assumir os valores GET e POST. Estes valores definem o formato da
mensagem enviada com os dados da form, para o servidor.

onsubmit e onreset
Estes atributos representam eventos. O evento onsubmit ocorre quando o contedo da form
confirmado pelo utilizador, tipicamente atravs de um clique sobre um boto especial enviar
(Submit).

O evento onreset desencadeado quando o utilizador executa um clique sobre o boto limpar
(Reset), limpando todas as entradas nos vrios elementos da form.

Pgina 110

A cada um destes eventos pode estar associado cdigo script que executado quando o evento
ocorre.

O elemento INPUT
O elemento INPUT permite gerar uma grande variedade de objectos numa form. O tipo de
objecto apresentado depende do valor do atributo TYPE do elemento INPUT.

A fim de proporcionar um viso geral dos vrios tipos de objectos que podem ser criados atravs
do elemento INPUT, apresenta-se a seguinte lista que associa os objectos aos diferentes valores:

Valor do
atributo type Objecto

Button Boto de comando costumizado
Checkbox Caixa de verificao
Radio Caixa de opo
Text Caixa de texto
Submit Boto Submit
Reset Boto Reset
Password Caixa de password
Image Imagem
File Ficheiro externo
Hidden Elemento escondido

O atributo TYPE
O atributo TYPE
O atributo TYPE do elemento INPUT utilizado para especificar o tipo de objecto a apresentar
numa form. So em seguida apresentados os valores possveis para esse atributo:

a) O valor BUTTON
O valor BUTTON cria um boto que pode ser costumizado. A caption do boto (isto , o texto
que figura na face do boto) pode ser especificada atravs do atributo VALUE.

O atributo NAME utilizado para identificar o objecto dentro da form.

NOTA
Um boto, tal como a generalidade dos objectos criados numa form, so elementos
interactivos. Um boto criado para que o utilizador o possa accionar para executar
determinada aco. Torna-se assim necessrio definir o que acontece quando executado
um clique no boto.

Os elementos possuem um conjunto de eventos que podem reconhecer. Esses eventos
podem ter associadas aces que so executadas quando o evento ocorre. Essas aces
podem ser de dois tipos:

1. Comunicao com o servidor e execuo de uma unidade de cdigo no
servidor, com a eventual resposta para o browser cliente.

2. Invocao de um script (ou de qualquer outra unidade de cdigo) que
executada na mquina cliente, sem necessidade de comunicao com o
servidor.

Pgina 111
No cdigo que se apresenta a seguir, a ttulo exemplificativo, criado um script utilizando a
linguagem VBScript.

Esse script includo no HEAD do documento. A estrutura desse script a estrutura bsica de
uma event procedure de Visual Basic: comea com Sub NomeDoObjecto_Evento e termina com
End Sub. Entre estas duas declaraes figura o cdigo a executar.

A designao NomeDoObjecto_Evento neste caso: Botao1_onclick. Botao1 o valor do atributo
NAME do objecto. onclick o nome do evento desencadeado quando executado um clique
sobre esse objecto.

Neste exemplo, o cdigo consiste numa simples caixa de mensagem anunciando que o evento
foi detectado e que o cdigo do procedimento associado a esse evento foi executado:

<HTML>
<HEAD>
<SCRIPT language="VBScript">
Sub Botao1_Onclick()
MsgBox "Aqui est uma mensagem. Foi efectuado um clique no boto 1"
End Sub
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type=button name=Botao1 value="Clique aqui">
</FORM>
</BODY>
</HTML>

O efeito produzido por esse cdigo mostrado na figura seguinte que mostra, no apenas o
contedo da pgina mas igualmente a caixa de mensagem activada aps a execuo do clique
sobre o boto:


Pgina 112

b) O valor checkbox
O valor CHECKBOX, quando atribudo ao atributo TYPE cria uma caixa de verificao
(vulgarmente designada por checkbox).

Apresenta-se de seguida o cdigo para a criao de uma checkbox numa pgina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<B>Desportos preferidos</B>
<BR>
<INPUT type=checkbox name=Check1" checked>Futebol
<BR>
<INPUT type=checkbox name=Check2" >Atletismo
<BR>
<INPUT type=checkbox name=Check3">Ciclismo
</FORM>
</BODY>
</HTML>



Pgina 113
c) O valor RADIO
O valor RADIO permite apresentar botes de opo. Estes botes so utilizados quando se
pretende uma opo de entre um conjunto de opes mutuamente exclusivas.

Um exemplo de criao de botes de opo apresentado no cdigo seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<B>Sexo</B>
<BR>
<INPUT type=radio name=radio1 checked>Feminino
<BR>
<INPUT type=radio name=radio>Masculino
<BR>
</FORM>
</BODY>
</HTML>

O resultado pode ser observado nesta figura:

d) O valor TEXT
O valor TEXT cria um controlo que uma caixa de texto de uma nica linha. Este tipo de
controlo muito utilizado em forms quando se pretende obter do utilizador informao que
possa ser escrita numa simples linha de texto.

Exemplos comuns de utilizao deste tipo de controlo, encontram-se em forms onde o utilizador
deve digitar o seu nome ou o seu endereo de correio electrnico.


Pgina 114
Um exemplo de utilizao do valor TEXT pode ser observado no cdigo seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<H3>Introduza os seus dados pessoais:</H3>
Primeiro Nome:
<INPUT type=text name=Nome1" maxlength=15 size=20>
<BR>ltimo Nome:
<BR>Morada:
<INPUT type=text name=Morada maxlength=40 size=50>
<BR>Cdigo Postal:
<INPUT type=text name=CodPostal maxlength=7 size=10>
<BR>Pas:
<INPUT type=text name=Pais value=Portugal
maxlength=16 size=20>
</FORM>
</BODY>
</HTML>

e) O valor SUBMIT
O valor SUBMIT cria um boto que tem associada a finalidade especfica de enviar o contedo da
form para o servidor.

Pgina 115

Apresenta-se de seguida o cdigo atravs do qual pode ser criado um boto SUBMIT. Observe,
na figura que resulta deste cdigo o valor que colocado automaticamente na caption do boto:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
Primeiro Nome:
<BR>ltimo Nome:
<BR>Morada:
<BR>Cdigo Postal:
<BR>Pas:
<INPUT type=text name=VPais value=Portugal maxlength=16 size=20>
<HR>
<INPUT type=Submit name=confirmar >
</FORM>
</BODY>
</HTML>


Pgina 116
A caption de boto SUBMIT pode ser costumizada, utilizando o atributo VALUE. O texto do
atributo VALUE aparecer na face do boto.

Pode de seguida observar o cdigo de um exemplo em que o atributo VALUE usado para
definir a caption do boto:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
Primeiro Nome:
<BR>ltimo Nome:
<BR>Morada:
<BR>Cdigo Postal:
<BR>Pas:
<INPUT type=text name=Pais value=Portugal maxlength=16 size=20>
<HR>
<INPUT type=Submit name=confirmar Value=Enviar >
</FORM>
</BODY>
</HTML>

A figura seguinte apresenta o resultado do cdigo anterior:


Pgina 117
f) O valor RESET
O valor RESET cria um boto cuja funcionalidade a de restaurar os valores dos vrios
elementos da form. Admita, por exemplo que, numa form tem vrias caixas TEXT. Algumas
dessas caixas contm valores por defeito, atribudos no cdigo HTML.

Quando executado um clique no boto RESET, as alteraes introduzidas pelo utilizador so
anuladas e cada um dos controlos assume o seu valor default.

g) O valor password
O valor PASSWORD cria uma caixa do tipo TEXT, com a seguinte caracterstica fundamental:
todos os caracteres digitados pelo utilizador so apresentados como asteriscos (*).

Os atributos readonly e disabled
O atributo READONLY pode ser utilizado com os valores TEXT e PASSWORD do atributo TYPE.
Nas caixas de texto com o atributo READONLY, o contedo no pode ser alterado pelo utilizador
da pgina.

O atributo DISABLED aplicvel a qualquer dos elementos criados atravs do atributo TYPE.
Quando um controlo possui o atributo DISABLED, para alm de o seu contedo no poder ser
alterado, a informao que esse controlo contenha tambm no enviada ao servidor quando
activado o processo de SUBMIT.

As caractersticas READONLY e DISABLED no podem ser directamente alteradas pelo utilizador.
Podem no entanto ser alteradas atravs de scripts includos na pgina.

O elemento BUTTON
Aquilo que pode ser feito com o elemento BUTTON pode igualmente ser feito com o elemento
INPUT e com o atributo TYPE. Em ambos os casos trata-se de criar botes para interface com o
utilizador numa form.

O elemento BUTTON possui igualmente o atributo TYPE, que pode assumir um dos seguintes
valores: BUTTON, SUBMIT e RESET. Esses valores existem igualmente, como se referiu, no
atributo type do elemento INPUT.


Pgina 118
Parte B - Os elementos SELECT E OPTION

Os elementos SELECT e OPTION

A utilizao conjunta dos elementos SELECT e OPTION
Os elementos SELECT e OPTION, utilizados em conjunto permitem criar caixas de listagem (list
boxes) ou uma combinao de caixa de texto com um caixa de listagem (combo list boxes).

Apresenta-se de seguida o cdigo atravs do qual se pode criar uma combo box, contendo
vrios itens. O aspecto dessa combo box, depois de ser activada, apresentado na figura
seguinte:

<HTML>
<HEAD>
<TITLE>Apresentao de uma caixa de listagem</TITLE>
</HEAD>
<BODY>
<FORM>
<SELECT name=lista>
<OPTION>Primeiro item</OPTION>
<OPTION>Segundo item</OPTION>
<OPTION>Terceiro item</OPTION>
<OPTION>Quarto item</OPTION>
<OPTION>Quinto item</OPTION>
<OPTION>Sexto item</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>


Pgina 119
Atributos dos elementos SELECT e OPTION

a) O atributo SELECTED
O atributo SELECTED pode ser utilizado com um elemento OPTION para pre-seleccionar um dos
itens da lista.

Apresenta-se de seguida o cdigo de criao de uma lista com um dos elementos assumindo o
atributo selected. Esse elemento aparece automaticamente seleccionado quando a caixa
mostrada no ecr, como se pode observar na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT name=lista>
<OPTION selected>Terceiro item</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

b) O atributo SIZE
O atributo SIZE do elemento SELECT pode ser utilizado para especificar quantos itens da lista
aparecem visveis no ecr.

Pgina 120

Um exemplo da utilizao do atributo SIZE apresentado no cdigo seguinte. Ao atributo SIZE
atribudo o valor 4, o que faz com que apaream imediatamente visveis quatro itens da lista. O
resultado pode ser observado na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT name=lista size=4>
</SELECT>
</FORM>
</BODY>
</HTML>

c) O atributo MULTIPLE
O atributo MULTIPLE do elemento SELECT permite criar uma lista em que vrios itens podem ser
seleccionados pelo utilizador.

A incluso do atributo MULTIPLE ilustrada no cdigo seguinte, podendo observar-se na figura
seguinte o resultado de uma seleco de mltiplos elementos:

Pgina 121
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT name=lista size=6 multiple>
</SELECT>
</FORM>
</BODY>
</HTML>


Pgina 122
Parte C - Os elementos TEXTAREA, LABEL,
FIELDSET E LEGEND

O elemento TEXTAREA
O elemento TEXTAREA funciona de forma anloga de uma caixa de texto criada atravs do
elemento INPUT. A diferena fundamental a de que o elemento textarea permite criar uma
caixa de texto com vrias linhas.

O atributo COLS pode ser utilizado para fixar o nmero de colunas da caixa e o atributo ROWS,
para fixar o nmero de linhas.

O texto que figura entre o tag inicial <TEXTAREA> e o tag final </TEXTAREA> aparece
inicialmente dentro da caixa.

Apresenta-se em seguida o cdigo para a criao de uma textarea. O efeito produzido por esse
cdigo pode ser observado na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<TEXTAREA COLS=25 ROWS=10>
Texto inicial
</TEXTAREA>
</FORM>
</BODY>
</HTML>


Pgina 123
O elemento LABEL
O elemento LABEL permite criar uma legenda associada a um controlo.

O cdigo seguinte mostra como uma legenda pode ser associada a uma caixa de texto. O
resultado pode observar-se na figura seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<LABEL>Nome <INPUT TYPE=TEXT></LABEL>
</FORM>
</BODY>
</HTML>

Os elementos FIELDSET e LEGEND
O elemento FIELDSET pode ser utilizado em conjugao com o elemento LEGEND para criar
grupos de controlos numa form.

Apresenta-se de seguida um cdigo no qual exemplificada a utilizao do elemento FIELDSET
em conjugao com o elemento LABEL. O resultado desse cdigo pode ser observado na figura
seguinte:


Pgina 124
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND ALIGN=Left>Escolha um idioma:</LEGEND>
Portugus <INPUT TYPE=radio>
<BR>
Ingls <INPUT TYPE=radio>
</FIELDSET>
<FIELDSET>
<LEGEND ALIGN=Right>Indique as suas preferncias:</LEGEND>
Romance <INPUT TYPE=checkbox>
<BR>
Poesia <INPUT TYPE=checkbox>
<BR>
Teatro <INPUT TYPE=checkbox>
</FIELDSET>
<FIELDSET>
<LEGEND ALIGN=Center>Indique os seus dados pessoais:</LEGEND>
Nome <INPUT TYPE=text>
<BR>
Morada <INPUT TYPE=text>
<BR>
Cdigo postal <INPUT TYPE=text>
</FIELDSET>
</FORM>
</BODY>
</HTML>


Pgina 125
8. Captulo - FRAMES
Parte A - Os elementos FRAMESET e FRAME

O elemento FRAMESET
A utilizao de frames permite dividir a janela em duas ou mais seces (frames). Em cada
frame pode ser apresentado um documento HTML.

O elemento FRAMESET
O objectivo do elemento FRAMESET dividir a janela do browser em vrias zonas, constituindo
cada uma dessas zonas uma rea independente, na qual poder ser apresentado um
documento.

O elemento FRAMESET utilizado em substituio do elemento BODY e colocado a seguir ao
elemento HEAD.

a) O atributo ROWS
O atributo ROWS utilizado para determinar o nmero de frames na horizontal. O formato do
valor deste atributo consiste numa lista dividida por vrgulas. O nmero de frames
determinado pelo nmero de elementos da lista. Cada elemento dessa lista define o tamanho da
frame. Esse tamanho pode ser expresso em percentagem (utilizando o smbolo %), em pixels ou
em proporo (utilizando o smbolo *).

Apresenta-se em seguida um fragmento de cdigo HTML para a criao de trs frames
horizontais. O primeiro frame ocupa 20%, o segundo 30% e o terceiro 50%. Na figura seguinte
pode observar-se o efeito produzido por esse cdigo na janela do browser:

<HTML>
<HEAD>
<TITLE>TITULO DA PAGINA</TITLE>
</HEAD>
<FRAMESET ROWS=20%,80%>
<FRAME SRC=>
<FRAME SRC=>
<FRAME SRC=>
</FRAMESET>
</HTML>


Pgina 126

O cdigo seguinte mostra como se podem criar duas frames horizontais. O primeiro frame ocupa
um tero do espao e o segundo ocupa dois teros:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS=1*,2*>
<FRAME SRC=>
<FRAME SRC=>
</FRAMESET>
</HTML>

A criao de frames pode igualmente ser feita atravs da indicao de nmero de pixels para as
frames. Pode observar de seguida o cdigo para criar duas frames horizontais com o tamanho
das frames especificado em pixels:


Pgina 127
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS=100,400>
<FRAME SRC=>
<FRAME SRC=>
</FRAMESET>
</HTML>

b) O atributo COLS
O atributo COLS utilizado para definir frames verticais. O valor do atributo COLS constitudo
por uma lista separada por vrgulas. O nmero de elementos da lista determina o nmero de
frames. Cada elemento da lista define o tamanho inicial da frame.

O cdigo seguinte mostra como criar dois frames verticais, ocupando o primeiro 20% e o
segundo 80%:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=20%,80%>
<FRAME SRC=>
<FRAME SRC=>
</FRAMESET>
</HTML>

Na figura seguinte pode observar o resultado produzido por esse cdigo:

O elemento FRAME
O elemento FRAME utilizado para definir as caractersticas de cada frame criado atravs do
elemento FRAMESET.

Pgina 128

a) O atributo NAME
O atributo NAME utilizado para identificar cada um dos frames de um FRAMESET.

b) O atributo SRC
O atributo SRC utilizado para definir o URL do ficheiro associado frame.

O cdigo seguinte cria duas frames verticais. A primeira com o nome Frame1 e a segunda com o
nome Frame2. Os atributos SRC so utilizados para atribuir o URL dos ficheiros que devem ser
apresentados em cada um dos frames. A Frame1 tem associado o ficheiro Ficheiro1.html e a
Frame2 tem associado o ficheiro Ficheiro2.html. Os ficheiros Ficheiro1.html e Ficheiro2.html
devem existir como documentos HTML independentes do ficheiro onde so definidos os frames:

<HTML>
<FRAME SRC=FICHEIRO1.HTML NAME=FRAME1>
<FRAME SRC=FICHEIRO2.HTML NAME=FRAME2>
</FRAMESET>
</HTML>

FICHEIRO HTML 1
<HTML>
<HEAD>
</HEAD>
<BODY>
Contedo do Ficheiro 1
</BODY>
</HTML>

FICHEIRO HTML 2
<HTML>
<HEAD>
</HEAD>
<BODY>
Contedo do Ficheiro 2
</BODY>
</HTML>

Aps criar as diferentes pginas obter o seguinte resultado:


Pgina 129

c) O atributo SCROLLING
O atributo SCROLLING utilizado para definir as condies em que um frame apresenta barras
de deslocamento (scrollbars).

Os valores que este atributo pode assumir so os seguinte: YES, NO e AUTO.

O valor YES implica que o frame apresenta scrollbars, independentemente de estes serem ou
no necessrios para mostrar o contedo do documento, no espao do frame.

O valor NO implica que o frame no apresenta scrollbars, mesmo que eles fossem necessrios
para se visualizar o documento no frame.

O valor AUTO o valor assumido por defeito. Com o valor AUTO, o frame cria scrollbars sempre
que isso seja necessrio.

O cdigo seguinte cria um documento com duas frames, sendo o atributo scrolling igual a YES:

<HTML>
<FRAME SRC= Scrolling=yes>
<FRAME SRC= Scrolling=yes>
</FRAMESET>
</HTML>

d) O atributo NORESIZE
O atributo NORESIZE no assume valores. Os seus efeitos manifestam-se pelo facto de estar ou
no presente no elemento FRAME. Os frames podem por defeito ser redimensionados pelo
utilizador. Para impedir essa possibilidade inclui-se o atributo NORESIZE.

Apresenta-se de seguida o cdigo para a criao de um documento em que os frames no
podem ser redimensionados, devido presena do atributo NORESIZE:

<HTML>
<FRAME SRC= Noresize>
<FRAME SRC= Noresize>
</FRAMESET>
</HTML>

Pgina 130

e) O atributo FRAMEBORDER
O atributo FRAMEBORDER utilizado para definir se o frame apresenta um border ou no. O
atributo pode assumir os valores 0 e 1. O valor 0 significa ausncia de border. O valor 1 associa
um border ao frame.

O cdigo que ilustra a atribuio de borders a frames o seguinte:

<HTML>
<FRAME SRC= Frameborder=0>
<FRAME SRC= Frameborder=0>
</FRAMESET>
</HTML>

f) Os atributos marginwidth e marginheight
Os atributos MARGINWIDTH e MARGINHEIGHT so utilizados para definir o espao em pixels que
separa o contedo do documento dos limites do frame.

O atributo MARGINWIDTH define o espaamento a introduzir esquerda e direita. O atributo
MARGINHEIGHT define o espaamento a introduzir na parte superior e na parte inferior.

Apresenta-se de seguida um exemplo com diferentes valores para os espaamentos das
margens dos frames:

<HTML>
<FRAME SRC=ficheiro1.html Marginheight=20 Marginwidth=10>
<FRAME SRC=ficheiro2.html Marginheight=50 Marginwidth=50>
</FRAMESET>
</HTML>


Pgina 131


Pgina 132
Parte B - Frames, hiperlinks e encadeamento de
framesets

Frames e hiperlinks
Um frame pode conter hiperlinks. O destino desse hiperlink pode ser:

o prprio frame
um outro frame na mesma janela
uma nova janela

Os elementos que activam hiperlinks podem estar presentes no contedo do documento
apresentado num frame. O atributo TARGET colocado em cada um desses elementos, ou
definido no header do documento, especifica a janela ou o frame em que o documento que
constitui o destino do hiperlink ser apresentado.

O atributo TARGET pode assumir:

o nome de uma janela ou frame;

um dos seguintes valores especiais:
_blank
_parent
_self
_top

O valor _blank determina a abertura do documento referenciado numa nova janela sem nome.

O valor _parent especifica que o documento referenciado pelo link deve ser aberto no frameset
que contm a frame onde se encontra o link.

O valor _self determina que o documento seja apresentado na prpria frame onde o link se
encontra. Este o valor assumido por defeito quando o atributo TARGET no definido e o
documento referenciado se encontra o mesmo site.

O valor _top determina que o documento seja apresentado ocupando todo o corpo da janela do
browser. Este o valor assumido por defeito quando o argumento TARGET no especificado e
o destino do hiperlink exterior ao site actual.

Apresenta-se de seguida o cdigo de um documento que define dois frames verticais:

<HTML>
<HEAD>
</HEAD>
<FRAME SRC=INDICE.HTML NAME=INDICE>
<FRAME SRC= NAME=PRINCIPAL>
</FRAMESET>
</HTML>


Pgina 133

O cdigo seguinte mostra o contedo do documento referenciado pelo primeiro frame. Nesse
documento existem quatro links. O primeiro link contm o atributo TARGET que referencia o
segundo frame da janela. Por esse motivo, o documento referenciado por esse link ser
apresentado no segundo frame. O atributo TARGET do segundo link referencia uma nova janela
sem nome. O documento referenciado ser aberto numa nova janela. O terceiro, referencia a
prpria frame onde o link se encontra. O documento ser apresentado nesse mesmo frame. O
quarto link contm o valor _top no atributo TARGET. O documento referenciado apresentado
ocupando todo o corpo da janela:

<HTML>
<HEAD>
</HEAD>
<BODY>
<A TARGET=PRINCIPAL HREF=PRINCIPAL.HTML>Abre no segundo frame</A>
<P>
<A TARGET=_blank HREF=PRINCIPAL.HTML>Abre numa janela nova</A>
<P>
<A TARGET=_self HREF=PRINCIPAL.HTML>Abre no primeiro frame</A>
<P>
<A TARGET=_top HREF=PRINCIPAL.HTML>Abre ocupando todo o corpo da
janela</A>
</BODY>
</HTML>


Pgina 134

O cdigo da janela do segundo link o seguinte:

<HTML>
<HEAD>
</HEAD>
<BODY>
Segundo documento
</BODY>
</HTML>

Ao executar um clique no primeiro link obter o seguinte resultado:


Pgina 135

Encadeamento de framesets
Pode criar-se uma hierarquia de framesets. Isto significa que um ou mais framesets podem ser
includos dentro de um frameset. Esta estrutura estabelece uma relao hierrquica de
parentesco. O frameset que contm outro ou outros framesets constitui o pai.

Um exemplo de estrutura encadeada de framesets apresentado pelo seguinte cdigo:

<HTML>
<HEAD>
</HEAD>
<FRAME SRC= NAME=FRAME1>
<FRAME SRC=LINK.HTML NAME=FRAME2>
</FRAMESET>
<FRAME SRC= NAME=FRAME3>
</FRAMESET>
</HTML>


Pgina 136
Uma estrutura encadeada de framesets permite apresentar um exemplo em que o atributo
TARGET assume o valor _parent.

Apresenta-se de seguida o cdigo que constitui um exemplo do modo como funciona o valor
_parent no atributo TARGET:

<HTML>
<HEAD>
</HEAD>
<FRAME SRC=>
<FRAME SRC=link.html>
<FRAME SRC=>
</FRAMESET>
</FRAMESET>
</HTML>

Ficheiro link.html:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A TARGET=_parent HREF=DOCUMENTO1.HTML>Abre documento 1</A>
</BODY>
</HTML>


Pgina 137

Ficheiro documento1.html:
<HTML>
<HEAD>
</HEAD>
<BODY>
DOCUMENTO 1
</BODY>
</HTML>


Pgina 138
9. Captulo - Cascading Style Sheets
Parte A - Noes fundamentais sobre Style Sheets

O conceito de style sheet
Uma style sheet um conjunto de uma ou mais rules que identificam e seleccionam elementos de
pginas HTML, aplicando a esses elementos estilos de formatao, atravs de um conjunto de
atributos definidos pela especificao CSS-Cascading Style Sheets.

Importa, antes de mais, definir o que uma rule:

a) Rules
Uma rule o conjunto formado por um selector e por uma ou mais declarations.

O formato genrico de uma rule o seguinte:

Selector {Declarations}

O selector identifica o elemento (ou o conjunto de elementos). As declarations indicam os
atributos e os valores atribudos a esses atributos.

Exemplo
O cdigo seguinte constitui uma rule e, consequentemente, uma style sheet. (Embora as
style sheets sejam, em regra, compostas por vrias rules, uma simples rule constitui, em
si mesma, uma style sheet.):

H1 {font-style:italic; font-size:50px}

Neste exemplo, o selector H1. As declarations esto contidas dentro da chaveta e so
separadas por ;. O formato de cada declaration o seguinte:

atributo:valor

Como se pode observar, esta rule contm duas declarations. A primeira indica que o atributo
fontstyle assume o valor italic. A segunda, indica que o atributo font-size assume o valor 50px.

O efeito prtico desta rule o seguinte: os elementos H1 sero formatados com um estilo itlico
e com um tamanho de 50 pixels.

b) Selectors
Um selector uma string que identifica elementos HTML. Esses elementos podem ser
identificados pelo tipo, pelo atributo CLASS, pelo atributo ID ou por uma combinao do tipo de
elemento e dos valores do atributo CLASS ou do atributo ID.

Os selectors podem ser de dois tipos. Os simple selectors e os contextual selectors.

Os simple selectors identificam os elementos com base no tipo ou nos valores dos atributos,
independentemente da posio que os elementos ocupam na estrutura do documento. Por
exemplo, um simple selector pode utilizar o tipo (por exemplo P) para identificar todos os
elementos do tipo P num documento, independentemente do facto de esses elementos estarem
contidos ou no dentro de outros elementos.

Pgina 139

Os contextual selectors identificam os elementos com base na sua posio dentro da estrutura do
documento. Por exemplo, pode utilizar-se um contextual selector para identificar os elementos B
que estejam contidos dentro de um elemento H2. As declaraes desse selector atingem os
elementos B que se encontrem contidos dentro de elementos H2, mas no atingem, por
exemplo, aqueles que se encontrem dentro de um elemento P.

b.1) Simple selectors
Um simple selector pode identificar os elementos com base no tipo, com base no valor do
atributo CLASS, com base no valor do atributo ID ou atravs de uma combinao do tipo e do
valor de um desses atributos.

Identificao de elementos atravs do tipo
Para identificar todos os elementos de determinado tipo, basta indicar o tipo desse elemento.
Por exemplo, para seleccionar todos os elementos H1, o selector ser formado apenas pelo
nome desse elemento.

Exemplo
A rule seguinte contm declaraes que afectam todos os elementos do tipo P:

P {font-weight:bold;
text-align:center;
font-size:25}

Identificao de elementos atravs do tipo e do valor do
atributo CLASS
Para identificar elementos de um determinado tipo e que possuam um determinado valor no
atributo CLASS, o selector formado pelo nome desse elemento, seguido de um ponto e do
valor do atributo CLASS. Por exemplo, para seleccionar todos os elemento do tipo H1 que
possuam o valor "XYZ" no atributo class, utiliza-se o seguinte selector:

H1.XYZ

Admita-se, por exemplo, que num documento podem considerar-se trs tipos de pargrafos:
pargrafos tipo1, pargrafos tipo2 e pargrafos tipo3.

Cada tipo de pargrafo pode ser identificado pelo valor do seu atributo class. Por exemplo, um
pargrafo de tipo1 pode ser identificado do seguinte modo:

<P class=tipo1 >Este um pargrafo do tipo 1.</P>

O atributo class pode ser utilizado para criar estilos diferentes.

A sintaxe para identificar os elementos com base no valor do atributo classe a seguinte:

Elemento.classe {declaraes}

Considerando o exemplo de pargrafos de trs tipos, poderia criar-se um estilo para cada tipo de
pargrafo. Por exemplo:

P {text-alignment: left}
P.tipo1 {text-alignment: center}
P.tipo2 {text-alignment: right}
P.tipo3 {text-alignment: justify}

Pgina 140

Os pargrafos que no pertencem a nenhum dos tipos referidos, apresentaro um alinhamento
esquerda. Os pargrafos de tipo1 apresentam um alinhamento centrado. Os de tipo2, um
alinhamento direita. Os de tipo3, um alinhamento justificado (alinhado esquerda e direita).

Exemplo
O selector P.BoldCenter abaixo apresentado, afecta todos os elementos do tipo P que possuam
no atributo class o valor "BoldCenter":

P.BoldCenter {font-weight:bold;
text-align:center;
font-size:25}

Imagine um documento HTML, com os dois pargrafos seguintes:

<P Class="BoldCenter">
Este pargrafo afectado pela formatao definida atravs da Style Sheet.
</P>

<P>
Este pargrafo no afectado por essa formatao.
</P>

O primeiro pargrafo afectado pela formatao definida atravs dos valores das declaraes
contidas na style sheet, uma vez que se trata de um pargrafo em que o atributo class possui o
valor "BoldCenter".

O segundo pargrafo no afectado por essa formatao.

Identificao de elementos atravs do valor do atributo
CLASS
Para seleccionar todos os elementos que possuam um determinado valor no atributo class, o
selector ser formado por um ponto inicial, seguido do valor do atributo class. Por exemplo, para
seleccionar todos os elementos que possuam o valor "XYZ" no atributo CLASS, utiliza-se o
selector:

.XYZ

Exemplo
O selector .ClasseNumero1, includo na rule abaixo apresentada, identifica todos os
elementos que possuem o valor ClassNumero1 no atributo CLASS:

.ClasseNumero1 {font-weight:bold;
text-align:center;
font-size:25}

Considere-se um hipottico documento que contenha os seguintes elementos P e DIV.
Trata-se de elementos de tipo diferente, mas ambos tm em comum o facto de
possurem o valor "ClasseNumero1" no atributo CLASS. Por esse motivo, ambos so
afectados pela style sheet anterior:


Pgina 141
<P Class="ClasseNumero1">
O contedo deste pargrafo afectado pelas style sheets cujos
selectors identificam todos os elementos que possuem o valor
"ClasseNumero1".
</P>
<DIV Class="ClasseNumero1">
O contedo deste elemento DIV igualmente afectado pelos estilos de
formatao dessas style sheets.
</DIV>

Identificao de elementos atravs do tipo e do valor do
atributo ID
Quando se pretendem seleccionar os elementos de determinado tipo que possuam, por exemplo,
o valor "MNO" no atributo ID, utiliza-se a seguinte notao: escreve-se o nome do elemento
seguido do smbolo # e do valor do atributo ID. Por exemplo, para seleccionar os elementos P
que possuam o valor "MNO" no atributo ID, utiliza-se a seguinte notao:

P#MNO

Exemplo
O selector P#123 selecciona os elementos do tipo P que apresentem o valor "123" no
atributo ID. A seguinte style sheet identifica e aplica as declarations de formatao ao
elemento P com o atributo id igual a "123":

P#123 {font-weight:bold;
text-align:center;
font-size:25}

Nota
O Internet Explorer aceita que, num documento existam vrios elementos com o mesmo
valor no atributo ID. Todavia, essa permissividade no deve ser explorada. O atributo ID
deve ser nico dentro de cada documento.

Identificao de elementos atravs do valor do atributo ID
Pode igualmente utilizar-se um selector para identificar todos os elementos que possuam um
determinado valor no atributo ID. Nesse caso, a notao a utilizar como selector a seguinte:
escreve-se o smbolo # seguido do valor do atributo ID.

Por exemplo, para seleccionar todos os elementos que possam o valor "MNO" no atributo ID,
utiliza-se o seguinte selector:

#MNO

Nota
Num mesmo documento, o valor do atributo ID deve ser nico para cada elemento. Por esse
facto, aparentemente, no se justificaria a utilizao do valor do atributo ID para referenciar
um conjunto de atributos. Todavia, deve ter-se em conta que uma style sheet pode ser
"externa" ao documento e, em consequncia, pode ser utilizada para formatar vrios
documentos distintos. Em todo o caso, o recurso a este tipo de selector desaconselhado.

b.2) Contextual selectors
No essencial, um contextual selector uma sequncia de simple selectors, separados por um
espao.

Imagine que pretendia, atravs de um selector, identificar os elementos B que figuram dentro de

Pgina 142
um elemento P. [Repare que no se trata de identificar todos os elementos B do documento, mas
apenas aqueles que se encontram dentro de um elemento P, ou, por outras palavras, aqueles
que tm um elemento P como parent.] Para conseguir esse objectivo, pode utilizar o seguinte
contextual selector:

P B {color: blue}

A pesquisa, dentro da hierarquia de elementos pode ser levada a vrios nveis de profundidade.

Exemplos

1. Admita, por exemplo, que pretendia seleccionar os elementos I que estivessem dentro
de um elemento B, elemento este que, por sua vez, deve estar dentro de um elemento
P. Trata-se de seleccionar apenas os elementos I que possuem essa posio na
estrutura. Se um elemento I tiver como parent directo um elemento P, esse elemento I
no ser seleccionado para a aplicao do estilo.

Para identificar os elementos I que correspondem a esse critrio de pesquisa, pode ser
utilizado o seguinte selector:

P B I

Para atribuir a cor vermelha aos elementos I que correspondem a esse critrio de
posicionamento dentro da estrutura do documento, pode ser utilizada a seguinte rule:

P B I {color:red}

Admita, por hiptese que, num documento a que esta style sheet aplicada, existem os
dois pargrafos seguintes:

<P>Texto do primeiro pargrafo. <B>Este texto bold <I>e este em
itlico vermelho e bold.</I></B></P>

<P>Texto do segundo pargrafo. <I>Este texto aparece em itlico, mas
no afectado pelo estilo definido para o contextual selector. No
ser vermelho.<I></P>

No primeiro pargrafo, o texto:

e este em itlico vermelho e bold.

ser afectado pelo estilo definido na style sheet, uma vez que o elemento I no qual esse
texto est contido est inserido numa estrutura na qual tem por antecessor imediato um
elemento B, elemento este quem, por sua vez, tem como antecessor imediato, um
elemento P.

Pela mesma razo, no segundo pargrafo, o texto:

Este texto aparece em itlico, mas no afectado pelo estilo definido para o
contextual selector. No ser vermelho.

no afectado pelo estilo definido atravs da style sheet, uma vez que o seu
posicionamento na estrutura no obedece ao critrio definido. Esse elemento descende
directamente de um elemento P.

2. Para seleccionar e aplicar estilos a elementos que sejam directos descendentes de
outros elementos com um determinado valor no atributo class, pode utilizar-se um
contextual selector que identifica o primeiro elemento atravs da notao selecciona
todos os elementos de uma determinada classe. Por exemplo, para seleccionar os

Pgina 143
elementos P que tm como antecessor imediato um elemento com o valor "ABC" no
atributo class, pode utilizar-se o seguinte selector:

.ABC P

3. Pode igualmente utilizar-se o valor do atributo ID num contextual selector. Assim, por
exemplo, para seleccionar todos os elementos B que tenham como antecessor um
elemento com o valor "XYZ" no atributo ID, pode utilizar-se o seguinte selector:

#XYZ B

4. Ainda a ttulo de exemplo, pode considerar-se o seguinte selector:

DIV.ClassB P B

Este selector identifica os elementos B que tenham por antecessor um elemento P que,
por sua vez, tenham como antecessor um elemento DIV com o valor "ClasseB" no
atributo class.

c) Agrupamento de selectors
Podem agrupar-se vrios selectors para uma declaration ou para um conjunto de declarations.
Esse agrupamento feito atravs de uma lista separada em que cada selector separado do
seguinte atravs de uma vrgula.

Exemplos
1. A seguinte rule cria um estilo que afecta vrios elementos:

H1, H2, H3 {color:blue}

os cabealhos de nvel 1 (H1), de nvel 2 (H2) e de nvel 3 (H3) so afectados pelo estilo
definido atravs da style sheet anterior. Todos eles sero colocados com a cor azul.

2. A identificao de elementos atravs do valor do atributo class pode ser usada no
agrupamento de selectors, como se mostra no exemplo seguinte:

H1.Azul, H2.Azul, H3.Azul {color:blue}

Atravs desta style sheet, atribuda a cor azul apenas aos elementos H1, H2 e H3 que
possuam o valor "Azul" no seu atributo class.

3. O agrupamento pode envolver contextual selectors, como se mostra no exemplo
seguinte:

P B I, H1 B, H2 {color:red}

Esta rule aplica a cor vermelha:

Aos elementos I que tenham como antecessor directo um elemento B que, por
sua vez, tenha como antecessor directo um elemento P.

Aos elementos B que tenham como antecessor directo um elemento H1.

Aos elementos H2, qualquer que seja o seu posicionamento na estrutura do
documento.

Pgina 144
d) Comentrios
O cdigo das style sheets pode incluir comentrios. Um comentrio deve ser iniciado com a
sequncia de smbolos /* e terminar com a sequncia */. O exemplo seguinte ilustra a
introduo de um comentrio numa style sheet:

H1 {color:red} /* Isto um comentrio */

Tipos de style sheets
Existem quatro formas distintas de introduzir estilos numa pgina HTML. A cada uma dessas
quatro formas corresponde um particular tipo de style sheet: in-line style sheets, embedded
style sheets, linked style sheets e imported style sheets.

a) In-line style sheets
O mtodo in-line Style Sheet consiste em utilizar o atributo STYLE dos elementos da pgina e
definir, atravs desse atributo um conjunto de estilos para esse elemento. O estilo definido
afecta apenas esse elemento.

Por exemplo, pode utilizar-se o atributo STYLE do elemento P para definir o estilo para
um pargrafo. O estilo assim definido aplica-se apenas a esse pargrafo, no afectando
qualquer outro pargrafo do documento.

A sintaxe a utilizar na definio dos estilos esquematicamente a seguinte:

<ELEMENTO STYLE =
"atributo1:valor do atributo1;
atributo2:valor do atributo2;

atributoN:valor do atributoN">

No esquema anterior, a palavra ELEMENTO poder ser substituda por um elemento da
linguagem HTML (por exemplo, o elemento P ou o elemento H1).

A definio de cada estilo feita atravs de um par constitudo pelo nome do estilo seguido de
dois pontos e do valor que esse estilo deve assumir. Os estilos so separados por um ; (ponto e
vrgula). O conjunto dos estilos definidos atravs do atributo STYLE enquadrado por aspas
iniciais e aspas finais.

b) Embedded Style Sheets
O mtodo embedded Style Sheet utiliza o elemento STYLE para definir um estilo aplicvel aos
elementos do documento. O elemento STYLE deve ser colocado entre o tag <HTML> e o tag
<BODY>.

Por exemplo, pode utilizar-se o elemento STYLE para definir caractersticas do corpo e de todos
os pargrafos do documento.

A sintaxe para a definio de estilos Embedded Style Sheets, apresentada esquematicamente
em seguida:


Pgina 145
<HTML>
<HEAD>
<TITLE>EMBEDDED STYLE SHEET</TITLE>
<STYLE>
SELECTOR1 {atributo1:valor do atributo1;
atributoN:valor do atributoN}
SELECTORN {atributo1:valor do atributo1;
</STYLE>

Nos exemplos anteriores, as palavras SELECTOR1 e SELECTOR2 devem ser substitudas por
selectors ou agrupamentos de selectors.

c) Linked Style Sheets
O mtodo Linked Style Sheets utiliza um ficheiro externo, com a extenso .css para definir os
estilos de formatao de um documento. Esta tcnica permite, atravs de um nico ficheiro,
criar estilos de formatao aplicveis a um nmero qualquer de documentos. A ligao entre
cada documento e o ficheiro .css que contm os estilos de formatao feita atravs do
elemento LINK no cabealho de cada documento.

Para aplicar um estilo de formatao comum a todas as pginas de um site, pode criar-se um
ficheiro do tipo .css e ligar todos os documentos do site a esse ficheiro.

A estrutura bsica de um ficheiro .css apresentada em seguida. O ficheiro comea com o tag
<STYLE> seguido de {}. Acaba com o tag </STYLE>.

Entre esses dois tags so definidos os estilos para os elementos da pgina:

<STYLE>
{}
SELECTOR1 {atributo1:valor do atributo1;
SELECTORN {atributo1:valor do atributo1;
</STYLE>

d) Imported Style Sheets
O mtodo imported style sheets consiste em utilizar a instruo:

@import url(url)

para importar uma style sheet a partir do ficheiro especificado em url.

O formato genrico para a incluso de uma imported style sheet o seguinte:

<STYLE >
@import url(url);
</STYLE>

A instruo @import deve ser colocada no incio da style sheet, antes de qualquer outra
declarao. O ficheiro especificado em url um ficheiro de texto que contm as rules que
definem o estilo a aplicar na pgina. Esse ficheiro deve possuir uma estrutura idntica dos
ficheiros .css utilizados em linked style sheets.

Pgina 146

Exemplos de atributos utilizveis em Style Sheets
A especificao CSS define um conjunto vasto de atributos que podem ser objecto de
formatao, bem como os elementos a que esses atributos podem ser aplicados.

A ttulo de exemplo refere-se um conjunto de atributos CSS que podem ser aplicados ao
elemento P:

font-family
O atributo font-family pode ser utilizado para especificar o tipo de letra a utilizar. Como
no existe a garantia de que o sistema onde o documento vai ser apresentado possua
esse tipo de letra instalado, o valor deste atributo pode consistir numa lista de tipos de
letra. A ordem dos elementos da lista define a prioridade associada a cada tipo de letra.

font-style
O atributo font-style utilizado para definir o estilo do tipo de letra utilizado. Os valores
possveis so normal e italic e oblique.

font-weight
Define a largura dos caracteres. Pode assumir vrios valores, entre eles, os valores
normal e bold.

font-size
Define o tamanho do tipo de letra utilizado. So possveis vrios formas de atribuio. Os
mais comuns consistem em atribuir um tamanho em points ou em pixels.

line-height
Este atributo pode ser utilizado para definir o espaamento entre as linhas de texto.

color
Utiliza-se este atributo para definir a cor to texto.

text-align
Permite definir o alinhamento do texto. Pode assumir os valores left, right, center e
justify.

Estes atributos so igualmente aplicveis a outros elementos. No se trata de atributos
aplicveis apenas ao elemento P.


Pgina 147
Parte B - Tipos de Style Sheets

Criao de estilos atravs de In-line Style Sheets
O mtodo de atribuio de estilos designado por In-line Style Sheet caracteriza-se por associar a
definio do estilo a cada elemento de um documento.

Este mtodo de definio de estilos sobrepe-se a qualquer dos outros dois mtodos mais
gerais.

Apresenta-se a seguir o cdigo de um documento contendo trs pargrafos de texto. Para os
dois primeiros pargrafos so definidos diferentes estilos de formatao, atravs de In-line Style
Sheets. O terceiro pargrafo no recebe qualquer estilo de formatao atravs de In-line Style
Sheet:

<HTML>
<HEAD>
<TITLE>Exemplo de Aplicao do Mtodo In-Line Style Sheet
</TITLE>
</HEAD>
<BODY>
<P Style =
"font-family:arial;
font-style:italic;
line-height:1;
text-align:left">

Este pargrafo est formatado atravs de um In-line Style Sheet.
</P>
<P Style =
"font-family:'monospace','serif';
font-weight:bold;
font-size:120%;
text-align:justify">

Neste pargrafo temos um outro estilo de formatao, definido igualmente
atravs do mtodo In-line Style Sheets. Diferentes valores para os
atributos provocam diferentes efeitos em termos de formatao.
</P>
<P>
Este pargrafo no afectado por qualquer formatao definida atravs de
In-line Style Sheet".
</P>
</BODY>
</HTML>



Pgina 148

Criao de estilos atravs de Embedded Style Sheets
O mtodo Embedded Style Sheet consiste em definir estilos para vrios elementos de um
documento, atravs do elemento STYLE no HEAD do documento.

A definio de estilos feita atravs deste mtodo aplica-se a todos os elementos contidos no
documento excepto se, para um particular elemento forem definidos estilos especficos com base
no mtodo In-line e no caso de haver conflito entre os dois estilos.

Admita, por exemplo, que ao nvel do documento foi definida uma formatao de pargrafos
com base no valor justify para o atributo text-align. Esta formatao aplica-se, em princpio, a
todos os pargrafos do documento. No entanto, se num pargrafo desse documento for definida
in-line uma formatao do tipo text-align: right neste pargrafo ser executada uma formatao
com alinhamento direita.

Apresenta-se de seguida o cdigo de um exemplo de criao de estilos de formatao atravs do
mtodo Embedded Style Sheet. Atravs do elemento STYLE so definidos atributos de formatao
para o corpo do documento (BODY), para ttulos de nvel 1 (H1) e nvel 2 (H2) bem como para
pargrafos (P):

Nesse exemplo so utilizados os seguintes atributos:
font-family
font-size
line-height
color
text-align


Pgina 149
<HTML>
<HEAD>
<TITLE>Exemplo de Aplicao do Mtodo Embedded Style Sheet</TITLE>
<STYLE>
BODY {background-color:#FFFFCC}
H1 {background-color:'white'}
H2 {text-align:right}
P {font-family:'cursive';
font-size:20;
line-height:2;
color:'blue';
text-align:justify}
</STYLE>
</HEAD>
<BODY>
<H1>Ttulo de Nvel Um</H1>
<H2>Ttulo de Nvel Dois</H2>
<P>
A definio de estilos feita atravs deste mtodo aplica-se a todos os
elementos contidos no documento excepto se, para um particular elemento forem
definidos estilos especficos com base no mtodo in-line e no caso de haver
conflito entre os dois estilos.
</P>
</BODY>
</HTML>

Os efeitos produzidos no documento so apresentados na figura seguinte:


Pgina 150
Apresenta-se de seguida o cdigo de um documento com a seguinte caracterstica: no elemento
STYLE definido um estilo para pargrafos. O documento tem dois pargrafos. No segundo
pargrafo, includo um estilo In-line que altera o estilo global definido no elemento STYLE:

<HTML>
<HEAD>
<TITLE>Exemplo de Aplicao do Mtodo Embedded Style Sheet</TITLE>
<STYLE>
P
{font-family:'cursive';
font-size:20;
line-height:2;
color:'blue';
text-align:justify}
</STYLE>
</HEAD>
<BODY>
<P>Este pargrafo recebe a sua formatao atravs de uma Embedded Style
Sheet includa no HEAD do documento, atravs do elemento STYLE.
</P>
<P STYLE = "font-size:14">
Este pargrafo recebe a sua formatao atravs do estilo definido In-line.
Como se pode observar, o estilo definido In-line, sobrepe-se ao estilo
Embedded.
</P>
</BODY>
</HTML>

Como se pode verificar, atravs do resultado mostrado na figura seguinte, o browser respeita a
formatao global no primeiro pargrafo e aplica a fo rmatao especfica no segundo:


Pgina 151
Criao de estilos atravs de Linked Style Sheets
O mtodo Linked Style Sheets baseia-se na criao de um documento externo onde so definidos
os estilos. Esse documento um ficheiro de texto com a extenso .css.

Os documentos que devem aplicar esses estilos so ligados ao documento de estilos atravs do
elemento LINK, colocado no HEAD do documento.

O elemento LINK utilizado para referenciar o documento que contm os estilos de formatao,
dever ter a seguinte estrutura:

<LINK REL=stylesheet HREF="DocumentoEstilo.css" TYPE="text/css">

O atributo REL define o tipo de relacionamento. O atributo HREF referencia o documento que
contm os estilos. O atributo TYPE o tipo de contedo.

Apresenta-se de seguida o cdigo de um documento .css. Nesse documento so definidos estilos
para o corpo do documento (BODY), para cabealhos H1 e para pargrafos (P). Hipoteticamente,
este documento gravado com o nome Estilos.css.

Contedo do ficheiro Estilos.css:

<STYLE>
{}
H1 {background-color:white;
text-align:center}
P {font-family:'cursive';
font-size:20;
line-height:2;
color:'blue';
text-align:justify}
</STYLE>

Apresenta-se de seguida o cdigo do documento HTML que referencia o documento Estilos.css
atravs do elemento LINK:

<HTML>
<HEAD>
<TITLE>Aplicao do Mtodo Linked Style Sheet</TITLE>
<LINK REL=stylesheet HREF="Estilos.css" TYPE="text/css">
</HEAD>
<BODY>
<P>O estilo deste pargrafo definido atravs do ficheiro externo
Estilos.css. Este ficheiro referenciado atravs do atributo HREF no
elemento LINK, no HEAD do documento.
</P>
</BODY>
</HTML>

A figura seguinte mostra o efeito da formatao quando o documento apresentado no browser:


Pgina 152

Em caso de conflito, os estilos definidos In-line tm prioridade sobre os estilos Embedded e estes,
por sua vez, tm prioridade sobre os estilos Linked, definidos atravs de ficheiros .css. Esse
facto ilustrado atravs do seguinte exemplo:

Apresenta-se de seguida o cdigo de um documento .css que define estilos para os atributos
fontfamily e text-alignment de pargrafos. igualmente definido um estilo para ttulos de nvel 2
(H2). Este documento gravado com o nome Estilos2.css:

Contedo do ficheiro Estilos2.css:

<STYLE>
{}
H2 {text-align:center;
font-style:oblique}
P {font-family:"Arial";
text-align:justify}
</STYLE>

Apresenta-se de seguida o cdigo de um documento HTML contendo um ttulo de nvel 2 e trs
pargrafos. Atravs do elemento <LINK> estabelecida uma associao com o ficheiro
Estilos2.css.

No elemento STYLE definido um estilo para o atributo text-alignment de pargrafos que entra
em conflito com o estilo definido no ficheiro Estilos2.css. Em consequncia, o valor do atributo
textalignment definido do ficheiro Estilos2.css no aplicado aos pargrafos do documento.

Num dos pargrafos do documento, definido um estilo in-line para o atributo font-size. O valor
deste estilo sobrepe-se ao valor definido ao nvel do cabealho do documento. Em
consequncia, neste pargrafo, o estilo In-line que aplicado:


Pgina 153
Contedo do exemplo:

<HTML>
<HEAD>
<TITLE>Aplicao do Mtodo Linked Style Sheet</TITLE>
<LINK REL = stylesheet HREF = "Estilos2.css" TYPE = "text/css">
<STYLE>
P {font-size:12;
text-align:left }
</STYLE>
</HEAD>
<BODY>
<H2>Ttulo de Nvel Dois</H2>
<P>Em caso de conflito, os estilos definidos in-line tm prioridade
sobre os estilos embedded e estes, por sua vez, tm prioridade sobre
os estilos definidos atravs de ficheiros .css.
</P>
<P Style = "font-size:16">
Em caso de conflito, os estilos definidos in-line tm prioridade
</P>
<P Style="text-align:right">
Em caso de conflito, os estilos definidos in-line tm prioridade
</P>
</BODY>
</HTML>

A figura seguinte mostra o documento quando apresentado pelo browser. Deve notar-se que os
estilos definidos no ficheiro Estilos2.css so aplicados aos elementos do documento, quando
no entram em conflito com estilos definidos ao nvel do documento (atravs do elemento
<STYLE>) ou atravs do estilo In-line definido ao nvel do elemento:


Pgina 154
Criao de estilos atravs de Imported Style Sheets
O mtodo imported style sheet utiliza um ficheiro externo que contm as rules que definem o
estilo a aplicar aos elementos.

Pode utilizar-se o elemento STYLE no cabealho do documento para importar uma style sheet.

Exemplos
1. Considere o seguinte ficheiro HTML:

<HTML>
<HEAD>
<TITLE>Aplicao do Mtodo Imported Style Sheet</TITLE>
<STYLE >
@import url(file://c:\ficheiro1.css);
</STYLE>
</HEAD>
<BODY>
<P Class=A>Este um pargrafo da classe A. O seu estilo de
formatao definido atravs de uma style sheet importada e contida
no ficheiro externo com a designao Ficheiro1.css
</P>
<P Class=B>Este um pargrafo da classe B. O seu estilo de
</P>
<P Class=C>Este um pargrafo da classe C. O seu estilo de
</P>
</BODY>
</HTML>

Como pode observar, este ficheiro contm a declarao:


no elemento STYLE no cabealho do documento. Esta instruo importa a style sheet
contida no ficheiro designado por ficheiro1.css.

Admita que o ficheiro designado por ficheiro1.css tem o seguinte contedo:

<STYLE>
{}
text-align:center}
P.A {font-family:'cursive';
font-size:20;
line-height:2;
color:'blue';
text-align:justify}
P.B {font-family:'verdana';
Font-size:20;
color:'black';
text-align:left}
P.C {font-family:'times';
font-size:20;
color:'red';
text-align:right}
</STYLE>

Pgina 155

O resultado da formatao pode ser observado na figura seguinte:

2. Uma style sheet pode importar uma outra style sheet. O esquema pode ser descrito
do seguinte modo:

O ficheiro HTML importa uma style sheet contida, por exemplo, no ficheiro1.css.
Este ficheiro contm um comando de importao de uma style sheet contido
noutro ficheiro (por exemplo, o ficheiro2.css) alm de um conjunto de rules.
Note-se que a instruo de importao deve preceder as rules dentro de cada
style sheet.

Considere-se, por exemplo o ficheiro HTML seguinte:


Pgina 156
<HTML>
<HEAD>
<TITLE>Aplicao do Mtodo Imported Style Sheet</TITLE>
<STYLE >
</STYLE>
</HEAD>
<BODY>
<P Class=A>Este um pargrafo da classe A. O seu estilo de
</P>
<P Class=B>Este um pargrafo da classe B. O seu estilo de
</P>
<P Class=C>Este um pargrafo da classe C. O seu estilo de
</P>
<P Class=D>Este um pargrafo da classe D. O seu estilo de
</P>
</BODY>
</HTML>

Como pode observar, a instruo:


importa a style sheet contida no ficheiro1.css. Admita que o contedo do ficheiro1.css
o seguinte:

<STYLE>
{}
P.A {font-family:'cursive';
font-size:20;
line-height:2;
color:'blue';
text-align:justify}
P.B {font-family:'verdana';
font-size:20;
color:'black';
text-align:left}
P.C {font-family:'times';
font-size:20;
color:'red';
text-align:right}
</STYLE>

Como pode observar, este ficheiro, antes das rules, contm uma instruo de importao
de uma nova style sheet, contida no ficheiro2.css.

Admita que o contedo do ficheiro2.css o seguinte:


Pgina 157
<STYLE>
{}
text-align:center}
P.D {font-family:'courier';
font-size:20;
color:'green';
text-align:center}
</STYLE>

O resultado da formatao obtido no ficheiro HTML pode ser observado na figura
seguinte:


Pgina 158
10. Captulo - Introduo ao FrontPage
Parte A - Iniciao ao FrontPage

Apresentao do FrontPage 2000
O FrontPage 2000 uma aplicao que permite:

Criar pginas HTML num ambiente WYSIWYG

A sigla WYSIWYG deriva da expresso What You See Is What You Get.

Essa expresso pretende significar que aquilo que se v aquilo que se obtm.
Quando aplicada a um processador de texto, essa expresso significa que a formatao
que esse processador de texto permite criar e visualizar no ecr, igual ao produto que
se obtm quando o texto impresso.

No caso do FrontPage, essa expresso significa que o programa permite usar
ferramentas de formatao visual e que a formatao de documentos criada visualmente
(sensivelmente) igual que se obtm quando o documento HTML visionado no
browser.

A utilizao de um editor de pginas HTML como o FrontPage representa uma grande
vantagem relativamente opo de escrever directamente o cdigo HTML num
processador de texto.

Criar e gerir sites Web num computador local ou atravs de uma ligao a um servidor
Web acessvel atravs de uma rede local ou atravs da Internet.

Para alm das funes de criao de pginas HTML o FrontPage 2000 possui uma
grande variedade de funes relacionadas com a criao, gesto, manuteno e
publicao de sites Web.

Na figura seguinte, pode observar uma janela da aplicao FrontPage 2000:


Pgina 159

A prxima figura mostra a janela do FrontPage 2000, mostrando o cdigo HTML que
automaticamente gerado pelo FrontPage:


Pgina 160
A figura seguinte mostra a janela do FrontPage 2000 no modo de visualizao Preview. Este
modo de visualizao antecipa o resultado que ser observado quando a pgina for visualizada
num browser:

As FrontPage Webs
O FrontPage pode ser utilizado para criar pginas HTML individualizadas e gravadas num
ficheiro, tal como acontece com os documentos criados em outras aplicaes Office.

No entanto, para que se possa tirar partido das funcionalidades de gesto de sites
proporcionadas pelo FrontPage, torna-se necessrio criar aquilo que na terminologia do
FrontPage se designa por Web ou FrontPageWebs.

Uma FrontPage Web um conjunto de pginas HTML relacionadas. O FrontPage trata essa Web
como uma unidade, em termos de criao e gesto de sites.

As FrontPage Web podem ser criadas numa das modalidades adiante descritas:


Pgina 161
a) Disk-based Web
Uma disk-based Web uma pasta especial criada no disco do computador onde est instalado o
FrontPage. Observe a figura:

O FrontPage permite criar pastas especiais destinadas criao de FrontPage Web. Estas Web
so designadas por disk-based Web. A criao de uma Web permite ao FrontPage executar
operaes globais de controlo, como, por exemplo a deteco de links quebrados entre pginas.


Pgina 162
b) Servidor Web no computador de desenvolvimento
No computador de desenvolvimento pode ser instalado um servidor Web e o software de rede
necessrio para estabelecer a conexo entre o FrontPage e esse servidor. Este modelo de
desenvolvimento permite que um nico computador funcione logicamente como se de uma rede
se tratasse. A ligao entre o FrontPage e o servidor feita atravs dos protocolos de
comunicao da rede, embora tudo se passe dentro do mesmo computador. Observe a figura
seguinte:

A instalao de um servidor Web no computador de desenvolvimento, permite simular o
funcionamento de um sistema cliente/servidor, atravs do qual o FrontPage acede Web
atravs dos mecanismos de comunicao em rede.


Pgina 163
c) Servidor Web instalado num computador servidor
Neste modelo de desenvolvimento, o FrontPage cria a Web num servidor remoto acedido atravs
da rede. No servidor remoto, a criao e a alterao de pginas s se torna efectiva quando
feito o publishing do site. Observe a figura seguinte:


Pgina 164
Criao de uma FrontPage web
Para criar uma FrontPage Web, aceda ao menu File, escolha a opo New, e depois Web:

De seguida, apresentada uma caixa de dilogo com uma lista de template, a partir dos quais
pode criar uma nova web. Se nenhum deles se adequar s suas necessidades, deve comear a
partir de One Page Web ou Empty Web. Ainda nesta caixa de dilogo, tem de especificar a pasta
onde vai ser criada a nova web, por exemplo, c:\websites\novaweb:

O FrontPage cria, assim, uma web, com a estrutura indicada, sobre a qual podemos comear a
trabalhar imediatamente. A janela do FrontPage fica dividida em duas janelas essenciais: a
Estrutura da Web, onde podemos criar, mover, copiar, alterar o nome ou apagar novas pastas
ou pginas HTML, e, direita, a vista de pginas HTML habitual do FrontPage:

Pgina 165


Pgina 166
Parte B - Criao de pginas e opes de
visualizao

Criao de uma pgina HTML em FrontPage
Existem vrias maneiras de criar uma pgina HTML no FrontPage. Podemos utilizar o boto new
page na barra de ferramentas, a opo New -> Page do menu File, a combinao de teclas CTRL +
N, ou fazendo um clique com o boto direito do rato em qualquer uma das janelas de
visualizao excepto no modo de visualizao Tasks, e escolher New Page no menu.

Opes de visualizao de Webs em FrontPage
O FrontPage dispe de trs opes essenciais de visualizao de pginas Web. A vista Normal,
onde podemos criar o contedo de uma pgina HTML de um modo muito semelhante a outros
programas, como o Word, por exemplo. Este o modo de edio wysiwyg de pginas HTML do
FrontPage. Para alm deste modo de visualizao, o FrontPage dispe tambm do modo HTML,
onde podemos ver, alterar, apagar ou adicionar cdigo ao cdigo HTML da nossa pgina, e o
modo Preview, que permite ver como a pgina se comporta num browser e o seu aspecto.

O FrontPage disponibiliza ainda um conjunto de modos de visualizao para as Webs:

Page
o Esta o modo de visualizao onde podemos visualizar e editar as pginas
HTML. Este composto por trs outros modos de visualizao. O Normal, HTML e
Preview.

Folders
o Permite ver as pastas e ficheiros existentes numa web, de um modo muito
semelhante ao Windows Explorer. Permite criar, copiar, mover, alterar o nome e
apagar ficheiros ou pastas de um modo simples.

Reports
o Esta vista disponibiliza um conjunto de relatrios para nos facilitar a manuteno
de uma web.

Navigation
o A maioria dos Web Sites tm o seu contedo organizado numa estrutura
hierrquica, como um organigrama. No topo da estrutura temos a home page
(pgina principal), e a partir desta temos vrias ramificaes, dependendo do
tipo de contedo de cada pgina. Este modo de visualizao permite ver a
estrutura de navegao da web, num esquema grfico, e permite-nos visualizar
ou alterar a estrutura do site.

Hyperlinks
o Permite-nos analisar a estrutura de hiperlinks de uma pgina HTML, atravs de
um esquema.

Tasks
o Este modo de visualizao permite-nos ver uma lista de tarefas pendentes
relativas web. As tarefas podem ser criadas manualmente medida que forem
surgindo, ou automaticamente, como resultado de outros processos.


Pgina 167
Visualizao em Browser
O FrontPage permite que uma pgina seja pr-visualizada num browser, atravs da opo Preview
in Browser, no menu File, ou do boto Preview in Browser, na barra de ferramentas:


Pgina 168
11. Captulo - Criao de pginas web em
FrontPage
Parte A - Criar e editar uma pgina

Criar uma nova pgina
Existem vrias maneiras de criar uma pgina HTML no FrontPage. Podemos utilizar o boto new
page na barra de ferramentas:

A opo New -> Page do menu File:

A combinao de teclas CTRL + N, ou fazendo um clique com o boto direito do rato em qualquer
uma das janelas de visualizao excepto no modo de visualizao Tasks, e escolher New Page no
menu:


Pgina 169
Editar uma pgina
Aps criar uma nova pgina, temos, no FrontPage, uma pgina HTML em branco, que podemos
agora preencher com o contedo que temos em mente. Podemos criar e alterar o contedo da
pgina, o ttulo, esquema de cor, ou outras caractersticas da nossa pgina. Se criou uma web,
pode simplesmente fazer um clique com o rato sobre a pgina que quer editar, atravs da janela
Folder List:


Pgina 170
Parte B - Gravar, eliminar e definir propriedades de
pginas

Gravar uma pgina
Para gravar uma pgina, pode escolher uma das vrias maneiras possveis. Se est a editar uma
pgina que nunca tenha gravado anteriormente, pode escolher a opo Save ou Save as do menu
File. Pode tambm utilizar a combinao de teclas CTRL + S, ou ainda fazer um clique sobre o
boto Save, na barra de ferramentas:

Se a pgina j foi gravada anteriormente, basta apenas fechar a pgina, e confirmar a gravao,
que o FrontPage grava as alteraes automaticamente.

Eliminar uma pgina
Se estivermos a trabalhar sobre uma Web, podemos, atravs da janela Folders View seleccionar
um ou mais ficheiros da nossa web, e remov-los. Depois de seleccionado(s), basta escolher a
opo Delete do menu Edit:


Pgina 171

Ou clicar com o boto direito sobre um item seleccionado e escolher a opo Delete do menu, ou
carregar na tecla Delete:

Em qualquer dos casos, o FrontPage mostra uma caixa de dilogo a pedir a confirmao da
remoo dos ficheiros:


Pgina 172
Definir as propriedades de uma pgina
Atravs da caixa de dilogo Page Properties podemos modificar a aparncia global da nossa
pgina, alterando a cor ou imagem de fundo, margens, ttulo, cor dos hiperlinks, e outras.

Para abrir a caixa de dilogo Page Properties, pode escolher a opo Properties no menu File, ou,
fazer um clique sobre a pgina com o boto direito do rato, e escolher, no menu, a opo Page
Properties:


Pgina 173
12. Captulo - Trabalhar com texto em
FrontPage
Parte A - Processamento e importao de texto e
grficos

Processamento de texto em FrontPage
No FrontPage pode utilizar-se as funcionalidades de processamento de texto equivalentes
quelas existentes em processadores de texto como o Word. importante notar que ser, no o
FrontPage, mas o browser individual de cada utilizador a ditar a aparncia final do texto e outros
elementos numa pgina Web. O FrontPage guarda o texto com instrues de formatao
relativamente imprecisas que o browser do utilizador ir interpretar, ou ignorar, sua maneira.
Assim sendo, o resultado final difere para cada utilizador, dependendo das suas configuraes, e
das capacidades do seu browser. As variaes no resultado podem ser causadas por browsers
diferentes, ou de diferentes verses, a rea da janela de browser, a resoluo ou profundidade
de cor, disponibilidade dos tipos de letra, ou outros factores. Lembre-se que quando criar as
suas pginas, aquilo que v apenas aproximadamente aquilo que o utilizador ver.

Importao de texto e grficos
O FrontPage permite inserir texto e outros objectos, a partir de ficheiros externos. Atravs do
menu insert podemos inserir Forms, Componentes ActiveX e outros componentes, ou ficheiros
HTML, Word, Excel, e outros. Podemos tambm, atravs deste menu, inserir vdeo, imagens e
grficos externos de diferentes formatos, como GIF, JPEG, PNG, WMF, AVI, TIFF, e outros.


Pgina 174
Parte B - Inserir linhas, pesquisar e usar estilos
Inserir linhas horizontais, quebras de linha, smbolos e
comentrios

a) Inserir linhas horizontais
Para inserir uma linha horizontal, posicione o cursor no local onde deseja inserir a linha, e
escolha a opo Horizontal Line do menu Insert.

Para alterar as propriedades de uma linha horizontal, faa um clique com o boto direito do rato
sobre a linha, e escolha Horizontal Line Properties do menu.

b) Inserir quebras de linha
Podemos inserir quebras de linha, ou outros tipos de quebras, atravs da opo Break... do menu
Insert, escolhendo o tipo de quebra Normal line break.

c) Inserir smbolos especiais
Para introduzir smbolos especiais que no faam parte dos smbolos disponveis no teclado,
escolha a opo Symbol, do menu Insert. Surge uma caixa de dilogo onde pode escolher o
smbolo que deseja inserir. O smbolo ser inserido na posio onde se encontrar o cursor de
insero de texto, na altura.

d) Inserir comentrios
Um comentrio, um texto que faz parte da pgina HTML, mas que no visvel na pgina,
serve apenas para armazenar texto relevante apenas para as pessoas relacionadas com o
desenvolvimento das pginas. Para introduzir um comentrio, escolha a opo Comment do
menu Insert.


Pgina 175
Pesquisa e substituio de texto
O FrontPage permite efectuar pesquisas e substituio de texto. Para efectuar uma pesquisa,
escolha a opo Find, no menu Edit.

Para efectuar uma pesquisa com substituio, escolha a opo Replace no menu Edit :

Estilos de pargrafos
A disposio e layout de pargrafos, ou outros blocos de texto, so um elemento chave do layout
de uma pgina e da comunicao visual. O FrontPage disponibiliza-nos um conjunto sortido de
ferramentas que servem para formatar pargrafos.

O FrontPage suporta os 15 estilos bsicos de pargrafos HTML. Estes so estilos de pargrafo, e
no estilos de letra, eles modificam a aparncia de um pargrafo, no de um texto especfico
dentro de um pargrafo. O HTML foi criado para especificar a estrutura dos elementos de um
documento, no para definir a formatao explicita de elementos, portanto, cada browser ir
exibir estes elementos de acordo com as suas configuraes e as configuraes do sistema em
que est a ser executado.

Os estilos Heading 1 a Heading 6 so utilizados para ttulos, respectivamente dos Principais (1)
para os de mais baixo nvel (6). O estilo Normal designado para a maioria do texto comum. Tal
como os estilos Heading, e a grande maioria dos estilos, no especifica um comprimento de linha
especfico, ajustando o texto ao tamanho da janela de browser.

O estilo Formatted nico em trs aspectos: Usa um tipo de letra monospace, preserva e exibe
mltiplos espaamentos, e o texto no ajustado ao tamanho da janela de browser.


Pgina 176
Para aplicar um dos 15 estilos bsicos a um pargrafo, escolha o ponto de insero no pargrafo
ou seleccione uma parte deste, e de seguida, escolha o estilo atravs da lista Change Style, na
barra de ferramentas. Adicionalmente, existem duas teclas de atalho, CTRL + Shift + N para
aplicar o estilo Normal, e CTRL + Shift + L para aplicar o estilo Bulleted List:

A barra de formatao da barra de ferramentas dispe tambm de botes para alinhar o
pargrafo esquerda, centro e direita, e para aplicar os estilos Bulleted List e Numbered List.

Alinhamento e espaamento de linhas
A barra de ferramentas dispes de botes para alinhar o pargrafo esquerda, direita, ou ao
centro, semelhana do Word.

Adicionalmente, no menu Format, escolhendo a opo Paragraph, exibida uma caixa de dilogo,
com variadas opes de configurao do pargrafo actual, e na seco inferior da janela, uma
pr-visualizao do aspecto do pargrafo medida que as alteraes so efectuadas:


Pgina 177
Parte C - Trabalhar com listas

Formatao de listas
Na terminologia HTML, as listas so coleces de pargrafos que o browser ir formatar de um
modo especial, com bullets e/ou nmeros. Como as listas so estruturadas, criar e alter-las
pode ser por vezes um pouco mais complexo que trabalhar com pargrafos normais. O
FrontPage disponibiliza ferramentas que facilitam esta tarefa.

O FrontPage suporta trs tipos de listas com bullets ou nmeros:

Picture Bullets
o utilizada um grfico ou imagem de um ficheiro externo para representar a
bullet.

Plain Bullets
o utilizado o caracter normal como bullet (igual ao caracter utilizado nesta lista).

Numbered Bullets
o utilizada uma sequncia de nmeros ou numerao romana para numerar
sequencialmente os itens da lista.

Fazendo um clique com o boto direito do rato sobre a lista, e escolhendo no menu a opo List
Properties ou List Item Properties, podemos alterar o aspecto visual da lista. Em alternativa,
podemos escolher a opo Bullets and Numbering, do menu Format:


Pgina 178
Listas condensveis
As listas condensveis so um tipo de lista com uma ou mais sub-listas, em que estas aparecem
e so escondidas medida que o utilizador faz um clique sobre um dos itens da lista.

Para transformar uma lista em lista condensvel, active na caixa de dilogo List Properties a
opo Enable Collapsible Outlines. Se desejar que a lista aparea inicialmente condensada, active
tambm a opo Initially Collapsed. Como resultado, no browser, quando o utilizador fizer um
clique sobre um dos itens da lista, tornam-se visveis ou so escondidos os seus sub-itens. Note
que este tipo de listas s funciona no Internet Explorer da Microsoft, se tiver a inteno de criar uma
pgina que possa ser vista noutros browsers no utilize este tipo de lista.


Pgina 179
13. Captulo - Grficos e hiperlinks em
FrontPage
Parte A - Trabalhar com imagens

Inserir imagens
Para inserir imagens no FrontPage, existem vrias tcnicas disponveis :

Arrastar uma imagem da janela do Windows Explorer para a pgina;
Arrastar uma imagem do Internet Explorer para a pgina;
Copiar imagens de outros programas (Adobe Photoshop, Paint, ou outros) para o
clipboard utilizando a opo copy no menu edit do respectivo programa, e, de seguida,
escolher a opo paste do menu edit no FrontPage;
Arrastar imagens de uma pgina aberta no FrontPage para uma outra pgina;
Arrastar uma imagem de um local para outro, dentro da mesma pgina;
Atravs da opo Image -> From File no menu Insert.

Importar Cliparts da Web
Podemos incorporar clip art nas pginas HTML atravs do FrontPage, mas, se necessrio t ambm
podemos recorrer Internet para procurar e fazer download de novos clip art. Para isso, basta
escolher a opo Picture -> Clip Art... do menu Insert, e na caixa de dilogo Clip Art Gallery, fazer
um clique sobre Clips Online:


Pgina 180

Ser executado um browser, de onde poder efectuar uma pesquisa por tpico, entre outras
opes, e fazer download dos Clip Arts escolhidos, que ficaro armazenados no seu computador.
De seguida pode inserir os novos Clip Arts do mesmo modo que os outros, clicando com o boto
direito sobre um grfico e escolhendo a opo Insert.

Propriedades gerais de uma imagem
Para aceder s propriedades gerais de uma imagem, clique com o boto direito do rato sobre a
imagem, e escolha a opo Properties, ou, em alternativa, execute a combinao de teclas Alt +
Enter:


Pgina 181
Na caixa de propriedades Picture Properties podemos configurar vrios aspectos da imagem,
como a sua localizao, representaes alternativas, hiperligao, formato de imagem, tamanho,
e outros:

Alinhamento de imagens e texto
Atravs da caixa de dilogo Picture Properties, podemos tambm alterar o alinhamento de
imagens em relao ao texto e o espaamento entre estes:


Pgina 182
Posicionamento absoluto de imagens
O FrontPage permite-nos, atravs da barra de ferramentas Pictures, que pode ser activada na
opo Toolbars -> Pictures no menu View, vrias opes para manipulao de imagens. Uma
dessas opes o Posicionamento absoluto. Com este tipo de posicionamento, podemos
posicionar a imagem na nossa pgina exactamente onde desejarmos, mesmo que por trs ou
frente de um outro elemento (imagem, texto, etc.):

Para mover a imagem para trs de um elemento ou para a frente deste, utilizamos os
botes Bring forward e Send Backward da mesma barra de ferramentas.

Rotao de imagens
possvel mudar a orientao de uma imagem usando a barra de formatao de imagens.

Para o fazer, seleccione uma imagem, e aplique a rotao pretendida. O FrontPage dispe de
botes para rodar a imagem 90 para o lado esquerdo ou direito ou fazer uma inverso
horizontal ou vertical da imagem:


Pgina 183
Parte B - Aplicar efeitos a imagens

Definio de transparncias
Podemos definir facilmente a transparncia de uma imagem no FrontPage, atravs do boto Set
Transparency. Seleccione a imagem em que deseja criar a transparncia, clique no boto Set
Transparency, e de seguida, clique num ponto da imagem. A cor nesse ponto passar a ser
considerada como transparente para essa imagem:

Alterao de brilho e contraste
Por vezes as imagens podem precisar de pequenos retoques de brilho e contraste, ou para criar
efeitos visuais. Atravs da barra de ferramentas de imagens, pode aumentar e reduzir o brilho e
contraste:

Efeitos de difuso e monocromtico
Para transformar uma imagem colorida numa imagem a preto e branco, o FrontPage
disponibiliza um boto na barra de ferramentas de imagens.

Seleccione a imagem que pretende mudar e clique no boto Color/BW. Tambm dispe de um
boto que permite tornar uma imagem difusa:


Pgina 184
Parte C - Vdeos, hiperlinks e image maps

Incluso de vdeo
Podemos incluir ficheiros de vdeo numa pgina HTML. Para o fazer escolha a opo Picture ->
Vdeo... no menu Insert.
Criao hiperlinks
Os hiperlinks, ou hiperligaes, so a essncia da web. Pode-se comparar uma pgina sem
hiperlinks a uma estrada em que a nica sada voltar para trs.

Se colocar um hiperlink para uma pgina de uma outra pessoa ou empresa, ter de se
conformar ao nome dado pgina pelo seu criador. Quanto aos nomes dados s suas pginas e
pastas, siga os seguintes conselhos:

o O comprimento mximo do nome de um ficheiro em sistemas UNIX de 32 caracteres.
Os nomes demasiado longos tornam-se um castigo quando necessrio escrever o
endereo de uma pgina na barra de endereos, e tornam-se assim, mais propensas a
erros ao escrever o endereo.

o considerado correcto utilizar apenas letras, nmeros, hfens (-), e underscores (_) nos
nomes das pastas e ficheiros utilizados na Web. Mesmo que seja permitido utilizar outros
caracteres no sistema de ficheiros onde se encontra o servidor Web, caracteres como
vrgula, /, \ , apstrofe, $, & e espaos no so permitidos num endereo Web. Para a
maioria destes caracteres necessrio um cdigo hexadecimal de dois dgitos precedido
de um sinal %. Por exemplo, uma pgina chamada quem somos?.html torna-se
quem%20somos%3F.html, o que, decididamente, no um nome to amigvel para os
utilizadores do site como seria quem_somos.htm, por exemplo.

Para criar um hiperlink no FrontPage:

1. Seleccione o texto ou imagem para o qual deseja criar um hiperlink;
2. Escolha, no menu Insert a opo hiperlink, ou clique no boto Hiperlink na barra de
ferramentas. Aparece a caixa de dilogo Create Hiperlink;
3. Especifique o endereo de destino no campo URL;
4. Clique em OK.

Para apagar um hiperlink no FrontPage:

1. Clique com o boto direito sobre o texto ou imagem que contm o hiperlink que deseja
apagar;
2. Seleccione do menu a opo Hiperlink Properties;
3. O endereo aparece seleccionado no campo URL, carregue em backspace ou delete para
apagar o endereo;
4. Clique em OK.

Criao Bookmarks
Por vezes, especialmente quando temos uma pgina longa, conveniente utilizar Hyperlinks
para saltar para ponto da mesma pgina. Os bookmarks oferecem essa funcionalidade. Permitem
que se faa uma ligao de um ponto de uma pgina para outro ponto da mesma, ou at para
uma outra pgina relativamente extensa, num ponto que seja ou no o topo da pgina.

Pgina 185
Para definir um bookmark :

1. Abra a pgina de destino no FrontPage (se no for a mesma que a pgina de origem);
2. Seleccione o elemento da pgina de origem que vai possibilitar o salto para a seco da
pgina de destino. Este ser o bookmark ;
3. Escolha, no menu insert a opo bookmark. Aparece uma caixa de dilogo:

4. Escreva o nome que deseja dar a este bookmark no campo Bookmark name. Utilize um
nome diferente para cada bookmark na mesma pgina:
5. Clique em OK.

Para criar um hiperlink cujo destino um bookmark :

1. Abra a pgina que vai conter o hiperlink;
2. Crie um hiperlink normal, especificando no campo URL o endereo da pgina;


Pgina 186
Se na caixa de dilogo existir um campo chamado Bookmark, escreva ou seleccione o nome do
bookmark . Se no, acrescente ao endereo, no campo URL, um smbolo cardinal (#) seguido do
nome do bookmark.

Criao de image maps
Os Image Maps, tambm chamados de hotspots, permitem um outro tipo de hiperligaes, em
que vrias partes de uma mesma imagem esto associadas a diferentes Hyperlinks.

Um Hotspot uma parte de uma imagem que funciona como um hiperlink. Os usos mais
frequentes para hotspots so barras de menu e mapas, por exemplo.

Para adicionar um hotspot a uma imagem no FrontPage:

1. Clique uma vez sobre a imagem para a seleccionar;

2. Seleccione a ferramenta de hotspot rectangular, circular ou poligonal na barra de
ferramentas Picture;

3. Com a ferramenta de hotspot rectangular ou circular, clique no ponto de origem, e
arraste o rato at definir a rea que pretende para o hotspot. Com a ferramenta de
hotspot poligonal, clique com o rato em cada canto da rea que deseja criar. Para fechar
o polgono, faa duplo clique no ponto mais prximo do ltimo ponto, e a linha final ser
criada deste at ao ponto inicial:

4. Quando a definio da rea estiver completa, ser exibida uma caixa de dilogo. Esta a
mesma caixa utilizada para criar Hyperlinks de texto ou de imagens. Defina o endereo,
e clique em OK.

Um problema frequente dos hotspots e de Hyperlinks com origem em imagens em geral, a falta
de pistas visuais sobre a existncia de Hyperlinks nestas, e sobre o seu destino. Se as imagens
que utilizar no fornecerem estas pistas, certifique-se que fornece instrues aos utilizadores na
zona circundante s imagens.

Pgina 187
14. Captulo - Tabelas em FrontPage
Parte A - Desenhar e inserir tabelas

Desenhar Tabelas
As tabelas HTML foram originalmente criadas para exibir texto simples, formatado em colunas e
linhas, mas entretanto tornaram-se numa importante ferramenta para layout de pginas para a
Web. As tabelas so um dos meios mais flexveis para dispor elementos numa pgina e manter a
sua aparncia independentemente de o utilizador redimensionar o seu browser.

Para desenhar uma tabela com o rato:
1. Escolha a opo Draw no menu Table ou clique no boto Draw Table da barra de
ferramentas;

2. Posicione o rato no local onde deseja criar um dos cantos da tabela, pressione o boto
esquerdo, e arraste para o canto oposto;

3. solte o boto do rato para criar a tabela.

Notas:
o O tamanho deste tipo de tabelas definido em pixels;
o Este tipo de tabelas consiste inicialmente em apenas uma clula. Pode criar linhas e
colunas dentro desta, utilizando a ferramenta Draw Table;
o O FrontPage far os possveis por posicionar a tabela onde foi indicado, mas as
limitaes do HTML nem sempre vo possibilitar;
o Se desenhar duas tabelas que se sobreponham horizontalmente, o FrontPage ir criar a
segunda tabela dentro da primeira, porque o HTML no permite tabelas sobrepostas
horizontalmente;
o Clique com o boto direito sobre a nova tabela, e escolha a opo Table Properties do
menu;
o Na caixa de dilogo Table Properties, especifique as propriedades que desejar, e clique
em OK:


Pgina 188
Inserir Tabelas
Este mtodo tambm permite criar uma tabela num determinado ponto, mas, ao contrrio do
mtodo Draw Table, permite escolher o nmero de clulas na tabela. Existem dois modos de
utilizar o boto Insert Table; clicar ou arrastar.

Inserir uma tabela :

Utilizando o modo Clicar:
1. posicione o ponto de insero no local onde a tabela deve aparecer:

2. Clique no boto Insert Table na barra de ferramentas. Ser exibida uma pequena
janela com uma grelha de clulas;
3. Mova o cursor do rato sobre a grelha at esta assinalar o nmero de clulas que
deseja;
4. Clique no boto esquerdo do rato para inserir a tabela;
5. Para cancelar a insero de uma tabela, clique na rea de cancelar, na base da
grelha.

Utilizando o modo Arrastar:
1. Posicione o ponto de insero no local onde a tabela deve aparecer;
2. Clique no boto Insert Table na barra de ferramentas. Ser exibida uma pequena
janela com uma grelha de clulas;
3. Arraste o cursor sobre a grelha, at esta assinalar o nmero de clulas que
deseja. Se precisar de mais clulas para alm das que a grelha exibe, arraste o
cursor do rato para fora da grelha, pelo lado direito ou inferior, e a grelha
aumentar;
4. Solte o boto do rato para inserir a tabela.


Pgina 189
Utilizando os menus:

Este mtodo permite maior controle que os anteriores sobre os atributos da nova
tabela:

1. Posicione o ponto de insero no local onde a tabela deve aparecer;
2. Escolha a opo Insert->Table no menu Table. Aparece a caixa de dilogo Insert
Table:

3. Especifique as caractersticas da nova tabela;

4. Clique em OK.


Pgina 190
Parte B - Propriedades de tabelas e clulas

CELLPADDING e CELLSPACING
O atributo Cell padding corresponde ao espao (em pixels) entre a margem de uma clula e o
seu contedo, ao passo que o atributo Cell Spacing corresponde ao nmero de pixels que
separam as margens de duas clulas adjacentes:

Para alterar os valores destes atributos, pode escolher a opo Properties->Table no menu Table,
ou, em alternativa, clicar com o boto direito sobre a tabela, e escolher a opo Table Properties
no menu.

Propriedades gerais de uma tabela
Nas propriedade gerais de uma tabela, s quais podemos aceder atravs da caixa de
dilogo Insert Table ou Table Properties, temos:


Pgina 191
Size Define as dimenses da tabela em termos de linhas e colunas:
o Rows Especifica o nmero de linhas horizontais da tabela;
o Columns Especfica o nmero de colunas verticais.

Layout Define o posicionamento da tabela e o seu aspecto:
o Alignment Indica o modo como a tabela posicionada na pgina. As
hipteses de escolha so Default, Left, Center e Right, que correspondem
respectivamente ao alinhamento que o browser preferir, esquerda, ao
centro ou direita da pgina;
o Border Size Especific a a grossura (em pixels) das linhas de moldura que
envolvem a tabela. O valor zero faz com que no exista moldura nem linhas
interiores entre as clulas;
o Cell Padding Indica o nmero de pixels a inserir entre a margem de uma
clula e o seu contedo;
o Cell Spacing Indica o nmero de pixels a inserir entre as margens de duas
clulas adjacentes.

Specify Width Especifica o comprimento da tabela se a caixa de verificao estiver
activada. Se estiver desactivada, o browser define o tamanho da tabela:
o In Pixels Especifica o comprimento da tabela em pixels;
o In Percent Dimensiona a tabela na percentagem indicada em relao ao
espao total disponvel no browser. Uma percentagem de 100% far com que
a tabela seja dimensionada de uma ponta a outra do espao disponvel.

Style Aplica propriedades de Style Sheets a uma tabela.

Propriedades gerais de uma clula
As clulas podem ser formatadas de uma maneira relativamente independente das formataes
gerais da prpria tabela:


Pgina 192

Para aceder s propriedades de uma, ou um conjunto de clulas:
1. Seleccione uma ou mais clulas utilizando um dos vrios mtodos de seleco;
2. Escolha Properties->Cell do menu Table, ou clique com o boto direito do rato sobre a
seleco de clulas e escolha a opo Cell Properties. Ser exibida a caixa de dilogo Cell
Properties;
3. Defina as propriedades e clique em OK para aplicar as alteraes.

Na caixa de dilogo Cell Properties podemos configurar as seguintes propriedades de uma ou
mais clulas:
Layout - Estas opes determinam o aspecto dos elementos contidos na clula:
Horizontal Alignment Controla o posicionamento lateral do contedo da clula. Existem
trs possibilidades:
Left Alinha o contedo da clula junto margem esquerda;
Center Alinha o contedo da clula ao centro desta;
Right Alinha o contedo junto margem direita.
Vertical Alignment Define o posicionamento vertical do contedo da clula de acordo
com uma destas trs opes:
Top Alinha o contedo ao topo da clula;
Middle - Alinha o contedo ao centro da clula;
Bottom Alinha o contedo base da clula.
Rows Spanned Indica a altura da clula, em termos de linhas horizontais;
Columns Spanned Indica o comprimento de uma clula em termos de colunas
verticais;
Specify Width Quando activado, significa que se pretende um comprimento mnimo
para a clula:
In Pixels Indica que o valor se encontra em pixels;
In Percent Indica que o valor se encontra em percentagem em relao ao
comprimento total da tabela.
Specify Height Quando activado, indica que se pretende uma altura mnima para a
clula:
In Pixels Indica que o valor se encontra em pixels:
In Percent Indica que o valor se encontra em percentagem em relao
altura total da tabela.
Header Cell Indica, se activado, que a clula seleccionada uma clula de cabealho.
O resultado, normalmente, o texto desta clula aparecer em bold;
No Wrap Indica que nesta clula o browser no deve cortar o texto para uma linha
seguinte, quando este ultrapassa o comprimento da clula.
Borders Estas opes definem as cores da moldura da clula seleccionada:
Color Especifica uma cor para todas as linhas de margem da clula;
Light Border Indica a cor das li nhas de margem superior e esquerda da clula;
Dark Border Indica a cor das linhas de margem inferior e direita da clula.
Background Permite definir uma imagem de fundo ou uma cor para a clula seleccionada:

Pgina 193
Color Define uma cor de fundo para a clula;
Use Background Picture Indica, se activada, que a clula ter uma imagem de fundo.
A caixa de texto serve para indicar a localizao e nome do ficheiro da imagem
correspondente;
Browse Mostra uma caixa de dilogo, onde pode procurar e escolher a imagem de
fundo para a clula;
Properties Exibe a caixa de dilogo Picture Properties, que permite alterar as
propriedades da imagem especificada.

Pgina 194
15. Captulo - Frames e Forms em
FrontPage
Parte A - Frames e Framesets

Criar um Frameset
Para alm da utilizao de tabelas, existe um outro mtodo para dispor o contedo das pginas
no browser, os Frames.

Uma pgina especial, chamada Frameset, define o layout dos frames, e a pgina correspondente
ao contedo de cada um dos frames. Mais tarde, os Hyperlinks podem carregar outras pginas
num frame em resposta s seleces dos utilizadores.

Para criar um Frameset:
1. Escolha New->Page no menu File, e escolha, dos tipos de pgina Frames Page, aquela que
mais se adapta ao Frameset que pretende criar:

2. Clique em OK, aparece uma estrutura semelhante da figura anterior. Para dividir um
frame em dois, seleccione o frame que pretende dividir, clicando uma vez com o boto
esquerdo sobre a rea a cinzento escuro, e escolha, no menu Frames a opo Split
Frame. Se pretender apagar um frame, seleccione o frame do mesmo modo, e escolha a
opo Delete Frame no menu Frames.;

Pgina 195

Pode criar uma nova pgina para cada um dos frames utilizando o boto New Page, ou definir
uma pgina j existente utilizando o boto Set Initial Page.

Criar Links em Framesets
Uma vez definidos e criados o Frameset e os frames, os Hyperlinks de qualquer um dos frames
podem mostrar uma nova pgina no mesmo frame, num frame diferente, ou numa janela
diferente. Esta aco indicada pelo atributo target frame, que especifica o nome do frame onde
a pgina de destino do hiperlink deve ser exibida. O browser procura o target frame em trs stios
distintos, por esta ordem:

1. No prprio hiperlink, se o atributo target existir neste;
2. Um default target frame, que definido no elemento <HEAD> da pgina html que contm
o hiperlink, e que aplicado a todos os Hyperlinks dessa pgina, que no especifiquem
um frame de destino atravs do atributo target;
3. O frame actual. Se o target frame e o default target frame no forem definidos, os
Hyperlinks mostram a pgina de destino no frame em que foram executados, tal como
acontecia numa pgina sem frames.
Nota:
Se especificar um nome de um frame no existente, o browser normalmente mostra a
pgina requisitada numa nova janela.

Subdividir Frames
Se, por alguma razo, necessitar de dividir ou apagar frames mais tarde, pode utilizar as opes
Split Frames e Delete Frames do menu Frames, no modo de visualizao Normal, do mesmo modo
como utilizou para criar o Frameset. Pode tambm mudar o tamanho de cada um dos frames,
arrastando as barras separadoras destes, ou editar uma pgina de um frame numa nova janela,
clicando com o boto direito sobre o frame, e escolhendo a opo Open Page in New Window.


Pgina 196
Parte B - Forms

Criar Forms
No FrontPage podemos criar Forms facilmente. Para criar uma Form:

1. Posicione o ponto de insero no local onde dever aparecer o primeiro elemento da
Form;
2. Escolha, no menu Insert a opo Form->Form. Ser criada a Form, indicada no FrontPage
por um rectngulo tracejado, contendo apenas um boto Submit e um boto Reset;
3. Para cada elemento que queira na Form, posicione o ponto de insero dentro desta,
escolha no menu Insert a opo Form, e escolha, do menu resultante, o tipo de elemento
a inserir.
A imagem seguinte ilustra os vrios tipos de elementos que pode inserir:

No Interior da Form, tambm pode adicionar outros elementos para alm destes. Quer sejam
imagens, tabelas, texto, hiperlinks ou outros.

Criar o aspecto visual da Form apenas uma parte da tarefa. Ter tambm de configurar as
propriedades, tanto da Form em si, como de cada um dos elementos que dela fazem parte.

Para ver ou modificar as propriedades de uma Form, clique com o boto direito sobre esta e
escolha a opo Form Properties do menu. Para ver ou modificar as propriedades de um
elemento da Form, clique sobre este com o boto direito e escolha Form Field Properties do menu.


Pgina 197
Utilizar o Form Page Wizard
O FrontPage disponibiliza um wizard para facilitar a tarefa de criar Forms HTML. O Form
Page Wizard no far todo o trabalho, apenas grande parte deste. Para iniciar o Wizard:
1. Inicie o FrontPage;
2. Se quiser que a nova pgina seja criada numa FrontPage web, abra a web em
questo;
3. Escolha, no menu File, a opo New;
4. Na seco Page, escolha Form Page Wizard, e clique em OK.

- I -
Indice
1. CAPTULO - A LINGUAGEM HTML ____________________________________ 2
Parte A - A linguagem HTML e o hipertexto________________________________ 2
Apresentao da linguagem HTML____________________________________________ 2
Elementos e tags ________________________________________________________ 2
Comentrios ____________________________________________________________ 3
Elementos e atributos _____________________________________________________ 3
Browsers e documentos HTML _______________________________________________ 4
Hipertexto, links e URLs ___________________________________________________ 5
Parte B - A estrutura de um documento HTML______________________________7
A estrutura bsica de um documento HTML_____________________________________ 7
A estrutura bsica________________________________________________________ 7
A estrutura bsica em esquema _____________________________________________ 8
Elementos do cabealho ___________________________________________________ 8
Atributos do elemento BODY_______________________________________________ 11
Frames _______________________________________________________________ 14
Parte C - Criao de documentos HTML __________________________________ 16
A criao de documentos HTML _____________________________________________ 16
Editores WYSIWYG ______________________________________________________ 17
Word ________________________________________________________________ 17
FrontPage_____________________________________________________________ 19
2. CAPTULO - FORMATAO DE TEXTOS E PARGRAFOS____________________ 20
Parte A - Formatao de cabealhos, pargrafos e linhas horizontais____________ 20
A formatao de cabealhos _______________________________________________ 20
A formatao de pargrafos e linhas horizontais ________________________________ 21
Parte B Elementos de formatao de texto _____________________________27
Formatao de texto _____________________________________________________ 27
O elemento FONT _______________________________________________________ 28
Outros elementos de formatao de texto _____________________________________ 31
Os elementos DIV e SPAN_________________________________________________ 39
3. CAPTULO LISTAS_____________________________________________ 42
Parte A - Formatao de listas ________________________________________ 42
As listas em HTML_______________________________________________________ 42
Estrutura de listas ordenadas ______________________________________________ 42
Definio dos smbolos de ordenao ________________________________________ 43
Definio do incio da ordenao ____________________________________________ 45
Parte B - Listas encadeadas e listas de ordenao _________________________47
Estrutura de listas encadeadas _____________________________________________ 47

- II -
Estrutura de listas de definio _____________________________________________ 48
4. CAPTULO - TABELAS ____________________________________________ 50
Parte A - Noes fundamentais sobre tabelas _____________________________50
Elementos da estrutura de uma tabela _______________________________________ 50
Parte B - Atributos de tabelas e clulas _________________________________ 59
Atributos do elemento TABLE ______________________________________________ 59
Atributos do elemento TR _________________________________________________ 75
Atributos do elemento TD _________________________________________________ 77
Criao de grupos de colunas ______________________________________________ 80
5. CAPTULO - HIPERLINKS _________________________________________ 84
Parte A - Hipertexto e endereos ______________________________________ 84
Hipertexto e Hipermdia __________________________________________________ 84
URL _________________________________________________________________ 84
A estrutura de um URL ___________________________________________________ 85
Endereos absolutos e relativos_____________________________________________ 87
Parte B - Hiperligaes _____________________________________________ 89
Origem de Links ________________________________________________________ 89
Links com origem em texto ________________________________________________ 89
Links com origem em imagens _____________________________________________ 90
O elemento BASE e os elementos relativos ____________________________________ 91
Criar links dentro do mesmo documento ______________________________________ 91
6. CAPTULO - MULTIMDIA E HIPERMDIA _____________________________93
Parte A - Imagens _________________________________________________ 93
O elemento IMG ________________________________________________________ 93
Atributo do elemento IMG_________________________________________________ 93
Parte B Vdeo, som e applets _______________________________________ 100
Apresentar vdeo_______________________________________________________ 100
Apresentar som________________________________________________________ 102
Image Maps __________________________________________________________ 103
APPLETS _____________________________________________________________ 106
Texto Animado ________________________________________________________ 106
7. CAPTULO - FORMS ____________________________________________ 109
Parte A - Os elementos FORM, INPUT e TYPE ____________________________ 109
O elemento FORM______________________________________________________ 109
Os atributos ACTION e METHOD ___________________________________________ 109
O elemento INPUT______________________________________________________ 110
O atributo TYPE________________________________________________________ 110
Os atributos readonly e disabled ___________________________________________ 117
O elemento BUTTON____________________________________________________ 117

- III -
Parte B - Os elementos SELECT E OPTION_______________________________ 118
Os elementos SELECT e OPTION___________________________________________ 118
Parte C - Os elementos TEXTAREA, LABEL, FIELDSET E LEGEND _______________ 122
O elemento TEXTAREA __________________________________________________ 122
O elemento LABEL______________________________________________________ 123
Os elementos FIELDSET e LEGEND _________________________________________ 123
8. CAPTULO - FRAMES____________________________________________ 125
Parte A - Os elementos FRAMESET e FRAME _____________________________ 125
O elemento FRAMESET __________________________________________________ 125
O elemento FRAME _____________________________________________________ 127
Parte B - Frames, hiperlinks e encadeamento de framesets__________________ 132
Frames e hiperlinks _____________________________________________________ 132
Encadeamento de framesets ______________________________________________ 135
9. CAPTULO - CASCADING STYLE SHEETS _____________________________ 138
Parte A - Noes fundamentais sobre Style Sheets ________________________ 138
O conceito de style sheet ________________________________________________ 138
Tipos de style sheets____________________________________________________ 144
Exemplos de atributos utilizveis em Style Sheets ______________________________ 146
Parte B - Tipos de Style Sheets_______________________________________ 147
Criao de estilos atravs de In-line Style Sheets ______________________________ 147
Criao de estilos atravs de Embedded Style Sheets ___________________________ 148
Criao de estilos atravs de Linked Style Sheets ______________________________ 151
Criao de estilos atravs de Imported Style Sheets ____________________________ 154
10. CAPTULO - INTRODUO AO FRONTPAGE __________________________ 158
Parte A - Iniciao ao FrontPage _____________________________________ 158
Apresentao do FrontPage 2000 __________________________________________ 158
As FrontPage Webs _____________________________________________________ 160
Criao de uma FrontPage web ____________________________________________ 164
Parte B - Criao de pginas e opes de visualizao______________________ 166
Criao de uma pgina HTML em FrontPage __________________________________ 166
Opes de visualizao de Webs em FrontPage ________________________________ 166
11. CAPTULO - CRIAO DE PGINAS WEB EM FRONTPAGE________________ 168
Parte A - Criar e editar uma pgina____________________________________ 168
Criar uma nova pgina __________________________________________________ 168
Editar uma pgina______________________________________________________ 169
Parte B - Gravar, eliminar e definir propriedades de pginas_________________ 170
Gravar uma pgina _____________________________________________________ 170
Eliminar uma pgina ____________________________________________________ 170
Definir as propriedades de uma pgina ______________________________________ 172

- IV -
12. CAPTULO - TRABALHAR COM TEXTO EM FRONTPAGE __________________ 173
Parte A - Processamento e importao de texto e grficos __________________ 173
Processamento de texto em FrontPage ______________________________________ 173
Importao de texto e grficos ____________________________________________ 173
Parte B - Inserir linhas, pesquisar e usar estilos __________________________ 174
Inserir linhas horizontais, quebras de linha, smbolos e comentrios ________________ 174
Pesquisa e substituio de texto ___________________________________________ 175
Estilos de pargrafos____________________________________________________ 175
Alinhamento e espaamento de linhas_______________________________________ 176
Parte C - Trabalhar com listas _______________________________________ 177
Formatao de listas ____________________________________________________ 177
Listas condensveis_____________________________________________________ 178
13. CAPTULO - GRFICOS E HIPERLINKS EM FRONTPAGE__________________ 179
Parte A - Trabalhar com imagens _____________________________________ 179
Inserir imagens________________________________________________________ 179
Importar Cliparts da Web ________________________________________________ 179
Propriedades gerais de uma imagem________________________________________ 180
Alinhamento de imagens e texto ___________________________________________ 181
Posicionamento absoluto de imagens________________________________________ 182
Rotao de imagens ____________________________________________________ 182
Parte B - Aplicar efeitos a imagens____________________________________ 183
Definio de transparncias_______________________________________________ 183
Alterao de brilho e contraste ____________________________________________ 183
Efeitos de difuso e monocromtico ________________________________________ 183
Parte C - Vdeos, hiperlinks e image maps ______________________________ 184
Incluso de vdeo ______________________________________________________ 184
Criao hiperlinks ______________________________________________________ 184
Criao Bookmarks _____________________________________________________ 184
Criao de image maps__________________________________________________ 186
14. CAPTULO - TABELAS EM FRONTPAGE______________________________ 187
Parte A - Desenhar e inserir tabelas ___________________________________ 187
Desenhar Tabelas______________________________________________________ 187
Inserir Tabelas ________________________________________________________ 188
Parte B - Propriedades de tabelas e celulas _____________________________ 190
CELLPADDING e CELLSPACING ____________________________________________ 190
Propriedades gerais de uma tabela _________________________________________ 190
Propriedades gerais de uma clula _________________________________________ 191
15. CAPTULO - FRAMES E FORMS EM FRONTPAGE _______________________ 194
Parte A - Frames e Framesets _______________________________________ 194

- V -
Criar um Frameset _____________________________________________________ 194
Criar Links em Framesets ________________________________________________ 195
Subdividir Frames______________________________________________________ 195
Parte B - Forms __________________________________________________ 196
Criar Forms___________________________________________________________ 196
Utilizar o Form Page Wizard ______________________________________________ 197
INDICE __________________________________________________________ I

Sebentafp

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Sebentafp

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML, CSS e FrontPage

Curso de Tecnologias de Informao e

Anda mungkin juga menyukai