Professional Documents
Culture Documents
Sumrio
Prefcio 1 Noes gerais sobre HTML e Internet
1.1 1.2 1.3 1.4 1.5 1.6 Caractersticas da linguagem HTML . . . . . . . . . . . . . . Tags ou marcaes HTML . . . . . . . . . . . . . . . . . . . . Estrutura de um documento HTML . . . . . . . . . . . . . . . Criando, abrindo e manipulando documentos HTML Cdigos especiais de caracteres . . . . . . . . . . . . . . . . . . . . . .
iii 5
5 6 7 7 8 9
11
11 12 12
15
15 16 17 17 18 19
Exibio de textos pr-formatados . . . . . . . . . . . . . . . . Centralizao de textos e outros elementos O marcador FONT . . . . . . . . . . . . . . . . . . . . . . . . Cores de texto e padres de fundo . . . . . . . . . . . . . . . .
Imagens
4.1 O marcador IMG 4.1.1 4.1.2 4.1.3 . . . . . . . . . . . . . . . . . . . . . . . . . Inserindo imagens do mesmo diretrio . . . . . . . . . . Inserindo imagens de diretrios diferentes . . . . . . . . Inserindo imagens de outros servidores . . . . . . . . .
23
23 25 25 27
4.2 4.3
28 29
Links
5.1 O marcador A . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.1 5.1.2 5.1.3 5.1.4 5.2 5.2.1 5.2.2 5.2.3 Links para arquivos no mesmo diretrio . . . . . . . . . Links para arquivos em diretrios diferentes Links para arquivos em outro servidor . . . . . . . . . . . . . . .
33
33 34 36 38 38 40 41 41 41
Links para sees especcas em documentos . . . . . . Preenchendo o campo Assunto ou Subject Enviando uma cpia da mensagem . . . . . . .
Enviando e-mail diretamente da pgina HTML . . . . . . . . . Enviando mensagem para mais de um destinatrio . . . . . . . . . . . . . .
Listas
6.1 6.2 6.3 6.4 6.5 O marcador UL . . . . . . . . . . . . . . . . . . . . . . . . . . O marcador OL . . . . . . . . . . . . . . . . . . . . . . . . . . O marcador DL . . . . . . . . . . . . . . . . . . . . . . . . . . Aninhamento de listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listas com marcadores grcos
43
43 44 45 46 47
Tabelas
7.1 7.2 7.3 7.4 7.5 7.6 7.7 O marcador TABLE . . . . . . . . . . . . . . . . . . . . . . . O marcador TR . . . . . . . . . . . . . . . . . . . . . . . . . . O marcador TD . . . . . . . . . . . . . . . . . . . . . . . . . . Ttulos de colunas . . . . . . . . . . . . . . . . . . . . . . . . . Expanso de clulas em linhas e colunas Aninhamento de tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
51
52 53 53 54 55 56 57
Legendas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Formulrios
8.1 8.2 8.3 8.4 8.5 O marcador FORM . . . . . . . . . . . . . . . . . . . . . . . . O marcador INPUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Os marcadores SELECT e OPTION O marcador TEXTAREA 8.5.1 8.5.2
59
59 60 63 64 66 66 66
UFF
8.6 Agrupamento de campos com o marcador FIELDSET 8.6.1 8.6.2
PET-TELE))) i
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
67 68 69
Frames
9.1 9.2 9.3 O frame document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
73 74 74 74 75 75 76 77 79 81 82
O marcador FRAMESET
Especicao de tamanho de frames . . . . . . . . . . . . . . . 9.3.1 9.3.2 9.3.3 Usando valores em pixels . . . . . . . . . . . . . . . . . Usando valores relativos . . . . . . . . . . . . . . . . .
O marcador NOFRAMES
10 Imagens Mapeadas
10.1 Mapas do tipo
83
. . . . . . . . . . . . . . . . . . . . 83 84 84 84
server-side
10.2 Mapas do tipo client-side . . . . . . . . . . . . . . . . . . . . . 10.2.1 O marcador MAP . . . . . . . . . . . . . . . . . . . . . 10.2.2 O marcador AREA . . . . . . . . . . . . . . . . . . . .
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 Telecomunicaes, 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 disciplinas 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 Telecomunicaes. Abaixo segue a lista de apostilas preparadas neste projeto:
HTML : Linguagem de programao para hipertextos, principalmente empregada na construo de pginas da Internet (Webpages ).
LaTeX : Sistema de edio de texto largamente utilizado em meios acadmicos e cientcos, bem como por algumas editoras nacionais e internacionais.
LINUX : Introduo ao sistema operacional LINUX. Linguagem C : Linguagem de programao amplamente utilizada em problemas de engenharia e computao.
MATLAB :
reas prossionais.
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.
Sumrio
Markup Language ) tem o objetivo de formatags, para que possam Web, tambm denominados
tar textos atravs de marcaes especiais denominadas ser exibidos de forma conveniente pelos clientes navegadores ou hipertexto. Caractersticas bsicas da linguagem HTML: gao entre pginas da
browsers. Alm disso, esta linguagem possibilita a interliWeb, criando assim documentos com o conceito de
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
(American Standard Code for Information Interchange ) o formato mais comum 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.
1 ASCII
5
Arquivos HTML podem possuir as extenses `html' ou `htm'. A primeira normalmente utilizada em sistemas UNIX e a segunda em sistemas
ambas as extenses.
tags. tags aparecem em pares, delimitando o texto a ser tag que abre o campo de atuao de um comando pode ser
>',
>'.
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
<tag>
</tag>.
de ambos os tipos mais adiante. Alm do comando propriamente dito, uma 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
Assim como cada comando possui parmetros especcos,
de suas opes.
<FONT
SIZE="4"COLOR="green"> Texto
</FONT>
UFF
PET-TELE))) 7
No exemplo acima, `FONT' o comando e, `SIZE' e `COLOR' so os parmetros 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.
<HTML> e nalizado
</HTML>.
Este par de
tags essencial.
Entre estas
<HEAD> e </HEAD>.
<TITLE> e </TITLE>.
Browser.
especicado ser exibido na barra de ttulo do grama, que delimitada pelas marcaes se os `frame obrigatria.
<BODY> e </BODY>.
Excetuando-
documents ', que sero vistos mais adiante, esta uma marcao
Exemplo
</TITLE>
vrias plataformas, existem conversores de diversos formatos, por exemplo de *.doc para *.html. Para criar uma pgina no Bloco de Notas do
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 com o boto direito do vel. No caso do
Browsers.
Windows, este programa ser o Bloco de Notas. 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
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.
UFF
PET-TELE))) 9
aconselhvel, ao se criar uma pgina, utilizar estes cdigos especiais para criar a acentuao da lngua portuguesa. Desta forma, podero exibir corretamente a letra acentuada.
Browsers mais
(localizador universal de recursos), utilizada pela Internet para indicar o Saber especicar corretamente uma URL imprescindvel para utilizar adequadamente muitos comandos da linguagem
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:
GOPHER - um servidor composto por menus e diretrios com informaes 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 disponveis em formato especial de pesquisa.
de regras que especicam o formato, a sincronizao, o seqenciamento e a vericao de erros na comunicao entre computadores.
2 Conjunto
10
<P>
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 respectivamente aos alinhamentos esquerda, direita, ao centro e justicado. Se o parmetro ALIGN no for especicado, por padro o pargrafo ser alinhado esquerda. Sintaxe bsica: Sintaxe
right
center
</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
<P>
<BR>
de
<HTML> <HEAD> <TITLE> Parágrafos e quebras de linha </TITLE> </HEAD> <BODY> <P ALIGN=center>Utilizando P:</P> <P> Vamos separar esta sentença com a marcação parágrafo. </P>
Para vericar a diferença.
<P ALIGN=center>Utilizando BR:</P> <P> Agora separamos as linhas utilizando <BR> a marcação de quebra de linha. <BR>
Deu para notar?
</BODY> </HTML>
<HR>
No existe a marcao
</HR>.
WIDTH=nmero
ALIGN=left
linha.
center
UFF
COLOR=cor - Especica a cor da linha.
PET-TELE))) 13
<HR> Sintaxe completa: <HR SIZE=nmero WIDTH=nmero | ALIGN=left | center | right COLOR=cor NOSHADE>
Sintaxe bsica:
nmero%
de
<HTML> <HEAD> <TITLE> Parágrafos e quebras de linha </TITLE> </HEAD> <BODY> <P ALIGN=center>Utilizando P:</P> <P> Vamos separar esta sentença com a marcação parágrafo. </P>
Para vericar a diferenç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ção de quebra de linha. <BR>
Deu para notar?
</BODY> </HTML>
14
Negrito - Aplica o estilo negrito. Sintaxe: Itlico - Aplica o estilo itlico. Sintaxe:
<B>
texto
</B>;
<I>
texto
</I>; <U>
texto
</U>;
<STRONG>
texto
</STRONG>;
Sintaxe:
<TT>
</TT>;
Sintaxe:
<BIG>
texto
</BIG>;
Small - Reduz a fonte. Sintaxe:
<SMALL>
texto
</SMALL>; <SUP>
texto
</SUP>;
15
16
<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á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>.
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>.
UFF
PET-TELE))) 17
O exemplo abaixo permite visualizar os tamanhos de cabealhos. Digite-o salvando como `cabec.html'.
<HTML> <HEAD> <TITLE> Cabeçalhos </TITLE> </HEAD> <BODY> <H1> Cabeçalho com tamanho 1 </H1> <H2> Cabeçalho com tamanho 2 </H2> <H3> Cabeçalho com tamanho 3 </H3> <H4> Cabeçalho com tamanho 4 </H4> <H5> Cabeçalho com tamanho 5 </H5> <H6> Cabeçalho com tamanho 6 </H6> </BODY> </HTML>
<PRE>
</PRE>
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:
Sintaxe completa:
Texto
</PRE>.
<CENTER>
18
<HTML> <HEAD> <TITLE> Cabeçalhos </TITLE> </HEAD> <BODY> <CENTER> <H1> Cabeçalho com tamanho 1 </H1> <H2> Cabeçalho com tamanho 2 </H2> <H3> Cabeçalho com tamanho 3 </H3> <H4> Cabeçalho com tamanho 4 </H4> <H5> Cabeçalho com tamanho 5 </H5> <H6> Cabeçalho com tamanho 6 </H6> </CENTER> </BODY> </HTML>
tags
<FONT>
</FONT>
UFF
PET-TELE))) 19
caso geral, a especicao de cores feita atravs do padro RGB (RedGreen-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). apostila. Escreve-se: COLOR= rrggbb ou COLOR= nome. Os padres RGB de algumas cores podem ser vistos no apndice B desta
<FONT> Texto </FONT>. Sintaxe completa: <FONT FACE=nome SIZE=nmero COLOR=cor > Texto </FONT>.
Sintaxe bsica: 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>
<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:
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 vermelhoprpuro. 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
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
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 formatos so aceitos por qualquer tos
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.
SRC= nome ou URL do arquivo - Nome ou endereo (URL) da imagem a ser exibida. Este parmetro obrigatrio.
23
24
ALIGN= Top
| |
Middle
ALIGN= Left
WIDTH= "nmero
imagem em pixels ou em relao largura da janela, independentemente de seu tamanho original. Quando se altera a dimenso horizontal da imagem, a dimenso vertical modicada automaticamente para que a proporo original seja mantida.
HEIGHT= nmero
imagem em pixels ou em relao largura da janela, independentemente 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 distoro na proporo original da imagem, temos que usar os parmetros WIDTH e HEIGHT simultaneamente.
BORDER= nmero - Especica, em pixels, a largura da borda da imagem. O valor zero remove a borda.
VSPACE=nmero - Determina, em pixels, o espao que deve ser deixado em branco na parte de cima e na parte de baixo da imagem.
HSPACE=nmero - Determina, em pixels, o espao que deve ser deixado em branco nas laterais da imagem. Sintaxe bsica:
Sintaxe completa:
<IMG SRC= nome ou URL do arquivo >. <IMG SRC= nome ou URL do arquivo WIDTH=nmero |
Middle
Bottom
Right >.
UFF
PET-TELE))) 25
<IMG
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>
um arquivo especicado. Para especicar uma imagem que esteja em um diretrio abaixo do diretrio atual, basta utilizar a sintaxe:
Por outro lado, se o diretrio onde se encontra a imagem estiver situado acima do diretrio atual, a sintaxe utilizada ser: 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
<IMG
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
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
<IMG
<IMG
SRC= http://www.servidor.com.br/imagem.gif>
A sintaxe do exemplo, insere no documento a imagem `imagem.gif ', localizada 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 <BR> <IMG </CENTER> </BODY> </HTML>
servidores
</H1>
SRC=http://www.telecom.u.br/pet/imgcomunicacao.jpg >
<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 > <P>
topo
UFF
Alinhamento pelo
PET-TELE))) 29
<IMG <IMG
> >
fundo meio
<P>
Alinhamento pelo
<P> <IMG
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
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>
As tcnicas estudadas anteriormente para inserir imagens que no estejam contidas no mesmo diretrio do documento continuam vlidas. Observe os exemplos:
<BODY </BODY>
30
<BODY >[Contedo
</BODY>
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
<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
SRC=imagem1.gif ALIGN=left> Note que, com este tipo de
<IMG
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 partir de sua pgina. As palavras ou imagens de um documento que o interligam com outros so denominadas marcadores de como marcadores de na cor padro de
cor padro. J as imagens que tm esta funo costumam receber uma borda
link.
5.1 O marcador A
As
tags
<A>
</A>
hy-
perlink, assim como criar um endereo para uma parte especca de um documento que ser referida por um
link.
fora do documento.
34
mais bem explorado; por ora, til saber apenas que a sintaxe TARGET= _blank faz com que uma nova janela seja aberta para carregar o documento. Caso o parmetro TARGET no seja utilizado, o documento 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.
<A
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
<A
</A>
torne-se o marcador de um
<A
<IMG
SRC=praia.jpg >
</A>
- Faz com
UFF
Para visualizar o funcionamento de um Documento 1:
<HTML> <HEAD> <TITLE> Links 1 </TITLE> </HEAD> <BODY> <CENTER> <H1> Documento 1 </H1> <BR> Clique <A HREF=links2.html > </CENTER> </BODY> </HTML>
aqui
</A>
Documento 2:
<HTML> <HEAD> <TITLE> Links 2 </TITLE> </HEAD> <BODY> <CENTER> <H1> Documento 2 </H1> <P> Notou o funcionamento do </CENTER> </BODY> </HTML>
link?
</P>
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
<A
</A>
<A
</A>
<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 partir do diretrio raiz. Este tipo de especicao denominado `link absoluto'. Sintaxe de um
link absoluto:
<A
</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 >
documento 2.
aqui
</A>
para acessar o
link.
Chame esta pasta de `Subdir'. Modique
Experimente, agora, mover `links2.html' para uma pasta abaixo da que contm o arquivo `links1.html'. 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 >
acessar o documento 2.
aqui
</A>
para
link.
38
Web.
Sintaxe:
<A
</A>.
<A
</A>.
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 >
acessar a página do PET-Tele na internet.
aqui
</A>
para
link.
UFF
PET-TELE))) 39
Um procedimento muito comum nesses casos enderear partes importantes do texto do documento, como, por exemplo, ttulos de sees, e criar um menu inicial no topo da pgina com
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 : [Texto opcional]
</A>.
Referenciando ncoras:
Uma vez criadas as ncoras, pode-se criar
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: atual. Utilizando-se os recursos de endereamento descritos nas sees anteriores, o programador poder referir, atravs de tros servidores. Observe os exemplos:
<A
</A>.
<A
</A>
<A
<A
</A>
levar o usurio seo `Seo1' do documento `Doc1.html' localizado no mesmo diretrio do documento atual. As marcaes endereando a seo desejada.
<A
40
<A
</A>
levar o usurio seo `Seo1' do documento `Doc2.html' localizado no diretrio `Dir1' abaixo do diretrio atual. As marcaes endereando a seo desejada.
<A
<A
</A>
levar o usurio seo `Seo1' do documento `Doc3.html' localizado no diretrio imediatamente acima do diretrio atual. As marcaes endereando a seo desejada. Digite o exemplo abaixo e salve-o como `links4.html'.
<A
<HTML> <HEAD> <TITLE> Links </HEAD> <BODY> <CENTER> <H1> Link para <BR> Conhea <A
aqui
</TITLE>
</H1>
HREF=http://www.telecom.u.br/pet/integrantes.html#ex-bolsistas >
</A>
os ex-bolsistas do PET-Tele.
para ver as ncoras que ela possui. Tente modicar o exemplo `links4.html'
<A
</A>
UFF
PET-TELE))) 41
<A
HREF=MAILTO:endereo de e-mail?SUBJECT=texto do
</A>.
<HTML> <HEAD> <TITLE> Links 5 - Enviando E-mail </TITLE> </HEAD> <BODY> <CENTER> <H1> Enviando e-mails diretamente <BR> da pá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
PET-Tele.
42
Captulo 6 Listas
Uma forma muito conveniente de estruturar um documento HTML a utilizao 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 (Unordered
O principal parmetro do comando UL o parmetro TYPE, que permite que sejam especicadas variaes para o marcador utilizado na lista. 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
lista]
</UL>.
O exemplo abaixo ilustra a construo de uma lista no ordenada. Digiteo salvando como `listas1.html'.
<HTML> <HEAD> <TITLE> Listas 1 - Lista </HEAD> <BODY> <UL TYPE=DISC> <LI> Primeiro item <LI> Segundo item <LI> Terceiro item </UL> </BODY> </HTML>
Não Ordenada
</TITLE>
6.2 O marcador OL
As marcaes utilizadas para gerar listas ordenadas (Ordered e
lists ) so <OL>
</OL>.
Estas
<LI>.
TYPE=tipo - permite escolher o tipo de marcador da lista. Seus possveis valores so:
TYPE=1 - Cria uma lista numrica normal. No precisa ser especicado, pois padro.
TYPE=A - Cria uma lista alfabtica com letras maisculas comeando pelo A.
TYPE=a - Cria uma lista alfabtica com letras minsculas comeando pelo a.
UFF
PET-TELE))) 45
TYPE=I - Cria uma lista numrica com nmeros romanos (maisculos) comeando pelo I.
TYPE=i - Cria uma lista numrica com nmeros romanos (minsculos) 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 maisculas, 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 completa: <OL TYPE=tipo START=nmero > [Itens da lista] </OL>.
Sintaxe bsica: O exemplo abaixo ilustra a construo de uma lista ordenada. Digite-o salvando como `listas2.html'.
<HTML> <HEAD> <TITLE> Listas 2 </HEAD> <BODY> <OL> <LI> Primeiro item <LI> Segundo item <LI> Terceiro item </OL> </BODY> </HTML>
Lista Ordenada</TITLE>
6.3 O marcador DL
Uma lista de denies consiste em alternar um termo e uma denio. As
tags
<DL>
</DL>
Estes comandos devem envolver todo o conjunto de termos e denies da lista. Os termos devem ser precedidos da marcao da marcao
<DT>
e as denies
<DD>.
46
<HTML> <HEAD> <TITLE> Listas 3 - Lista de Denições </TITLE> </HEAD> <BODY> <H1>Lista de Denições<H1> <DL> <DT> Primeiro termo <DD> Denição do primeiro termo <DT> Segundo termo <DD> Denição do segundo termo <DT> Terceiro termo <DD> Denição do terceiro termo <DD> Denição alternativa para o terceiro termo </DL> </BODY> </HTML>
Os clientes
4 - Aninhamento de Listas
</TITLE>
UFF
PET-TELE))) 47
<LI> Primeiro termo da lista ordenada <LI> Segundo termo da lista ordenada <UL> <LI> Primero item da lista não ordenada
da lista ordenada
primeiro item da lista não ordenada denições contida no primeiro item da lista não ordenada
<DT> <DD>
primeiro item da lista não ordenada denições contida no primeiro item da lista não ordenada
da lista ordenada Terceiro item da lista nã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>
<IMG
SRC>.
Escolha, primeiramente, uma imagem de seu agrado e salve como `marcador.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á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 necessrio utilizar as
tags
<HTML> <HEAD> <TITLE> Listas 6 - Lista com Marcadores Grá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
Segundo sub-item do segundo item SRC=marcador.gif WIDTH=10 HEIGHT=10 > SRC=marcador.gif WIDTH=10 HEIGHT=10 >
UFF
PET-TELE))) 49
Terceiro sub-item do segundo item marcador.gif > Terceiro item marcador.gif > Quarto item
<BR>
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
coluna3
</TD>
<TABLE>
</TABLE>
BORDER=nmero - Especica a largura da linha das bordas que separam as clulas da tabela. Se no for especicado este parmetro, no ser exibida uma borda para a tabela.
WIDTH=nmero
ALIGN=left
gina.
center
BGCOLOR= cor - Especica a cor de fundo de toda a tabela. BORDERCOLOR=cor - dene a cor de borda da tabela.
BORDER. S funci-
<TABLE>
</TABLE>.
Sintaxe completa:
<TABLE
CELLSPACING=nmero CELLPADDING=nmero
UFF
WIDTH=nmero cor
PET-TELE))) 53
| nmero%
</TABLE>.
7.2 O marcador TR
A
tag
<TR>
(Table
<TR>
</TR>,
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
VALIGN=top
middle
bottom
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.
de de
<TR> [Comandos de criao de clulas] </TR>. Sintaxe completa: <TR ALIGN=tipo de alinhamento VALIGN=tipo alinhamento BGCOLOR=cor BORDERCOLOR=cor > [Comandos criao de clulas] </TR>.
Sintaxe bsica: Os parmetros do comando TR se sobrepem aos parmetros de mesmo
7.3 O marcador TD
A tag
<TD> (Table
tabela. Esse contedo deve ser escrito entre as marcaes Principais parmetros do comando TD:
<TD>
</TD>.
54
ALIGN= left
| |
right
center
VALIGN=top
middle
bottom
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.
WIDTH=nmero
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:
VALIGN=
tipodealinhamentoNOWRAP COLSPAN=nmeroROWSPAN=nmero
Os parmetros do comando TD se sobrepem aos parmetros de mesmo nome dos comandos TR e TABLE.
<TH>
</TH>
(Title
Heading ) o programa-
UFF
forma que
PET-TELE))) 55
<TD>
</TD>,
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.
<HTML> <HEAD> <TITLE>Tabelas 2 - Expansões </TITLE> </HEAD> <BODY> <TABLE WIDTH=80% ALIGN=center BORDER=1 CELLSPACING=0 BORDERCOLOR=000000 CELLPADDING=0> <TR> <TD ROWSPAN=2 BGCOLOR=E0E0E0 > </TD> <TH COLSPAN=2> Título 1 </TH> <TH COLSPAN=2> Título 2 </TH> </TR> <TR> <TH> Subtítulo 1 </TH> <TH> Subtítulo 2 </TH> <TH> Subtítulo 3 </TH> <TH> Subtítulo 4 </TH> </TR> <TR>
56
<TH> Tópico 1 </TH> <TD> Dados </TD> <TD> Dados </TD> <TD COLSPAN=2 ROWSPAN=2 </TR> <TR> <TH> Tópico 2 </TH> <TD> Dados </TD> <TD> Dados </TD> </TR> </TABLE> </BODY> </HTML>
ALIGN=center VALIGN=middle>
</TD>
<TD>
</TD>
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élula 1 </TD> <TD> Célula 2 </TD> <TD> Célula 3 </TD> </TR>
UFF
PET-TELE))) 57
<TR> <TD> Célula 4 </TD> <TD> Célula 5 </TD> <TD> Célula 6 </TD> </TR> </TABLE> </TD> <TD> Célula7 </TD> </TR> <TR> <TD> Célula8 </TD> <TD> Cé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:
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
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élula 1 </TD> <TD> Célula 2 </TD> <TD> Célula 3 </TD> </TR> <TR> <TD> Célula 4 </TD> <TD> Célula 5 </TD> <TD> Célula 6 </TD> </TR> </TABLE> </TD> <TD> Célula7 </TD> </TR> <TR> <TD> Célula8 </TD> <TD> Cé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 enviandolhe 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, necessrio que no lado do servidor exista um outro programa, escrito em outra linguagem de programao, que ser o responsvel pelo recebimento e processamento das informaes enviadas. Este tipo de programa denominado CGI e no ser abordado neste curso.
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:
59
60
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: formulrio]
Nos exemplos das sees seguintes ignoraremos os parmetros do comando FORM, uma vez que no estaremos realizando envio de informao atravs dos formulrios apresentados.
Permite a exibio de 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. pequeno quadrado, que pode ser marcado com um clique. O campo de entrada de dados criado para este tipo de varivel um
MAXLENGTH=comprimento - Dene o nmero mximo de caracteres permitidos para variveis do tipo TEXT ou PASSWORD.
62
<INPUT
TYPE=textNAME=nome >.
Sintaxe completa:
<INPUT TYPE=text
NAME=nome SIZE=tamanho
<INPUT
Sintaxe completa:
<INPUT
TYPE=password NAME=nome
<INPUT
<INPUT TYPE=radio
NAME=nome VALUE=valor
<INPUT
<INPUT TYPE=radio
NAME=nome VALUE=valor
<HTML> <HEAD> <TITLE> Formulários 1 </TITLE> </HEAD> <BODY> <CENTER> <H1>Ficha de Inscriçã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ê 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
TYPE=checkbox NAME=prog VALUE=powerpoint>
<BR><INPUT
Power Point
<P
ALIGN=center>
<INPUT
TYPE=submit VALUE=Enviar>
<INPUT
</P>
tags
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:
<SELECT NAME=nome > [Itens da lista] </SELECT>. Sintaxe completa: <SELECT NAME=nome SIZE=tamanho MULTIPLE> [Itens da lista] </SELECT>.
Sintaxe bsica: Cada item da lista deve ser especicado pelo comando OPTION, cujos principais parmetros so:
SELECTED - Indica que a opo deve ser previamente marcada como selecionada. Sintaxe bsica:
Sintaxe completa:
SELECTED>.
64
<HTML> <HEAD> <TITLE> Formulários 1 </TITLE> </HEAD> <BODY> <CENTER> <H1>Ficha de Inscriçã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ê 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>
<TEXTAREA>
</TEXTAREA>
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:
ROWS=nmero
<HTML> <HEAD> <TITLE> Formulários 1 </TITLE> </HEAD> <BODY> <CENTER> <H1>Ficha de Inscriçã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ê 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
de Sistemas
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ínimo de 3 linhas!</TEXTAREA> <P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT TYPE=reset VALUE=Apagar Campos > </P> </FORM> </BODY> </HTML>
<PRE>
</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.
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 VALUE=Apagar Campos > </FORM> </BODY> </HTML>
TYPE=reset
</FIELDSET>.
Alm disso, o comando LEGEND, denido dentro do comando FIELDSET, permite especicar nomes para os conjuntos de campos e criar teclas de atalho para eles. Sua sintaxe bsica : de campos
<LEGEND>
Nome do conjunto
</LEGEND>.
Browsers.
<HTML> <HEAD>
68
<TITLE> Formulários 3 - FIELDSET </TITLE> </HEAD> <BODY> <FORM> <FIELDSET> <LEGEND> Informaçõ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ão de crédito</LEGEND> <INPUT TYPE=radio NAME=card VALUE=visa> Visa <INPUT TYPE=radio NAME=card VALUE=mc> Master Card <BR> Número: <INPUT TYPE=text NAME=number> <BR> Data de validade: <INPUT TYPE=text SIZE=7 NAME=data VALUE=mm/aaaa > </FIELDSET> </FORM> </BODY> </HTML>
<LEGEND </LEGEND>
Sintaxe:
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ários 3 - FIELDSET </TITLE> </HEAD> <BODY> <FORM> <FIELDSET> <LEGEND ACCESSKEY=I> <U>I</U>nformaçõ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ão de crédito</LEGEND> <INPUT TYPE=radio NAME=card VALUE=visa> Visa <INPUT TYPE=radio NAME=card VALUE=mc> Master Card <BR> Número: <INPUT TYPE=text NAME=number> <BR> Data de validade: <INPUT TYPE=text SIZE=7 NAME=data VALUE=00/0000 > </FIELDSET> </FORM> </BODY> </HTML>
<INPUT
70
sintaxe usada :
<LABEL </LABEL>
ACCESSKEY=A FOR= String de identicao > Rtulo do campo tura ou at mesmo depois da tag de criao do campo.
[Campo]. O marcador LABEL pode tambm ser fechado logo aps sua aberModique novamente o exemplo `forms3.html' para que que como mostrado abaixo. Teste agora as teclas de atalho para cada campo.
<HTML> <HEAD> <TITLE> Formulários 3 - FIELDSET </TITLE> </HEAD> <BODY> <FORM> <FIELDSET> <LEGEND ACCESSKEY=I> <U>I</U>nformaçõ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ão de cré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>ú</U>mero: </LABEL><INPUT NAME=number ID=num>
TYPE=text
UFF
PET-TELE))) 71
<BR> <LABEL
validade:
ACCESSKEY=D FOR=data>
<U>D</U>ata
de
</LABEL> <INPUT
TYPE=text SIZE=7
72
Captulo 9 Frames
O recurso de frames permite ao programador criar pginas HTML que podem ser visualizadas simultaneamente na janela do no compatvel com todos os clientes
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 frames, 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.
<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. utilizado o comando FRAME. Para tanto
73
74
COLS=tamanhos - usado para criar um documento com frames dispostos 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 dispostos 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 receba os valores 1 ou 0 respectivamente.
<FRAMESET COLS | ROWS=tamanhos > [Especicao individual de cada frame] </FRAMESET>. Sintaxe completa: <FRAMESET COLS | ROWS=tamanhos FRAMEBORDER=1|0 FRAMESPACING=valor > [Especicao individual de cada frame]</FRAMESET>.
Sintaxe bsica:
<FRAMESET
</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
ROWS=60,100,100,200 > [Frames]
<FRAMESET
</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 automaticamente para auxiliar o usurio.
Browser, a melhor
<FRAMESET
</FRAMESET>
- Cria trs
<FRAMESET
<FRAMESET>
- Cria cinco
<FRAMESET
tela.
</FRAMESET>
- Cria dois
<FRAMESET
</FRAMESET>
- Cria um
frame com altura de 300 pixels no centro da janela e, acima e abaixo dele, dois frames de mesma altura.
<FRAMESET
</FRAMESET>
- Cria
dois frames dispostos em linhas, sendo que o de cima ocupa 30% da tela, e o de baixo ocupa 70%.
76
<FRAMESET
</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
</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 formatos de valores podem ser combinados entre si.
SRC= Endereo - Este parmetro o nico indispensvel, pois especica o nome ou a URL do documento que ser exibido no frame.
ALIGN=posiao - Ajusta o alinhamento do frame ou do texto. As opes permitidas para este parmetro so:
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.
UFF
PET-TELE))) 77
FRAMEBORDER=1|0 -Idntico ao parmetro de mesmo nome do comando FRAMESET, ele ativa ou desativa a exibio de borda para o frame atual.
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 completa: <FRAME SRC=nome ou URL do arquivo ALIGN=posiao FRAMEBORDER=1 | 0 MARGINHEIGHT=altura
Sintaxe bsica: MARGINWIDTH=largura NAME=nome NORESIZE SCROLLING=yes
no>.
<HTML> <HEAD><TITLE> Documento 1 </TITLE></HEAD> <BODY> <CENTER><H1> Documento 1 </H1></CENTER> </BODY> </HTML>
78
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
Documento 3:
PET-TELE))) 79
<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.
<BASE
80
TARGET do comando A para este m. A sintaxe utilizada neste caso seria:
<A
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 > <LI> <A HREF=doc2.html > <LI> <A HREF=doc3.html > </OL> </BODY> </HTML>
<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
Para solucionar este problema existe o comando NOFRAMES, que permite a incluso de avisos ou comandos HTML que sero visualizados pelo browser no compatvel com frames. As marcaes
<NOFRAMES>
</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 Considerando a hiptese de lidar com
Browser.
mes, sugere-se as seguintes alternativas ao criar sua pgina: 1. Use o comando NOFRAMES e emita um aviso de que o 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 verso sem frames do seu site. O exemplo abaixo uma modicao do arquivo `frames2.html', utilizando o comando NOFRAMES. Modique-o tambm em seu computador e salve com o nome de `frames3.html'.
Browser usado
<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ágina usa frames, um recurso não suportado pelo Browser que está sendo utilizado.
82
<BR>
Sugerimos obter uma versão atualizada do Netscape Navigator
<A
</A>
ou do
<A
Browser ir carregar
TARGET= _blank - Faz com que uma nova janela seja aberta para
carregar o documento.
TARGET= _parent - Faz com que o documento seja carregado no frameset de nvel superior ao do documento atual.
serem clicadas em regies especcas, permitem o acesso a outros documentos. como se determinadas partes da imagem funcionassem como denominados mapeadores de imagem, tais como As imagens mapeadas podem ser criadas atravs de programas especiais
arquivos gerados por este tipo de programa possuem a extenso `.map', mas alguns possuem a opo de criar diretamente um arquivo HTML que contm 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 do servidor) e, o segundo, o
server-side (lado
servidor perguntando o endereo (URL) do documento associado rea clicada. O servidor envia, ento, o endereo de volta ao uma solicitao para abrir aquele documento. No entraremos em detalhes sobre o funcionamento de mapas do tipo
83
84
<A
arquivo.map ><IMG SRC=nome da imagem ISMAP></A>. O parmetro ISMAP do comando IMG indica que a imagem do tipo clicvel, ou seja, uma imagem mapeada.
<MAP>
</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: sensveis]
<MAP
</MAP>
client-side atravs do comando IMG
<IMG
que podem ser clicadas, de um mapa de imagem. Seus principais parmetros so:
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.
HREF=nome ou URL do arquivo - Especica o caminho para o documento a que determinada regio da imagem levar, se clicada.
_blank - Abre o documento em uma nova janela _parent - Abre o documento na janela de nvel imediatamente superior (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.
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 '.
<HTML> <HEAD><TITLE> Documento 1 </TITLE></HEAD> <BODY> <CENTER><H1> Você clicou sobre o retâ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ê clicou sobre o círculo! </H1></CENTER> </BODY> </HTML>
UFF
Salve-o com o nome de `doc-circ.html'. Documento 3:
PET-TELE))) 87
<HTML> <HEAD><TITLE> Documento 3 </TITLE></HEAD> <BODY> <CENTER><H1> Você clicou sobre o triâ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
Descrio Maior que Menor que E comercial Aspas duplas Marca registrada Copyrights
Aparncia
> <
& c
Caracter Acento agudo Acento grave Acento circunexo Letra com til Letra com trema Cedilha
89
90
Caracter Letras com argola Letras unidas O cortado Eth Caracter alemo
ß =
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
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
PET-TELE))) 93
94