HTML Avançado

por **Trinity** Sex maio 27, 2016 10:41 pm

HTML Avançado.

I. Sobre este Tutorial

Neste tutorial, você vai aprender a criar "Formulários Eletrônicos", que permitem um usuário do
Web submeter informações para o provedor do serviço.

Existem vários tipos de campos de entrada, como:

· campos de entrada de texto
· menus de múltipla escolha ou escolha única
· botões sim-ou-não
· botões para submissão ou limpeza de formulário

Cada uma destes campos tem funcionalidade própria e você vai aprender em que situação utilizálos
em seus formulários.

Para melhor compreender a notação utilizada nos formulários, você primeiro precisa se familiarizar
com HTML (Hypertext Markup Language). Consulte, se necessário, o nosso tutorial sobre HTML
básico disponível em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/html1/
Se você já conhece HTML, as marcações utilizadas em formulários seguem a mesma convenção,
e portanto, será fácil aprender.

Contudo, formulários HTML sempre seguem um padrão:

<TITLE>Título do Documento</TITLE>

no início, e o restante do documento a seguir.

Além disto, as marcações que definem o formulário precisam ser iniciadas e finalizadas, como
estas marcações de listas.

<UL>
<LI>Primeiro item da lista
<LI>Segundo item da lista
</UL>
<FORM>
conteúdo do formulário...
</FORM>

Uma última observação: você pode ter múltiplos formulários em um único hiperdocumento. Apenas
certifique-se que os blocos <FORM></FORM> não se sobrepõem.

II. Codificação básica

Como vimos, um formulário começa com a marcação <FORM> e termina com </FORM>. Outros
itens devem ser especificados:

· Primeiro, o formulário precisa saber como enviar a informação para o servidor. Existem dois
métodos, GET e POST.

METHOD="GET"

A maioria dos documentos HTML são recuperados a partir da requisão de uma única URL ao
servidor. Assim, um formulário que utilize este método, envia toda sua informação ao final da URL
ativada.

METHOD="POST"

Este método transmite toda a informação fornecida via formulário, imediatamente após a URL
ativada. Ou seja, quando o servidor recebe uma ativação de um formulário utilizando POST ele
sabe que precisa continuar "ouvindo" para obter a informação. Este é o melhor método.

· Segundo, o formulário precisa saber para onde enviar a informação. Esta é a URL sendo
ativada a partir do formulário, e ela é referenciada através da marcação ACTION. Esta URL em
geral aponta para um script CGI que irá receber e decodificar os resultados. Lembre-se que se
você está referenciando um script que reside no mesmo servidor do formulário, você não precisa
incluir a URL completa.

ACTION="/cgi-bin/post-query" para um script no seu servidor

ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do CR/DF

Após você construir estas marcações, seu formulário geralmente terá a seguinte estrutura:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Marcações de campos de entrada e HTML em geral

</FORM>

Observe que este formulário utiliza o método POST e envia as informações digitadas para um
script local chamado post-query no diretório /cgi-bin do servidor.

Outra informação importante: cada marcação de entrada em um formulário tem uma opção NAME
associada, de tal forma que o script saiba qual o nome, isto é, como chamar cada valor digitado.

Certamente você pode definir mais de um campo de entrada textual ou menu dentro de um
formulário, mas certifique-se de que cada um possui um nome diferente.

III. Texto

a. Entrada de texto comum - TEXT
b. Entrada de texto protegido, senha - PASSWORD
c. Entrada oculta - HIDDEN
d. Entrada de várias linhas de texto - TEXTAREA
a. Entrada de texto comum - TEXT

A forma mais simples de campo de entrada é a marcação text. Este campo permite a digitação de
uma única palavra ou linha de texto, e possui uma largura default de 20 caracteres.

Opções:

VALUE="" OPCIONAL

Utilizando a marcação VALUE você especifica que texto aparecerá no campo quando o formulário
for exibido.

SIZE="" OPCIONAL

Esta marcação altera o tamanho deste campo exibido na tela.

Obs.: o usuário sempre poderá digitar mais caracteres do que o tamanho do campo na tela, pois o
texto irá se deslocar a esquerda dentro do campo.

MAXLENGTH="" OPCIONAL

Se você deseja limitar o número de caracteres que o usuário pode digitar, basta usar esta
marcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do permitido em
MAXLENGTH.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Qual o seu primeiro nome?
<INPUT TYPE="text" NAME="primeiro_nome" VALUE="carlos" SIZE="10" MAXLENGTH="15">
</FORM>

Obs.:
· O valor informado em NAME deve utilizar sublinhado em vez de espaços em branco. Inserir
espaços em branco nestes nomes pode causar problemas no servidor na decodificação dos
valores informados.
· Se seu formulário possui apenas um campo de entrada textual, ao teclar ENTER neste campo
o formulário será submetido, como se o usuário tivesse acionado o botão SUBMIT.

b. Entrada de texto protegido, senha - PASSWORD
Marcações de entrada do tipo password são idênticas aos campos do tipo text, exceto pelo
fato de todos os caracteres serem exibidos como asteriscos ( *).

Opções:
VALUE="" OPCIONAL

A marcação VALUE especifica um valor default para este campo.

SIZE="" OPCIONAL

Esta troca o tamanho do campo de password exibido na tela.

MAXLENGTH="" OPCIONAL

Limita o número de caracteres que o usuário pode informar como password.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Informe sua senha de acesso (8 caracteres):

<INPUT TYPE="password" VALUE="xpto" NAME="sua_senha" SIZE="8" MAXLENGTH="8">
</FORM>

Obs.:
· Se você pretende utilizar MAXLENGTH para limitar o número de caracteres informados, tenha
certeza de especificar um SIZE com o mesmo tamanho, para fornecer ao usuário o sentimento
de qual a largura do campo. Esta regra não foi utilizada no primeiro exemplo, que possui SIZE
igual a 10, mas MAXLENGTH de 15, o que faz o campo se deslocar nos últimos 5 caracteres
caso o valor informado possua mais do que 10 caracteres.

· Mesmo que o valor default VALUE esteja representado por asteriscos, o usuário pode
visualizar o seu valor através da recuperação do fonte do hiperdocumento em HTML (uma
opção comum na maioria dos clientes WWW).

c. Entrada oculta - HIDDEN

Além da marcação PASSWORD com um valor VALUE default, é possível "esconder" informação
passada dentro de blocos FORM com uma marcação HIDDEN. Esta informação é recebida pelo
script de decodificação no servidor, mas não é diretamente exibida ao usuário no formulário.

Opções:
VALUE="" OBRIGATÓRIO

Através da marcação VALUE, você deve especificar o texto oculto a ser enviado ao script
processador do formulário.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Você não pode visualizar nada aqui embaixo.

<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">
</FORM>

Obs.:
· Mesmo que o valor especificado em HIDDEN VALUE não seja exibido no formulário, o usuário
pode vê-lo através da operação de visualização do fonte do hiperdocumento, da mesma forma
como no campo PASSWORD.

d. Entrada de várias linhas de texto - TEXTAREA

A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos exemplos
anteriores. Ao contrário, uma marcação <TEXTAREA> delimita o seu início e a marcação
</TEXTAREA> o seu fim.

Opções:
ROWS="" OBRIGATÓRIO

Especifica o número de linhas da entrada textual.
COLS="" OBRIGATÓRIO

Especifica o número de colunas da entrada textual.
Texto default OPCIONAL

Se você deseja que um texto seja exibido no campo textual ao abrir o formulário, simplesmente
coloque este texto entre as marcações de início e fim da TEXTAREA.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Por favor, escreva aqui suas sugestões, dúvidas e críticas:<BR>

<TEXTAREA NAME="critica" ROWS="3" COLS="40">

Gostaria de obter mais informações sobre
este servidor. Grato.

</TEXTAREA>
</FORM>

Obs.:
· O usuário dispõe de Scrollbars para digitar além do número de linhas e colunas definidas em
ROWS e COLS.

IV. Menus

a. Menus com opções - SELECT
b. Listas paginávies - SELECT com SIZE
a. Menus com opções - SELECT

Menu de opção única

A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções de menu
ficam entre a marcação de início <SELECT> e a de fim </SELECT>.

Opções:
OPTION OBRIGATÓRIO

Especifica uma opção presente no menu.
VALUE="" OPCIONAL

Especifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção é enviado
ao servidor.
SELECTED OPCIONAL

Por default, a primeira OPTION é exibida no menu. Esta marcação estabelece uma opção de
menu a ser exibida inicialmente, quando não se deseja que seja a primeira OPTION.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Onde você pretende fazer turismo nas férias?

<SELECT NAME="lugares_para_ver">

<OPTION>Fortaleza

<OPTION VALUE="sul">Florianópolis ou Porto Alegre

<OPTION>Rio de Janeiro

<OPTION SELECTED>Brasília

<OPTION VALUE="amazonia">Manaus

</SELECT>
</FORM>

Obs.:
· Se você possui mais do que 3 ou 4 opções de escolha, e o usuário só pode selecionar uma,
então este elemento de entrada é o melhor. As pessoas frequentemente utilizam vários
RADIOBUTTONS, que veremos a seguir.
· O script decodificador, no servidor, provavelmente apreciará uma única palavra para VALUE,
em vez de múltiplas palavras. Você sempre pode utilizar sublinhado para separar expressões
compostas.

b. Listas pagináveis - SELECT com SIZE

A única diferença entre este elemento de entrada e o anterior SELECT é a introdução da opção
SIZE. Ela especifica quantas linhas com opções de menu serão exibidas na janela.
Opções:

MULTIPLE OPCIONAL

Especifica que múltiplas opções podem ser selecionadas, em oposição ao exemplo anterior do
SELECT, onde apenas uma opção pode ser selecionada no menu.

SIZE="" OBRIGATÓRIO

Número de linhas (opções de menu) exibidas na janela.

OPTION OBRIGATÓRIO

Especifica uma opção da lista.
VALUE="" OPCIONAL

Especifica o valor da opção retornada ao servidor.

Se não for definido, o nome da opção é enviado ao servidor.
SELECTED OPCIONAL

Esta opção determina uma OPTION default para ser selecionada.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Que facilidades de acomodação você deseja?<BR>

<SELECT NAME="opcional" MULTIPLE SIZE="5">

<OPTION>Televisão

<OPTION VALUE="casal" SELECTED>Cama de Casal

<OPTION>Ar Condicionado

<OPTION>Fax

<OPTION SELECTED>Modem V.34

<OPTION>Sauna

<OPTION>Lavanderia

<OPTION>Frigo-Bar

</SELECT>
</FORM>

Obs.:
· Este elemento de entrada é bom para listas com muitas opções, porque é possível controlar
quantas serão exibidas por vez.
· Em alguns clientes WWW, é necessário teclar simultaneamente as teclas CONTROL ou
SHIFT para selecionar múltiplos itens.

V. Botões

a. Botões sim ou não - CHECKBOX
b. Botões com opções - RADIO
c. Botões de submissão e limpeza
a. Botões sim ou não - CHECKBOX
Retornando ao formato de INPUT TYPE="", a marcação CHECKBOXES é perfeita para escolher
entre duas opções.

Opções:
VALUE="" OPCIONAL

Especifica o valor da opção enviado ao servidor. Se não for definido, o valor "on" é enviado ao
script decodificador.

CHECKED OPCIONAL

Esta marcação define a opção selecionada por default.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o boletim de
notícias.

<P>
<INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informações turísticas.

</DL>

</FORM>

Obs.:
· Este elemento funciona melhor para respostas do tipo "sim/não" ou "on/off".
· Você pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME, mas diferentes VALUES

b. Botões com opções - RADIO

RADIOBUTTONS utilizam uma notação similar a de CHECKBOXES, contudo, apenas uma opção
pode ser escolhida.

Opções:
VALUE="" OBRIGATóRIO

Especifica o valor da opção a ser enviado para o servidor.

Se não for definido, um valor "on" é enviado ao script decodificador.

CHECKED RECOMENDADO

Esta marcação especifica qual botão estará selecionado por default.

Uma vez que uma seleção precisa ser feita, é melhor prover uma opção pre-selecionada.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Suas preferências na viagem:
<DL>
<DD>Classe do Bilhete:
<INPUT TYPE="radio" NAME="classe" VALUE="eco">econômica
<INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva
<INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira
<DD>Localização:
<INPUT TYPE="radio" NAME="local" VALUE="frente">área fumante
<INPUT TYPE="radio" NAME="local" VALUE="tras">área não fumante
</DL>
</FORM>

Obs.:
· Como já foi mencionado, RADIOBUTTONS não são boa escolha para listas com muitos itens,
porque o cliente tem problemas para exibir muitos botões. É melhor utilizar o menu SELECT.
· Uma vez que um botão é selecionado, ele não pode ser desmarcado sem selecionar outro
botão que possua o mesmo NAME. A seleção default pode ser restaurada com a utilização do
botão RESET, introduzido a seguir.
· Se você utiliza vários RADIOBUTTONS com o mesmo NAME e nenhum VALUES, o servidor
não será capaz de dizer que botão foi selecionado, uma vez que o valor "on" será retornada
para qualquer um deles.

c. Botões de submissão e limpeza - RESET E SUBMIT

Em vez do usuário corrigir cada INPUT, um botão RESET pode ser utilizado para restaurar todos
os campos a seus valores default, como se nenhuma informação houvesse sido digitada.

E finalmente, o FORM precisa de uma opção para enviar toda a informação digitada para o
servidor, uma vez que o usuário terminou de preencher os todos os campos de entrada. O botão
SUBMIT transfere toda a informação para a URL especificada no elemento ACTION.

Opções:
VALUE="" OPCIONAL

Especifica o texto a ser exibido no botão.

Se não for especificado, os textos default "Reset" e "Submit Query" serão colocados nos botões
RESET e SUBMIT, respectivamente.

NAME="" OPCIONAL

Se NAME for definido em um botão SUBMIT, o formulário irá transmitir o valor do conteúdo do
elemento VALUE, permitindo que você tenha múltiplos botões SUBMIT numa espécie de versão
simplificada de um RADIOBUTTONS.

<FORM METHOD="POST" ACTION="/cgi-bin/donothing">
Qual o seu primeiro nome? <INPUT TYPE="text"><BR>
Aperte este botão: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpa campos">
<INPUT TYPE="submit">
</FORM>

Obs.:
· Normalmente, o script decodificador retorna um hiperdocumento após ele processar a
informação do formulário.
· Nem todos os clientes suportam múltiplos botões SUBMIT. É melhor utilizar apenas um único
botão SUBMIT para transmitir a informação digitada no formulário.

Extensões do Netscape

A Netscape Communications desenvolveu uma série de extensões específicas, seguem algumas
abaixo.Um documento completo sobre estas extensões está disponível na Netscape.Com, em:
(http://home.mcom.com/assist/net_sites/h ... sions.html)
· <HR>

A netscape desenvolveu 5 novas tags para serem aplicadas junto à marcação HR (horizontal rule)
<HR SIZE=número>

A tag SIZE define a largura da linha horizontal.
<HR WIDTH=percentual>

A linha padrão ocupa toda a extensão da tela. Com esta Tag é possível determinar o
percentual de ocupação da tela de um linha.
<HR ALIGN=left|right|center>

Assim é possível alinhar linhas horizontais que não ocupem toda a tela, seja à direita, à
esquerda, ou centralizadas.
<HR NOSHADE>

Produz uma linha realmente sólida, sem nenhum tipo de sombra.
· <UL>

Utilizando-se as extensões TYPE=disc, TYPE=circle, or TYPE=square é possivel definir o
formato do indicador de uma lista não numerada (UL)
· <OL>

Da mesma forma, é possível definir o tipo de algarismos em listas numeradas, usando as
extensões:
(TYPE=A) para letras maiúsculas
(TYPE=a) para letras minúsculas
(TYPE=I) para numerais romanos grandes
(TYPE=i) para numerais romanos pequenos
(TYPE=1) números padrão

Para listas que devem começar com valores diferentes de 1, pode se usar a tag START.
Por exemplo, START=5 vai exibir 'E', 'e', 'V', 'v', or '5' de acordo com a tag TYPE.
· <LI>

À marcação LI também podem ser atribuidas extensões TYPE, como em UL e OL,
conforme explicado acima. Para listas numeradas pode ser usado VALUE para atribuir um
valor a um item.
· <IMG>

<IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>

A marcação ALIGN=left fará com que os demais elementos sejam alinhados à direita e
abaixo da imagem. Assim é possível fazer um texto contornar uma figura alinhada a
esquerda da página. ALIGN=right se comporta de modo semelhante, mas na borda direita
da tela.

As novas extensões para HTML do NETSCAPE possibilitam ainda: ALIGN=top,
ALIGN=texttop, ALIGN=middle, ALIGN=absmiddle, ALIGN=baseline, ALIGN=bottom e
ALIGN=absbottom, permitindo refinamentos no controle de alinhamento.
<IMG WIDTH=valor HEIGHT=valor>

As marcações WIDTH e HEIGHT podem definir o tamanho da imagem, acelerando o
trabalho do browser. Ao invés de esperar a imagem chegar, o browser sabe previamente
seu tamanho, agilizando a transferência. É também possível alterar o tamanho original de
uma imagem usando-se destas marcações. No entanto, desta forma, pode se perder a
qualidade da imagem.
<IMG BORDER=value>

Define a espessura da borda de uma imagem. Pode-se usar border=o por exemplo para
eliminar bordas de imagens que estão definidas como links.
<IMG VSPACE=valor HSPACE=valor>

Para as images flutuantes, VSPACE controla o espaço vertical acima e abaixo da figura,
enquanto HSPACE controla o espaço horizontal a esquerda e a direita da figura.

Novos
Elementos

· <NOBR>
NOBR define que uma linha não pode ser quebrada em sua exibição. É utilizado em par =
<NOBR>e</NOBR>.
· <WBR>

WBR significa Word BReak. É utilizado em uma linha definida como NOBR, para
determinar em qual palavra a linha pode ser quebrada se necessário. Não produz um BR
automático, mas indica ao browser onde quebrar a linha se necessário.
· <FONT SIZE=valor> </FONT>

Com esta marcação você pode definir tamanho de fonte. São aceitos valores entre 1-7. O
tamanho padrão da marcação FONT é 3. O valor também pode ser definido opcionalmente
com os caracteres '+' or '-' , antes do número.

· <BASEFONT SIZE=value>

Altera o tamanho da BASEFONT relativo a todas as marcações FONT. O padrão é 3.
· <CENTER>

Utilizado aos pares para centralizar elementos do seu texto em html.

Novas
Entidades

Além dos caracteres especiais já em uso, foram criados:
® -> Marca Registrada -> ®
© -> Copyright -> ©

I. Sobre esse Tutorial
II. Interlaced Gif
III. Imagens Transparentes
IV.Mapas sensíveis

I. Sobre esee Tutorial
Neste tutorial, vamos ver alguns recursos de manipulação de imagens bastante utilizados por sites
WWW.

Para a obtenção desses recursos, veremos algumas boas dicas sobre dois programas
especificamente: o Lview e o Mapedit.

É importante que você já conheça HTML - Hypertext Markup Language. Se não conhece, sem
problema também, dá uma lida cuidadosa nos nossos outros tutoriais sobre HTML, disponíveis em
http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/ .

Este tutorial faz parte de um conjunto de módulos destinados a quem deseja publicar/prover
informação na Internet, através de serviço do tipo WWW (World Wide Web).

Atualmente - janeiro de 1996 - este conjunto compreende 7 módulos:

1. Introdução Geral a Internet
2. HTML Básico
3. Tabelas em HTML
4. Formulários em HTML
5. Múltiplas Janelas - Frames
6. Manipulação de Imagens
7. Guia de Estilo

II. Interlaced GIF

Definição

Imagens gif definidas como "interlaced" tornam a transmissão de uma página mais confortável ao
usuário, uma vez que, ao invés de trazer a imagem em bloco, o browser exibe a imagem
aumentando sua resolução gradativamente.

Dependendo da resolução da imagem, haverá diferença de nível de resolução final em um arquivo
interlaced no padrão gif89a ou gif87a. De um modo geral, o formato gif87a oferece melhor
resolução para arquivos "interlaced".

Criando um Arquivo Interlaced com LVIEW PRO

Para definir um arquivo "gif" como interlaced, selecione o menu OPTIONS e ative a opção SAVE
GIF's INTERLACED. Caso você observe perda de resolução na imagem, salve-a no padrão gif87a.

III. Imagens Transparentes

Definição

O formato gif89a permite que se defina que uma cor em um arquivo fique transparente.
Exemplo:

Criando Imagens Transparentes com LVIEW PRO
1. Selecione o menu Retouch
2. Neste menu, escolha a opção Color Depth
3. Defina como Palette Image e clique em OK
4. Selecione o menu Options
5. Escolha Background Color
6. Clique no botão Dropper
7. O curso vai ficar com a aparência de um conta gotas
8. Clique com o cursor sobre a cor que você deseja que fique transparente
9. Salve a imagem como gif89a (file => Save as)

Atenção, você só irá visualizar a transparência da imagem ao exibí-la com o browser. Na tela do
Lview a aparência do arquivo não é alterada.

IV. Imagens Sensíveis

Definição
Imagens sensíveis ou mapas clicáveis são imagens que contém vários links associados a elas.
Uma aplicação comum para este recurso é a utilização de mapas geográficos em que, ao se clicar
em cada região/área/cidade, será obtido um arquivo diferente.

Passo a Passo
Para criar uma imagem sensível é preciso:

1. Mapear as coordenadas do arquivo imagem, gerando um arquivo do tipo .map
2. Copiar o arquivo .map para o seu servidor
3. Atualizar na área do servidor www a existência do novo .map (normalmente, no arquivo
imagemap.com, que se encontra no diretório /usr/local/etc/httpd/conf)
4. Inserir o arquivo em uma página, incluindo a extensão ismap junto a imagem, da seguinte
forma: <img src="nome_do_arquivo.gif" ismap>
5. Fazer uma âncora da imagem para o programa que interpreta mapas no servidor - imagemap -,
com a identificação do mapa a ser associado a esta imagem. Exemplo: <a href="/cgibin/
imagemap/mapa1"><img src="arquivo.gif"></a>
Gerando o Arquivo .MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal

1. Selecione no menu file a opção open/create
2. Defina o tipo de servidor como (NCSA, Apache, ...)
3. Na janela GIF Filename localize o arquivo imagem que você quer mapear (use o botão de
browse para chegar até ele, se estiver no PC)
4. Digite na janela Map Filename o nome que você deseja dar ao arquivo .map
5. Clique ok. O Mapedit vai informar que o arquivo .map não existe e pedir confirmação para sua
criação.
6. Em seguida, o arquivo imagem que foi especificado será exibido na tela do Mapedit
7. No menu tools, selecione o formato da primeira área que você quer mapear (polígono, círculo
ou retângulo)
8. Mantendo o botão esquerdo do mouse pressionado, delimite a área que você quer mapear e
clique no botão direito do mouse.
9. Surgirá uma janela de diálogo em que você deve inserir a URL que deseja associar àquela área
e, opcionalmente, comentários.
10.Repita operação semelhante até concluir o mapeamento completo da imagem.
11.Escolha no menu file a opção Save As
12.Confirme o correto formato do arquivo .map e o nome do arquivo.

Copiando .MAP para o Servidor

O arquivo .map referente a esta imagem deverá estar armazenado juntamente com as suas
páginas e imagens a serem tornadas disponíveis no WWW.

É interessante criar um subdiretório no servidor exclusivamente para armazenar os arquivos .map
a serem utilizados.

Atualizando o .MAP no IMAGEMAP.CONF

Uma vez copiado o arquivo .map para o servidor, para que ele funcione é necessário inserir sua
localização em um arquivo chamado imagemap.conf é este o arquivo consultado no servidor para
interpretar qualquer imagem sensível.

O imagemap.conf é um arquivo texto que se encontra na área de configuração do servidor. Por
isso, normalmente só o administrador da máquina terá acessso a ele . Basta então solicitar ao
administrador que atualize o imagemap.conf toda vez que um novo .map for criado

O imagemap.conf está localizado no diretório /usr/local/etc/httpd/conf e tem a seguinte aparência:

##
Mapeamento de imagens
##
ex do rio
#backbone: /data/httpd/htdocs/rnp/backbone.map
#wood : /home/servicos/httpd/htdocs/tutorial/imagem-clicavel/wood.map
Brasil : /is/www/SVI/Brasil.map
BRnorte : /is/www/SVI/BRnorte.map
BRnordeste : /is/www/SVI/BRnordeste.map
BRsudeste : /is/www/SVI/BRsudeste.map
BRcentro : /is/www/SVI/BRcentro.map
BRsul : /is/www/SVI/BRsul.map
#clique : /home/servicos/httpd/htdocs/ct/hdoc/clique/mapa1.map
wood3 : /is/www/mercosul/wood2.map
mercosul : /is/www/mercosul/mercosul.map

Inserindo a Imagem Mapeada na Página

Para inserir uma imagem mapeada em uma página, abra uma âncora apontando para o imagemap
na área de cgi-bin do seu servidor, especifique o nome com que o mapa referente está
referenciado no imagemap.conf e insira a imagem no interior da âncora, associando o atributo
ISMAP, da seguinte forma:

<a href="/cgi-bin/imagemap/mapa1"><img src="brasil.gif" ismap></a>

Onde mapa1 é o nome utitilizado no arquivo imagemap.conf para referenciar o arquivo .map criado
para o arquivo brasil.gif, no exemplo.