1 Conceitos gerais de HTML

O HTML (HyperText Markup Language) um conjunto estruturado de instrues,conhecidas

por etiquetas ou tags (em ingls), que dizem a um browser como publicaruma pgina web, ou
seja, o browser interpreta essas etiquetas e desenha a pgina noecr. Estes conjuntos de
instrues esto agrupados em ficheiros de tipo texto, i.e., semqualquer tipo especial de
formatao.
Que editor utilizar?
A forma mais simples, e bsica, de fazer programas em HTML ser a utilizao desimples
editores de texto como o caso, por exemplo, do Notepad. No entanto, osutilizadores mais
experientes utilizam diversos tipos de aplicaes, mais ou menossofisticadas, para
desenvolverem as partes fundamentais de uma pgina em HTML.Algumas dessas aplicaes
permitem que numa primeira fase o programador faa umdesenho grfico daquilo que
pretende e que posteriormente seja gerado, de uma formaautomtica, o cdigo HTML
correspondente.
Os quatro conceitos fundamentais
O primeiro passo na aprendizagem do HTML o estudo dos termos bsicos quedescrevem a
maior parte das funes desta linguagem.
Elementos
Todas as pginas de HTML so compostas por elementos. Um elemento pode ser vistocom um
contentor em que colocada uma seco de uma pgina web. Tudo o queestiver dentro desse
contentor fica com as caractersticas desse mesmo elemento. Se,por exemplo, se quiser fazer
uma tabela toda a informao referente a essa tabela terque estar colocado no interior do
elemento <table></table>.
Etiquetas ou tags
Por vezes os termos elemento ou tag, de uma forma errada so usados indistintamente.Um
elemento composto por duas etiquetas: uma a abrir e outra a fechar. Apesar de noHTML
esta distino no ser muito importante j no caso do XHTML ela torna-sefundamental.Todas
as tags so construdas da mesma forma. A etiqueta inicia-se com o sinal de
menor que (<) seguido do nome do elemento e termina com o sinal de maior que
(>). A forma da etiqueta para a abertura de um pargrafo : <p>. A tag de
terminaodiferencia-se apenas por possuir uma barra (/) antes do nome do elemento: </p>.
Ocontedo fica entre as etiquetas de incio e fim:<p>Este um pequeno pargrafo.</p>
4 36Alguns elementos no precisam de uma tag de terminao porque no incluem
qualquertipo de contedo e so por isso denominados elementos vazios. assim que,
porexemplo, o elemento de quebra de linha <br> no requer uma etiqueta de terminao.
Atributos e valores
Os atributos so outro elemento importante da linguagem HTML. Um atributo utilizadopara
definir as caractersticas de um elemento e colocado no interior da tag de aberturado
elemento. Por exemplo, para atribuir a cor a uma palavra utiliza-se o elemento FONT
em conjunto com o atributo COLOR: <font color= >. O sinal de igual e as aspas so
fundamentais pois atribuem um valor a um atributo.A utilizao de letras minsculas ou
maisculas no nome dos elementos, tags e atributos indiferente para a interpretao que os
browsers fazem delas. Por exemplo:
<p>.</p> a mesma coisa que <P>.</P>.
Se for escrita uma etiqueta que no exista em HTML ou que um determinado browserno
entenda essa etiqueta ser ignorada no produzindo qualquer output.
Aninhamento (Nesting)
Numa pgina web existem quase sempre mltiplos elementos que nunca se devemsobrepor.
Os elementos devidamente aninhados so sempre independentes uns dosoutros. Veja-se o
seguinte exemplo em que tudo est arrumado ou aninhado:<a><b><c></c></b></a>Agora
uma situao em que h sobreposio, i.e., uma falta de
aninhamento:<a><b></a><c></b></c>
1.1

Ficheiros HTML
HTML significa Hyper Text Markup Language (Linguagem de marcao de texto).
5 36Um arquivo HTML um arquivo texto contendo pequenas marcaes que
serointerpretadas por um browser (como o mozilla firefox por exemplo). Estas marcaes
sochamadas de TAGs (ou etiquetas). As tags mostram ao browser como exibir a pgina.Um
arquivo HTML deve ter a extenso htm ou html e pode ser criado usando um editorde texto
comum.
1.2

Estrutura da pgina HTML
Um elemento, em HTML, um comando que identificado por aparecer dentro destessinais
<>. No exemplo acima <TITLE> um elemento. De acordo com a sintaxe doHTML, um
elemento no case sensitive ou seja <title>, <TITLE> ou <tItLe> amesma coisa quando
interpretado. Certos elementos como o <HR> so auto-delimitados,ao contrrio do <TITLE>
que tem de ser obrigatoriamente delimitado por </TITLE>.H elementos que podem ou devem
levar atributos, um exemplo desta situao o casodo BASE usado em cima. O elemento
imagem usa, neste caso, o atributo HREF.Os elementos em HTML so classificados de acordo
com o local onde so inseridos. Osque so inseridos no corpo do documento (entre o <BODY>
e </BODY>) designam-sepor BODY ELEMENTS e os elementos situados na cabea designados
por HEADELEMENTS.
2

Ligaes
O verdadeiro poder da Internet reside no facto de ser possvel estabelecer ligaes(links) entre
diferentes peas de informao, formando uma verdadeira teia (web) deconhecimento. Esses
links de um tipo especial designam-se por hiperligaes.A World Wide Web utiliza um
esquema de endereos conhecido como URLs (UniformResource Locators) para identificar o
local de destino de cada hiperligao. Por vezesestas ligaes tambm so conhecidas por
ncoras.Sem esta estrutura no se falaria de HTML mas apenas de TML (Text Markup
Language)!
2.1

Tag <A> para ligao
</A>
- Este o elemento de ncora e usado na interligao de documentos. De ummodo geral um
utilizador ao carregar numa imagem ou num texto pode abrir uma novapgina, imagem ou
gravar um ficheiro. Este elemento tem vrios atributos mas o HREF obrigatrio para
funcionar.
6 36
Atributos mais importantes
href="URL". href a abreviatura de Hypertext reference ou seja o recurso que o browserir
tentar abrir. Este recurso pode ser uma imagem, um ficheiro ou uma nova pginah
ref="http://". possvel tambm abrir re
cursos associados a outros servios dainternet nomeadamente:
<href="ftp://"

Cria um documento em HTML de acordocom o contedo do FTP. De referir que s possvel
esta situao em FTP sites queaceitem entrada de utilizadores annimos.
name="nome da
ncora

o nome faz a identificao da ncora quepode ser usado para saltar para umadeterminada
parte de um documento.
Exemplo:
Supondo que temos dois documentos: o doc1.html e o doc2.html. Ao carregarmos com orato
na ncora do doc2.html abrir-se- a pgina relativa ao doc1.html e o seuposicionamento ser
na ncora que tem o nome de "aqui".
O doc1.html contm:
<a name="aqui">Isto uma ncora.</a>
O doc2.html contm:
<a href="doc1.html#aqui">Doc1</a> clicando salta para a zona doc1.html ondeest um
elemento A com o nome de "aqui".
Exemplo:
<a href="http://www.cincork.com">Cincork</a> abre uma sesso de http para oCincork.
2.2

Ligao local com caminhos relativos e absolutos
Todos os documentos numa nica pasta
A ligao a um outro documento pode ser feita a um nvel local (no mesmo computadoronde
se encontra o programa HTML em questo) pois no necessrio navegar naInternet para lhe
ter acesso.
7 36A ncora mais simples aquela que liga a um documento situado na mesma pasta
doprograma HTML em funcionamento:
<a href=ficheiro.html>texto que se refere a esse link</a>
em q
a
se refere a ncora (anchor, em ingls) e href a referncia de hipertexto(hypertext reference).
Os documentos de tipo HTML podem ter a terminao
html
ou
htm
.
Usar uma imagem como uma hiperligao
As imagens podem ser usadas apenas com fins decorativos mas tambm com outrosobjetivos
como, por exemplo, figuras de funco, marcas de gua, botes ou hiperligaes.Uma imagem
pode ser utilizada como uma hiperligao colocando simplesmente oelemento <img...> entre
um conjunto de etiqueta de ncora. Por exemplo:<a href="index.htm"><img src="elef1.jpg"
alt="Ligao a um site sobreelefantes">Clicar para ver uma pgina sobre elefantes</a>.ou,
agora este exemplo, em que se coloca o atributo
border=0
porque no se pretendeuma imagem com bordadura, que colocada, por defeito, pelo
HTML:<a href="index.htm"><img src="elef1.jpg" alt="Ligao a um site sobre elefantes"
border=0>Clicar para ver uma pgina sobre elefantes</a>.

8 36
Com os documentos em pastas diferentes
A etiqueta
<a>
permite tambm a ligao a documentos HTML que estejamlocalizados em pastas diferentes
daquele que contm a ncora. Suponha-se que asimagens, por uma questo de organizao,
esto todas armazenadas numa determinadapasta, ento a sintaxe para a hiperligao passa a
ser:
<a href=imagens/nome da imagem.gif>esta imagem est numa pasta abaixo</a>
isto significa que a pasta imagens est localizada um nvel abaixo daquele em que est
afuncionar o programa em HTML que contm a ncora.Se for necessrio fazer referncia a
documentos que se situem em pastas a um nvelsuperior quele em que est a funcionar o
programa em HTML que contm a ncora,ento a sintaxe passa a ser:
<a href=../imagens/nome da imagem.gif>esta i
magem est numa pasta acima</a>
2.3

Ligao a outros documentos na Web e a determinados locaisdentro de documentos
A ligao a documentos localizados na web vai fazer recurso da formatao URL daseguinte
maneira:
<a href=URL>texto que remete para o link</
a>ou, num exemplo especfico:<a href="http://www.cincork.com"><b>Stio do
Cincork</b></a>
9 36
3

Formatao de texto com HTML
O texto que utilizado nas pginas web pode ser formatado de formas muito diversas:cor,
tamanho, tipo de letra (fonte) e ainda escrever numa forma superior linha(superscript, em
ingls) ou inferior linha (subscript, em ingls).
3.1

Estilos de caracteres, caracteres especiais e fontes
Tamanho da letra
A tag
<font></font>
pode ser utilizada para valores entre 1 (a letra mais pequena)e 7 (a maior) sendo que 3 o
tamanho normal do texto. Estes valores so relativos edependem do tipo de fonte que o
utilizador tiver escolhido para o browser.A sintaxe a seguinte:
<font size=>Stio do Cincork</font>, em que est entre 1 e 7.
O tamanho da letra pode ser alterado de uma forma relativa:
<font size=+>Stio do Cincork</font>
<font size=-
>Stio do Cincork</font>

em que + ou representam, respetivamente, um aumento
ou reduo de tamanhorelativamente ao tamanho em utilizao.O tamanho utilizado por
defeito pode ser definido para uma determinada pgina webcom a seguinte etiqueta:
<basefont size=>
que altera o tamanho normal de 3 para um outro valor qualquer. Esta etiqueta no
temterminao pelo que continua ativa at ocorrer outra tag
<basefont>
.
Cor da fonte
Exemplos:
<font color = red>Vinho Tinto</font>

<font color = #993459>Teste de Colorizao</font>
Os atributos size e color podem ser utilizados simultaneamente na tag <font>:
<font size = 5 color = navy>Azul Cor do Mar</font>

Tipo de letra (fonte)
Os browsers podem alternar entre diferentes tipos de letras desde que essas fontesestejam
instaladas no computador do utilizador. A fonte (tipo de letra) pode serformatada pela tag
seguinte:
<font face=nome da fonte>


10 36Exemplo:
<font face=arial>Letra Arial
</font> Quando se pretender voltar fonte definida por defeito no computador do utilizador
temque se colocar a tag de terminao </font>.
A utilizao de caracteres especiais
Designam-se por caracteres especiais ou entidades aqueles que, normalmente, no
soutilizveis diretamente atravs do teclado ou que tm um significado especial em HTML
ecomo tal so interpretados como cdigo e no como caracteres. Quando se est a
trabalhar, por exemplo, numa frmula matemtica e se pretende escrever o sinal de
>

isso ser interpretado pelo browser como uma tag e ento para escrever essa frmula
necessrio recorrer-se utilizao de caracteres especiais.As entidades podem ser descritas
por cdigos numricos ou por palavras-chave. Algumasentidades podem ser representadas das
duas formas. por exemplo. o smbolo decopyright pode ter uma representao numrica
(&#169)
ou atravs de uma palavra-chave
(&copy)
.Para que uma entidade seja devidamente interpretada por um browser tem que comear
sempre com o smbolo
&
e terminar com
;
. Os cdigos so sensveis a letras
maisculas e minsculas e como tal devero ser digitados como se encontram, porexemplo, no
Quadro 1
dos Anexos.
A insero de uma entidade numa pgina web
Para exemplificar a utilizao de entidades vai-se em seguida introduzir uma nota decopyright
numa pgina web:1. Abrir o Notepad.2. No incio do documento escreve-se <html>, na linha
seguinte: <head>.3. Em baixo <title>Experincia com caracteres especiais</title> e </head>.4.
No <body> escrever Copyright 2005.5. E depois da palavra Copyright, digta-se o caracter &.6.
Finalmente introduz-se um dos cdigos: o numrio ou a palavra. Por exemplo, parautilizar o
smbolo de copyright utiliza-se #169 ou copy. Termina-
se o cdigo com ;. O
texto no <body> dever ser este:
Copyright &copy; 2013 ou Copyright &#169; 2013
enquanto que numa janela de um browser da web ser assim:
Copyright 2005
Agora, apresentado um novo exemplo com a utilizao de duas entidades:<html>

11 36<head><title>Exemplo de aplicao</title></head><body>Copyright &copy; 2005 A
minha marca registada &#174; o smbolo de qualidade!</body></html>e o resultado, numa
janela de um browser, pode ser visto na Figura:
Estilos no texto
O HTML tem vrias formas de formatao para o texto que alm de se poderem
utilizarisoladamente tambm se podem combinar entre si ou com outras tags.
Formataes bsicas
a. Itlico

<i>Vamos visitar Xangai!!!!</i> b. Carregado

<b>Isto est escuro!</b> c. Sublinhado

<u>Santa Maria de Lamas </u>
3.2

Quebra de linha de texto
Pargrafos
Em HTML as teclas de <ENTER> ou a de <RETURN> no tm qualquer significado, omesmo para
os espaos ou linhas em branco. No entanto, a tag para pargrafo insereuma linha em branco
e inicia um novo pargrafo.
Sintaxe:
<p>Este um pargrafo!</p>


12 36Em algumas situaes no necessrio utilizar a tag de finalizao </p>, mas isto
umcaso de exceo pois a norma o de se ter que fechar todas as etiquetas que se abrem.
Nova linha
Existe ainda a tag de nova linha (
<br>
) que fora a passagem para outra linha, mas noinsere uma nova linha. Esta etiqueta no tem
terminao.
3.3

Endereos de mail
Para fazer ligaes a endereos de correio eletrnico, devemos utilizar a tag
<a>
, com o
atributo href=mailto:endereo.
Exemplo:
<p>Clique <a href=mailto:nome@cincork.com>aqui</a> para enviar uma
mensagem de correio eletrnico.</p>Deste modo, a palavra aqui fica com ligao e abre um
qualquer programa de cliente deemail com o endereo escrito aps o mailto:, no campo
Para
.
4

Imagens
Diferenas entre os formatos dos grficos
De entre a multitude de formatos grficos que se podem utilizar os trs mais comuns naweb
so o GIF, JPEG e PNG. Cada um destes formatos tem as suas particularidades etm tipos
diferentes de aplicaes. A diferena fundamental entre estas trs formasreside na forma de
compresso das imagens, i.e., como as imagens vm comprimido oseu tamanho por forma a
acelerar a sua transmisso pela Internet.
O formato GIF
O formato GIF (Graphics Interchange Format) est especialmente adaptado ao desenhodas
mais diversas formas, a botes de navegao, a clip art e a todo o tipo de formasgrficas que
no exijam muitas cores.Quando uma imagem ou grfico guardado o seu tamanho
comprimido para noocupar muito espao no disco e para acelerar a sua velocidade de
transmisso na rede.Como j se disse cada um destes trs formatos comprime as imagens de
uma formaparticular. O GIF utiliza o algoritmo de compresso LZW (derivado do nome dos
seusinventores: Lempel-Ziv e Welch). Quando uma imagem armazenada o LZW reduz
todasas linhas com a mesma cor da imagem a um determinado valor que
armazenado,formando uma espcie de inventrio das cores.

13 36
O formato JPEG
As fotografias tm um leque de cores bastante mais alargado relativamente a desenhosou a
botes, como tal necessrio a forma de compresso existente no formato JPEG(Joint
Photographic Experts Group). Em vez de fazer um inventrio de cores como ocaso do
mtodo GIF, o JPEG utiliza um algoritmo complexo que reduz o tamanho da
imagem removendo cores de partes do ficheiro em que a sua falta ser menos notada
pelo utilizador. Este formato produz uma compresso bastante eficaz para imagensfotogrficas
que pode atingir um fator de 10 (por exemplo, um ficheiro com o tamanhode 3000 Kb pode
ser reduzido a 300 Kb).
O formato PNG
O mtodo PNG (Portable Network Graphics) um sistema menos utilizado mas considerado
por alguns como um formato para o futuro. Este formato combina asmelhores qualidades dos
formatos GIF e JPEG.
4.1

Imagens online
Uma imagem do tipo online aquela que se posiciona entre o texto de uma pgina.
Oelemento para colocar/embeber numa pgina uma imagem online o seguinte:
<img src=nome da imagem.gif> ou <img src=nome da imagem.jpg> ou <imgsrc=nome da
imagem.png>
em que, por exemplo, nome da imagem.gif o nome deum ficheiro de tipo GIF que est
armazenado na mesma pasta do documento HTML.
4.2

Imagens externas e de fundo
Para alm de ser colorida uma pgina web pode ainda ter um fundo com textura. Para
talutiliza-se uma pequena imagem (em GIF ou JPEG) que o browser ir reproduzir vriasvezes
(tile, em ingls) no ecr. Uma imagem com esta finalidade deve ter um tamanhomximo de 10
kbytes.A tag para adicionar uma imagem de fundo a seguinte:
<body background=ficheiro_bg.gif>, em que ficheiro_bg.gif o nome da imagem.

4.3

Atributos das imagens
Definio do tamanho de uma imagem
O tamanho que uma imagem ocupa numa pgina pode ser parametrizado atravs da suaaltura
e largura. Com aqueles atributos possvel aumentar ou diminuir o espaoocupado pela
imagem. No entanto, recorde-se que os atributos altura e largura no

14 36modificam o tamanho do ficheiro propriamente dito. Uma imagem com 2
Mbytescontinua a ocupar esse mesmo espao, mas quando se reduz o tamanho da
imagempermite-se que a pgina web carregue muito mais depressa pois quando o browser
esta interpretar o cdigo ele l os atributos, reservando apenas o espao necessrio napgina
para a imagem, e s depois de mostrar todo o texto se inicia o download dasimagens. Se no
se utilizar a parametrizao dos atributos o browser ter que carregaras imagens medida que
elas aparecem tornando o carregamento da pgina mais lento.Os atributos utilizam-se no
elemento <img> e so os seguintes:
height=" " altura da imagem em pixis.

width=" " largura da imagem em pixis.

Neste exemplo o grfico com o nome imagem.jpg ter uma altura d
e 100 e umalargura de 150:
<img src="imagem.jpg" height="100" width="150">
Alinhamento das imagens relativamente ao texto
Para controlar o arrumar (wrap, em ingls) do texto quando se usa o elemento <imgsrc>
utiliza-se o atributo align com os valores left ou right. Quando se escolhe umalinhamento
esquerda o texto aparece arrumado direita da imagem e vice-versa.Agora apresenta-se um
exemplo com trs imagens (ver a prxima figura) com o seguintecdigo
HTML:<html><head><title>Exemplo com disposio de
imagens</title></head><body><p><img src="elef1.jpg" align="left">Mit den Web-News
knnen Sie sich von Mrklin persnlich ber alle wichtigen
Neuerungen</p>
<p><img src="elef2.jpg" align="right">Hinweis: Sie erhalten zunchst eine Besttigungs-E-
Mail, die wir an die unten
angegebene Adresse</p>
<p><img src="elef3.jpg" align="left">Seit vielen Jahren sind die Explosionszeichnungen und
gedruckten Ersatzteil-Listen zu
unseren</p>

15 36</body></html>
Alinhamento vertical
Para controlar o alinhamento vertical de uma imagem em relao ao texto da pgina, aoutra
imagem ou outro objeto utilizam-se os valores "top", "middle" e "bottom". Veja-seeste
exemplo com trs imagens:<html><head><title>Exemplo com disposio de
imagens</title></head><body><p><img src="elef1.jpg" align="top">Mit den Web-News
knnen Sie sich von Mrklin persnlich ber alle wichtigen
Neuerungen</p>
<p><img src="elef2.jpg" align="middle">Hinweis: Sie erhalten zunchst eine Besttigungs-E-
Mail, die wir an die untenangegeb
ene Adresse</p>
<p><img src="elef3.jpg" align="bottom">Seit vielen Jahren sind die Explosionszeichnungen
und gedruckten Ersatzteil-Listen zu
unseren</p>
</body>
16 36</html>
Imagem sem texto
Quando se pretende inserir uma imagem isolada do texto deve-se criar um
pargrafoindependente que servir apenas para esse propsito, como se pode ver neste
excertode cdigo:<p align=center>
<img src=elefante.gif>
</p>
17 36
4.4

Referncia das cores, cor de fundo e de texto
A web um mundo de cores onde podem ser especificados mais de 161 milhes de tons.Como
tal, a utilizao de cores na pgina de HTML uma cincia e ao mesmo tempouma arte. uma
cincia porque cada uma das cores tem que ser selecionada com umapreciso matemtica e
uma arte pois uma escolha desastrada, ou menos feliz, dacomposio cromtica produz uma
pgina difcil de ler ou confusa para os olhos.
A paleta bsica
A forma mais simples para se trabalhar com cores na web utilizando a paleta bsicacom 16
cores. Essas cores bsicas no requerem nenhuma codificao especial, asimples referncia ao
seu nome suficiente para que sejam entendidas por um browser.Essas 16 cores so: white,
black, silver, gray, red, maroon, yellow, olive, lime, green,aqua, teal, blue, navy, fuchsia e
purple, os seus nomes esto em ingls pois ser nestalngua que sero feitas as codificaes
em HTML.Em HTML h diversas formas para inserir e controlar as cores numa pgina, mas,
talcomo para a formatao do texto, a sua utilizao tem sido desencorajada em favor douso
das folhas de estilo [em cascata] (Cascading Style Sheets). Assim, veja-se como setrabalha com
cores usando as folhas de estilo, para modificar a cor de fundo (backgroundcolor) de uma
pgina. Os objetos a utilizar so:
O nome da cor;

A propriedade
CSS background-color;
E, o selector body.
e, so combinados num documento em HTML da seguinte forma:<html><head><style>body
{background-color: blue}</style></head><body></body></html>Quando se est a utilizar as
Cascading Style Sheets, um selector no mais do que onome de um elemento e, como tal,
atravs do seu uso est-se a selecion-lo para sermodificado. No exemplo de cima, para aplicar
uma cor totalidade do <body> usou-se o
18 36selector body. Nem sempre a utilizao de seletores assim to simples, mas o
princpio este.
A mistura de cores em HTML
Um browser tem sua disposio um sistema de colorao para o texto e fundo de ecr.Cada
cor identificada por um conjunto de valores baseados no trptico Red-Green-Blue(RGB), em
que cada uma dessas cores tem um intervalo de variao entre 0 e 255. Umvalor mximo e
simultneo para os trs (R=255, G=255, B=255) produz a cor branca;um valor mnimo e
simultneo para os trs (R=0, G=0, B=0) equivale ao preto.Utilizando qualquer combinao
destas trs cores bsicas possvel obter um dos 16,7milhes de tons. No entanto, dada a
grande variedade de equipamentos e respetivadesatualizao tecnolgica, a maioria desses 16
milhes de tons no so passveis de serrepresentados corretamente nos dispositivos de
output. Existem 216 hipteses para
cores denominadas browser safe colors. Essas tonalidades podem ser criadas fazendo
combinaes com os valores apresentados no prximo Quadro.
Percentagem EquivalentehexadecimalValor numrico
0% 00 020% 33 5140% 66 10260% 99 15380% cc 204100% ff 255O HTML em vez de identificar
cada uma das cores possveis por um conjunto de trs
nmeros como, por exemplo, 102, 153, 255 vai utilizar uma representao
hexadecimal (uma base 16, com uma numerao que contm: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,A, B, C,
D, E, F) que tratada de uma forma mais eficiente pelos computadores. A cor
referida em cima em cdigo hexadecimal : 6699FF, em que 66 o valor do vermelho,
99 o valor do verde e FF o valor para o azul.Os browsers de utilizao mais corrente tm uma
facilidade na utilizao de cores que o reconhecimento automtico de dezasseis cores: aqua,
blue, gray, black, fuchsia, green,lime, navy, purple, silver, white, maroon, olive, red, teal e
yellow. Estas cores bsicastambm podem ser especificadas atravs de cdigos hexadecimais
como se pode ver no
19 36Quadro a seguir. Repare-se que metade delas no so cores seguras, no entanto dado
oseu estatuto de cores bsicas no h qualquer problema na sua utilizao.
Cor CdigoHex

Cor CdigoHex
Black #000000 White #ffffff Aqua #00ffff Blue #0000ff Navy #000080 Teal #008080Yellow
#ffff00 Lime #00ff00Green #008000 Olive #808000Red #ff0000 Maroon #800000Fuchsia
#ff00ff Purple #800080Gray #808080 Silver #c0c0c0
Cores slidas de fundo
Utilizao do elemento <body>
A formatao da cor de fundo implica uma modificao na tag <body>:<body
bgcolor=#YYYYYY>em que YYYYYY a representao hexadecimal da cor. preciso ter cuidado
na conjugao de cores entre o fundo e os restantes elementos,
como o caso do texto. Se, por exemplo, o valor para o atributo bgcolor for #000000
no vai ser possvel visualizar o texto pois este tem tambm a cor preta. Numa situaodestas
convm utilizar outros atributos que compem a etiqueta <body> e que permitematribuir
cores aos vrios elementos que constituem uma pgina web:<body bgcolor=#YYYYYY
text=#YYYYYY link=#YYYYYY vlink=#YYYYYY>cujo significado o que segue:
bgcolor

a cor de fundo (por defeito grey)
text

a cor do texto normal (por defeito black)
link

a cor de uma hiperligao (por defeito blue)
vlink

a cor de uma hiperligao recentemente visitada (por defeito purple)
20 36
5

Multimdia na web
5.1

Ficheiros de som e de vdeo
Som
A insero de som de fundo pode ser efetuada com a seguinte combinao de
tagsHTML:<bgsound src="nome_ficheiro_som.wav">ou<embed
src="nome_ficheiro_som.wav" width="140" height="25"
autostart="true"controls="smallconsole" volume="60" oop="false"></embed>Para colocar
som atravs de um link usa-se o comando<a
href="http://www.inforensino.com/sons/som.mid">Clique aqui para ouvir o som</a>
Vdeo
A insero de vdeo de fundo pode ser efetuada com a seguinte combinao de
tagsHTML:<bgsound src="nome_ficheiro_video.mov">ou<embed
src="nome_ficheiro_video.mov" width="320" height="240" autostart="true"></embed>Para
colocar vdeo atravs de um link usa-se o comando<a
href="http://www.inforensino.com/videos/video.mov">clique aqui para ver ovdeo</a>
6

Animao na web
Animao numa pgina web qualquer forma de movimento por parte de objetos
e/ouimagens. Essa animao poder ser um simples GIF Animado, um
componenteFlash/Shockwave, um plugin dHTML, um vdeo, etc.A utilizao de animaes em
pginas web pode ser resumida a trs razes:
Atrair a ateno do utilizador para uma seco especfica da pgina

Enriquecer um texto demonstrativo com uma animao correspondente (por exemplo,
demonstrar o funcionamento de um motor tendo uma animao Flash interativa quepermita
ao utilizador acompanhar o que descrito)
Simplesmente entreter o utilizador (mini
-jogos, vdeos, etc.)
21 36Os Web designers dispem ento de um leque de software que lhes permite criar as
maisvariadas animaes para a Web.Iremos explorar as aplicaes mais comuns para o efeito.
6.1

Animao atravs de ficheiros de imagens GIF e JAVA
GIF
s animados
Um GIF Animado um ficheiro GIF

Graphics Interchange Format

que contm umconjunto de imagens que so apresentadas segundo uma determinada ordem.
Este tipode animao foi das primeiras a ser considerada um padro em pginas Web.
As principais vantagens dos GIFs
animados so o tamanho reduzido do ficheiro, afacilidade com que se pode trabalhar com este
formato e o facto de ser automaticamentereconhecido pelos browsers.As desvantagens so
ter que manter a animao muito simples, apenas permite utilizar256 cores, no permite
adicionar som, para permitir criar uma animao com umadurao substancial, tem
que se saltar entre as frames, tornando a animao pouco
fluida.
JAVA
O Java suporta os dois tipos de ficheiros de imagem mais utilizados na World Wide Web,os
ficheiros JPEG e GIF. Cada um destes formatos tem vantagens e desvantagens emrelao ao
grau de compresso que consegue ser obtido. Em geral, as imagens JPEG somelhores para
trabalhar com imagens naturais como fotografias, enquanto que as GIFso melhores para
grficos, logotipos, rguas, botes, ... .Para utilizar as classes de imagens necessrio carreg-
las atravs de:import java.awt.image.*
Mostrar uma imagem
Sem entrar nos pormenores do Java, os mtodos que so usados para declarar umobjecto da
classe Image, a sua atribuio e a sua exposio no ecr so os seguintes:Image art;...art =
getImage(getCodeBase(), "Demo.jpg");...g.drawImage(art, int x, int y, this)
22 36em que x e y so as coordenadas do canto superior esquerdo da imagem e this
oobservador da imagem, ImageObserver, que vai ter utilidades descritas a seguir.
Observador da imagem
O ImageObserver um interface abstrato usado para dar notificao de que umaimagem est
a ser carregada. Utilizando mtodos desta classe possvel saber qual oestado de
carregamento da imagem, permitindo durante este perodo escrever umamensagem para
utilizador, fazer um grfico ou uma animao, aparecendo a imagem noecr quando j estiver
toda carregada. Esta tcnica de estar a fazer duas operaes aomesmo tempo apelidada de
double buffering. Como facilmente se compreende e dada alentido que ainda existe na
Internet este interface de grande utilidade.
Filtros
As subclasses de ImageFilterSource e ImageFilter so usadas para criar novas imagens apartir
das existentes.A subclasse CropImageFilter cria uma nova imagem a partir da regio de uma
jexistente. til quando se pretende obter uma srie de pequenas imagens que derivamde
uma. mais rpido carregar uma e aplicar os devidos filtros do que carreg-las todas.No s
por que mais rpido carregar 1 ficheiro de 100Kb do que 10 de 10Kb, mastambm porque o
software , em geral mais rpido e previsvel do que a rede.O mtodo RGBImageFilter aplica
um filtro de cor a um dado pixel, normalmente aplicado a todos os pixis de uma imagem,
gerando uma nova imagem.
Animao e Vdeo
possvel desenvolver em Java animaes atravs da classe FunImageAnim. Um dosmodos
possveis puxando todas as imagens da animao e mostrando-as a umavelocidade
determinada pelo programador, deste modo tem que se carregar todas asimagens e s depois
que comeamos a ter animao. O outro modo carregar umaimagem que contenha l toda
a sequncia e mostrar uma parte da imagem de cada vezsobrepondo-a anterior. Este tipo de
animao tem vantagens ntidas sobre os GIF

sanimados j que permite para alm de acrescentar som sncrono, aceder arbitrariamentes
imagens.Atualmente o Java no suporta qualquer tipo de ficheiros de vdeo (ficheiros MPEG,
AVI,... ), o que uma enorme limitao.
23 36
7

Desenho de pginas web
Para a construo de uma pgina eficiente deve ser encontrado um equilbrio entreinformao
e design. Este equilbrio , por vezes difcil, devido s limitaes do HTML, dalargura de banda,
da variedade de browsers e das dimenses dos monitores.Para as pginas de nveis superiores,
cujo objetivo transmitir informao do modo maiseficiente e onde j no to importante
cativar a ateno do utilizador, deve-se optarpela simplificao ( no esquecer de referir a data
de atualizao, autor, contacto ).A consistncia na organizao e design da pgina de primeiro
nvel com as pginasseguintes importante. Uma mudana brusca na aparncia dar ao
utilizador a sensaode que abandonou o site.
7.1

Estrutura da pgina
Os elementos referidos em baixo so os mais bsicos e aqueles estritamente necessriospara
programar uma pgina em HTML.

<html> </html> Definem o incio e o fim do programa

<head> </head> o cabealho do programa e, normalmente, no aparece na janela web.

<title> </title> Este elemento est aninhado no HEAD e escreve o ttulo dapgina na barra de
ttulo no cima da janela do browser.

<body> </body> Contm o contedo principal da pgina web.

<!

Coloque aqui os seus comentrios --> Serve para inserir notas oucomentrios sobre o
programa e no so mostrados na janela do browser.Ento, o documento mais simples em
HTML, tambm conhecido como documentomnimo, ter a seguinte
estrutura:<html><head><title>Este nome da pgina</title><!-- informao extra sobre este
documento que no ir aparecer na pgina mas nocabealho --></head><body>O body
contm todo o texto e todas as imagens que constituem a pgina</body></html>A ordem de
abertura e fecho dos tags, como se pode ver, no arbitrria e tem umasequncia hierrquica.
Quando se est a escrever um programa muitas vezes sente-se a
24 36necessidade de fazer alguns comentrios a uma parte especfica do cdigo, para
talutilizam-se as tags <!- - e - ->, os comentrios no tm qualquer output.
8

Tabelas
As tabelas em HTML so estruturas de diviso dos elementos que compem uma pginaweb.
As tabelas em HTML funcionam de uma forma idntica a estruturas semelhantesque existem
nos processadores de texto. As tabelas no servem apenas para escrevertexto em colunas mas
ainda, e principalmente, para alterar o layout normal de umapgina web.
8.1

Definio e constituio de uma tabela
A seguinte poro de cdigo HTML demonstra a construo de uma tabela bsica:<table
border=1><tr><td>Linha 1 coluna 1</td><td>Linha 1 coluna 2</td><td>Linha 1 coluna
3</td></tr><tr><td>Linha 2 coluna 1</td><td>Linha 2 coluna 2</td><td>Linha 2 coluna
3</td></tr><tr><td>Linha 3 coluna 1</td><td>Linha 3 coluna 2</td><td>Linha 3 coluna
3</td></tr></table>O resultado produzido mostrado nesta figura:
25 36O atributo border=1 utilizado na tag <table> desenha uma bordadura em volta da
tabelacom uma espessura de 1 pixel.
8.2

Alinhamento de clulas e tabelas
Cada linha da tabela definida pelas etiquetas <tr></tr> e as clulas que compem aslinhas
so definidas por <td></td>. As etiquetas <td></td> p
odem conter qualqueroutra tag de HTML; com esta etiqueta podem ainda ser utilizados vrios
atributos quecontrolam o alinhamento do contedo em cada uma das clulas:
<td align=left> alinha ao lado esquerdo da clula (alinhamento por defeito)

<td valig
n=middle> alinha ao meio (alinhamento por defeito)
<td align=rigth> alinha ao lado direito

<td valign=bottom> alinha ao fundo

<td align=center> alinha ao centro

<td valign=top> alinha ao topo
Estes atributos podem ser combinados entre si como, por exemplo:<td align=left
valign=bottom>em que o HTML produz uma clula cujo contedo est alinhado a partir da
esquerda e junto ao fundo da clula.
8.3

Dimenso das colunas e tabelas
O aspecto regular das linhas e colunas pode ser alterado com os atributos colspan e
rowspan da tag <td></td>. Veja
-se o caso seguinte:<table border=1><tr><td>Linha 1 coluna 1</td><td align=center
colspan=2>Linha 1 coluna 2 e 3</td></tr><tr><td>Linha 2 coluna 1</td><td>Linha 2 coluna
2</td><td>Linha 2 coluna 3</td></tr><tr><td>Linha 3 coluna 1</td><td>Linha 3 coluna
2</td><td>Linha 3 coluna 3</td>
26 36</tr></table>O aspecto inicial da tabela foi alterado pois a segunda clula da primeira
linha ocupa(spans, em ingls) duas colunas:Uma clula pode igualmente ocupar o espao de
duas linhas:<table border=1><tr><td>Linha 1 coluna 1</td><td align=center colspan=2>Linha 1
coluna 2 e 3</td></tr><tr><td>Linha 2 coluna 1</td><td valign=top rowspan=2>Linha 2 coluna
2</td><td>Linha 2 coluna 3</td></tr><tr><td>Linha 3 coluna 1</td><td>Linha 3 coluna
3</td></tr></table>
9

Frames
As frames so uma inovao que permite a diviso de uma janela de um browser empartes de
informao que trabalham de forma independente ou relacionada. Atualmentes o Internet
Explorer e o Netscape suportam esta funcionalidade.
27 36
9.1

Definio e atributos de frames
Os novos elementos para a implementao de frames so FRAMESET, FRAME e NOFRAMEbem
como o atributo Target="nome do frame" no elemento ncora.
<frameset></frameset> Este elemento per
mite a definio de todos os frames.Para tal conta com a ajuda destes atributos:
rows="valor1,valor2,,valorn"
Indica o tamanho vertical de cada umadas linhas de frames. Por exemplo, se Rows="*,*" ento
a janela vai ter duaslinhas de frames de igual tamanho.
cols="valor1,valor2,,valorn"
Indica o tamanho horizontal de cadaframe da respectiva linha. Por exemplo, se Cols="*,*"
ento a linha vai ter doisframes de igual tamanho.<frame> Este elemento cria um frame j
definido pelo framset. Este elementoapresenta os seguintes atributos:
marginheight="valor"
Nmero de pixels de margem no topo e no fim decada frame.
marginwidth="valor"
Nmero de pixels de margem esquerda e direita.
name="nome"
Nome do frame. Pode ser usado no atributo Target pararedireccionar o frame onde a pgina
vai ser aberta.
noresize
Indica que o tamanho do frame no pode ser reajustado peloutilizador.
src="url"
Especfica a pagina a aparecer no frame.
scrolling="yes|no|auto"
Permite controlar se a barras de scrollingaparecem ou no. No modo auto as barras s
aparecem se forem mesmonecessrias.<noframe></noframe> o elemento que define a zona
que aparece quando umbrowser, que no suporta frames, tenta abrir o documento. Deste
modo, possvel acriao de uma pgina especfica para tais
browsers.Exemplo:<noframe><body>Podemos criar outro documento nesta
zona</body></noframe>
28 36
<a></a> O elemento ncora, j conhecido, apresenta um novo atributo designado por
Target. Este atributo indica o frame em que o URL indicado no href ir ser aberto.
9.2

Conjuntos e ligaes de frames
Primeiro temos de construir um documento em HTML designado por Layout. Como sepode
verificar, o cdigo em baixo, apresenta uma nova zona que engloba toda adefinio dos frames
que vo aparecer no documento, ou seja a zona entre o<frameset> e o </frameset>. Neste
exemplo, podemos verificar a existncia de trselementos <frameset> isto para podermos
criar duas linhas de frames em que a linha decima tem trs frames, que por defeito abrem o
frame1.html, e a debaixo apenas dois emque o frame do lado esquerdo abre o documento
frame2.html e o do lado direito a pginado Cincork.layout.html<html><head><title>
Documento de Layout </title></head><frameset rows="160,*" noresize><frameset
cols="*,*,*" noresize> <!--Define a 1 Linha><frame src="frame1.html" name="f1"><frame
src="frame1.html" name="f2"><frame src="frame1.html" name="f3"></frameset><frameset
cols="*,*" noresize> <!--Define a 2 Linha><frame src="frame2.html" name="f4"><frame
src="http://www.cincork.com" name="f5"></frameset></frameset><noframe><body><p>Este
browser n&atiled;o suporta frames.</body></noframe></html>
29 36
10

Mapas
Com esta inovao possvel que um utilizador, ao carregar numa parte da imagem,possa
fazer o download ou abrir uma nova pgina de acordo com o contedo associado aesse link.
10.1

Estrutura de map e utilizao de <MAP> e <AREA>
Os elementos para a manipulao de imagemaps so os seguintes:<map></map> Este
elemento identifica a zona em que se define os linksassociados a cada rea de imagem. Este
elemento tem de ter obrigatoriamente oatributo
name
para podermos relacionar as coordenadas com a imagem a que estas sereferem.<area> Este
elemento tem de estar entre o <map> e o </map> e associa umadada parte da imagem a um
link. Os atributos so os seguintes:
shape="circle|poly|rect|default"
a opo de
default
define todas aszonas no designadas.
href="url"
identifica o recurso associado parte da imagem
coords
Este elemento depende forma escolhida:<area shape="circle" coords="x,y,raio"
href="url"><area shape="poly" coords="x1,y2,..,xn,yn" href="url"><area shape="rect"
coords="x1,y1,x2,y2" href="url"><area shape="default" nohref>
10.2

Atributo USEMAP
H a referir que, quando se proceder ao uso do elemento <img>, necessrio usar osatributos
usemap="Nome definido no elemento Map"
e
ismap
pois de outro modo obrowser no saberia que a imagem estava associada a um imagemap.
10.3

Coordenadas e ligaes
Para a implementao de imagemaps sempre necessrio ter os seguintes passos emmente:
1 Criao de uma imagem.
H muitas ferramentas que possibilitam a criao uma imagem. Geralmente estasimagens so
no formato GIF (Graphical Interchange Format). Neste momento uma boaopo retirar os
pixis que definem uma determinada forma. Se a rea for um circuloento retirar as
coordenadas do centro e o valor do raio e se for um retngulo retirar o
30 36ponto situado em cima do lado esquerdo e o ponto em baixo no lado esquerdo. Se a
reafor definida por um polgono ento retirar os pontos de cada vrtice comeando pelo
queest mais acima e esquerda e depois, de forma sequencial, todos os outros.
2 Criar um mapa de coordenadas.
Neste passo necessrio especificar para cada rea o recurso associado, ou seja, necessrio
decidir que o circulo definido por x,y,r ir a abrir determinado recurso. Nestafase podemos
proceder criao da zona de mapeamento que apresenta o seguinteaspeto:<map
name="mapname"><area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="url"><area
shape="circle" coords="x,y,r" href="url"><area shape="rect" coords="x1,y1,x2,y2,x3,y3"
href="url "><area shape="default" nohref></map>
3 Associar o a imagem ao mapa realizado.
Como se pode verificar o elemento
map
tem um nome que definido pelo atributo
name
. Este nome vai ser usado para relacionar o mapa com a imagem na medida emque ao escrever
o elemento
<img>
colocamos o atributo
usemap="#mapname"
queindica que a imagem vai usar o mapa com o nome indicado. H a referir que
necessriocolocar tambm o atributo
ismap
para o interpretador saber que est perante um
imagmap
.
<img src="imagem.gif" usemap="mapname" ismap>
Exemplo de um imagmap:
<html><head><title>exemplo de um imagemap</title></head><body><h1><p align="center">
exemplo de um imagemap </h1><map name="mapname"><area shape="poly"
coords="15,30,150,10,150,100,15,150" href="http://www.cincork.com"><area shape="circle"
coords="240,70,60" href="http://www.google.pt"><area shape="rect"
coords="330,15,445,130" href="http://365.cincork.com">
31 36<area shape="default" nohref></map><p align="center"><img src="imagemap.jpg"
usemap="#mapname" ismap></body></html>
10.4

Pginas Web com mapas
O cdigo de HTML escrito em cima d origem seguinte pgina:De acordo com a noo de
imagemap se um utilizador carregar no polgono ir abrir apgina do Cincork, se carregar no
crculo obter a pgina Google e por fim obter apgina 365.cincork.com caso opte por
carregar no quadrado.Esta funcionalidade mostra-se poderosa porque permite ao utilizador
um vasto nmerode opes, na medida em que possvel associar a cada pixel um
determinado recurso.H um grande nmero de sites cuja pgina HTML nem mais nem
menos apenas umaimagem em que partes desta tm funcionalidades associadas.