Você está na página 1de 101

APOSTILA DE HTML

Programa de Educao Tutorial


Curso de Engenharia de Telecomunicaes
Universidade Federal Fluminense

Autor atual: Robertha Pereira Pedroso

ltimas atualizaes: Pmella Almeida Gomes


Rafael de Oliveira Ribeiro

Niteri - RJ
Junho / 2007
2
Sumrio

Prefcio iii

1 Noes gerais sobre HTML e Internet 5


1.1 Caractersticas da linguagem HTML . . . . . . . . . . . . . . 5
1.2 Tags ou marcaes HTML . . . . . . . . . . . . . . . . . . . . 6
1.3 Estrutura de um documento HTML . . . . . . . . . . . . . . . 7
1.4 Criando, abrindo e manipulando documentos HTML . . . . . 7
1.5 Cdigos especiais de caracteres . . . . . . . . . . . . . . . . . 8
1.6 Uniform Resource Locator . . . . . . . . . . . . . . . . . . . . 9

2 Pargrafos e quebras de linha 11


2.1 Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Quebras de linha . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Linhas horizontais . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Aplicando estilos de texto 15


3.1 Marcadores de estilo . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Cabealhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 Exibio de textos pr-formatados . . . . . . . . . . . . . . . . 17
3.4 Centralizao de textos e outros elementos . . . . . . . . . . . 17
3.5 O marcador FONT . . . . . . . . . . . . . . . . . . . . . . . . 18
3.6 Cores de texto e padres de fundo . . . . . . . . . . . . . . . . 19

4 Imagens 23
4.1 O marcador IMG . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.1.1 Inserindo imagens do mesmo diretrio . . . . . . . . . . 25
4.1.2 Inserindo imagens de diretrios diferentes . . . . . . . . 25
4.1.3 Inserindo imagens de outros servidores . . . . . . . . . 27

3
4

4.2 Alinhamento de imagens . . . . . . . . . . . . . . . . . . . . . 28


4.3 Backgrounds com imagens . . . . . . . . . . . . . . . . . . . . 29

5 Links 33
5.1 O marcador A . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.1 Links para arquivos no mesmo diretrio . . . . . . . . . 34
5.1.2 Links para arquivos em diretrios diferentes . . . . . . 36
5.1.3 Links para arquivos em outro servidor . . . . . . . . . 38
5.1.4 Links para sees especcas em documentos . . . . . . 38
5.2 Enviando e-mail diretamente da pgina HTML . . . . . . . . . 40
5.2.1 Preenchendo o campo Assunto ou Subject . . . . . . . 41
5.2.2 Enviando mensagem para mais de um destinatrio . . . 41
5.2.3 Enviando uma cpia da mensagem . . . . . . . . . . . 41

6 Listas 43
6.1 O marcador UL . . . . . . . . . . . . . . . . . . . . . . . . . . 43
6.2 O marcador OL . . . . . . . . . . . . . . . . . . . . . . . . . . 44
6.3 O marcador DL . . . . . . . . . . . . . . . . . . . . . . . . . . 45
6.4 Aninhamento de listas . . . . . . . . . . . . . . . . . . . . . . 46
6.5 Listas com marcadores grcos . . . . . . . . . . . . . . . . . 47

7 Tabelas 51
7.1 O marcador TABLE . . . . . . . . . . . . . . . . . . . . . . . 52
7.2 O marcador TR . . . . . . . . . . . . . . . . . . . . . . . . . . 53
7.3 O marcador TD . . . . . . . . . . . . . . . . . . . . . . . . . . 53
7.4 Ttulos de colunas . . . . . . . . . . . . . . . . . . . . . . . . . 54
7.5 Expanso de clulas em linhas e colunas . . . . . . . . . . . . 55
7.6 Aninhamento de tabelas . . . . . . . . . . . . . . . . . . . . . 56
7.7 Legendas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

8 Formulrios 59
8.1 O marcador FORM . . . . . . . . . . . . . . . . . . . . . . . . 59
8.2 O marcador INPUT . . . . . . . . . . . . . . . . . . . . . . . 60
8.3 Os marcadores SELECT e OPTION . . . . . . . . . . . . . . 63
8.4 O marcador TEXTAREA . . . . . . . . . . . . . . . . . . . . 64
8.5 Alinhamento de campos em formulrios . . . . . . . . . . . . . 66
8.5.1 Usando o marcador PRE . . . . . . . . . . . . . . . . . 66
8.5.2 Usando tabelas . . . . . . . . . . . . . . . . . . . . . . 66
UFF PET-TELE))) i

8.6 Agrupamento de campos com o marcador


FIELDSET . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

8.6.1 Teclas de atalho para conjuntos de campos . . . . . . . 68

8.6.2 Teclas de atalho para campos . . . . . . . . . . . . . . 69

9 Frames 73

9.1 O frame document . . . . . . . . . . . . . . . . . . . . . . . . 73

9.2 O marcador FRAMESET . . . . . . . . . . . . . . . . . . . . 74

9.3 Especicao de tamanho de frames . . . . . . . . . . . . . . . 74

9.3.1 Usando valores em pixels . . . . . . . . . . . . . . . . . 74

9.3.2 Usando valores relativos . . . . . . . . . . . . . . . . . 75

9.3.3 Usando valores percentuais . . . . . . . . . . . . . . . . 75

9.4 O marcador FRAME . . . . . . . . . . . . . . . . . . . . . . . 76

9.5 Combinando ROWS e COLS . . . . . . . . . . . . . . . . . . . 77

9.6 Interligao de frames . . . . . . . . . . . . . . . . . . . . . . 79

9.7 O marcador NOFRAMES . . . . . . . . . . . . . . . . . . . . 81

9.8 Janelas especiais para frames . . . . . . . . . . . . . . . . . . . 82

10 Imagens Mapeadas 83

10.1 Mapas do tipo server-side . . . . . . . . . . . . . . . . . . . . 83

10.2 Mapas do tipo client-side . . . . . . . . . . . . . . . . . . . . . 84

10.2.1 O marcador MAP . . . . . . . . . . . . . . . . . . . . . 84

10.2.2 O marcador AREA . . . . . . . . . . . . . . . . . . . . 84

A Notaes especiais para smbolos 89

B Padres de cores 91
ii
Prefcio

Tendo em vista as diretrizes do MEC em Ensino, Pesquisa e Extenso, o


Programa de Educao Tutorial (PET), do curso de Engenharia de Tele-
comunicaes, da Universidade Federal Fluminense (UFF), desenvolveu um
projeto de elaborao de apostilas, com o intuito de auxiliar os alunos no
aprendizado de temas importantes a sua formao, mas ausentes nas disci-
plinas do referido curso. Estas apostilas tambm so usadas como material
didtico para os cursos de capacitao, ministrados por alunos do PET para
os corpos docente e discente do curso de graduao em Engenharia de Tele-
comunicaes.
Abaixo segue a lista de apostilas preparadas neste projeto:

HTML : Linguagem de programao para hipertextos, principalmente em-


pregada na construo de pginas da Internet (Webpages ).

LaTeX : Sistema de edio de texto largamente utilizado em meios acad-


micos e cientcos, bem como por algumas editoras nacionais e inter-
nacionais.

LINUX : Introduo ao sistema operacional LINUX.

Linguagem C : Linguagem de programao amplamente utilizada em pro-


blemas de engenharia e computao.

MATLAB : Ambiente de simulao matemtica, utilizado em diversas


reas prossionais.

SPICE : Ambiente de simulao de circuitos eltricos (analgicos e digitais),


utilizado em projeto de circuitos discretos e integrados.

Esta apostila destina-se a introduzir o usurio linguagem de programa-


o HTML, fornecendo-lhe as ferramentas bsicas para a criao de pginas
para Internet.

iii
UFF PET-TELE))) 1

So abordados neste material todos os temas necessrios autoria de


documentos HTML e, ao terminar de estud-lo, o leitor estar capacitado
a elaborar sua prpria pgina da Internet, disponibilizando nela o contedo
que desejar.
Uma vez dominadas as tcnicas apresentadas nesta apostila, sugerimos
que o leitor continue seus estudos aprendendo tcnicas mais avanadas de
programao para Internet, tais como HTML Dinmico, Java Script e Java.

Este documento de distribuio gratuita, sendo proibida a venda de parte


ou da ntegra do documento.
2
Sumrio

3
4
Captulo 1
Noes gerais sobre HTML e
Internet

1.1 Caractersticas da linguagem HTML


A linguagem HTML (Hypertext Markup Language ) tem o objetivo de forma-
tar textos atravs de marcaes especiais denominadas tags, para que possam
ser exibidos de forma conveniente pelos clientes Web, tambm denominados
navegadores ou browsers. Alm disso, esta linguagem possibilita a interli-
gao entre pginas da Web, criando assim documentos com o conceito de
hipertexto.
Caractersticas bsicas da linguagem HTML:

1
Documentos HTML so arquivos de texto escritos em ASCII

O HTML no faz diferena entre letras maisculas e minsculas em


suas marcaes, ou seja, no `case sensitive '

Nem todas as marcaes e seus correspondentes recursos so suportados


por qualquer navegador. Quando um cliente Web no entende uma
marcao, ele simplesmente a ignora.

1 ASCII (American Standard Code for Information Interchange ) o formato mais co-
mum usado em arquivos texto em computadores e na Internet. Num arquivo ASCII, cada
caractere alfabtico, numrico ou especial, representado por um nmero binrio de sete
bits. possvel representar at 128 caracteres com este cdigo.

5
6

Arquivos HTML podem possuir as extenses `html' ou `htm'. A pri-


meira normalmente utilizada em sistemas UNIX e a segunda em sis-
temas Windows. Os Browsers so capazes de exibir documentos com
ambas as extenses.

1.2 Tags ou marcaes HTML


A linguagem HTML pertence a uma classe de linguagens de programao
conhecida como `Tag Languages ', ou simplesmente Linguagem de Marcao.
Neste tipo de linguagem, os comandos so escritos em forma de marcaes
denominadas tags.
De um modo geral, as tags aparecem em pares, delimitando o texto a ser
formatado. A tag que abre o campo de atuao de um comando pode ser
identicada pelos sinais

`$<$ >', enquanto a que encerra este campo de atuao possui os sinais
$<$ >'.
Por exemplo:

<B> Linguagem </B> de Marcao.

A sintaxe acima determina que a marcao `B' seja aplicado ao texto


`Linguagem', mas no ao texto `de programao'.
H excees a esse funcionamento de paridade das tags, onde a marcao
<tag> no necessitar de sua correspondente </tag>. Veremos exemplos
de ambos os tipos mais adiante.
Alm do comando propriamente dito, uma tag pode conter seus parme-
tros.
Parmetros so recursos prprios de cada marcao, que permitem que ele
seja executado de diversas formas. Pode-se dizer que enquanto um comando
diz ao Browser o que fazer, seus parmetros dizem a ele como fazer, atravs
de suas opes. Assim como cada comando possui parmetros especcos,
cada parmetro possui opes especcas.
Veja o exemplo:

<FONT SIZE="4"COLOR="green"> Texto </FONT>


UFF PET-TELE))) 7

No exemplo acima, `FONT' o comando e, `SIZE' e `COLOR' so os pa-


rmetros cujas opes escolhidas pelo programador foram, respectivamente,
`4' e `green'. Note que, ao contrrio da marcao de abertura, a marcao
de fechamento de um comando no precisa mencionar seus parmetros.

1.3 Estrutura de um documento HTML


A estrutura principal de um documento HTML possui duas partes bsicas:
o cabealho e o corpo do programa.
Todo documento deve ser iniciado com a marcao <HTML> e nalizado
com </HTML>. Este par de tags essencial.
A rea do cabealho, embora muito conveniente, opcional e delimitada
pelas marcaes <HEAD> e </HEAD>. Entre estas tags pode ser denido
o ttulo da pgina, atravs das marcaes <TITLE> e </TITLE>. O ttulo
especicado ser exibido na barra de ttulo do Browser.
A maioria dos comandos HTML ser colocada na rea do corpo do pro-
grama, que delimitada pelas marcaes <BODY> e </BODY>. Excetuando-
se os `frame documents ', que sero vistos mais adiante, esta uma marcao
obrigatria.
O exemplo abaixo ilustra a estrutura de um programa HTML.

<HTML>
<HEAD>
<TITLE> Primeiro Exemplo </TITLE>
</HEAD>
<BODY>
Bem-vindo ao mundo do HTML!
</BODY>
</HTML>

1.4 Criando, abrindo e manipulando documen-


tos HTML
Documentos HTML podem ser criados em qualquer editor de texto visual
(nos quais a visualizao do arquivo no depende de compilao de cdigo),
tais como Bloco de Notas, VI, emacs, etc. Alm dos editores especcos para
8

vrias plataformas, existem conversores de diversos formatos, por exemplo


de *.doc para *.html.
Para criar uma pgina no Bloco de Notas do Browser, por exemplo, pre-
ciso digitar o texto desejado juntamente com as marcaes que o formataro.
Um documento escrito desta forma denominado cdigo fonte.
Para praticar, abra o Bloco de Notas e digite o exemplo da seo anterior.
Na hora de salv-lo, no campo `Salvar como Tipo' da caixa de dilogo `Salvar
Como', escolha a opo `Todos os Arquivos' e no campo `Nome do Arquivo'
digite o nome desejado juntamente com a extenso .html ou .htm. Se este
procedimento no for adotado, o arquivo ser gravado com a extenso padro
.txt e no poder ser aberto por Browsers.
Depois de salvo o documento, possvel alterar seu cdigo fonte clicando
com o boto direito do mouse sobre o cone da pgina, escolhendo a opo
`Abrir Com' e, em seguida, selecionando o programa editor de texto dispon-
vel. No caso do Windows, este programa ser o Bloco de Notas.
Para visualizar o arquivo criado no Internet Explorer, por exemplo, cli-
que no menu `Arquivo' e escolha a opo `Abrir'. Escreva ento o caminho
completo para o arquivo desejado no campo oferecido ou clique no boto
`Procurar' para procur-lo entre as pastas de seu computador.
Uma dica interessante para quem est comeando e para quem deseja
cada vez mais conhecer os recursos da linguagem HTML analisar cdigos
fonte de pginas da Web. No Internet Explorer o usurio pode fazer isso
clicando no menu `Exibir' e escolhendo a opo `Cdigo Fonte'. Desta forma
o cdigo fonte da pgina ser mostrado no Bloco de Notas, caso voc esteja
trabalhando no Windows.

1.5 Cdigos especiais de caracteres


Existem dois tipos de cdigos especiais que permitem inserir qualquer ca-
ractere numa pgina HTML, mesmo que ele no esteja presente no teclado.
Estes cdigos so especicados pela norma ISO-Latin-1 ou a partir de uma
identidade HTML.
A norma ISO utiliza um cdigo composto pelo caractere `&' seguido do
smbolo `#' e de uma combinao de nmeros, sendo terminado com `;'. J a
identidade HTML usa o caractere `&' seguido de uma palavra que identica
o smbolo e de `;'. As identidades HTML correspondentes a alguns smbolos
comuns esto listados no apndice A desta apostila.
UFF PET-TELE))) 9

aconselhvel, ao se criar uma pgina, utilizar estes cdigos especiais


para criar a acentuao da lngua portuguesa. Desta forma, Browsers mais
antigos ou at mesmo aqueles que estejam congurados para outros idiomas
podero exibir corretamente a letra acentuada.

1.6 Uniform Resource Locator


A abreviao URL corresponde nomenclatura Uniform Resource Locator
(localizador universal de recursos), utilizada pela Internet para indicar o
endereo de um documento. Saber especicar corretamente uma URL
imprescindvel para utilizar adequadamente muitos comandos da linguagem
HTML.
Uma URL deve conter trs partes: o protocolo do documento, o endereo
do servidor e a localizao do arquivo.
Sintaxe: protocolo://servidor/nome do arquivo.
Onde:

protocolo - o tipo de protocolo 2 de comunicao que deve ser usado.

servidor - o nome do servidor que ser acessado.

nome do arquivo - o nome do documento que ser acessado.

Como protocolos, podem ser usados:

HTTP - um servidor da World Wide Web que contm documentos no


formato `HTTP' e que signica HyperText Transfer Protocol.

GOPHER - um servidor composto por menus e diretrios com informa-


es sobre arquivos e dados.

FTP - uma abreviao de File Transfer Protocol.

Telnet - Este protocolo inicia uma sesso para se conectar remotamente a


outro computador.

WAIS - Wide Area Indexed Server um local onde documentos esto dis-
ponveis em formato especial de pesquisa.

2 Conjunto de regras que especicam o formato, a sincronizao, o seqenciamento e a


vericao de erros na comunicao entre computadores.
10

File - Indica que o documento est no micro ou na rede local.


Captulo 2

Pargrafos e quebras de linha

2.1 Pargrafos
A linguagem HTML no reconhece os caracteres de quebra de linha dos
editores de texto e, mesmo que exista uma linha em branco no cdigo fonte,
os clientes Web s reconhecem o incio de um novo pargrafo mediante
marcao apropriada.

A marcao <P> utilizada para denir o incio de um novo pargrafo,


deixando uma linha em branco entre este e o texto anterior.

O parmetro ALIGN dene o alinhamento do texto do pargrafo e pode


assumir os valores `left', `right', `center' e `justify', correspondendo respecti-
vamente aos alinhamentos esquerda, direita, ao centro e justicado. Se o
parmetro ALIGN no for especicado, por padro o pargrafo ser alinhado
esquerda.

Sintaxe bsica: <P> Texto </P>


Sintaxe completa: <P ALIGN=left | right | center | justify > Texto
</P>.
As barras verticais no exemplo de sintaxe indicam que as opes so
mutuamente exclusivas, como era de se esperar, e as aspas so opcionais neste
caso. A utilizao de aspas na denio de parmetros s ser obrigatria
em duas situaes: quando o valor do parmetro for composto de duas ou
mais palavras ou quando no for dado nenhum espao entre os parmetros
na tag.
Este comando pode ou no ser terminado por </P>.

11
12

2.2 Quebras de linha


A marcao <BR> faz uma quebra de linha sem acrescentar espaos. No
existe a marcao </BR>.
A diferena entre a aplicao de <P> e <BR> pode ser visualizada
no exemplo abaixo. Digite-o em seu computador e salve-o como `para-
grafo.html'. Veja o resultado.

<HTML>
<HEAD>
<TITLE> Par&aacute;grafos e quebras de linha </TITLE>
</HEAD>
<BODY>
<P ALIGN=center>Utilizando P:</P>
<P> Vamos separar esta senten&ccedil;a com a marca&ccedil;&atilde;o
de par&aacute;grafo. </P>
Para vericar a diferen&ccedil;a.
<P ALIGN=center>Utilizando BR:</P>
<P> Agora separamos as linhas utilizando <BR>
a marca&ccedil;&atilde;o de quebra de linha. <BR>
Deu para notar?
</BODY>
</HTML>

2.3 Linhas horizontais


A marcao <HR> insere uma linha divisria na posio onde for colocado.
No existe a marcao </HR>.
Os principais parmetros deste comando so:

SIZE=nmero - Dene a largura da linha e deve ser especicado em


pixels.

WIDTH=nmero | nmero% - Especica o comprimento da linha em


pixels ou porcentagem do tamaho da janela.

ALIGN=left | center | right - Especica o alinhamento horizontal da


linha.
UFF PET-TELE))) 13

COLOR=cor - Especica a cor da linha.

NOSHADE - Indica que a linha no deve receber o efeito de sombra.

<HR>
Sintaxe bsica:
Sintaxe completa: <HR SIZE=nmero WIDTH=nmero | nmero%
ALIGN=left | center | right COLOR=cor NOSHADE>
Modique o exemplo `paragrafo.html' conforme o indicado abaixo.

<HTML>
<HEAD>
<TITLE> Par&aacute;grafos e quebras de linha </TITLE>
</HEAD>
<BODY>
<P ALIGN=center>Utilizando P:</P>
<P> Vamos separar esta senten&ccedil;a com a marca&ccedil;&atilde;o
de par&aacute;grafo. </P>
Para vericar a diferen&ccedil;a.
<HR ALIGN=center WIDTH=75% SIZE=15 COLOR=blue NOSHADE>
<P ALIGN=center>Utilizando BR:</P>
<P> Agora separamos as linhas utilizando <BR>
a marca&ccedil;&atilde;o de quebra de linha. <BR>
Deu para notar?
</BODY>
</HTML>
14
Captulo 3
Aplicando estilos de texto

3.1 Marcadores de estilo


Estes comandos permitem que o programador crie uma srie de efeitos no
texto, alterando a forma e o tamanho da fonte. Todas as tags deste tipo
devem ser especicadas em pares, marcando o incio e o m do texto a ser
formatado.
Os principais comandos de estilo de texto so:

Negrito - Aplica o estilo negrito. Sintaxe: <B> texto </B>;

Itlico - Aplica o estilo itlico. Sintaxe: <I> texto </I>;

Sublinhado - Aplica o estilo sublinhado. Sintaxe: <U> texto </U>;

Strong - Similar ao negrito. Sintaxe: <STRONG> texto </STRONG>;

Typewriter - Deixa o texto com espaamento regular. Sintaxe: <TT>


texto </TT>;

Big - Aumenta a fonte e aplica o estilo negrito. Sintaxe: <BIG> texto


</BIG>;

Small - Reduz a fonte. Sintaxe: <SMALL> texto </SMALL>;

Sobrescrito - Eleva o texto e diminui seu corpo. Sintaxe: <SUP> texto


</SUP>;

15
16

Subscrito - Rebaixa o texto e diminui seu corpo. Sintaxe: <SUB> texto


</SUB>;

Pulsante - Faz com que o texto pisque. Este efeito no funciona em todos
os Browsers. Sintaxe: <BLINK> texto </BLINK>;

O exemplo a seguir mostra todos estes efeitos. Digite-o e salve-o como


`estilo.html'.

<HTML>
<HEAD>
<TITLE> Estilos de texto </TITLE>
</HEAD>
<BODY>
<B>Negrito</B>
<BR><I>It&aacute;lico</I>
<BR><U>Sublinhado</U>
<BR><STRONG>Strong</STRONG>
<BR><TT>Typewritter</TT>
<BR><BIG>Big</BIG>
<BR><SMALL>Small</SMALL>
<BR>Texto <SUP>Sobrescrito</SUP>
<BR>Texto <SUB>Subscrito</SUB>
<BR><BLINK>Pulsante</BLINK>
</BODY>
</HTML>

3.2 Cabealhos
Outra forma usada para mudar o tamanho da letra e aplicar o estilo negrito
a um texto o uso das marcaes <H>. A linguagem HTML possui seis
comandos, de H1 a H6, que aplicam um tamanho de fonte diferenciado para
o texto que venham a envolver. Alm de modicar o tamanho, os comandos
H inserem linhas em branco acima e abaixo da linha de texto formatada.
O comando H1 possui o maior tamanho, enquanto que H6 possui o menor
tamanho de fonte.
A sintaxe bsica deste comando : <Hn> Texto </Hn>.
Onde n o nmero de 1 a 6 correspondente ao tamanho do cabealho.
UFF PET-TELE))) 17

O exemplo abaixo permite visualizar os tamanhos de cabealhos. Digite-o


salvando como `cabec.html'.

<HTML>
<HEAD>
<TITLE> Cabe&ccedil;alhos </TITLE>
</HEAD>
<BODY>
<H1> Cabe&ccedil;alho com tamanho 1 </H1>
<H2> Cabe&ccedil;alho com tamanho 2 </H2>
<H3> Cabe&ccedil;alho com tamanho 3 </H3>
<H4> Cabe&ccedil;alho com tamanho 4 </H4>
<H5> Cabe&ccedil;alho com tamanho 5 </H5>
<H6> Cabe&ccedil;alho com tamanho 6 </H6>
</BODY>
</HTML>

3.3 Exibio de textos pr-formatados


Atravs das tags <PRE> e </PRE> o programador pode incluir, em uma
pgina, um texto que foi digitado num editor de textos qualquer, mantendo
sua formatao original com marcas de tabulao, m de linha gerado pela
tecla `Enter' e outros formatos.
O principal parmetro do comando PRE o parmetro WIDTH, que
especica, em caracteres, a largura da linha do texto.
Sintaxe bsica: <PRE> Texto </PRE>.
Sintaxe completa: <PRE WIDTH=largura > Texto </PRE>.

3.4 Centralizao de textos e outros elementos


Para centralizar um cabealho, pargrafo ou gura dentro da largura da
pgina, devem ser usadas as marcaes <CENTER> e </CENTER> envol-
vendo o elemento a ser centralizado.
Sintaxe: <CENTER> [Elementos a serem centralizados] </CENTER>.
Modique o exemplo `cabec.html' conforme mostrado abaixo.
18

<HTML>
<HEAD>
<TITLE> Cabe&ccedil;alhos </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Cabe&ccedil;alho com tamanho 1 </H1>
<H2> Cabe&ccedil;alho com tamanho 2 </H2>
<H3> Cabe&ccedil;alho com tamanho 3 </H3>
<H4> Cabe&ccedil;alho com tamanho 4 </H4>
<H5> Cabe&ccedil;alho com tamanho 5 </H5>
<H6> Cabe&ccedil;alho com tamanho 6 </H6>
</CENTER>
</BODY>
</HTML>

3.5 O marcador FONT


As tags <FONT> e </FONT> permitem ao programador modicar o ta-
manho, o tipo e a cor da fonte de um texto.
Seus parmetros so:

SIZE=nmero - Especica o tamanho da fonte a ser utilizada e pode


variar de 1 a 7. Caso seja especicado um nmero antecedido por
sinais de adio ou subtrao, o tamanho padro da fonte (tamanho 3)
ser, respectivamente, aumentado ou diminudo daquele valor. Assim
size=2 e size=-1 tm o mesmo efeito prtico.

FACE=nome - Permite que seja escolhida uma fonte diferente para o


texto. Podem ser especicados vrios tipos de fonte, de modo que, se o
sistema no possuir a primeira opo, a segunda carregada automati-
camente e assim por diante. Pode-se, portanto, escrever: FACE=fonte1,
fonte2, fonte3. Neste caso, fonte1 a fonte preferida pelo programador,
fonte2 sua segunda opo e fonte3 a ltima.

COLOR=cor - Especica a cor do texto. Seu valor pode ser especicado


pelo nome da cor em ingls, no caso de cores mais comuns. Porm, no
UFF PET-TELE))) 19

caso geral, a especicao de cores feita atravs do padro RGB (Red-


Green-Blue). Neste padro a cor descrita por um nmero de 6 dgitos,
onde os dois primeiros correspondem intensidade da cor vermelha, os
dois do meio da cor verde e os dois ltimos da cor azul. A cor
resultante ser uma combinao destas trs. A base numrica utilizada
para a representao das cores no padro RGB a hexadecimal, o que
nos fornece 256 possibilidades de intensidade para cada cor bsica (de
0 a 255). Escreve-se: COLOR= rrggbb ou COLOR= nome. Os
padres RGB de algumas cores podem ser vistos no apndice B desta
apostila.

Sintaxe bsica:<FONT> Texto </FONT>.


Sintaxe completa: <FONT FACE=nome SIZE=nmero COLOR=cor >
Texto </FONT>.
Digite o exemplo abaixo e salve-o como `cores.html'.

<HTML>
<HEAD>
<TITLE> Cores de texto </TITLE>
</HEAD>
<BODY>
<FONT SIZE=7 COLOR=0C01BD >P</FONT>
<FONT SIZE=6 COLOR=655E7D >e</FONT>
<FONT SIZE=5 COLOR=A39A4B >t</FONT>
<FONT SIZE=4 COLOR=EEF303 >-</FONT>
<FONT SIZE=4 COLOR=EEF303 >T</FONT>
<FONT SIZE=5 COLOR=A39A4B >e</FONT>
<FONT SIZE=6 COLOR=655E7D >l</FONT>
<FONT SIZE=7 COLOR=0C01BD >e</FONT>
</BODY>
</HTML>

3.6 Cores de texto e padres de fundo


Atravs da manipulao dos parmetros da marcao <BODY>, possvel
denir cores para o fundo da pgina, para o texto e para os links de acordo
com a preferncia do programador. Tambm possvel inserir imagens como
plano de fundo, porm isto ser tpico de um de nossos prximos captulos.
20

Em todos os parmetros do comando BODY, a cor deve ser denida da


mesma forma que no parmetro COLOR do comando FONT, ou seja, pelo
seu nome ou padro RGB.
Os principais parmetros do comando BODY utilizados para alterar cores
de texto e fundo de uma pgina so:

BGCOLOR=cor - a cor de fundo, onde o padro cinza ou branco,


dependendo do Browser.

TEXT= cor - a cor do texto, sendo que o padro preto.

LINK=cor - a cor dos links, sendo que o padro azul.

VLINK=cor - a cor dos links j visitados, onde o padro vermelho-


prpuro.

Assim, poderamos congurar as cores de uma pgina complementando a


marcao<BODY> da seguinte forma: <BODY BGCOLOR=cor TEXT=cor
LINK=cor VLINK=cor > [Contedo da pgina] </BODY>
Deve-se ressaltar que o programador precisa ter cuidado ao escolher as
cores para que no atrapalhem a leitura da informao contida na pgina.
Modicaes nas cores dos links tambm podem vir a confundir o usurio,
portanto, se quiser alter-las, tome cuidado para no inverter o padro ou
escolher cores iguais s de texto ou fundo.
Modique o exemplo `cores.html' conforme mostrado abaixo.

<HTML>
<HEAD>
<TITLE> Cores de texto e fundo </TITLE>
</HEAD>
<BODY BGCOLOR=black>
<FONT SIZE=7 COLOR=0C01BD >P</FONT>
<FONT SIZE=6 COLOR=655E7D >e</FONT>
<FONT SIZE=5 COLOR=A39A4B >t</FONT>
<FONT SIZE=4 COLOR=EEF303 >-</FONT>
<FONT SIZE=4 COLOR=EEF303 >T</FONT>
<FONT SIZE=5 COLOR=A39A4B >e</FONT>
<FONT SIZE=6 COLOR=655E7D >l</FONT>
<FONT SIZE=7 COLOR=0C01BD >e</FONT>
UFF PET-TELE))) 21

<P>
<A HREF= >link</A> com cor modicada
</BODY>
</HTML>

Deve-se observar que a tag <A> utilizada no exemplo acima ser denida
no Captulo 5.
22
Captulo 4
Imagens

De modo geral, para que seja possvel inserir uma imagem em uma pgina
HTML, ela deve estar disponvel nos formatos GIF ou JPG. Estes forma-
tos so aceitos por qualquer Browser, alm de possibilitar a compactao dos
arquivos de imagem, permitindo o carregamento mais rpido da pgina. Cer-
tos Browsers conseguem exibir imagens de outros formatos, como BMP, por
exemplo. Porm, tendo em vista os aspectos de universalidade e ecincia,
os formatos GIF e JPG continuam sendo os mais recomendados.

Voc pode obter uma imagem atravs de pginas na Internet, CD-ROMs


de imagens ou processos de digitalizao. Neste ltimo caso, provvel que
se precise utilizar programas de tratamento de imagens, tais como PaintShop
Pro ou PhotoPaint para realizar uma converso de formatos.

importante ressaltar que algumas imagens encontradas em pginas da


Web podem estar protegidas por direitos autorais. Portanto, antes de colocar
em sua pgina uma gura interessante obtida em algum site, procure checar
se ele faz alguma restrio quanto utilizao de suas imagens.

4.1 O marcador IMG


O marcador IMG insere uma imagem no corpo do documento.

Seus principais parmetros so:

SRC= nome ou URL do arquivo - Nome ou endereo (URL) da ima-


gem a ser exibida. Este parmetro obrigatrio.

23
24

ALT=Texto - Exibe o texto especicado quando o Browser no encontra


a imagem ou quando o cursor passa por cima da gura.

ALIGN= Top | Middle | Bottom - Especica o alinhamento da ima-


gem relativamente linha de texto onde exibida.

ALIGN= Left | Right - Especica o alinhamento da imagem relativa-


mente s bordas laterais da janela.

ISMAP - Determina que a gura um mapa de imagem. Trataremos deste


assunto com mais detalhes em um de nossos prximos captulos.

WIDTH= "nmero | nmero%" - Especica a largura de exibio da


imagem em pixels ou em relao largura da janela, independente-
mente de seu tamanho original. Quando se altera a dimenso horizon-
tal da imagem, a dimenso vertical modicada automaticamente para
que a proporo original seja mantida.

HEIGHT= nmero | nmero% - Especica a altura de exibio da


imagem em pixels ou em relao largura da janela, independente-
mente de seu tamanho original. Quando se altera a dimenso vertical
da imagem, a dimenso horizontal modicada automaticamente para
que a proporo original seja mantida. Se quisermos forar uma dis-
toro na proporo original da imagem, temos que usar os parmetros
WIDTH e HEIGHT simultaneamente.

BORDER= nmero - Especica, em pixels, a largura da borda da ima-


gem. O valor zero remove a borda.

VSPACE=nmero - Determina, em pixels, o espao que deve ser dei-


xado em branco na parte de cima e na parte de baixo da imagem.

HSPACE=nmero - Determina, em pixels, o espao que deve ser dei-


xado em branco nas laterais da imagem.

Sintaxe bsica: <IMG SRC= nome ou URL do arquivo >.


Sintaxe completa: <IMG SRC= nome ou URL do arquivo WIDTH=nmero
HEIGHT=nmero BORDER=nmero ALT=Texto
VSPACE=nmero HSPACE=nmero ALIGN=Top | Middle | Bottom |
Left | Right >.
UFF PET-TELE))) 25

4.1.1 Inserindo imagens do mesmo diretrio


Se a imagem e o documento HTML que a exibir estiverem no mesmo dire-
trio, basta especicar o nome completo da imagem no parmetro SRC do
comando IMG.
Sintaxe bsica: <IMG SRC=nome da imagem >.
Digite o exemplo abaixo salvando-o como `imagens1.html'. Para que ele
funcione, necessrio que voc escolha uma imagem qualquer e a salve com
o nome de `imagem1.gif ' no mesmo diretrio do documento.

<HTML>
<HEAD>
<TITLE> Imagens 1 - Insero de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretrio </H1>
<BR>
<IMG SRC=imagem1.gif  >
</CENTER>
</BODY>
</HTML>

4.1.2 Inserindo imagens de diretrios diferentes


Se a imagem e o documento HTML que a exibir estiverem em diretrios
diferentes, o programador precisar especicar o caminho relativo para a
imagem a partir do documento corrente, no parmetro SRC do comando
IMG. O Browser sempre assume o diretrio atual como o inicial para procurar
um arquivo especicado.
Para especicar uma imagem que esteja em um diretrio abaixo do diret-
rio atual, basta utilizar a sintaxe: <IMG SRC=Diretrio/nome do arquivo >.
Por outro lado, se o diretrio onde se encontra a imagem estiver situado
acima do diretrio atual, a sintaxe utilizada ser: <IMG SRC=../nome do
arquivo >.
Portanto, o smbolo `../' corresponde passagem para uma nvel superior
numa rvore de diretrios e o smbolo `/' corresponde a uma passagem para
um nvel inferior. Utilizando estes smbolos, voc poder incluir em uma
pgina um arquivo qualquer de imagem existente no micro.
26

Observe os exemplos de sintaxes:

<IMG SRC=Dir1/Dir2/imagem.jpg > - Esta sintaxe insere no docu-


mento a imagem `imagem.jpg', que est salva no diretrio `Dir2', abaixo do
diretrio `Dir1', que por sua vez encontra-se abaixo do diretrio atual.
<IMG SRC=../../../imagem.jpg > - Esta sintaxe insere no documento a
imagem `imagem.jpg', que est salva no terceiro diretrio acima do diretrio
corrente.
<IMG SRC=../../Dir3/imagem.jpg > - Esta sintaxe insere no docu-
mento a imagem `imagem.jpg', que est salva no diretrio `Dir3', abaixo
do segundo diretrio acima do diretrio corrente.

Modique o exemplo `imagens1.html' como mostrado abaixo. Para que o


cdigo funcione, voc dever escolher uma imagem qualquer e salv-la como
`imagem2.gif ' no diretrio imediatamente acima do diretrio atual. Salve
tambm outra imagem como `imagem3.html' numa pasta do diretrio atual
chamada `Subdir'. Lembre-se que o diretrio atual ser aquele que contm o
documento `imagens1.html'.

<HTML>
<HEAD>
<TITLE> Imagens 1 - Insero de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretrio </H1>
<BR>
<IMG SRC=imagem1.gif  >
<P>
<H1> Inserindo imagens de outros diretrios </H1>
<P>
<H2> Diretrio acima do diretrio atual </H2>
<BR>
<IMG SRC=../imagem2.gif  >
<P>
<H2> Diretrio abaixo do diretrio atual </H2>
<BR>
<IMG SRC=Subdir/imagem3.gif  >
UFF PET-TELE))) 27

</CENTER>
</BODY>
</HTML>

4.1.3 Inserindo imagens de outros servidores


Para inserir em uma pgina HTML imagens localizadas em outro servidor,
necessrio apenas especicar corretamente sua URL no parmetro SRC do
comando IMG.
Sintaxe bsica: <IMG SRC= URL >.
Veja o exemplo:
<IMG SRC= http://www.servidor.com.br/imagem.gif>
A sintaxe do exemplo, insere no documento a imagem `imagem.gif ', lo-
calizada no servidor `www.servidor.com.br'. O protocolo utilizado o http e
sua declarao necessria para a sintaxe correta da URL, como vimos no
primeiro captulo.
Incremente mais uma vez o exemplo `imagens1.html', conforme mostrado
abaixo.

<HTML>
<HEAD><TITLE> Imagens 1 - Insero de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretrio
</H1>
<BR>
<IMG SRC=imagem1.gif  >
<P>
<H1> Inserindo imagens de outros diretrios
</H1>
<P>
<H2> Diretrio acima do diretrio atual </H2>
<BR>
<IMG SRC=../imagem2.gif  >
<P>
<H2> Diretrio abaixo do diretrio atual </H2>
<BR>
28

<IMG SRC=Subdir/imagem3.gif  >


<P>
<H1> Inserindo imagens de outros servidores </H1>
<BR>
<IMG
SRC=http://www.telecom.u.br/pet/imgcomunicacao.jpg >
</CENTER>
</BODY>
</HTML>

4.2 Alinhamento de imagens


Para alinhar uma imagem numa pgina utilizado o parmetro ALIGN.
As opes Top, Middle e Bottom do parmetro ALIGN denem a posio
da imagem com relao ao texto. Se for usada Top, a gura ser alinhada
com o texto pela sua parte superior, se for usada Middle, pelo centro e, se
for usada Bottom, pela parte inferior. Estas trs opes mantm a imagem
como um caractere de linha, ou seja, de cada lado da gura s poder haver
uma linha de texto.
Por outro lado, as opes Right e Left denem a posio da imagem na
pgina. A opo Left determina que a imagem seja posicionada junto borda
esquerda da janela e a opo Right faz com que a imagem que junto borda
direita. Essas duas opes fazem com que a imagem no mais seja encarada
como um caractere de linha, mas sim como um objeto a parte, e isso permite
que o texto ua ao lado da gura.
Digite o exemplo abaixo e salve-o como `imagens2.html' na mesma pasta
onde se encontra `imagens1.html'.

<HTML>
<HEAD>
<TITLE> Imagens 1 - Alinhamento de imagens </TITLE>
</HEAD>
<BODY>
<H1> Alinhamento de imagens </H1>
<P>
Alinhamento pelo <IMG SRC=imagem1.gif  ALIGN=top > topo
<P>
UFF PET-TELE))) 29

Alinhamento pelo <IMG SRC=imagem1.gif  ALIGN=bottom > fundo


<P>
Alinhamento pelo <IMG SRC=imagem1.gif  ALIGN=middle > meio
<P>
<IMG SRC=imagem1.gif  ALIGN=right> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isto ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a no ser
encarada pelo Browser como um caracter de linha.
<P>
<IMG SRC=imagem1.gif  ALIGN=left> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isto ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a no ser
encarada pelo Browser como um caracter de linha.
</BODY>
</HTML>

4.3 Backgrounds com imagens


Ao invs de denir uma cor para enfeitar o fundo de sua pgina, o pro-
gramador pode optar por utilizar imagens. Para fazer isto basta substituir o
parmetro BGCOLOR do comando BODY pelo parmetro BACKGROUND.
Em BACKGROUND dever ser especicado o nome ou a URL do arquivo
de imagem desejado, lembrando que este dever estar, preferencialmente, nos
formatos GIF ou JPG.
Sintaxe: <BODY BACKGROUND= nome ou URL do arquivo > [Con-
tedo da pgina]</BODY>
As tcnicas estudadas anteriormente para inserir imagens que no este-
jam contidas no mesmo diretrio do documento continuam vlidas. Observe
os exemplos:

<BODY BACKGROUND= ../imagem.jpg > [Contedo da pgina]</BODY>


- Esta sintaxe insere, como plano de fundo do documento, a imagem `ima-
gem.jpg' localizada no diretrio acima do diretrio corrente.

<BODY BACKGROUND= Dir1/imagem.jpg > [Contedo da pgina]


</BODY>
- Esta sintaxe insere, como plano de fundo do documento, a imagem `ima-
30

gem.jpg' localizada no diretrio `Dir1' abaixo do diretrio corrente.

<BODY BACKGROUND= http://www.servidor.com.br/imagem.gif 


>[Contedo da pgina] </BODY> - Esta sintaxe insere, como plano de
fundo do documento, a imagem `imagem.jpg' localizada no servidor `www.servidor.com.br'.

necessrio esclarecer que para preencher todo o fundo de uma pgina


no preciso inserir um gura que possua as dimenses dela. O que o
Browser faz carregar a imagem escolhida e ento repet-la quantas vezes
for necessrio a m de preencher toda a tela. Devido ao fato de a imagem ser
carregada uma nica vez, recomendvel, para maior rapidez na abertura
da pgina, que guras pequenas sejam denidas como planos de fundo.
claro que o aspecto esttico tambm determinante, mas em guras do tipo
textura, a adoo deste procedimento praticamente no ser visvel embora
o tempo de carga da pgina seja sensivelmente reduzido.
No recomendvel a utilizao de guras com muitos contrastes, pois
isto pode dicultar a leitura das informaes contidas na pgina.
Modique o exemplo `imagens2.html' para que que como mostrado abaixo.

<HTML>
<HEAD>
<TITLE> Imagens 1 - Alinhamento de imagens </TITLE>
</HEAD>
<BODY BACKGROUND=../imagem2.gif  >
<H1> Alinhamento de imagens </H1>
<P>
Alinhamento pelo <IMG SRC=imagem1.gif  ALIGN=top > topo
<P>
Alinhamento pelo <IMG SRC=imagem1.gif  ALIGN=bottom > fundo
<P>
Alinhamento pelo <IMG SRC=imagem1.gif  ALIGN=middle > meio
<P>
<IMG SRC=imagem1.gif  ALIGN=right> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isso ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a no ser
encarada pelo Browser como um caracter de linha.
<P>
UFF PET-TELE))) 31

<IMG SRC=imagem1.gif  ALIGN=left> Note que, com este tipo de


alinhamento, o texto ui ao lado da gura naturalmente. Isto ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a no ser
encarada pelo Browser como um caracter de linha.
</BODY>
</HTML>
32
Captulo 5
Links

Como foi comentado no incio da apostila, a principal atrao da Internet a


criao de documentos com o conceito de hipertexto, ou seja, um documento
que se liga a outros atravs de hyperlinks. Com este recurso, o programador
poder permitir ao usurio o acesso imediato a qualquer endereo da Web a
partir de sua pgina.
As palavras ou imagens de um documento que o interligam com outros
so denominadas marcadores de links. De um modo geral, os textos denidos
como marcadores de links so exibidos pelos Browsers sublinhados e com uma
cor padro. J as imagens que tm esta funo costumam receber uma borda
na cor padro de link.

5.1 O marcador A
As tags <A> e </A> podem marcar um texto ou uma imagem como hy-
perlink, assim como criar um endereo para uma parte especca de um do-
cumento que ser referida por um link.
Os principais parmetros do comando A so:

HREF= nome ou URL do arquivo - Especica o endereo da URL


ao qual o link est associado. Pode ser usado para referncias dentro e
fora do documento.

NAME=nome - Especica o nome da seo de um documento que


referida por um link de hipertexto. Trataremos nas sees mais adiante.

33
34

TARGET= janela - Especica o nome do frame ou janela onde ser


aberto o link. Quando formos tratar de frames, este parmetro ser
mais bem explorado; por ora, til saber apenas que a sintaxe TAR-
GET= _blank faz com que uma nova janela seja aberta para carregar
o documento. Caso o parmetro TARGET no seja utilizado, o docu-
mento carregado ser exibido na mesma janela onde est o link.

Nas subsees seguintes sero vistas as sintaxes para criar links em todas
as situaes possveis.

5.1.1 Links para arquivos no mesmo diretrio


Semelhante ao que acontece com o comando IMG, para fazer uma ligao
entre dois documentos contidos no mesmo diretrio, o programador necessita
apenas especicar o nome completo do arquivo que ser chamado no par-
metro HREF do comando A. Este arquivo chamado poder ser uma nova
pgina, uma gura, ou at mesmo uma seo especca de um documento,
como ser visto frente.
Sintaxe: <A HREF= nome do arquivo > Texto ou imagem </A>
Na sintaxe acima, o elemento envolvido pelas marcaes <A> e </A>
denido como marcador do link para se chegar ao documento cujo nome foi
especicado no parmetro HREF, desde que este esteja no mesmo diretrio
do documento corrente. Se o usurio clicar sobre o marcador, o documento
especicado ser exibido.
Como exemplos, podemos analisar as seguintes sintaxes:

<A HREF= praias.html > Praias </A> - Faz com que a palavra `Praias'
torne-se o marcador de um link para uma nova pgina, denominada praias.html
no mesmo diretrio do documento corrente.

<A HREF= praia.jpg > Praia </A> - Faz com que a palavra `Praia'
torne-se o marcador de um link para uma imagem, denominada praia.jpg no
mesmo diretrio do documento corrente.

<A HREF= praias.html > <IMG SRC=praia.jpg > </A> - Faz com
que a imagem `praia.jpg' torne-se o marcador de um link para uma nova
pgina, denominada praias.html no mesmo diretrio do documento corrente.
UFF PET-TELE))) 35

Para visualizar o funcionamento de um link, crie os documentos abaixo.

Documento 1:
<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=links2.html > aqui </A> para acessar o documento 2.
</CENTER>
</BODY>
</HTML>

Salve-o com o nome de `links1.html'.

Documento 2:

<HTML>
<HEAD>
<TITLE> Links 2 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 2 </H1>
<P> Notou o funcionamento do link? </P>
</CENTER>
</BODY>
</HTML>

Salve-o com o nome de `links2.html' no mesmo diretrio em que foi salvo


o primeiro documento.
Abra o documento `links1.html' e teste o link criado.
36

5.1.2 Links para arquivos em diretrios diferentes


possvel fazer ligaes com documentos que estejam em outros diretrios.
Para isso, basta especicar o caminho relativo, a partir do documento cor-
rente, para o documento desejado, no parmetro HREF do comando A. O
procedimento anlogo ao utilizado no comando IMG, visto no captulo
anterior.
Como exemplos, podemos analisar as seguintes sintaxes:

<A HREF= Dir1/praias.html > Praias </A> - A palavra `Praias' aponta


para o documento praias.html no diretrio Dir1 abaixo do diretrio
corrente.

<A HREF= ../praias.html > Praias </A> - A palavra `Praias' aponta


para o documento praias.html no diretrio imediatamente acima do
diretrio corrente.

<A HREF= ../../Dir3/Dir4/praias.html > <IMG SRC= praia.jpg >


</A> - A imagem `praia.jpg' aponta para o documento praias.html situada
no diretrio Dir4, abaixo do diretrio Dir3, que por sua vez est abaixo do
diretrio que se encontra dois diretrios acima do diretrio corrente.

Este tipo de especicao de endereo, onde o caminho para o documento


desejado tem seu ponto de partida no diretrio corrente, conhecido como
`link relativo'. Podemos tambm especicar o endereo de um arquivo a par-
tir do diretrio raiz. Este tipo de especicao denominado `link absoluto'.
Sintaxe de um link absoluto:
<A HREF= le://caminho a partir do diretrio raiz > Texto ou ima-
gem </A>.

Por exemplo:

<A HREF= le://C:/Dir1/Dir2/Dir3/praias.htm > Praias </A>.


A sintaxe acima indica que a palavra `Praias' aponta para o arquivo
`praias.htm' situado no diretrio Dir3, abaixo do diretrio Dir2, abaixo do
diretrio Dir1 do disco C do micro.
Este tipo de endereamento o nico possvel quando se deseja acessar um
arquivo contido numa unidade de disco diferente da do documento corrente.
Experimente mover o documento `links2.html' para o diretrio acima do
diretrio atual e modicar o cdigo do arquivo `links1.html' para:
UFF PET-TELE))) 37

<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=../links2.html > aqui </A> para acessar o
documento 2.
</CENTER>
</BODY>
</HTML>

Verique o funcionamento do link.


Experimente, agora, mover `links2.html' para uma pasta abaixo da que
contm o arquivo `links1.html'. Chame esta pasta de `Subdir'. Modique
novamente `links1.html' conforme mostrado abaixo:

<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=Subdir/links2.html > aqui </A> para
acessar o documento 2.
</CENTER>
</BODY>
</HTML>

Verique o funcionamento do link.


38

5.1.3 Links para arquivos em outro servidor


Para fazer ligaes com documentos localizados em outro servidor neces-
srio apenas especicar corretamente sua URL no parmetro HREF do co-
mando A. Este recurso nos permite ter acesso a documentos que estejam em
qualquer computador do planeta e que esteja conectado adequadamente
Web.
Sintaxe: <A HREF= URL > Texto ou imagem </A>.

Observe o exemplo abaixo:

<A HREF= http://www.servidor.com.br/praias.html > Praias </A>.

No exemplo, a palavra `Praias' o marcador de um link para se chegar ao


arquivo `praias.html' situado no servidor `www.servidor.com.br'. O protocolo
utilizado o http e sua declarao necessria para a sintaxe correta da URL,
como vimos no primeiro captulo.
Digite o exemplo abaixo, e salve-o como `links3.html'.

<HTML>
<HEAD>
<TITLE> Links 3 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Link para arquivo em outro servidor </H1>
<BR>
Clique <A HREF=http://www.telecom.u.br/pet > aqui </A> para
acessar a p&aacute;gina do PET-Tele na internet.
</CENTER>
</BODY>
</HTML>

Verique o funcionamento do link.

5.1.4 Links para sees especcas em documentos


Muitas vezes, quando se tem uma pgina muito extensa, o usurio pode
enfrentar diculdades para localizar a informao que deseja.
UFF PET-TELE))) 39

Um procedimento muito comum nesses casos enderear partes importan-


tes do texto do documento, como, por exemplo, ttulos de sees, e criar um
menu inicial no topo da pgina com links que levaro o usurio diretamente
parte que lhe interessa, evitando que ele tenha o trabalho de procurar.

Criando ncoras:

Para enderear uma seo utilizado o parmetro NAME do comando A. O


endereo criado recebe o nome de ncora.
A sintaxe usada para criar uma ncora : <A NAME=nome da ncora >
[Texto opcional] </A>.

Referenciando ncoras:

Uma vez criadas as ncoras, pode-se criar links para cada uma delas espe-
cicando seu nome no parmetro HREF do comando A. Se o programador
tiver criado ncoras no incio de cada seo do texto, ele ser capaz de criar o
menu inicial de que falamos, de forma a permitir ao usurio uma navegao
mais dinmica.
Sintaxe: <A HREF= #nome da ncora > Texto ou imagem </A>.
O smbolo `#' avisa o Browser para que este procure o link no documento
atual.
Utilizando-se os recursos de endereamento descritos nas sees anteri-
ores, o programador poder referir, atravs de links, sees especcas em
documentos no diretrio corrente, em outros diretrios e at mesmo em ou-
tros servidores.
Observe os exemplos:

<A HREF= #Seo1 > Seo 1 </A> - O texto `Seo 1' levar o
usurio seo `Seo1' do documento atual. As marcaes <A
NAME=Seo1 ></A> devem estar presentes no documento atual,
endereando a seo desejada.

<A HREF= Doc1.html#Seo1 > Seo 1 </A> - O texto `Seo 1'


levar o usurio seo `Seo1' do documento `Doc1.html' localizado no
mesmo diretrio do documento atual. As marcaes <A
NAME=Seo1 ></A> devem estar presentes no documento `Doc1.html',
endereando a seo desejada.
40

<A HREF= Dir1/Doc2.html#Seo1 > Seo 1 </A> - O texto `Seo 1'


levar o usurio seo `Seo1' do documento `Doc2.html' localizado no
diretrio `Dir1' abaixo do diretrio atual. As marcaes <A
NAME=Seo1 ></A> devem estar presentes no documento `Doc2.html',
endereando a seo desejada.

<A HREF= ../Doc3.html#Seo1 > Seo 1 </A> - O texto `Seo 1'


levar o usurio seo `Seo1' do documento `Doc3.html' localizado no
diretrio imediatamente acima do diretrio atual. As marcaes <A
NAME=Seo1 ></A> devem estar presentes no documento `Doc3.html',
endereando a seo desejada.

Digite o exemplo abaixo e salve-o como `links4.html'.

<HTML>
<HEAD>
<TITLE> Links 4 - Sees Especcas em Documentos </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Link para uma seo especca em um documento </H1>
<BR>
Conhea <A
HREF=http://www.telecom.u.br/pet/integrantes.html#ex-bolsistas >
aqui </A> os ex-bolsistas do PET-Tele.
</CENTER>
</BODY>
</HTML>
Visualize o cdigo fonte da pgina exibida pelo link do exemplo acima
para ver as ncoras que ela possui. Tente modicar o exemplo `links4.html'
para que o link leve o usurio a outra seo da mesma pgina.

5.2 Enviando e-mail diretamente da pgina HTML


possvel acionar o programa padro de e-mail diretamente de uma pgina
HTML usando uma variao do comando A, que usa a opo MAILTO no
lugar da URL.
Sintaxe: <A HREF=MAILTO:endereo de e-mail > Texto ou imagem
</A>
UFF PET-TELE))) 41

5.2.1 Preenchendo o campo Assunto ou Subject


possvel preencher automaticamente o campo "Assunto"acrescentando a
varivel ?SUBJECT= seguida do texto que se deseja exibir.
Sintaxe: <A HREF=MAILTO:endereo de e-mail?SUBJECT=texto do
assunto > Texto ou imagem </A>.
Note que o texto do assunto no precisa estar entre aspas.

5.2.2 Enviando mensagem para mais de um destinatrio


Para enviar mensagens para mais de um destinatrio, basta separar seus
endereos de e-mail por vrgulas.
Sintaxe: <A HREF=MAILTO:endereo1,endereo2, endereo3?SUBJECT=texto
do assunto > Texto ou imagem
</A>

5.2.3 Enviando uma cpia da mensagem


Para preencher o campo CC, basta adicionar &cc= e o endereo do desti-
natrio.
Sintaxe: <A HREF=MAILTO:endereo1,endereo2?SUBJECT=texto do
assunto&cc=endereo3 > Texto ou imagem</A>
Digite o exemplo abaixo e salve-o como `links5.html'.

<HTML>
<HEAD>
<TITLE> Links 5 - Enviando E-mail </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Enviando e-mails diretamente <BR> da p&aacute;gina </H1>
<BR>
Envie um <A HREF=mailto:pet_tele@yahoo.com.br?SUBJECT=Teste
do curso de HTML&cc=digite aqui o seu e-mail > e-mail </A> para o
PET-Tele.
</CENTER>
</BODY>
</HTML>
42
Captulo 6
Listas

Uma forma muito conveniente de estruturar um documento HTML a uti-


lizao de listas. As listas podem funcionar como um sumrio, um menu ou
um resumo do contedo do documento e so excelentes para serem usadas
como ponto de partida ao acesso de outras partes do documento.
Existem basicamente trs tipos de listas: as no ordenadas, que contm
uma srie de itens sem numer-los, as ordenadas, que atribuem um nmero
para cada elemento da lista e as listas de denies, que contm termos e
suas respectivas denies. Os comandos usados para criar cada um destes
tipos de listas sero vistos nas prximas sees.

6.1 O marcador UL
As marcaes <UL> e </UL> so utilizadas para gerar listas no ordenadas
(Unordered lists ). Estas tags devem envolver todo o conjunto de itens da
lista, e cada item deve ser precedido da marcao <LI> (Line item ).
O principal parmetro do comando UL o parmetro TYPE, que permite
que sejam especicadas variaes para o marcador utilizado na lista. Os
valores possveis de se atribuir ao parmetro TYPE so:

TYPE=Square - dene um quadrado preto como marcador.

TYPE=Circle - dene um contorno circular como marcador.

TYPE=Disc - dene um crculo preto como marcador.

43
44

Sintaxe bsica: <UL> [Itens da lista] </UL>.


Sintaxe completa: <UL TYPE=tipo > [Itens da lista] </UL>.
O exemplo abaixo ilustra a construo de uma lista no ordenada. Digite-
o salvando como `listas1.html'.

<HTML>
<HEAD>
<TITLE> Listas 1 - Lista N&atilde;o Ordenada </TITLE>
</HEAD>
<BODY>
<UL TYPE=DISC>
<LI> Primeiro item
<LI> Segundo item
<LI> Terceiro item
</UL>
</BODY>
</HTML>

6.2 O marcador OL
As marcaes utilizadas para gerar listas ordenadas (Ordered lists ) so <OL>
e </OL>. Estas tags devem envolver todo o conjunto de itens da lista, e
cada item deve ser precedido da marcao <LI>.
Os principais parmetros do comando OL so:

START=nmero - permite escolher o primeiro nmero da lista. Se este


parmetro no for especicado, a numerao comear do incio.

TYPE=tipo - permite escolher o tipo de marcador da lista. Seus poss-


veis valores so:

TYPE=1 - Cria uma lista numrica normal. No precisa ser especi-


cado, pois padro.

TYPE=A - Cria uma lista alfabtica com letras maisculas come-


ando pelo A.

TYPE=a - Cria uma lista alfabtica com letras minsculas come-


ando pelo a.
UFF PET-TELE))) 45

TYPE=I - Cria uma lista numrica com nmeros romanos (maiscu-


los) comeando pelo I.

TYPE=i - Cria uma lista numrica com nmeros romanos (minscu-


los) comeando pelo i.

importante ressaltar que, independente do tipo de marcador utilizado,


atribuiremos sempre um nmero ao parmetro START. Se, por exemplo, o
programador escrever START=3 para uma lista alfabtica com letras mais-
culas, o primeiro marcador da lista ser a letra C, pois a terceira letra do
alfabeto. O mesmo acontece com listas alfabticas com letras minsculas e
listas cujos marcadores so algarismos romanos.
<OL> [Itens da lista] </OL>.
Sintaxe bsica:
Sintaxe completa: <OL TYPE=tipo START=nmero > [Itens da lista]
</OL>.
O exemplo abaixo ilustra a construo de uma lista ordenada. Digite-o
salvando como `listas2.html'.

<HTML>
<HEAD>
<TITLE> Listas 2 - Lista Ordenada</TITLE>
</HEAD>
<BODY>
<OL>
<LI> Primeiro item
<LI> Segundo item
<LI> Terceiro item
</OL>
</BODY>
</HTML>

6.3 O marcador DL
Uma lista de denies consiste em alternar um termo e uma denio.
As tags <DL> e </DL> so utilizadas para gerar listas de denies.
Estes comandos devem envolver todo o conjunto de termos e denies da
lista. Os termos devem ser precedidos da marcao <DT> e as denies
da marcao <DD>.
Digite o exemplo abaixo e salve-o como `listas3.html'.
46

<HTML>
<HEAD>
<TITLE> Listas 3 - Lista de Deni&ccedil;&otilde;es </TITLE>
</HEAD>
<BODY>
<H1>Lista de Deni&ccedil;&otilde;es<H1>
<DL>
<DT> Primeiro termo
<DD> Deni&ccedil;&atilde;o do primeiro termo
<DT> Segundo termo
<DD> Deni&ccedil;&atilde;o do segundo termo
<DT> Terceiro termo
<DD> Deni&ccedil;&atilde;o do terceiro termo
<DD> Deni&ccedil;&atilde;o alternativa para o terceiro termo
</DL>
</BODY>
</HTML>

Os clientes Web costumam exibir uma denio na linha de baixo e des-


locada direita, com relao a seu termo correspondente.

6.4 Aninhamento de listas


possvel aninhar diversas listas, ou seja, colocar uma lista dentro da outra
para criar estruturas hierrquicas. Para tanto, na hora de escrever o cdigo,
o comando que cria a lista principal deve envolver o comando que cria a lista
secundria.
permitido mesclar todos os tipos de listas.
O exemplo abaixo ilustra um aninhamento de listas de tipos diferentes.
Digite-o salvando como `listas4.html'.

<HTML>
<HEAD>
<TITLE> Listas 4 - Aninhamento de Listas </TITLE>
</HEAD>
<BODY>
<OL>
UFF PET-TELE))) 47

<LI> Primeiro termo da lista ordenada


<LI> Segundo termo da lista ordenada
<UL>
<LI> Primero item da lista n&atilde;o ordenada contida no segundo item
da lista ordenada
<DL>
<DT> Primeiro termo da lista de deni&ccedil;&otilde;es contida no
primeiro item da lista n&atilde;o ordenada
<DD> Deni&ccedil;&atilde;o do primeiro termo da lista de
deni&ccedil;&otilde;es contida no primeiro item da lista n&atilde;o
ordenada
<DT> Segundo termo da lista de deni&ccedil;&otilde;es contida no
primeiro item da lista n&atilde;o ordenada
<DD> Deni&ccedil;&atilde;o do segundo termo da lista de
deni&ccedil;&otilde;es contida no primeiro item da lista n&atilde;o
ordenada
</DL>
<LI> Segundo item da lista n&atilde;o ordenada contida no segundo item
da lista ordenada
<LI> Terceiro item da lista n&atilde;o ordenada contida no segundo item
da lista ordenada
</UL>
<LI> Terceiro item da lista ordenada
<LI> Quarto item da lista ordenada
</OL>
</BODY>
</HTML>

6.5 Listas com marcadores grcos


Este no um tipo padro de lista da linguagem HTML, mas um recurso
bastante usado na confeco de pginas da Web.
O que desejamos agora usar imagens como marcadores para os itens da
lista, e para isso teremos que usar a marcao <IMG SRC>.
Escolha, primeiramente, uma imagem de seu agrado e salve como `mar-
cador.gif '. Esta imagem ser o marcador de nossa lista.
Digite, agora, o exemplo seguite. Salve-o como `listas5.html'.
48

<HTML>
<HEAD>
<TITLE> Listas 5 - Lista com Marcadores Gr&aacute;cos </TITLE>
</HEAD>
<BODY>
<IMG SRC= marcador.gif  > Primeiro item <BR>
<IMG SRC= marcador.gif  > Segundo item <BR>
<IMG SRC= marcador.gif  > Terceiro item
</BODY>
</HTML>

Note que, apesar de no possuir nenhum dos comandos padro de lista


estudados, a formatao do texto na tela ser a de uma lista cujos marcadores
so imagens.
Quando se deseja aninhar listas com marcadores grcos, torna-se neces-
srio utilizar as tags <DL> e <DD> para que as sub-listas sejam deslocadas
direita devidamente.
O exemplo abaixo ilustra este procedimento. Digite-o salvando como
`listas6.html'.

<HTML>
<HEAD>
<TITLE> Listas 6 - Lista com Marcadores Gr&aacute;cos Aninhados
</TITLE>
</HEAD>
<BODY>
<IMG SRC= marcador.gif  > Primeiro item <BR>
<IMG SRC= marcador.gif  > Segundo item
<DL>
<DD><IMG SRC=marcador.gif  WIDTH=20 HEIGHT=20 >
Primeiro sub-item do segundo item
<DD><IMG SRC=marcador.gif  WIDTH=20 HEIGHT=20 >
Segundo sub-item do segundo item
<DL>
<DD><IMG SRC=marcador.gif  WIDTH=10 HEIGHT=10 >
Primeiro sub-item do segundo sub-item
<DD><IMG SRC=marcador.gif  WIDTH=10 HEIGHT=10 >
Segundo sub-item do segundo sub-item
UFF PET-TELE))) 49

</DL>
<DD><IMG SRC=marcador.gif  WIDTH=20 HEIGHT=20 >
Terceiro sub-item do segundo item
</DL>
<IMG SRC= marcador.gif  > Terceiro item <BR>
<IMG SRC= marcador.gif  > Quarto item
</BODY>
</HTML>

Note que, no exemplo, os parmetros WIDTH e HEIGHT do comando


IMG foram utilizados para modicar os tamanhos dos marcadores de acordo
com a hierarquia da lista. Os tamanhos utilizados no exemplo podem no
car bons dependendo da imagem escolhida, portanto, sinta-se livre para
modic-los. aconselhvel usar sempre imagens cujo tamanho seja prximo
ao do texto.
50
Captulo 7
Tabelas

O uso de tabelas melhora muito a aparncia de uma pgina pois permite o


alinhamento de textos e imagens, alm de ordenar as informaes de uma
forma padronizada.
Uma tabela constituda de linhas e colunas, e a interseo entre estes
dois elementos denominada clula.
As tabelas so criadas pelo comando TABLE, suas linhas so criadas pelo
comando TR e as clulas de uma linha so criadas pelos comandos TD ou
TH. Todos esses comandos sero detalhados nas sees seguintes.
Para ter uma noo do funcionamento, digite o exemplo abaixo. Salve-o
como `tabs1.html'.

<HTML>
<HEAD>
<TITLE> Tabelas 1 </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> linha1 coluna1 </TD>
<TD> linha1 coluna2 </TD>
<TD> linha1 coluna3 </TD>
</TR>
<TR>
<TD> linha2 coluna1 </TD>
<TD> linha2 coluna2 </TD>

51
52

<TD> linha2 coluna3 </TD>


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

7.1 O marcador TABLE


As marcaes <TABLE> e </TABLE> so usadas para criar tabelas.
Os principais parmetros do comando TABLE so:

BORDER=nmero - Especica a largura da linha das bordas que sepa-


ram as clulas da tabela. Se no for especicado este parmetro, no
ser exibida uma borda para a tabela.

CELLSPACING=nmero - Especica o espaamento, em pixels, entre


as clulas.

CELLPADDING=nmero - Especica o espaamento, em pixels, entre


o contedo e a borda da clula.

WIDTH=nmero | nmero% - Especica a largura da tabela em pi-


xels ou em porcentagem relativa largura da janela.

ALIGN=left | center | right - Dene o alinhamento da tabela na p-


gina.

BGCOLOR= cor - Especica a cor de fundo de toda a tabela.

BORDERCOLOR=cor - dene a cor de borda da tabela. S funci-


ona se algum valor diferente de zero tiver sido atribudo ao parmetro
BORDER.

BACKGROUND= nome ou URL do arquivo - Dene uma imagem


como plano de fundo para toda a tabela.

Sintaxe bsica: <TABLE> [Comandos de criao de linhas e clulas]


</TABLE>.
Sintaxe completa: <TABLE BORDER= nmero
CELLSPACING=nmero CELLPADDING=nmero
UFF PET-TELE))) 53

WIDTH=nmero | nmero% ALIGN=tipo de alinhamento BGCOLOR=


cor
BORDERCOLOR= cor > [Comandos de criao de linhas e clulas] </TABLE>.

7.2 O marcador TR
A tag <TR> (Table Row ) dene uma linha da tabela. Para cada linha deve
ser escrito um par de marcaes, <TR> e </TR>, e entre elas devem ser
especicados os comandos TD ou TH para criar as clulas de dados daquela
linha. As linhas de uma tabela no precisam ter necessariamente o mesmo
nmero de clulas.
Os principais parmetros do comando TR so:

ALIGN= left | right | center | justify - Especica o alinhamento ho-


rizontal do contedo das clulas.

VALIGN=top | middle | bottom | baseline - Especica o alinhamento


vertical do contedo das clulas.

BGCOLOR= cor - Especica a cor de fundo para a linha.

BORDERCOLOR=cor - Dene a cor de borda das clulas da linha.

BACKGROUND=nome ou URL do arquivo - Dene uma imagem


como
plano de fundo para a linha.

Sintaxe bsica: <TR> [Comandos de criao de clulas] </TR>.


Sintaxe completa: <TR ALIGN=tipo de alinhamento VALIGN=tipo
de alinhamento BGCOLOR=cor BORDERCOLOR=cor > [Comandos
de criao de clulas] </TR>.
Os parmetros do comando TR se sobrepem aos parmetros de mesmo
nome do comando TABLE.

7.3 O marcador TD
A tag <TD> (Table Data ) dene o contedo de uma clula da linha de uma
tabela. Esse contedo deve ser escrito entre as marcaes <TD> e </TD>.
Principais parmetros do comando TD:
54

ALIGN= left | right | center | justify - Especica o alinhamento ho-


rizontal do contedo da clula.

VALIGN=top | middle | bottom | baseline - Especica o alinhamento


vertical do contedo da clula.

NOWRAP - Evita a quebra de linha do contedo da clula.

COLSPAN=nmero - Este parmetro permite aumentar a largura de


uma clula fazendo com que ela ocupe colunas adjacentes. Nele deve
ser especicado o nmero de colunas que a clula ir ocupar.

ROWSPAN=nmero - Este parmetro permite aumentar a altura de


uma clula fazendo com que ela ocupe linhas adjacentes. Nele deve ser
especicado o nmero de linhas que a clula ir ocupar.

WIDTH=nmero | nmero% - Especica a largura da clula em pixels


ou em porcentagem relativa largura da tabela.

BGCOLOR=cor - Especica a cor de fundo da clula.

BORDERCOLOR=cor - Dene a cor de borda da clula.

BACKGROUND=nome ou URL do arquivo - Dene uma imagem


como
plano de fundo para a clula.

Sintaxe bsica: <TD> Caracteres </TD>.


Sintaxe completa: <TD ALIGN=tipo de alinhamento VALIGN=
tipodealinhamentoNOWRAP COLSPAN=nmeroROWSPAN=nmero
WIDTH=nmero | nmero% BGCOLOR=cor BORDERCOLOR=cor >
Caracteres </TD>.
Os parmetros do comando TD se sobrepem aos parmetros de mesmo
nome dos comandos TR e TABLE.

7.4 Ttulos de colunas


Atravs do par de marcaes <TH> e </TH> (Title Heading ) o programa-
dor pode especicar ttulos para as colunas. Estas tags funcionam da mesma
UFF PET-TELE))) 55

forma que <TD> e </TD>, s que deixam, por padro, o contedo da c-


lula centralizado e em negrito. Os principais parmetros so os mesmos do
comando TD.
Os parmetros do comando TH se sobrepem aos parmetros de mesmo
nome dos comandos TR e TABLE.

7.5 Expanso de clulas em linhas e colunas


Uma vez denida a estrutura bsica de uma tabela, ou seja, o nmero de
linhas e colunas, podemos `apagar' a diviso entre clulas vizinhas de maneira
a aumentar a largura ou a altura de uma clula, criando assim, tabelas mais
bem denidas.
O parmetro COLSPAN do comando TD permite aumentar o tamanho
de uma clula fazendo com que ela ocupe colunas adjacentes, enquanto que
o parmetro ROWSPAN faz com que a clula aumente ocupando linhas ad-
jacentes.
O exemplo abaixo ilustra estas expanses. Digite-o e salve como `tabs2.html'.

<HTML>
<HEAD>
<TITLE>Tabelas 2 - Expans&otilde;es </TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=80% ALIGN=center BORDER=1 CELLSPACING=0
BORDERCOLOR=000000 CELLPADDING=0>
<TR>
<TD ROWSPAN=2 BGCOLOR=E0E0E0 > &nbsp; </TD>
<TH COLSPAN=2> T&iacute;tulo 1 </TH>
<TH COLSPAN=2> T&iacute;tulo 2 </TH>
</TR>
<TR>
<TH> Subt&iacute;tulo 1 </TH>
<TH> Subt&iacute;tulo 2 </TH>
<TH> Subt&iacute;tulo 3 </TH>
<TH> Subt&iacute;tulo 4 </TH>
</TR>
<TR>
56

<TH> T&oacute;pico 1 </TH>


<TD> Dados </TD>
<TD> Dados </TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=center VALIGN=middle>
Dados n&atilde;o dispon&iacute;veis </TD>
</TR>
<TR>
<TH> T&oacute;pico 2 </TH>
<TD> Dados </TD>
<TD> Dados </TD>
</TR>
</TABLE>
</BODY>
</HTML>

7.6 Aninhamento de tabelas


Analogamente ao que acontece com as listas, possvel denir uma tabela
dentro de outra. Para tanto, basta especicar entre marcaes <TD> e
</TD> a denio de uma outra tabela. Isto corresponde insero de
uma tabela dentro de uma clula de outra tabela.
O exemplo abaixo ilustra este procedimento. Digite-o e salve como `tabs3.html'.

<HTML>
<HEAD>
<TITLE> Tabelas 3 - Aninhamento </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 BORDERCOLOR= black WIDTH=100%>
<TR>
<TD>
<TABLE BORDER=1 BORDERCOLOR=red WIDTH=100%>
<TR>
<TD> C&eacute;lula 1 </TD>
<TD> C&eacute;lula 2 </TD>
<TD> C&eacute;lula 3 </TD>
</TR>
UFF PET-TELE))) 57

<TR>
<TD> C&eacute;lula 4 </TD>
<TD> C&eacute;lula 5 </TD>
<TD> C&eacute;lula 6 </TD>
</TR>
</TABLE>
</TD>
<TD> C&eacute;lula7 </TD>
</TR>
<TR>
<TD> C&eacute;lula8 </TD>
<TD> C&eacute;lula9 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

7.7 Legendas
Se o programador desejar criar um ttulo ou legenda para a tabela, basta usar
o comando CAPTION imediatamente aps a abertura do comando TABLE.
Sintaxe bsica: <CAPTION ALIGN= top | bottom> Legenda </CAPTION>.
O principal parmetro do comando CAPTION o parmetro ALIGN. Se
atribuirmos ao parmetro ALIGN o valor `top', a legenda especicada ser
exibida na parte superior da tabela. Por outro lado, se a ele for atribudo
o valor `bottom', o Browser exibir a legenda especicada abaixo da tabela.
Em ambos os casos a legenda centralizada de acordo com a tabela.
Modique o exemplo `tabs3.html', conforme indicado abaixo, para inserir
uma legenda na parte superior da tabela.

<HTML>
<HEAD>
<TITLE> Tabelas 3 - Aninhamento </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 BORDERCOLOR= black WIDTH=100%>
58

<CAPTION ALIGN= top> Legenda na parte de cima da tabela


</CAPTION>
<TR>
<TD>
<TABLE BORDER=1 BORDERCOLOR=red WIDTH=100%>
<TR>
<TD> C&eacute;lula 1 </TD>
<TD> C&eacute;lula 2 </TD>
<TD> C&eacute;lula 3 </TD>
</TR>
<TR>
<TD> C&eacute;lula 4 </TD>
<TD> C&eacute;lula 5 </TD>
<TD> C&eacute;lula 6 </TD>
</TR>
</TABLE>
</TD>
<TD> C&eacute;lula7 </TD>
</TR>
<TR>
<TD> C&eacute;lula8 </TD>
<TD> C&eacute;lula9 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Experimente agora colocar a legenda na parte inferior da tabela.


Captulo 8
Formulrios

Os formulrios eletrnicos so um dos mais fascinantes recursos da linguagem


HTML pois atravs deles um usurio pode interagir com o sevidor enviando-
lhe dados para serem processados. Os comandos de criao de formulrios
so, portanto, os principais responsveis pela troca de informaes entre
cliente e servidor.
Neste captulo, voc aprender a criar um formulrio usando os recursos
da linguagem HTML. Porm, para que um formulrio funcione, neces-
srio que no lado do servidor exista um outro programa, escrito em outra
linguagem de programao, que ser o responsvel pelo recebimento e pro-
cessamento das informaes enviadas. Este tipo de programa denominado
CGI e no ser abordado neste curso.

8.1 O marcador FORM


As marcaes <FORM> e </FORM> so usadas para denir um formulrio.
Este comando tem duas funes importantes: especicar o local do programa
que controlar o formulrio e denir a forma ou mtodo como os dados sero
enviados.
O comando FORM possui os seguintes parmetros:

ACTION=URL - Especica o local (URL) do servidor e do programa


CGI que vai processar os dados do formulrio.

METHOD=Mtodo de troca de dados - Indica o mtodo usado pelo


servidor para receber os dados do formulrio. As opes possveis para

59
60

este parmetro so:

GET - As informaes so enviadas como se zessem parte da URL.


POST - As informaes so enviadas num bloco de dados separado
da URL. o mtodo mais utilizado.

Sintaxe: <FORM ACTION=URL METHOD=mtodo > [Campos do


formulrio] </FORM>
Nos exemplos das sees seguintes ignoraremos os parmetros do comando
FORM, uma vez que no estaremos realizando envio de informao atravs
dos formulrios apresentados.

8.2 O marcador INPUT


O marcador INPUT dene um campo de entrada de dados, onde o usurio
digita as informaes requeridas pelo formulrio. Cada campo de um formu-
lrio atribui seu contedo a uma varivel que possui nome e tipo especcos.
Os parmetros do marcador INPUT so os seguintes:

TYPE=Tipo de varivel - Especica o tipo de dado para a varivel.


Suas opes possveis so:

TEXT - Aceita dados do tipo caractere. o tipo de varivel mais


usado para a digitao de um campo de texto com tamanho co-
nhecido. Por padro, a caixa de digitao criada para este tipo de
varivel ter largura equivalente a 20 caracteres, no impe limite
para a quantidade de caracteres digitados.

PASSWORD - Aceita dados do tipo caractere. Funciona exatamente


como uma varivel do tipo TEXT, porm, exibe um asterisco no
lugar de cada caractere digitado para impedir sua visualizao na
tela. ideal para a digitao de senhas e palavras-chave.

RADIO - Aceita campos do tipo sim/no. Permite a exibio de


vrias opes, mas s aceita que uma delas seja escolhida. O
campo de entrada de dados criado para este tipo de varivel
um pequeno crculo, que pode ser marcado com um clique. Dois
crculos associados mesma varivel no podem estar marcados
simultaneamente, pois quando o usurio clicar sobre o segundo, o
primeiro ser automaticamete desmarcado.
UFF PET-TELE))) 61

CHECKBOX - Aceita campos do tipo sim/no. Permite a exibio


de vrias opes e aceita que o usurio escolha vrias delas. O
campo de entrada de dados criado para este tipo de varivel um
pequeno quadrado, que pode ser marcado com um clique.

SUBMIT - Cria um boto que envia o contedo do formulrio ao


ser pressionado. Os dados so enviados para a URL especicada
no parmetro ACTION e de acordo com o mtodo escolhido no
parmetro METHOD do comando FORM. Por padro, a legenda
do boto criado ser `Submit'

RESET - Cria um boto que, ao ser pressionado, possibilita ao usurio


apagar e restabelecer o valor padro para todos os campos do
formulrio de uma nica vez. Por padro, a legenda do boto
criado ser `Reset'.

HIDDEN - Dene um campo invisvel, cujo contedo enviado junto


com os demais.

NAME=nome - Nome da varivel que receber o contedo do campo.


Este parmtero essencial na sintaxe de criao de qualquer campo de
entrada de dados, seja qual for o tipo de varivel escolhido.

VALUE=valor - Permite denir um contedo prvio para campos dos


tipos TEXT e PASSWORD, ou seja, um texto que aparecer escrito
na caixa de digitao quando o formulrio for aberto. Para os campos
do tipo CHECKBOX ou RADIO representa o valor que ser atribudo
varivel se a opo for marcada. Para os campos SUBMIT e RESET
indica o texto que aparece no boto. Este parmetro obrigatrio
apenas para variveis dos tipos CHECKBOX e RADIO.

CHECKED - S se aplica a campos do tipo CHECKBOX e RADIO. Os


campos cuja sintaxe de criao possui este parmetro aparecero mar-
cados quando o formulrio for aberto.

SIZE=tamanho - Dene a quantidade de caracteres exibidos em campos


do tipo TEXT ou PASSWORD. Este nmero delimita apenas o tama-
nho do campo para digitao, e no a quantidade de caracteres que o
campo pode ter.

MAXLENGTH=comprimento - Dene o nmero mximo de caracte-


res permitidos para variveis do tipo TEXT ou PASSWORD.
62

ID=String de identicao - Identica o campo para permitir que seja


criada uma tecla de atalho para ele.

Sintaxe bsica para campos do tipo TEXT:


<INPUT TYPE=textNAME=nome >.
Sintaxe completa: <INPUT TYPE=text NAME=nome SIZE=tamanho
MAXLENGTH=comprimento VALUE=valor >.
Sintaxe bsica para campos do tipo PASSWORD:
<INPUT TYPE=password NAME=nome >.
Sintaxe completa: <INPUT TYPE=password NAME=nome
SIZE=tamanhoMAXLENGTH=comprimento VALUE=valor >.
Sintaxe bsica para campos do tipo RADIO:
<INPUT TYPE=radio NAME=nome VALUE=valor >.
Sintaxe completa: <INPUT TYPE=radio NAME=nome VALUE=valor
CHECKED>.
Sintaxe bsica para campos do tipo CHECKBOX:
<INPUT TYPE=checkbox NAME=nome VALUE=valor >.
Sintaxe completa: <INPUT TYPE=radio NAME=nome VALUE=valor
CHECKED>.
Digite o exemplo abaixo e salve-o como `forms1.html'.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscri&ccedil;&atilde;o</H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que voc&ecirc; domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
UFF PET-TELE))) 63

<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>


Power Point
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>

8.3 Os marcadores SELECT e OPTION


As tags <SELECT> e </SELECT> denem e exibem uma lista de itens que
podem ser selecionados pelo usurio. Visualmente elas criam uma lista de
seleo onde uma caixa exibida com o valor padro, e o clique em uma seta
faz surgir uma lista de opes. Um ou mais itens podem ser selecionados.
Os parmetros do comando SELECT so:

NAME=nome - Especica o nome da varivel que receber o contedo


do campo.

SIZE=tamanho - Especica a quantidade de itens que ser exibida de


uma vez pela lista. Este parmetro opcional.

MULTIPLE - Indica que podem ser escolhidos vrios itens da lista.


opcional.

<SELECT NAME=nome > [Itens da lista] </SELECT>.


Sintaxe bsica:
Sintaxe completa: <SELECT NAME=nome SIZE=tamanho
MULTIPLE> [Itens da lista] </SELECT>.
Cada item da lista deve ser especicado pelo comando OPTION, cujos
principais parmetros so:

VALUE=contedo - Dene o contedo que a varivel correspondente


receber caso a opo seja selecionada.

SELECTED - Indica que a opo deve ser previamente marcada como se-
lecionada.

Sintaxe bsica: <OPTION VALUE=valor >.


Sintaxe completa: <OPTION VALUE=valor SELECTED>.
Complemente o exemplo `forms1.html' conforme o indicado abaixo.
64

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscri&ccedil;&atilde;o</H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que voc&ecirc; domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>
Power Point
<P> Cargo:</P>
<SELECT NAME=cargo>
<OPTION VALUE=analista>Analista de Sistemas
<OPTION VALUE=gerente>Gerente
<OPTION VALUE=programador>Programador C
<OPTION VALUE=Webmaster>Webmaster
</SELECT>
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>

8.4 O marcador TEXTAREA


As marcaes <TEXTAREA> e </TEXTAREA> denem uma caixa de
digitao onde o usurio pode digitar livremente um texto. Esta caixa pode
UFF PET-TELE))) 65

ser previamente preenchida com algum texto que deve ser especicado no
local de `texto padro'.
Os parmetros do comando TEXTAREA so:

NAME=nome - Especica o nome da varivel que receber o contedo


do campo.

ROWS=nmero - Especica a altura, ou seja, a quantidade de linhas


que a caixa deve ter.

COLS=nmero - Especica a largura, ou seja, a quantidade de colunas


que a caixa deve ter.

<TEXTAREA NAME=nome
Assim, sua sintaxe : ROWS=nmero
COLS=nmero > Texto Padro </TEXTAREA>.
Complemente mais uma vez o exemplo `forms1.html' conforme o indicado.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscri&ccedil;&atilde;o<H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que voc&ecirc; domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>
Power Point
<SELECT NAME=cargo>
<OPTION VALUE=analista>Analista de Sistemas
<OPTION VALUE=gerente>Gerente
66

<OPTION VALUE=programador>Programador C
<OPTION VALUE=Webmaster>Webmaster
</SELECT>
<P> Por que deseja trabalhar em nossa empresa?
<BR><TEXTAREA ROWS=6 COLS=40
NAME=pq>M&iacute;nimo de 3 linhas!</TEXTAREA>
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>

8.5 Alinhamento de campos em formulrios


8.5.1 Usando o marcador PRE
Um dos problemas que o programador pode enfrentar na criao de formul-
rios o fato de os campos do formulrio no carem alinhados naturalmente.
Uma tcnica simples de alinhamento consiste em envolver os comandos
relativos aos campos de formulrio pelas marcaes <PRE> e </PRE>.
O texto formatado pelo comando PRE exibido em uma fonte de largura
xa, ou seja, todas as letras possuem a mesma largura. Desta forma, basta
acrescentar os espaos necessrios entre o rtulo do campo e o comando
INPUT para que seja feito o alinhamento.

8.5.2 Usando tabelas


Uma tcnica mais verstil consiste na utilizao de tabelas para alinhar os
campos. Nesta tcnica a tabela deve possuir colunas de ttulos e colunas
de campos. Para ter uma noo mais clara desta tcnica, digite o exemplo
abaixo. Salve-o como `forms2.html'.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 2 - Alinhamento Usando Tabelas
</TITLE>
</HEAD>
<BODY>
UFF PET-TELE))) 67

<P> Alinhamento usando tabela


<FORM>
<TABLE>
<TR>
<TD>Nome:</TD>
<TD><INPUT TYPE=text NAME=nome></TD>
<TD>E-mail:</TD>
<TD><INPUT TYPE=text NAME=email></TD>
</TR>
<TR>
<TD>Telefone:</TD>
<TD><INPUT TYPE=text NAME=tel></TD>
<TD>Celular:</TD>
<TD><INPUT TYPE=text NAME=cel></TD>
</TR>
</TABLE>
<P> <INPUT TYPE=submit VALUE=Enviar> <INPUT TYPE=reset
VALUE=Apagar Campos >
</FORM>
</BODY>
</HTML>

8.6 Agrupamento de campos com o marcador


FIELDSET
O marcador FIELDSET utilizado para envolver campos com uma moldura.
Basta que os campos sejam criados entre as marcaes <FIELDSET> e
</FIELDSET>. Sua sintaxe bsica : <FIELDSET> [Campos] </FIELDSET>.
Alm disso, o comando LEGEND, denido dentro do comando FIELD-
SET, permite especicar nomes para os conjuntos de campos e criar teclas
de atalho para eles. Sua sintaxe bsica : <LEGEND> Nome do conjunto
de campos </LEGEND>.
Estes recursos no so compatveis com todos os Browsers.
Digite o exemplo abaixo e salve-o como `forms3.html'.

<HTML>
<HEAD>
68

<TITLE> Formul&aacute;rios 3 - FIELDSET </TITLE>


</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND> Informa&ccedil;&otilde;es de Contato</LEGEND>
Nome:<INPUT TYPE=text NAME=nome><BR>
E-mail:<INPUT TYPE=text NAME=email><BR>
Telefone:<INPUT TYPE=text NAME=tel>
</FIELDSET>
<FIELDSET>
<LEGEND>Cart&atilde;o de cr&eacute;dito</LEGEND>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
<INPUT TYPE=radio NAME=card VALUE=mc> Master Card
<BR>
N&uacute;mero: <INPUT TYPE=text NAME=number>
<BR>
Data de validade: <INPUT TYPE=text SIZE=7 NAME=data
VALUE=mm/aaaa >
</FIELDSET>
</FORM>
</BODY>
</HTML>

8.6.1 Teclas de atalho para conjuntos de campos


O parmetro ACCESSKEY do cmarcador LEGEND permite ao programador
denir teclas que, quando pressionadas juntamente com a tecla ALT, movem
o cursor para o primeiro campo de cada conjunto.
<LEGEND
Sintaxe: ACCESSKEY=A> Nome do conjunto de campos
</LEGEND>
A sintaxe acima dene a tecla `a' como tecla de atalho para o conjunto
de campos `Nome do conjunto de campos'.
Modique o exemplo `forms3.html' para que que como mostrado abaixo.
Teste as teclas de atalho.

<HTML>
<HEAD>
UFF PET-TELE))) 69

<TITLE> Formul&aacute;rios 3 - FIELDSET </TITLE>


</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND ACCESSKEY=I>
<U>I</U>nforma&ccedil;&otilde;es de Contato</LEGEND>
Nome:<INPUT TYPE=text NAME=nome><BR>
E-mail:<INPUT TYPE=text NAME=email><BR>
Telefone:<INPUT TYPE=text NAME=email>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C> <U>C</U>art&atilde;o de
cr&eacute;dito</LEGEND>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
<INPUT TYPE=radio NAME=card VALUE=mc> Master Card
<BR>
N&uacute;mero: <INPUT TYPE=text NAME=number>
<BR>
Data de validade: <INPUT TYPE=text SIZE=7 NAME=data
VALUE=00/0000 >
</FIELDSET>
</FORM>
</BODY>
</HTML>

8.6.2 Teclas de atalho para campos


Outro marcador que permite ao usurio navegar rapidamente pelos campos
de um formulrio atravs de teclas de atalho o marcador LABEL. Esta tag
especica uma tecla que, ao ser pressionada juntamente com a tecla ALT,
move o cursor diretamente para o campo especicado.
Para utilizar o marcador LABEL preciso identicar cada campo atra-
vs do parmetro ID do marcador INPUT. A sintaxe usada : <INPUT
TYPE=tipo NAME=nome ID=String de identicao >.
Uma vez identicado o campo, a tecla de atalho para ele ser denida
atravs do parmetro ACCESSKEY do marcador LABEL. O parmetro FOR
deste mesmo marcador indicar o campo a que a tecla de atalho levar. A
70

sintaxe usada : <LABEL


ACCESSKEY=A FOR= String de identicao > Rtulo do campo </LABEL>
[Campo]. O marcador LABEL pode tambm ser fechado logo aps sua aber-
tura ou at mesmo depois da tag de criao do campo.
Modique novamente o exemplo `forms3.html' para que que como mos-
trado abaixo. Teste agora as teclas de atalho para cada campo.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 3 - FIELDSET </TITLE>
</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND ACCESSKEY=I> <U>I</U>nforma&ccedil;&otilde;es de
Contato</LEGEND>
<LABEL ACCESSKEY=N FOR=nome> <U>N</U>ome:
</LABEL><INPUT TYPE=text NAME=nome
ID=nome><BR>
<LABEL ACCESSKEY=E FOR=email><U>E</U>-mail:
</LABEL><INPUT TYPE=text NAME=email
ID=email><BR>
<LABEL ACCESSKEY=T FOR=tel> <U>T</U>ELEFONE:
</LABEL><INPUT TYPE=text NAME=tel ID=tel>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C> <U>C</U>art&atilde;o de
cr&eacute;dito</LEGEND>
<LABEL ACCESSKEY=V FOR=visa><INPUT TYPE=radio
NAME=card VALUE=visa ID=visa> <U>V</U>isa
</LABEL>
<LABEL ACCESSKEY=M FOR=master><INPUT
TYPE=radio NAME=card VALUE=mc
ID=master><U>M</U>aster Card </LABEL>
<BR>
<LABEL ACCESSKEY=U FOR=num>
N<U>&uacute;</U>mero: </LABEL><INPUT TYPE=text
NAME=number ID=num>
UFF PET-TELE))) 71

<BR>
<LABEL ACCESSKEY=D FOR=data> <U>D</U>ata de
validade: </LABEL> <INPUT TYPE=text SIZE=7
NAME=data VALUE=00/0000 ID=data>
</FIELDSET>
</FORM>
</BODY>
</HTML>
72
Captulo 9

Frames

O recurso de frames permite ao programador criar pginas HTML que podem


ser visualizadas simultaneamente na janela do Browser. Desta forma, a janela
ca dividida em frames que compartilham o espao disponvel. Este recurso
no compatvel com todos os clientes Web, porm aceito pelas verses
mais recentes dos navegadores mais populares.

O uso de frames requer um planejamento prvio, que consiste na criao


da estrutura de janelas. O programador ir especicar a quantidade de fra-
mes, a disposio que eles tero na tela, a largura e a altura de cada frame,
assim como o contedo que ser exibido em cada um deles.

9.1 O frame document


O uso de frames exige a criao de um documento HTML especial que con-
tm todas as denies dos frames. Este documento se diferencia dos demais
por no utilizar o comando BODY. Em seu lugar usado o comando FRA-
MESET. Dentro do par de marcaes <FRAMESET></FRAMESET> so
especicados todos os atributos dos frames que sero criados, tais como sua
quantidade e disposio horizontal e vertical.

Cada frame especicado precisar de um outro comando para denir suas


caractersticas individuais e, principalmente, seu contedo. Para tanto
utilizado o comando FRAME.

73
74

9.2 O marcador FRAMESET


Os principais parmetros do marcador FRAMESET so:

COLS=tamanhos - usado para criar um documento com frames dis-


postos em colunas. Nele dever ser especicada a largura de cada
coluna do documento. Os valores podem ser especicados em pixels,
percentagem ou tamanho relativo.

ROWS=tamanhos - usado para criar um documento com frames dis-


postos em linhas. Nele dever ser especicada a altura de cada linha do
documento. Os valores podem ser especicados em pixels, percentagem
ou tamanho relativo.

FRAMEBORDER=1|0 - Mostra ou inibe borda para os frames, caso re-


ceba os valores 1 ou 0 respectivamente.

FRAMESPACING=valor - Cria espao adicional em pixels entre os


frames.

Sintaxe bsica:<FRAMESET COLS | ROWS=tamanhos > [Especi-


cao individual de cada frame] </FRAMESET>.
Sintaxe completa: <FRAMESET COLS | ROWS=tamanhos
FRAMEBORDER=1|0 FRAMESPACING=valor > [Especicao indivi-
dual de cada frame]</FRAMESET>.

9.3 Especicao de tamanho de frames


9.3.1 Usando valores em pixels
Como vimos, pode-se especicar o tamanho de frames no comando FRAME-
SET atravs de seus parmetros ROWS e COLS. A maneira mais simples de
faz-lo atribuir valores em pixels dimenso com que se est trabalhando,
altura no caso do parmetro ROWS e largura no caso do parmetro COLS.
As dimenses dos frames devem estar separadas entre si por vrgulas.
Veja os exemplos:

<FRAMESET COLS=100,300,200 > [Frames] </FRAMESET> - Cria


trs frames dispostos em colunas, cujas larguras, da esquerda para a direita,
so de 100, 300 e 200 pixels.
UFF PET-TELE))) 75

<FRAMESET ROWS=60,100,100,200 > [Frames] </FRAMESET> -


Cria quatro frames dispostos em linhas, cujas alturas, de cima para baixo,
so de 60, 100, 100 e 200 pixels.

Nota: Quando a dimenso especicada para um determinado frame no


suciente para exibir seu contedo, barras de rolagem aparecem automati-
camente para auxiliar o usurio.

9.3.2 Usando valores relativos


Para dividir frames igualmente pela dimenso da janela do Browser, a melhor
opo usar o sinal de asterisco para cada linha ou coluna.
Veja os exemplos:

<FRAMESET COLS=*,*,* > [Frames] </FRAMESET> - Cria trs


frames dispostos em colunas cujas larguras so iguais.

<FRAMESET ROWS=*,*,*,*,* > [Frames] <FRAMESET> - Cria cinco


frames dispostos em linhas cujas alturas so iguais.

<FRAMESET COLS=*,2* > [Frames] </FRAMESET> - Cria dois


frames dispostos em colunas, sendo que o da direita ocupa dois teros da
tela.

<FRAMESET ROWS=*,300,* > [Frames] </FRAMESET> - Cria um


frame com altura de 300 pixels no centro da janela e, acima e abaixo dele,
dois frames de mesma altura.

9.3.3 Usando valores percentuais


A terceira forma de especicar tamanhos de frames utilizando valores na
forma percentual, totalizando 100%.
Veja os exemplos:

<FRAMESET ROWS=30%, 70% > [Frames] </FRAMESET> - Cria


dois frames dispostos em linhas, sendo que o de cima ocupa 30% da tela, e
o de baixo ocupa 70%.
76

<FRAMESET COLS=30%, 50%, 20% > [Frames] </FRAMESET> -


Cria trs frames dispostos em colunas, sendo que o da esquerda ocupa 30%
da tela, o do centro 50% e o da direita 20%.

<FRAMESET ROWS=25%, *, 100 > [Frames] </FRAMESET> - Cria


trs frames dispostos em linhas, sendo que o de cima ocupa 25% da tela, o
de baixo tem altura de 100 pixels e o do centro ocupa o espao restante.

Nota: Como voc deve ter percebido pelos exemplos, os diferentes forma-
tos de valores podem ser combinados entre si.

9.4 O marcador FRAME


Enquanto o comando FRAMESET cria o layout geral dos frames, o comando
FRAME o responsvel pela atribuio do contedo de cada frame e das
caractersticas individuais de cada um deles. Os parmetros do comando
FRAME se sobrepem aos parmetros de mesmo nome do comando FRA-
MESET.
Principais parmetros do comando FRAME:

SRC= Endereo - Este parmetro o nico indispensvel, pois especi-


ca o nome ou a URL do documento que ser exibido no frame.

ALIGN=posiao - Ajusta o alinhamento do frame ou do texto. As op-


es permitidas para este parmetro so:

Top - O texto ao redor do frame alinhado pela parte superior do


frame.

Middle - O texto ao redor do frame alinhado pelo meio do frame.

Bottom - O texto ao redor do frame alinhado pela parte inferior do


frame.

Left - O frame alinhado esquerda, deixando o texto posicionado


no seu lado direito.

Right - O frame alinhado direita, deixando o texto posicionado no


seu lado esquerdo
UFF PET-TELE))) 77

FRAMEBORDER=1|0 -Idntico ao parmetro de mesmo nome do co-


mando FRAMESET, ele ativa ou desativa a exibio de borda para o
frame atual.

MARGINHEIGHT=altura - Especica a altura das margens superior


e inferior do frame em pixels.

MARGINWIDTH=largura - Especica a largura das margens esquerda


e direita do frame em pixels.

NAME=nome - Atribui um nome para o frame, de maneira que possa


ser identicado e localizado para carregar documentos.

NORESIZE - Evita que o frame seja redimensionado pelo usurio.

SCROLLING=yes| no - Quando ajustado para o valor `no', no permite


que o frame possua barras de rolagem.

<FRAME SRC=nome ou URL do arquivo >.


Sintaxe bsica:
Sintaxe completa: <FRAME SRC=nome ou URL do arquivo
ALIGN=posiao FRAMEBORDER=1 | 0 MARGINHEIGHT=altura
MARGINWIDTH=largura NAME=nome NORESIZE SCROLLING=yes
| no>.

9.5 Combinando ROWS e COLS


Pode-se combinar a criao de frames usando os dois atributos. O programa-
dor pode, por exemplo, criar uma janela dividida em dois frames horizontais,
onde o de baixo dividido em duas colunas. Para que isto seja possvel,
basta aninhar conjuntos de comandos FRAMESET.
Para exemplicar, vamos criar, primeiramente, os documentos que sero
exibidos por cada frame:
Documento 1:

<HTML>
<HEAD><TITLE> Documento 1 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 1 </H1></CENTER>
</BODY>
</HTML>
78

Salve-o com o nome de `doc1.html'.

Documento 2:

<HTML>
<HEAD><TITLE> Documento 2 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 2 </H1></CENTER>
</BODY>
</HTML>

Salve-o com o nome de `doc2.html'.


UFF PET-TELE))) 79

Documento 3:

<HTML>
<HEAD><TITLE> Documento 3 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 3 </H1></CENTER>
</BODY>
</HTML>

Salve-o com o nome de `doc3.html'.


Agora, digite o seguinte cdigo, salvando-o como `frames1.html':

<HTML>
<HEAD>
<TITLE> Frames 1 </TITLE>
</HEAD>
<FRAMESET ROWS=40%, 60% >
<FRAME SRC=doc1.html >
<FRAMESET COLS=*,* >
<FRAME SRC=doc2.html >
<FRAME SRC=doc3.html >
</FRAMESET>
</FRAMESET>
</HTML>

Abra o arquivo `frames1.html' e visualize o resultado.

9.6 Interligao de frames


Uma aplicao interessante do recurso de frames a criao de pginas que
exibam, na mesma tela, uma lista de itens permanente e o contedo do item
selecionado. Para fazer isto precisaremos de dois frames, um para exibir a
lista e outro, os contedos.
Os frames devem receber nomes, atravs do parmetro NAME do co-
mando FRAME, para que o Browser possa abrir os documentos no local
correto.
No campo do cabealho do documento que contm os links, deve ser usada
a tag <BASE TARGET=nome do frame >, contendo o nome do frame
80

que abrir os contedos dos tens. Pode-se tambm utilizar o parmetro


TARGET do comando A para este m. A sintaxe utilizada neste caso seria:
<A HREF=nome ou URL do documento TARGET=nome da janela >
Texto do link </A>.
Para facitar, utilizaremos em nosso exemplo as pginas `doc1.html', `doc2.html'
e `doc3.html' criadas para o exemplo anterior. Entretanto, precisaremos criar
o documento que funcionar como menu.
Digite o cdigo a seguir e salve-o como `menu.html':

<HTML>
<HEAD>
<TITLE> Menu </TITLE>
<BASE TARGET=frame2 >
</HEAD>
<BODY>
<H2> Lista de tens: </H2>
<OL>
<LI> <A HREF=doc1.html > Link1 </A>
<LI> <A HREF=doc2.html > Link2 </A>
<LI> <A HREF=doc3.html > Link3 </A>
</OL>
</BODY>
</HTML>

Agora, vamos criar a estrutura dos frames:

<HTML>
<HEAD>
<TITLE> Frames 2 </TITLE>
</HEAD>
<FRAMESET COLS=30%, 70% >
<FRAME NAME=frame1 SRC=menu.html >
<FRAME NAME=frame2 SRC=doc1.html >
</FRAMESET>
</HTML>

Salve com o nome de `frames2.html'.


Abra o arquivo `frames2.html' e teste os links do frame da esquerda.
Aprecie o efeito na tela.
UFF PET-TELE))) 81

9.7 O marcador NOFRAMES


Como foi dito no incio do captulo, o recurso de frames no compatvel
com todos os browsers. Portanto, se algum usurio acessar uma pgina que
tenha frames com um Browser que no os reconhea, nada ser exibido.
Para solucionar este problema existe o comando NOFRAMES, que per-
mite a incluso de avisos ou comandos HTML que sero visualizados pelo
browser no compatvel com frames.
As marcaes <NOFRAMES> e </NOFRAMES> so denidas dentro
da estrutura do campo de atuao do comando FRAMESET. Entre elas
podem ser especicados quaisquer comandos HTML, que s sero executados
se o frameset no puder ser carregado pelo Browser.
Considerando a hiptese de lidar com Browsers que no reconheam fra-
mes, sugere-se as seguintes alternativas ao criar sua pgina:

1. Use o comando NOFRAMES e emita um aviso de que o Browser usado


no aceita frames e aproveite para sugerir endereos para que o usurio
possa `baixar' verses mais novas.

2. Crie uma pgina inicial que permita ao usurio escolher entre visualizar
uma verso com frames e outra sem frames.

3. Use o comando NOFRAMES para carrregar automaticamente uma ver-


so sem frames do seu site.

O exemplo abaixo uma modicao do arquivo `frames2.html', utili-


zando o comando NOFRAMES. Modique-o tambm em seu computador e
salve com o nome de `frames3.html'.

<HTML>
<HEAD>
<TITLE> Frames 2 </TITLE>
</HEAD>
<FRAMESET COLS=30%, 70% >
<FRAME NAME=frame1 SRC=menu.html >
<FRAME NAME=frame2 SRC=item1.html >
<NOFRAMES>
Esta p&aacute;gina usa frames, um recurso n&atilde;o suportado
pelo Browser que est&aacute; sendo utilizado.
82

<BR>
Sugerimos obter uma vers&atilde;o atualizada do <A
HREF=http://home.netscape.com TARGET= _blank >
Netscape Navigator </A> ou do <A
HREF=http://www.microsoft.com TARGET= _blank >
Internet Explorer</A>.
</NOFRAMES>
</FRAMESET>
</HTML>

9.8 Janelas especiais para frames


Para dominar completamente o uso de frames, importante conhecer a -
nalidade de quatro nomes especiais de janelas que so predenidos. Usando
estes nomes no parmetro TARGET do comando A, o Browser ir carregar
o documento em determinadas janelas.

TARGET= _blank - Faz com que uma nova janela seja aberta para
carregar o documento.

TARGET= _self  - Faz com que o documento seja aberto na mesma


janela em que est o link.

TARGET= _parent - Faz com que o documento seja carregado no fra-


meset de nvel superior ao do documento atual.

TARGET= _top - Faz com que o documento seja carregado usando a


janela inteira do Browser, ocultando, assim, a exibio dos frames do
documento.
Captulo 10
Imagens Mapeadas

Mapas de imagem (ou image maps ) so guras colocadas na pgina que, ao


serem clicadas em regies especcas, permitem o acesso a outros documen-
tos. como se determinadas partes da imagem funcionassem como links.
As imagens mapeadas podem ser criadas atravs de programas especiais
denominados mapeadores de imagem, tais como Mapedit e Map This. Os
arquivos gerados por este tipo de programa possuem a extenso `.map', mas
alguns possuem a opo de criar diretamente um arquivo HTML que con-
tm apenas a rea de denio do mapa. Nesta apostila, entretanto, no
estaremos abordando a criao de mapas atravs de programas mapeadores.
Existem dois tipos de mapas de imagem. O primeiro o server-side (lado
do servidor) e, o segundo, o client-side (lado do cliente).

10.1 Mapas do tipo server-side


Neste tipo de mapa de imagem, o arquivo .map ca localizado no servidor.
Quando o usurio clica na imagem, o Browser envia uma solicitao ao
servidor perguntando o endereo (URL) do documento associado rea cli-
cada. O servidor envia, ento, o endereo de volta ao Browser que lhe retorna
uma solicitao para abrir aquele documento.
No entraremos em detalhes sobre o funcionamento de mapas do tipo
server-side, pois seu mecanismo no envolve diretamente programao HTML.
Basta saber que, para inserir um mapa deste tipo num documento, neces-
srio criar uma ncora da imagem para o programa que interpreta mapas
no servidor com a identicao do mapa associado a esta imagem. A sin-

83
84

taxe utilizada para isso : <A HREF=URL do programa /identicao do


arquivo.map ><IMG SRC=nome da imagem ISMAP></A>. O parme-
tro ISMAP do comando IMG indica que a imagem do tipo clicvel, ou seja,
uma imagem mapeada.

10.2 Mapas do tipo client-side


A denio deste tipo de mapa feita inteiramente no documento HTML
que o contm. Esta denio pode ser feita totalmente a mo ou utilizando
recursos de programas mapeadores. Nesta apostila trataremos apenas da
denio mo atravs de comandos da linguagem HTML.

10.2.1 O marcador MAP


Cada imagem inserida como mapa precisa ter comandos de mapeamento asso-
ciados a ela. Tais comandos correspondem denio do mapa propriamente
dita.
Todos os comandos de uma imagem mapeada como client-side devem ser
envolvidos pelas marcaes <MAP> e </MAP>.
O principal parmetro do comando MAP NAME=nome. Ele atribui
denio de um mapa, um nome nico que ser referido pelo parmetro
USEMAP do comando IMG utilizado para colocar a imagem na pgina.
Sintaxe bsica: <MAP NAME=nome do mapa > [Denio de reas
sensveis] </MAP>
Para chamar um mapa de imagem client-side atravs do comando IMG
usada a sintaxe: <IMG SRC=nome da imagem USEMAP=#nome do
mapa>. Note que o smbolo # deve anteceder o nome do mapa.

10.2.2 O marcador AREA


A marcao <AREA> utilizada para especicar as reas sensveis, ou seja,
que podem ser clicadas, de um mapa de imagem.
Seus principais parmetros so:

SHAPE=forma - Determina o formato da rea sensvel. Este formato


ser usado para a especicao das coordenadas e pode receber os se-
guintes valores:
UFF PET-TELE))) 85

RECT (retngulo) - Exige quatro coordenadas, x1, y1, x2 e y2. As


coordenadas x1 e y1 correspondem ao vrtice superior esquerdo do
retngulo, enquanto que x2 e y2 correspondem ao vrtice inferior
direito.

CIRC (crculo) - Exige trs coordenadas xC, yC e r. As coordenadas


xC e yC correspondem ao centro do crculo e a coordenada r ao
seu raio.

POLY (polgono) - Exige um par de coordenadas para cada vrtice


do polgono descrito. No caso, xN e yN corresponderiam locali-
zao do vrtice N do polgono.

DEFAULT - No exige coordenada nenhuma. Pode ser usada para


denir uma URL que ser carregada se o usurio clicar sobre uma
rea da imagem que no foi mapeada.

COORDS=coordenadas - As coordenadas dependem diretamente do


valor do parmetro SHAPE, conforme explicitado acima, e seus valores
so medidos em pixels. Num mapa retangular de rea NxM, sendo N
sua largura e M sua altura em pixels, a coordenada (x=0, y=0) cor-
responde ao seu vrtice superior esquerdo, enquanto que (x=N, y=M)
correspondem ao seu vrtice inferior direito.

HREF=nome ou URL do arquivo - Especica o caminho para o do-


cumento a que determinada regio da imagem levar, se clicada.

TARGET=janela - Especica o nome da janela onde o documento deve


ser carregado. Pode receber os seguintes valores:

_blank - Abre o documento em uma nova janela

_parent - Abre o documento na janela de nvel imediatamente supe-


rior (principal)

_self - Abre o documento na prpria janela do link.

_top - Abre o documento na janela de nvel mais alto e ocupando


toda a rea.

ALT=texto - Exibe o texto especicado quando o cursor passa por cima


da rea.
86

Para exemplicar a criao de um mapa de imagem, considere a imagem


abaixo, que possui um retngulo, um crculo e um tringulo. Vamos fazer
com que cada uma dessas guras, ao ser clicada, leve a um documento HTML.
Salve esta imagem como `mapa.gif '.

Figura 10.1: Figuras.

Digite os documentos abaixo:


Documento 1:

<HTML>
<HEAD><TITLE> Documento 1 </TITLE></HEAD>
<BODY>
<CENTER><H1> Voc&ecirc; clicou sobre o ret&acirc;ngulo!
</H1></CENTER>
</BODY>
</HTML>
Salve-o com o nome de `doc-ret.html'.

Documento 2:

<HTML>
<HEAD><TITLE> Documento 2 </TITLE></HEAD>
<BODY>
<CENTER><H1> Voc&ecirc; clicou sobre o c&iacute;rculo!
</H1></CENTER>
</BODY>
</HTML>
UFF PET-TELE))) 87

Salve-o com o nome de `doc-circ.html'.


Documento 3:

<HTML>
<HEAD><TITLE> Documento 3 </TITLE></HEAD>
<BODY>
<CENTER><H1> Voc&ecirc; clicou sobre o tri&acirc;ngulo!
</H1></CENTER>
</BODY>
</HTML>

Salve-o com o nome de `doc-tri.html'.


Documento 4:

<HTML>
<HEAD><TITLE> Mapa de imagem </TITLE></HEAD>
<BODY>
<CENTER>
<H1> Clique sobre as guras abaixo: </H1>
<IMG SRC=mapa.gif  USEMAP=#mapa>
</CENTER>
<MAP NAME=mapa>
<AREA SHAPE=rect COORDS=74,19,170, 55 HREF=doc-ret.html >
<AREA SHAPE=circ COORDS=50,86,30 HREF=doc-circ.html >
<AREA SHAPE=poly COORDS=87,107,154,66,134,142
HREF=doc-tri.html >
</MAP>
</BODY>
</HTML>

Salve-o como `mapa.html'.


88
Apndice A
Notaes especiais para smbolos

Notaes especiais para smbolos:

Notao Descrio Aparncia


&gt; Maior que >
&lt; Menor que <
&amp; E comercial &
&quot; Aspas duplas 
&reg; Marca registrada r
&copy; Copyrights
c

Notaes para letras acentuadas , onde x qualquer letra maiscula ou


minscula:

Caracter Notao Exemplo


Acento agudo &xacute; &oacute;=
Acento grave &xgrave; &Agrave;=
Acento circunexo &xcirc; &Ecirc;=
Letra com til &xtilde; &atilde;= / &Ntilde;=
Letra com trema &xuml; &uuml;= / &iuml; =
Cedilha &xcedil; &Ccedil;=

89
90

Notaes para smbolos estrangeiros:

Caracter Notao
Letras com argola &aring; = e &Aring; =
Letras unidas &aelig; = e &AElig; =
O cortado &oslash; = e &Oslash; =
Eth &eth; =
Caracter alemo &szlig; =
Apndice B
Padres de cores

Lista de cores com seus respectivos padres rgb:

White: rgb = #FFFFFF


Red: rgb = #FF0000
Green: rgb = #00FF00
Blue: rgb = #0000FF
Magenta: rgb = #FF00FF
Cyan: rgb = #00FFFF
Yellow: rgb = #FFFF00
Black: rgb = #000000
Aquamarine: rgb = #70DB93
Baker's Chocolate: rgb = #5C3317
Blue Violet: rgb = #9F5F9F
Brass rgb: = #B5A642
Bright Gold: rgb = #D9D919
Brown: rgb = #A62A2A
Bronze: rgb = #8C7853
Bronze II: rgb = #A67D3D
Cadet Blue: rgb = #5F9F9F
Cool Copper: rgb = #D98719
Copper: rgb = #B87333
Coral: rgb = #FF7F00
Corn Flower Blue: rgb = #42426F

91
92

Dark Brown: rgb = #5C4033


Dark Green: rgb = #2F4F2F
Dark Green Copper: rgb = #4A766E
Dark Olive Green: rgb = #4F4F2F
Dark Orchid: rgb = #9932CD
Dark Purple: rgb = #871F78
Dark Slate Blue: rgb = #6B238E
Dark Slate Grey: rgb = #2F4F4F
Dark Tan: rgb = #97694F
Dark Turquoise: rgb = #7093DB
Dark Wood: rgb = #855E42
Dim Grey: rgb = #545454
Dusty Rose: rgb = #856363
Feldspar: rgb = #D19275
Firebrick: rgb = #8E2323
Forest Green: rgb = #238E23
Gold: rgb = #CD7F32
Goldenrod: rgb = #DBDB70
Grey: rgb = #C0C0C0
Green Copper: rgb = #527F76
Green Yellow: rgb = #93DB70
Hunter Green: rgb = #215E21
Indian Red: rgb = #4E2F2F
Khaki: rgb = #9F9F5F
Light Blue: rgb = #C0D9D9
Light Grey: rgb = #A8A8A8
Light Steel Blue: rgb = #8F8FBD
Light Wood: rgb = #E9C2A6
Lime Green: rgb = #32CD32
Mandarian Orange: rgb = #E47833
Maroon: rgb = #8E236B
Medium Aquamarine: rgb = #32CD99
Medium Blue: rgb = #3232CD
Medium Forest Green: rgb = #6B8E23
Medium Goldenrod: rgb = #EAEAAE
Medium Orchid: rgb = #9370DB
Medium Sea Green: rgb = #426F42
Medium Slate Blue: rgb = #7F00FF
UFF PET-TELE))) 93

Medium Spring Green: rgb = #7FFF00


Medium Turquoise: rgb = #70DBDB
Medium Violet: Red rgb = #DB7093
Medium Wood: rgb = #A68064
Midnight Blue: rgb = #2F2F4F
Navy Blue: rgb = #23238E
Neon Blue: rgb = #4D4DFF
Neon Pink: rgb= # FF6EC7
New Midnight Blue: rgb = #00009C
New Tan: rgb = #EBC79E
Old Gold: rgb = #CFB53B
Orange: rgb = #FF7F00
Orange Red: rgb = #FF2400
Orchid: rgb = #DB70DB
Pale Green: rgb = #8FBC8F
Pink: rgb = #BC8F8F
Plum: rgb = #EAADEA
Quartz: rgb = #D9D9F3
Rich Blue: rgb = #5959AB
Salmon: rgb = #6F4242
Scarlet: rgb = #8C1717
Sea Green: rgb = #238E68
Semi-Sweet Chocolate: rgb = #6B4226
Sienna: rgb = #8E6B23
Silver: rgb = #E6E8FA
Sky Blue: rgb = #3299CC
Slate Blue: rgb = #007FFF
Spicy Pink: rgb = #FF1CAE
Spring Green: rgb = #00FF7F
Steel Blue: rgb = #236B8E
Summer Sky: rgb = #38B0DE
Tan: rgb = #DB9370
Thistle: rgb = #D8BFD8
Turquoise: rgb = #ADEAEA
Very Dark Brown: rgb = #5C4033
Very Light Grey: rgb = #CDCDCD
Violet: rgb = #4F2F4F
Violet Red: rgb = #CC3299
94

Wheat: rgb = #D8D8BF


Yellow Green: rgb = #99CC32