i.característicasgeraisdohtml - clubedainformatica.com.br · 13 f.textopré-formatado...
TRANSCRIPT
PG Redes de Computadores
I Caracteriacutesticas Gerais do HTMLmiddot Documentos HTML satildeo arquivos escritos em ASCII - textomiddot Podem ser criados em qualquer editor de texto ( vi emacs edit notepad)middot Existem editores especiacuteficos para vaacuterias plataformasmiddot Existem conversores de vaacuterios formatos por exemplo doc para htmlmiddot A unidade miacutenima de informaccedilatildeo eacute a ldquopaacuteginardquo
Haacute diferenccedilas entre os diversos clientes Web de forma que nem todas as marcaccedilotildeese seus correspondentes recursos satildeo suportadas por todos eles Quando um clientenatildeo entende uma determinada marcaccedilatildeo ele simplesmente a ignora Ao criar umdocumento eacute importante testaacute-lo com vaacuterios clientes
Vocecirc pode visualizar um documento que esteja criando com NCSA Mosaic(ou qualquer outro cliente Web) Basta abriacute-lo com o comando Open LocalFile disponiacutevel na opccedilatildeo File do menu
HTML utiliza marcaccedilotildees especiacuteficas e distintas para dizer ao Web browser como exibir odocumento
Importante HTML natildeo faz diferenccedila entre maiuacutesculas e minuacutesculas (natildeo eacutecase sensitive) Entatildeo a notaccedilatildeo lttitlegt eacute equivalente a ltTITLEgt ou ltTiTlEgt
Como satildeo as Marcaccedilotildees HTMLAs marcaccedilotildees do HTML - tags - consistem do sinal (lt) (o siacutembolo de menor que) seguidapelo nome da marcaccedilatildeo e fechada por (gt) (maior que)
De um modo geral as tags aparecem em pares por exemplo ltH1gt CabeccedilalholtH1gt Osiacutembolo que termina uma determinada marcaccedilatildeo eacute igual aquele que a inicia antecedido poruma barra () e precedido pelo texto referente
No exemplo ltH1gt avisa ao cliente Web para iniciar a formataccedilatildeo do primeiro niacutevel decabeccedilalho e ltH1gt avisa que o cabeccedilalho acabou
Haacute excessotildees a esse funcionamento em pares das marcaccedilotildees Por exemplo a que indicaum final de paraacutegrafo ltPgt Natildeo necessita de uma correspondente ltPgt A marcaccedilatildeo queindica quebra de linha - ltbrgt - tambeacutem natildeo precisa de uma correspondente e outras taiscomo lthrgt e ltligt
Exemplos de Marcaccedilotildeesmiddot A notaccedilatildeo ltTITLEgt (e a correspondente ltTITLEgt) especificam o tiacutetulo de um
documentomiddot A notaccedilatildeo ltH1gt (e a correspondente ltH1gt) indica a aparecircncia de um cabeccedilalhomiddot A notaccedilatildeo ltPgteacute a marcaccedilatildeo para final de paraacutegrafo
2
II Criando Documentos HTMLa HTML MiacutenimoTodo documento deve ser identificado como HTML (lthtmlgt lthtmlgt) ter uma aacuterea decabeccedilalho (ltheadgtltheadgt) com o nome para o documento (lttitlegt lttitlegt) um tiacutetuloprincipal e uma aacuterea definida como corpo(ltbodygtltbodygt) do conteuacutedo do documento Comoo exemplo a seguir
ltHTMLgtltHEADgtltTITLEgtExemplo de HTML simplesltTITLEgtltHEADgtltBODYgtltH1gtEste eacute o primeiro niacutevel de cabeccedilalholtH1gtBem-vindo ao mundo do HTMLEste eacute o primeiro paraacutegrafoltPgtE este eacute o segundoltPgtltBODYgtltHTMLgt
Esta paacutegina vai aparecer assim
3
b Marcaccedilotildees Baacutesicas
1 Tiacutetulos2 Cabeccedilalhos3 Paraacutegrafos4 Quebras de linha
1 TiacutetulosTodo documento em HTML deve possuir um tiacutetulo De um modo geral o tiacutetulo aparece emlugar separado da paacutegina (por exemplo alto da tela no Netscape) e eacute utilizado paraidentificar o documento em outros contextos ( por exemplo buscas Wais) Eacute interessante queo tiacutetulo possa sugerir claramente o conteuacutedo do documento
Atenccedilatildeo porque o conceito de tiacutetulo eacute diferente de cabeccedilalho O tiacutetulo estaacute mais para o nomedo arquivo Natildeo eacute um elemento relevante na visualizaccedilatildeo do documento como acontece como cabeccedilalho
A marcaccedilatildeo utilizada para tiacutetulos eacute lttitlegt e seu par lttitlegt
Escrito desta forma
lthtmlgtlttitlegt Este eacute o tiacutetulolttitlegtltbodygtlth2gtE este o cabeccedilalho de niacutevel 2lth2gtAqui entra o texto do documento ltbodygtlthtmlgt
Apresenta-se assim
4
2 Cabeccedilalhos
Cabeccedilalhos normalmente satildeo usados para tiacutetulos e sub-tiacutetulos de uma paacutegina
HTML possui seis niacuteveis de cabeccedilalhos numerados de 1 a 6 sendo o nuacutemero 1 o de maiordestaque Cabeccedilalhos satildeo exibidos em letras maiores e em negrito O primeiro cabeccedilalho emcada documento deve estar marcado como ltH1gt
ATENCcedilAtildeO ao definir o tamanho de um cabeccedilalho vocecirc natildeo estaacute definindo o tamanho daletra (fonte 10 fonte 14) Vocecirc apenas define que ele apareceraacute com maior tamanho edestaque que o resto do texto O tamanho exato com que ele seraacute visualizado eacute definido peloprograma visualizador de html (browser) de cada pessoa que acessar a informaccedilatildeo
As notaccedilotildees relativas a cabeccedilalhos satildeo
ltHygtTexto do cabeccedilalho ltHy gt
onde y eacute um nuacutemero entre 1 e 6 especificando o niacutevel do cabeccedilalho
O conjunto de notaccedilotildees possiacuteveis eacute o que segue
ltH1gtHeadingsltH1gtltH2gtHeadingsltH2gtltH3gtHeadingsltH3gtltH4gtHeadingsltH4gtltH5gtHeadingsltH5gtltH6gtHeadingsltH6gt
3 Paraacutegrafos
A marcaccedilatildeo ltpgt eacute utilizada para definir o iniacutecio de um novo paraacutegrafo deixando uma linhaem branco entre cada paraacutegrafoHTML natildeo reconhece o caracter de quebra de linha doseditores de texto Mesmo que exista uma linha em branco os clientes Web soacute reconhecem oiniacutecio de um novo paraacutegrafo mediante a marcaccedilatildeo apropriada
Existem algumas exceccedilotildees Por exemplo inserindo uma marcaccedilatildeo de paraacutegrafo depois deltPgt ltlLIgtltHygt e outras esta seraacute ignorada
5
4 Quebras de linha
A marcaccedilatildeo ltbrgt faz uma quebra de linha sem acrescentar espaccedilo extra entre as linhasVejaa diferenccedila do uso de ltpgt e ltbrgt nos exemplos a seguir
lthtmlgtltbodygtlth1gtUtilizando plth1gtVamos separar esta sentenccedila com marcaccedilatildeo de paraacutegrafoltpgtPara verificar a diferenccedilaltbodygtlthtmlgt
lthtmlgtltbodygtlth1gtUtilizando brlth1gtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDeu pra notarltbodygtlthtmlgt
Veja a diferenccedila no uso das duas notaccedilotildees
6
c Interligando Documentos
1 Para comeccedilar2 Documentos em Outros Diretoacuterios3 Ligando URLrsquos4 Ligando sessotildees especiacuteficas em outro documento
1 Para comeccedilarO principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambeacutem imagens) a outros documentos Os clientes exibem em destaque estas aacutereas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link ou interligaccedilatildeo no hipertexto
A marcaccedilatildeo ltAgt que define o ponto de partida para os links eacute denominada de acircncora Paraincluir uma acircncora em seu documento
1 Inicie a acircncora com ltA ( Haacute um espaccedilo depois de A)2 Especifique o documento a ser interligado inserindo paracircmetro HREF=filename
seguido do sinal gt3 Insira o texto que vai funcionar como link no documento corrente4 Anote a marcaccedilatildeo de final da acircncora ltAgt
Um exemplo de referecircncia a um hipertextoltA HREF=ListaPraiashtmlgtPraiasltAgtA palavra ldquoPraias eacute definida como o marcador do link para se chegar ao documentoListaPraiashtml que estaacute no mesmo diretoacuterio do documento corrente Ou seja Praiasaparece em negrito e se eu clicar nessa palavra seraacute exibido o documento apontado -ListaPraiashtml
2 Interligando Documentos em Outros Diretoacuterios
Eacute possiacutevel interligar documentos em outro diretoacuterio especificando-se o caminho relativo apartir do documento corrente em relaccedilatildeo ao que estaacute sendo interligado
Por exemplo um link para o arquivo Sergipehtml localizado nosubdiretoacuterio Estados seria assim
ltA HREF=EstadosSergipehtmlgtSergipeltAgt
Estes satildeo dos denominados links relativos Eacute tambeacutem possiacutevel usar o caminhocompleto (pathname absoluta) do arquivo desejado Para isso utiliza-se a sintaxe padratildeo dosistema UNIXImportante se vocecirc quiser referenciar um diretoacuterio a partir do ldquoraizrdquo do seu servidor wwwinicie a notaccedilatildeo com Isto eacute se vocecirc tiver uma notaccedilatildeo desta formaltA HREF=ldquoimagensincon1gifrdquogt significa que o arquivo incon1gif deveraacute ser buscadono diretoacuterio imagens que estaacute imediatamente acima do diretoacuterio raiz do seu servidor WWW3 Ligando URLrsquos
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
2
II Criando Documentos HTMLa HTML MiacutenimoTodo documento deve ser identificado como HTML (lthtmlgt lthtmlgt) ter uma aacuterea decabeccedilalho (ltheadgtltheadgt) com o nome para o documento (lttitlegt lttitlegt) um tiacutetuloprincipal e uma aacuterea definida como corpo(ltbodygtltbodygt) do conteuacutedo do documento Comoo exemplo a seguir
ltHTMLgtltHEADgtltTITLEgtExemplo de HTML simplesltTITLEgtltHEADgtltBODYgtltH1gtEste eacute o primeiro niacutevel de cabeccedilalholtH1gtBem-vindo ao mundo do HTMLEste eacute o primeiro paraacutegrafoltPgtE este eacute o segundoltPgtltBODYgtltHTMLgt
Esta paacutegina vai aparecer assim
3
b Marcaccedilotildees Baacutesicas
1 Tiacutetulos2 Cabeccedilalhos3 Paraacutegrafos4 Quebras de linha
1 TiacutetulosTodo documento em HTML deve possuir um tiacutetulo De um modo geral o tiacutetulo aparece emlugar separado da paacutegina (por exemplo alto da tela no Netscape) e eacute utilizado paraidentificar o documento em outros contextos ( por exemplo buscas Wais) Eacute interessante queo tiacutetulo possa sugerir claramente o conteuacutedo do documento
Atenccedilatildeo porque o conceito de tiacutetulo eacute diferente de cabeccedilalho O tiacutetulo estaacute mais para o nomedo arquivo Natildeo eacute um elemento relevante na visualizaccedilatildeo do documento como acontece como cabeccedilalho
A marcaccedilatildeo utilizada para tiacutetulos eacute lttitlegt e seu par lttitlegt
Escrito desta forma
lthtmlgtlttitlegt Este eacute o tiacutetulolttitlegtltbodygtlth2gtE este o cabeccedilalho de niacutevel 2lth2gtAqui entra o texto do documento ltbodygtlthtmlgt
Apresenta-se assim
4
2 Cabeccedilalhos
Cabeccedilalhos normalmente satildeo usados para tiacutetulos e sub-tiacutetulos de uma paacutegina
HTML possui seis niacuteveis de cabeccedilalhos numerados de 1 a 6 sendo o nuacutemero 1 o de maiordestaque Cabeccedilalhos satildeo exibidos em letras maiores e em negrito O primeiro cabeccedilalho emcada documento deve estar marcado como ltH1gt
ATENCcedilAtildeO ao definir o tamanho de um cabeccedilalho vocecirc natildeo estaacute definindo o tamanho daletra (fonte 10 fonte 14) Vocecirc apenas define que ele apareceraacute com maior tamanho edestaque que o resto do texto O tamanho exato com que ele seraacute visualizado eacute definido peloprograma visualizador de html (browser) de cada pessoa que acessar a informaccedilatildeo
As notaccedilotildees relativas a cabeccedilalhos satildeo
ltHygtTexto do cabeccedilalho ltHy gt
onde y eacute um nuacutemero entre 1 e 6 especificando o niacutevel do cabeccedilalho
O conjunto de notaccedilotildees possiacuteveis eacute o que segue
ltH1gtHeadingsltH1gtltH2gtHeadingsltH2gtltH3gtHeadingsltH3gtltH4gtHeadingsltH4gtltH5gtHeadingsltH5gtltH6gtHeadingsltH6gt
3 Paraacutegrafos
A marcaccedilatildeo ltpgt eacute utilizada para definir o iniacutecio de um novo paraacutegrafo deixando uma linhaem branco entre cada paraacutegrafoHTML natildeo reconhece o caracter de quebra de linha doseditores de texto Mesmo que exista uma linha em branco os clientes Web soacute reconhecem oiniacutecio de um novo paraacutegrafo mediante a marcaccedilatildeo apropriada
Existem algumas exceccedilotildees Por exemplo inserindo uma marcaccedilatildeo de paraacutegrafo depois deltPgt ltlLIgtltHygt e outras esta seraacute ignorada
5
4 Quebras de linha
A marcaccedilatildeo ltbrgt faz uma quebra de linha sem acrescentar espaccedilo extra entre as linhasVejaa diferenccedila do uso de ltpgt e ltbrgt nos exemplos a seguir
lthtmlgtltbodygtlth1gtUtilizando plth1gtVamos separar esta sentenccedila com marcaccedilatildeo de paraacutegrafoltpgtPara verificar a diferenccedilaltbodygtlthtmlgt
lthtmlgtltbodygtlth1gtUtilizando brlth1gtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDeu pra notarltbodygtlthtmlgt
Veja a diferenccedila no uso das duas notaccedilotildees
6
c Interligando Documentos
1 Para comeccedilar2 Documentos em Outros Diretoacuterios3 Ligando URLrsquos4 Ligando sessotildees especiacuteficas em outro documento
1 Para comeccedilarO principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambeacutem imagens) a outros documentos Os clientes exibem em destaque estas aacutereas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link ou interligaccedilatildeo no hipertexto
A marcaccedilatildeo ltAgt que define o ponto de partida para os links eacute denominada de acircncora Paraincluir uma acircncora em seu documento
1 Inicie a acircncora com ltA ( Haacute um espaccedilo depois de A)2 Especifique o documento a ser interligado inserindo paracircmetro HREF=filename
seguido do sinal gt3 Insira o texto que vai funcionar como link no documento corrente4 Anote a marcaccedilatildeo de final da acircncora ltAgt
Um exemplo de referecircncia a um hipertextoltA HREF=ListaPraiashtmlgtPraiasltAgtA palavra ldquoPraias eacute definida como o marcador do link para se chegar ao documentoListaPraiashtml que estaacute no mesmo diretoacuterio do documento corrente Ou seja Praiasaparece em negrito e se eu clicar nessa palavra seraacute exibido o documento apontado -ListaPraiashtml
2 Interligando Documentos em Outros Diretoacuterios
Eacute possiacutevel interligar documentos em outro diretoacuterio especificando-se o caminho relativo apartir do documento corrente em relaccedilatildeo ao que estaacute sendo interligado
Por exemplo um link para o arquivo Sergipehtml localizado nosubdiretoacuterio Estados seria assim
ltA HREF=EstadosSergipehtmlgtSergipeltAgt
Estes satildeo dos denominados links relativos Eacute tambeacutem possiacutevel usar o caminhocompleto (pathname absoluta) do arquivo desejado Para isso utiliza-se a sintaxe padratildeo dosistema UNIXImportante se vocecirc quiser referenciar um diretoacuterio a partir do ldquoraizrdquo do seu servidor wwwinicie a notaccedilatildeo com Isto eacute se vocecirc tiver uma notaccedilatildeo desta formaltA HREF=ldquoimagensincon1gifrdquogt significa que o arquivo incon1gif deveraacute ser buscadono diretoacuterio imagens que estaacute imediatamente acima do diretoacuterio raiz do seu servidor WWW3 Ligando URLrsquos
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
3
b Marcaccedilotildees Baacutesicas
1 Tiacutetulos2 Cabeccedilalhos3 Paraacutegrafos4 Quebras de linha
1 TiacutetulosTodo documento em HTML deve possuir um tiacutetulo De um modo geral o tiacutetulo aparece emlugar separado da paacutegina (por exemplo alto da tela no Netscape) e eacute utilizado paraidentificar o documento em outros contextos ( por exemplo buscas Wais) Eacute interessante queo tiacutetulo possa sugerir claramente o conteuacutedo do documento
Atenccedilatildeo porque o conceito de tiacutetulo eacute diferente de cabeccedilalho O tiacutetulo estaacute mais para o nomedo arquivo Natildeo eacute um elemento relevante na visualizaccedilatildeo do documento como acontece como cabeccedilalho
A marcaccedilatildeo utilizada para tiacutetulos eacute lttitlegt e seu par lttitlegt
Escrito desta forma
lthtmlgtlttitlegt Este eacute o tiacutetulolttitlegtltbodygtlth2gtE este o cabeccedilalho de niacutevel 2lth2gtAqui entra o texto do documento ltbodygtlthtmlgt
Apresenta-se assim
4
2 Cabeccedilalhos
Cabeccedilalhos normalmente satildeo usados para tiacutetulos e sub-tiacutetulos de uma paacutegina
HTML possui seis niacuteveis de cabeccedilalhos numerados de 1 a 6 sendo o nuacutemero 1 o de maiordestaque Cabeccedilalhos satildeo exibidos em letras maiores e em negrito O primeiro cabeccedilalho emcada documento deve estar marcado como ltH1gt
ATENCcedilAtildeO ao definir o tamanho de um cabeccedilalho vocecirc natildeo estaacute definindo o tamanho daletra (fonte 10 fonte 14) Vocecirc apenas define que ele apareceraacute com maior tamanho edestaque que o resto do texto O tamanho exato com que ele seraacute visualizado eacute definido peloprograma visualizador de html (browser) de cada pessoa que acessar a informaccedilatildeo
As notaccedilotildees relativas a cabeccedilalhos satildeo
ltHygtTexto do cabeccedilalho ltHy gt
onde y eacute um nuacutemero entre 1 e 6 especificando o niacutevel do cabeccedilalho
O conjunto de notaccedilotildees possiacuteveis eacute o que segue
ltH1gtHeadingsltH1gtltH2gtHeadingsltH2gtltH3gtHeadingsltH3gtltH4gtHeadingsltH4gtltH5gtHeadingsltH5gtltH6gtHeadingsltH6gt
3 Paraacutegrafos
A marcaccedilatildeo ltpgt eacute utilizada para definir o iniacutecio de um novo paraacutegrafo deixando uma linhaem branco entre cada paraacutegrafoHTML natildeo reconhece o caracter de quebra de linha doseditores de texto Mesmo que exista uma linha em branco os clientes Web soacute reconhecem oiniacutecio de um novo paraacutegrafo mediante a marcaccedilatildeo apropriada
Existem algumas exceccedilotildees Por exemplo inserindo uma marcaccedilatildeo de paraacutegrafo depois deltPgt ltlLIgtltHygt e outras esta seraacute ignorada
5
4 Quebras de linha
A marcaccedilatildeo ltbrgt faz uma quebra de linha sem acrescentar espaccedilo extra entre as linhasVejaa diferenccedila do uso de ltpgt e ltbrgt nos exemplos a seguir
lthtmlgtltbodygtlth1gtUtilizando plth1gtVamos separar esta sentenccedila com marcaccedilatildeo de paraacutegrafoltpgtPara verificar a diferenccedilaltbodygtlthtmlgt
lthtmlgtltbodygtlth1gtUtilizando brlth1gtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDeu pra notarltbodygtlthtmlgt
Veja a diferenccedila no uso das duas notaccedilotildees
6
c Interligando Documentos
1 Para comeccedilar2 Documentos em Outros Diretoacuterios3 Ligando URLrsquos4 Ligando sessotildees especiacuteficas em outro documento
1 Para comeccedilarO principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambeacutem imagens) a outros documentos Os clientes exibem em destaque estas aacutereas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link ou interligaccedilatildeo no hipertexto
A marcaccedilatildeo ltAgt que define o ponto de partida para os links eacute denominada de acircncora Paraincluir uma acircncora em seu documento
1 Inicie a acircncora com ltA ( Haacute um espaccedilo depois de A)2 Especifique o documento a ser interligado inserindo paracircmetro HREF=filename
seguido do sinal gt3 Insira o texto que vai funcionar como link no documento corrente4 Anote a marcaccedilatildeo de final da acircncora ltAgt
Um exemplo de referecircncia a um hipertextoltA HREF=ListaPraiashtmlgtPraiasltAgtA palavra ldquoPraias eacute definida como o marcador do link para se chegar ao documentoListaPraiashtml que estaacute no mesmo diretoacuterio do documento corrente Ou seja Praiasaparece em negrito e se eu clicar nessa palavra seraacute exibido o documento apontado -ListaPraiashtml
2 Interligando Documentos em Outros Diretoacuterios
Eacute possiacutevel interligar documentos em outro diretoacuterio especificando-se o caminho relativo apartir do documento corrente em relaccedilatildeo ao que estaacute sendo interligado
Por exemplo um link para o arquivo Sergipehtml localizado nosubdiretoacuterio Estados seria assim
ltA HREF=EstadosSergipehtmlgtSergipeltAgt
Estes satildeo dos denominados links relativos Eacute tambeacutem possiacutevel usar o caminhocompleto (pathname absoluta) do arquivo desejado Para isso utiliza-se a sintaxe padratildeo dosistema UNIXImportante se vocecirc quiser referenciar um diretoacuterio a partir do ldquoraizrdquo do seu servidor wwwinicie a notaccedilatildeo com Isto eacute se vocecirc tiver uma notaccedilatildeo desta formaltA HREF=ldquoimagensincon1gifrdquogt significa que o arquivo incon1gif deveraacute ser buscadono diretoacuterio imagens que estaacute imediatamente acima do diretoacuterio raiz do seu servidor WWW3 Ligando URLrsquos
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
4
2 Cabeccedilalhos
Cabeccedilalhos normalmente satildeo usados para tiacutetulos e sub-tiacutetulos de uma paacutegina
HTML possui seis niacuteveis de cabeccedilalhos numerados de 1 a 6 sendo o nuacutemero 1 o de maiordestaque Cabeccedilalhos satildeo exibidos em letras maiores e em negrito O primeiro cabeccedilalho emcada documento deve estar marcado como ltH1gt
ATENCcedilAtildeO ao definir o tamanho de um cabeccedilalho vocecirc natildeo estaacute definindo o tamanho daletra (fonte 10 fonte 14) Vocecirc apenas define que ele apareceraacute com maior tamanho edestaque que o resto do texto O tamanho exato com que ele seraacute visualizado eacute definido peloprograma visualizador de html (browser) de cada pessoa que acessar a informaccedilatildeo
As notaccedilotildees relativas a cabeccedilalhos satildeo
ltHygtTexto do cabeccedilalho ltHy gt
onde y eacute um nuacutemero entre 1 e 6 especificando o niacutevel do cabeccedilalho
O conjunto de notaccedilotildees possiacuteveis eacute o que segue
ltH1gtHeadingsltH1gtltH2gtHeadingsltH2gtltH3gtHeadingsltH3gtltH4gtHeadingsltH4gtltH5gtHeadingsltH5gtltH6gtHeadingsltH6gt
3 Paraacutegrafos
A marcaccedilatildeo ltpgt eacute utilizada para definir o iniacutecio de um novo paraacutegrafo deixando uma linhaem branco entre cada paraacutegrafoHTML natildeo reconhece o caracter de quebra de linha doseditores de texto Mesmo que exista uma linha em branco os clientes Web soacute reconhecem oiniacutecio de um novo paraacutegrafo mediante a marcaccedilatildeo apropriada
Existem algumas exceccedilotildees Por exemplo inserindo uma marcaccedilatildeo de paraacutegrafo depois deltPgt ltlLIgtltHygt e outras esta seraacute ignorada
5
4 Quebras de linha
A marcaccedilatildeo ltbrgt faz uma quebra de linha sem acrescentar espaccedilo extra entre as linhasVejaa diferenccedila do uso de ltpgt e ltbrgt nos exemplos a seguir
lthtmlgtltbodygtlth1gtUtilizando plth1gtVamos separar esta sentenccedila com marcaccedilatildeo de paraacutegrafoltpgtPara verificar a diferenccedilaltbodygtlthtmlgt
lthtmlgtltbodygtlth1gtUtilizando brlth1gtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDeu pra notarltbodygtlthtmlgt
Veja a diferenccedila no uso das duas notaccedilotildees
6
c Interligando Documentos
1 Para comeccedilar2 Documentos em Outros Diretoacuterios3 Ligando URLrsquos4 Ligando sessotildees especiacuteficas em outro documento
1 Para comeccedilarO principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambeacutem imagens) a outros documentos Os clientes exibem em destaque estas aacutereas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link ou interligaccedilatildeo no hipertexto
A marcaccedilatildeo ltAgt que define o ponto de partida para os links eacute denominada de acircncora Paraincluir uma acircncora em seu documento
1 Inicie a acircncora com ltA ( Haacute um espaccedilo depois de A)2 Especifique o documento a ser interligado inserindo paracircmetro HREF=filename
seguido do sinal gt3 Insira o texto que vai funcionar como link no documento corrente4 Anote a marcaccedilatildeo de final da acircncora ltAgt
Um exemplo de referecircncia a um hipertextoltA HREF=ListaPraiashtmlgtPraiasltAgtA palavra ldquoPraias eacute definida como o marcador do link para se chegar ao documentoListaPraiashtml que estaacute no mesmo diretoacuterio do documento corrente Ou seja Praiasaparece em negrito e se eu clicar nessa palavra seraacute exibido o documento apontado -ListaPraiashtml
2 Interligando Documentos em Outros Diretoacuterios
Eacute possiacutevel interligar documentos em outro diretoacuterio especificando-se o caminho relativo apartir do documento corrente em relaccedilatildeo ao que estaacute sendo interligado
Por exemplo um link para o arquivo Sergipehtml localizado nosubdiretoacuterio Estados seria assim
ltA HREF=EstadosSergipehtmlgtSergipeltAgt
Estes satildeo dos denominados links relativos Eacute tambeacutem possiacutevel usar o caminhocompleto (pathname absoluta) do arquivo desejado Para isso utiliza-se a sintaxe padratildeo dosistema UNIXImportante se vocecirc quiser referenciar um diretoacuterio a partir do ldquoraizrdquo do seu servidor wwwinicie a notaccedilatildeo com Isto eacute se vocecirc tiver uma notaccedilatildeo desta formaltA HREF=ldquoimagensincon1gifrdquogt significa que o arquivo incon1gif deveraacute ser buscadono diretoacuterio imagens que estaacute imediatamente acima do diretoacuterio raiz do seu servidor WWW3 Ligando URLrsquos
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
5
4 Quebras de linha
A marcaccedilatildeo ltbrgt faz uma quebra de linha sem acrescentar espaccedilo extra entre as linhasVejaa diferenccedila do uso de ltpgt e ltbrgt nos exemplos a seguir
lthtmlgtltbodygtlth1gtUtilizando plth1gtVamos separar esta sentenccedila com marcaccedilatildeo de paraacutegrafoltpgtPara verificar a diferenccedilaltbodygtlthtmlgt
lthtmlgtltbodygtlth1gtUtilizando brlth1gtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDiferenccedila quando separamos duas linhas utilizandoltbrgta marcaccedilatildeo de quebra de linhaltbrgtDeu pra notarltbodygtlthtmlgt
Veja a diferenccedila no uso das duas notaccedilotildees
6
c Interligando Documentos
1 Para comeccedilar2 Documentos em Outros Diretoacuterios3 Ligando URLrsquos4 Ligando sessotildees especiacuteficas em outro documento
1 Para comeccedilarO principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambeacutem imagens) a outros documentos Os clientes exibem em destaque estas aacutereas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link ou interligaccedilatildeo no hipertexto
A marcaccedilatildeo ltAgt que define o ponto de partida para os links eacute denominada de acircncora Paraincluir uma acircncora em seu documento
1 Inicie a acircncora com ltA ( Haacute um espaccedilo depois de A)2 Especifique o documento a ser interligado inserindo paracircmetro HREF=filename
seguido do sinal gt3 Insira o texto que vai funcionar como link no documento corrente4 Anote a marcaccedilatildeo de final da acircncora ltAgt
Um exemplo de referecircncia a um hipertextoltA HREF=ListaPraiashtmlgtPraiasltAgtA palavra ldquoPraias eacute definida como o marcador do link para se chegar ao documentoListaPraiashtml que estaacute no mesmo diretoacuterio do documento corrente Ou seja Praiasaparece em negrito e se eu clicar nessa palavra seraacute exibido o documento apontado -ListaPraiashtml
2 Interligando Documentos em Outros Diretoacuterios
Eacute possiacutevel interligar documentos em outro diretoacuterio especificando-se o caminho relativo apartir do documento corrente em relaccedilatildeo ao que estaacute sendo interligado
Por exemplo um link para o arquivo Sergipehtml localizado nosubdiretoacuterio Estados seria assim
ltA HREF=EstadosSergipehtmlgtSergipeltAgt
Estes satildeo dos denominados links relativos Eacute tambeacutem possiacutevel usar o caminhocompleto (pathname absoluta) do arquivo desejado Para isso utiliza-se a sintaxe padratildeo dosistema UNIXImportante se vocecirc quiser referenciar um diretoacuterio a partir do ldquoraizrdquo do seu servidor wwwinicie a notaccedilatildeo com Isto eacute se vocecirc tiver uma notaccedilatildeo desta formaltA HREF=ldquoimagensincon1gifrdquogt significa que o arquivo incon1gif deveraacute ser buscadono diretoacuterio imagens que estaacute imediatamente acima do diretoacuterio raiz do seu servidor WWW3 Ligando URLrsquos
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
6
c Interligando Documentos
1 Para comeccedilar2 Documentos em Outros Diretoacuterios3 Ligando URLrsquos4 Ligando sessotildees especiacuteficas em outro documento
1 Para comeccedilarO principal poder do HTML vem da sua capacidade de interligar partes de um texto (etambeacutem imagens) a outros documentos Os clientes exibem em destaque estas aacutereas oupontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se tratade um link ou interligaccedilatildeo no hipertexto
A marcaccedilatildeo ltAgt que define o ponto de partida para os links eacute denominada de acircncora Paraincluir uma acircncora em seu documento
1 Inicie a acircncora com ltA ( Haacute um espaccedilo depois de A)2 Especifique o documento a ser interligado inserindo paracircmetro HREF=filename
seguido do sinal gt3 Insira o texto que vai funcionar como link no documento corrente4 Anote a marcaccedilatildeo de final da acircncora ltAgt
Um exemplo de referecircncia a um hipertextoltA HREF=ListaPraiashtmlgtPraiasltAgtA palavra ldquoPraias eacute definida como o marcador do link para se chegar ao documentoListaPraiashtml que estaacute no mesmo diretoacuterio do documento corrente Ou seja Praiasaparece em negrito e se eu clicar nessa palavra seraacute exibido o documento apontado -ListaPraiashtml
2 Interligando Documentos em Outros Diretoacuterios
Eacute possiacutevel interligar documentos em outro diretoacuterio especificando-se o caminho relativo apartir do documento corrente em relaccedilatildeo ao que estaacute sendo interligado
Por exemplo um link para o arquivo Sergipehtml localizado nosubdiretoacuterio Estados seria assim
ltA HREF=EstadosSergipehtmlgtSergipeltAgt
Estes satildeo dos denominados links relativos Eacute tambeacutem possiacutevel usar o caminhocompleto (pathname absoluta) do arquivo desejado Para isso utiliza-se a sintaxe padratildeo dosistema UNIXImportante se vocecirc quiser referenciar um diretoacuterio a partir do ldquoraizrdquo do seu servidor wwwinicie a notaccedilatildeo com Isto eacute se vocecirc tiver uma notaccedilatildeo desta formaltA HREF=ldquoimagensincon1gifrdquogt significa que o arquivo incon1gif deveraacute ser buscadono diretoacuterio imagens que estaacute imediatamente acima do diretoacuterio raiz do seu servidor WWW3 Ligando URLrsquos
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
7
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar alocalizaccedilatildeo de arquivos em servidores Uma URL inclui o tipo de recurso acessado (pegopher WAIS) o endereccedilo do servidor e a localizaccedilatildeo do arquivo
Se escreve de acordo com o esquema abaixo
protocoloservidor[port]pathfilenameOnde protocolo eacute uma das seguintes definiccedilotildees
file um arquivo no seu sistema local ou servidor de ftphttp um arquivo em um servidor World Wide Webgopher um arquivo em um servidor GopherWAIS um arquivo em um servidor WAISnews um Usenet newsgrouptelnet uma conexatildeo Telnet
Por exemplo para incluir um link para o HTML Beginnerrsquos Guide em um documento deveser usado
ltA HREF = httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtmlgt NCSAs Beginners Guide to HTMLltAgtO que torna a sentenccedila rdquoNCSAs Beginners Guide to HTML um link para taldocumento
Para mais informaccedilotildees sobre URLs veja em
middot WWW Names and Addresses URIs URLs URNs escrito por pessoas do CERNdisponiacutevel em httpinfocernchhypertextWWWAddressingAddressinghtml
middot A Beginners Guide to URLs localizado no menu de Help do NCSA Mosaic e disponiacutevelem httpwwwncsauiucedudemoweburl-primerhtml
4 Ligando sessotildees especiacuteficas em outro documentoPara fazer links com sessotildees de outros documentos o processo eacute o mesmo da sessatildeoanterior Faz-se uma acircncora normalmente e apenas eacute acrescentado apoacutes a url dodocumento de destino o sinal e uma palavra ou identificador O identificador eacute volta nonosso exemplo
Este eacute o meu lta href=index20htmvoltagtlinkltagt para o uacuteltimo item do iacutendice destetutorial
No iacutendice do tutorial - arquivo index20htm - deveraacute haver uma notaccedilatildeo que reconheccedila apalavraidentificador informado no ponto de partidaPode ser lta name=voltagtltligtFormulaacuterios Eletrocircnicosltagt
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
8
d Interligando sessotildees em uma paacuteginaHTML permite que se faccedilam ligaccedilotildees entre diferentes trechos de um documento Vocecirc podeapontar uma palavra ou trecho de um texto utilizando uma acircncora de nome (named anchor)Este recurso eacute bastante usado na geraccedilatildeo de iacutendices de conteuacutedo no iniacutecio de uma paacutegina
O passo a passo eacute
1Defina o ponto de partida atribuindo a ele um nome qualquer - no exemplo item1-precedido do caracter da seguinte forma
Veja o iniacutecio da lta href=item1gtsegunda sessatildeoltagt2Defina o ponto de chegada atribuindo a ele uma acircncora de nome com o nomecorrespondente ao do ponto de partida assim
Esta lta name=intem1gtsegunda sessatildeoltagt trata de
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
9
e Listas
1 Listas Natildeo Numeradas2 Listas Numeradas3 Listas de Definiccedilotildees4 Listas Intercaladas
1 Listas Natildeo NumeradasPara criar uma lista natildeo numerada
1 Comece com a marcaccedilatildeo de iniacutecio de lista ltULgt2 Insira a marcaccedilatildeo ltLIgt antes de cada item da lista item (Natildeo eacute necessaacuterio fechar
a marcaccedilatildeo com ltLIgt )3 Encerre com a marcaccedilatildeo de fim de lista ltULgt
Abaixo o exemplo de uma lista com dois itens
ltULgtltLIgt maccedilatildesltLIgt bananasltULgt
Vai aparecer assim
Cada marcaccedilatildeo ltLIgt pode conter vaacuterios paraacutegrafos
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
10
2 Listas NumeradasUma lista numerada - ou ordenada - eacute semelhante a uma lista natildeo numerada exceto porque
utiliza marcaccedilatildeo ltOLgt ao inveacutes de ltULgt Os itens satildeo identificados utilizando-se amesma notaccedilatildeo ltLIgt
Uma lista criada assim
ltOLgtltLIgt laranjasltLIgt perasltLIgt uvasltOLgt
Resulta neste formato
3 Listas de Definiccedilotildees
Uma lista de definiccedilotildees normalmente consiste em alternar um termo (abreviado como DT) euma definiccedilatildeo (abreviado como DD) Clientes Web browsers geralmente mostram adefiniccedilatildeo em nova linha com outro alinhamento
Exemplo de uma lista de definiccedilatildeo
ltDLgtltDTgt NCSAltDDgt NCSA the National Center for Supercomputing Applications is located on the campus
of the University of Illinois at Urbana-Champaign NCSA is one of the participants in theNational MetaCenter for Computational Science and Engineering
ltDTgt Cornell Theory CenterltDDgt CTC is located on the campus of Cornell University in Ithaca New York CTC is
another participant in the National MetaCenter for Computational Science andEngineering
ltDLgt
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
11
Seraacute vista desta forma
As entradas ltDTgt e ltDDgt podem conter vaacuterios paraacutegrafos (separados por ltPgt ) listas ououtras definiccedilotildees
A marcaccedilatildeo ltDDgt pode tambeacutem ser utilizada fora de uma lista de definiccedilotildees como se fosseuma tabulaccedilatildeo (insere um espaccedilo no iniacutecio da frase)
4 Listas IntercaladasAs listas podem ser encadeadas ou intercaladas arbitrariamente produzindo resultadosbastante interessantes A praacutetica eacute que vai mostrar qual o nuacutemero maacuteximo de listas que valea pena intercalar Pode-se inclusive ter um paraacutegrafo intercalado com uma lista quecontenha um uacutenico item
Exemplo de lista intercalada
ltULgtltLIgt Estados da regiatildeo sul do Brasil
ltULgtltLIgt Rio Grande do SulltLIgt Santa CatarinaltULgt
ltLIgt Um estado da regiatildeo nordesteltULgtltLIgt PernambucoltULgt
ltULgt
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
12
Eacute exibida com este formato
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
13
f Texto Preacute-formatadoA marcaccedilatildeo ltPREgt(derivada de rdquopreformattedrdquo) delimita uma aacuterea de texto em que espaccedilosnovas linhas e tabulaccedilotildees satildeo mantidas Ou seja o texto seraacute apresentado exatamente daforma como foi digitado mesmo que natildeo hajam marcaccedilotildees do html Eacute uma forma de sepreservar o formato de um texto
Este recurso eacute utilizado por exemplo para listas de programasVejamos um exemploltPREgtbincshcd $SCRcfs get mysrcfmycfsdirmysrcfcfs get myinfilemycfsdirmyinfilefc -02 -o myaout mysrcfmyaoutcfs save myoutfilemycfsdirmyoutfilerm ltPREgt
Apresenta-se assim
Podem ser definidos links dentro de textos preacute-formatados No entanto deve-se evitar utilizaroutros caracteres das marcaccedilotildees em aacutereas ltPREgt Isto porque caracteres como lt gt and amppossuem um significado especiacutefico no HTML
O ideal eacute utilizar as sequecircncias especiais (amplt ampgt and ampamp respectivamente) sempreque precisar representar esses caracteres Veremos mais sobre no proacuteximo item
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
14
g Caracteres EspeciaisHTML permite que se apliquem estilos especiacuteficos a palavras ou sentenccedilas
Vamos ver algumas opccedilotildees
ltBgtltBgt texto em negritoltIgtltIgt texto em itaacutelico
E o efeito de cada uma delas
Para representar os caracteres das tags utilize a seguintes notaccedilotildees
amplt para representar ltampgt para representar gtampamp para representar ampampquotpara representar
Uma lista completa dessas notaccedilotildees especiais pode ser obtida no CERN emhttpwwww3orghypertextWWWMarkUpISOlat1htmlCaso o editor que vocecirc esteja utilizando natildeo acentue eacute possiacutevel tambeacutem utilizarnotaccedilotildees especiais para acentuaccedilatildeo Haacute uma lista delas ao final deste documento
Atenccedilatildeo Ao contraacuterio do resto do HTML as notaccedilotildees especiais diferenciam letrasmaiuacutesculas de minuacutesculas Natildeo eacute possiacutevel usar ampLT no lugar de amplt
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
15
h EndereccedilosA marcaccedilatildeo ltADDRESSgtltADDRESSgt eacute habitualmente utilizada para especificar o autor dodocumento e a forma de contato com ele (por exemplo o endereccedilo eletrocircnico) Geralmente eacuteo uacuteltimo item de uma paacutegina
Por exemplo a uacuteltima linha do Beginers Guide em que foi baseado este tutorial eacute assim
ltADDRESSgtA Beginners Guide to HTML NCSA pubsncsauiucedultADDRESSgt
E o resultado eacute
Existe ainda um recurso para criar um item na paacutegina que ao ser selecionado abre umajanela e permite que se envie uma mensagem eletrocircnica para um endereccedilo especiacutefico Paraisso utiliza-se a variaacutevel mailtoVeja o exemplo abaixo para enviar mensagens de duacutevidas para oendereccedilo eletrocircnico apoiocr-dfrnpbr
Qualquer duacutevida ou comentaacuterio vocecirc pode enviar um email aolta href=mailtoapoiocr-dfrnpbrgtpessoal de apoioltagt a usuaacuterios do CR-DF
Fica assim
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
16
E ao se clicar em ldquopessoal de apoiordquo se abriraacute uma janela para envio de mensagemeletrocircnica como abaixo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
17
I Inserir imagensAs imagens dentro de uma paacutegina devem estar preferencialmente no formato gif Este eacute oformato mais universalmente aceito pelos visualizadores de WWW (browsers) O Netscapeconsegue decodificar outros formatos como o jpg e rgb mas esta capacidade natildeo eacutecomum a todos os programas
Utiliza-se a seguinte notaccedilatildeo para incluir uma imagem
ltimg src=diretoacuterioarquivogtNo exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
18
middot Alinhamento das imagensToda imagem incluiacuteda pode ser posicionada (align=) na tela das seguintesformas TOP MIDDLE BOTTOM LEFT e RIGHT
As trecircs primeiras opccedilotildees definem a posiccedilatildeo da imagem com relaccedilatildeo ao textoVeja os exemplos
As duas uacuteltimas definem a posiccedilatildeo da imagem na paacutegina a direita ou esquerda
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
19
Atenccedilatildeo De um modo geral natildeo eacute necessaacuterio incluir essa anotaccedilatildeo para alinhar aimagem a esquerda Caso seja omitida a opccedilatildeo align a imagem apareceraacute aesquerda da paacutegina
Uma imagem pode ser tambeacutem alinhada agrave direita da paacutegina
Uma imagem pode ser ainda um botatildeo sensiacutevel Para isso basta incluir uma imagem nointerior de uma acircncora
lta href=indexhtmgtltimg src=imagesstopgifgtltagt
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
20
j Controle de Cores e Graacuteficos de Fundo1 Cores e elementos graacuteficos de fundo2 Cores de letras e links
1 Cores e elementos graacuteficos de fundo
middot O Atributo BackgroundO atributo Background deve ser aplicado agrave marcaccedilatildeo ltbodygt Este atributo especifica a URLde uma imagem que seraacute utilizada como fundo (background) de uma paacutegina Esta imagemocuparaacute toda a aacuterea de fundo da tela
Deve ser escrito desta forma
ltbody background=imagesfundogifgt toda a paacutegina ltbodygtEacute importante ter cuidado para que elementos de fundo natildeo prejudiquem a leitura do texto emtela De um modo geral esses elementos devem aparecer em cores bem claras e sutis
Sempre vale a pena visitar outras paacuteginas que utilizam esse recurso para recolherboas ideacuteias
middot O Atributo BGColorEste atributo tambeacutem deve acompanhar a marcaccedilatildeo ltbodygt Ele permite que se defina umacor padratildeo para o fundo da paacutegina sem necessidade de um arquivo imagem para isso
O formato da marcaccedilatildeo eacute
ltbody bgcolor=rrggbbgtAqui fica a paacuteginaltbodygtOnde rrggbb eacute um coacutedigo hexadecimal no padratildeo red-green-blue utilizado paraespecificar a cor de fundo
Sugerimos a consulta a uma tabela desses padrotildees disponiacutevel em serviccedilo da INFINET emhttpwwwinfinetwwwimagescolorindexhtml Uma versatildeo desta tabela encontra-se nofinal deste documento
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
21
2 Cores de letras e linksmiddot O atributo TEXTEste atributo eacute utilizado para controlar a cor do texto normal em uma paacutegina Ou seja definea cor de todo o texto do documento exceto os links O atributo deve acompanhar a marcaccedilatildeoltBODYgt escrevendo-se da seguinte forma
ltbody text=rrggbbgtAqui entra o documentoltbodygtOnde RGB eacute um coacutedigo hexadecimal do trio red-green-blue exatamente no mesmopadratildeo daquele utilizado no atributo BGCOLOR Para conhecer as variaccedilotildees desse padratildeosugerimos consulta a tabela disponiacutevel na INFINET citada anteriormente
middot Os atributos LINK VLINK e ALINKEste atributo controla a cor de textos que funcionem como link na paacutegina
1 LINK define cores de links nao consultados2 VLINK se referente a links jaacute consultados e3 ALINK determina cor de links quando ativados
A notaccedilatildeo eacute absolutamente igual agrave anterior seguindo os mesmos padrotildees para definir ascores Uma definiccedilatildeo completa incluiria entatildeo
ltbody text=rrggbb link=rrggbb vlink=rrggbb alink=rrggbbgtAqui entra o documentoltbodygt
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
22
k Barras horizontais
A marcaccedilatildeo ltHRgt produz uma linha horizontal no documento
Eacute possiacutevel determinar uma largura maior para as barras utilizando-se a extensatildeo size
Veja os exemplos
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
23
Eacute ainda possiacutevel determinar o quanto da largura da paacutegina a linha horizontal vai ocupar Paraisso utiliza-se a extensatildeo width=
Observe
Atenccedilatildeo a extensatildeo width natildeo determina o comprimento da linha (em cm ou mm)mas o quanto da largura da paacutegina ela deve ocupar
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
24
III Tabela de ComandosMarcaccedilatildeo Funccedilatildeo CaracteriacutesticasltHTMLgtltHTMLgt Delimita o documento
(iniacutecio e fim)Esta marcaccedilatildeo deve ser inseridaimediatamente no iniacutecio e no final de todoarquivo HTML
ltHEADgtltHEADgt Cabeccedilalho O cabeccedilalho de um arquivo html eacute uma aacutereapara inserccedilatildeo de informaccedilotildees que natildeo seratildeovisiacuteveis na paacutegina HTML tais como ldquotitlerdquo ecomentaacuterios
ltTITLEgtltTITLEgt Tiacutetulo do documento Nome a ser atribuiacutedo ao documento HTMLmas que natildeo seraacute visualizado na paacuteginaDeve sempre aparecer na aacuterea definida comoldquoheadrdquo do documento
lt gt Comentaacuterio Indicaccedilatildeo de quaisquer comentaacuterios taiscomo nome do autor data de criaccedilatildeosoftware utilizado para autoria etc Natildeo eacutevisualizado na paacutegina HTML (soacute quandosolicitadao o ldquosource filerdquo)Tambeacutem deve aparecer na aacuterea definidacomoldquoheadrdquo do documento
ltBODYgtltBODYgt Corpo do documento Delimita o corpo do documento Vemimediatamente abaixo da aacuterea definida comoldquoheadrdquo Esta marcaccedilatildeo deve ser ldquofechadardquosomente ao final do documentoimediatamente seguida da marcaccedilatildeo lthtmlgt
Exemplo de como devem aparecer distribuiacutedas no arquivo as marcaccedilotildees acima citadas
lthtmlgtltheadgtlttitlegt Tiacutetulo do documentolttitlegtlt autor Joatildeo das Couvesgtlt uacuteltima atualizaccedilatildeo 30022001gtltheadgtltbodygtBlaacute blaacute blaacute aqui entra o conteuacutedo da paacutegina blaacuteltbodygtlthtmlgtltBODY
BACKGROUND=ldquoJldquogtltBODYgt
Imagem de fundo
J = arquivo imagem ouurl de arquivo imagem
Insere uma imagem como fundo da paacutegina(mais ou menos como uma ldquomarca drsquoaacutegua)O arquivo deve estar em formato gif Estearquivo pode estar na mesma maacutequina(anotar sua pathnome) ou em outra maacutequina(indicar por URL)
ltBODYBGCOLOR=ldquorrggbbrdquogtltBODYgt
Cor padratildeo de fundo
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define uma cor de fundo padratildeo para apaacutegina
Esta cor pode variar de monitor para monitor
ltBODYTEXT=ldquorrggbbrdquoLINK=ldquorrggbbrdquoVLINK=ldquorrggbbrdquoALINK=ldquorrggbbrdquogtltBODYgt
Cores do texto dodocumento
rrggbb = coacutedigo de coresrgb (ver tabela de coresneste documento)
Define a cor para
text = texto normal da paacuteginalink = links da paacuteginavlink = links consultados na paacuteginaalink = links ativados na paacutegina
ltHygtltHygt Tiacutetulos ou cabeccedilalhos na Existem seis niacuteveis de cabeccedilalho na paacutegina
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
25
paacutegina
y = nuacutemero de 1 a 6
(natildeo confudir com cabeccedilalho do documento =head)lth1gtlth1gt lth2gtlth2gt etc
Sendo H1 o maior e H6 o menor niacutevelAtenccedilatildeo marcaccedilotildees Hy definem tamanhorelativo do texto e os colocam em destaque(normalmente negrito)
ltPgt Paraacutegrafo Insere uma linha em branco entre doisparaacutegrafos
ltBRgt Quebra de linha Faz uma quebra de linha
ltA HREF=ldquo0 ldquogttextoltagt
Acircncora para hiperlinkreferencial
0 = URL ou nome dearquivo
Define um linkO link vai aparecer em destaque na paacutegina(normalmente outra cor e sublinhado)
ltA HREF=ldquoiexclldquogttextoltagt
Acircncora interna ou paraseccedilatildeo especiacutefica em outrodocumento
iexcl = coacutedigo ou palavrachave
Abre uma acircncora para um outro trecho dentrode uma mesma paacutegina ou para um trechoespeciacutefico em outro documento
1 Trecho na mesma paacuteginaApoacutes a acircncora de hiperlink referencial deveaparecer entre aspas o caracter e uma palavra ou coacutedigo chave Estemesmo coacutedigo ou palavra deveraacute aparecer noldquoponto de chegadardquo deste link interno comouma acircncora de nome(veja proacuteximo item)
2 Link para trecho especiacutefico em outrodocumentoDeve ser efeito exatamente da mesma formasendo que antes do caracter deveraacuteaparecer o nome do arquivo que serpretende lsquoligarrsquo ou sua url completa
ltA NAME=ldquoiexcl ldquogt Acircncora de nome
iexcl= coacutedigo ou palavrachave
Este eacute o ponto de chegada de uma acircncorainterna a um documento ou para trechoespeciacutefico em outro documento
O coacutedigo ou palavra chave deve ser idecircnticoagravequele do ponto de partida
Natildeo altera a visualizaccedilatildeo do textoltA HREF=ldquoMAILTOxyzalgumlugarbrrdquogt
Envio de email paraendereccedilo especificado
Permite que se crie um link que ao serselecionado abriraacute uma tela de composiccedilatildeode mensagem eletrocircnica a ser enviada para oendereccedilo digitado apoacutes MAILTO
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
26
ltULgtltULgt Delimita lista natildeo numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltOLgtltOLgt Delimita lista numerada Deve ser escrita ao iniacutecio e ao final da listaCasa item da lista eacute antecedido da marcaccedilatildeoltLIgt
ltLIgt Cada item de uma listanumerada ou natildeo
--o00o--
Uma lista natildeo numeradaltULgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltULgt
Uma lista numeradaltOLgtltLIgt item 1ltLIgt item 2ltLIgt item 3ltOLgt
ltDLgtltDLgt Delimita lista de definiccedilotildees Deve ser escrita ao iniacutecio e ao final da listaCada item da lista eacute antecedido da marcaccedilatildeoltDTgt ou ltDDgt conforme explicado a seguir
ltDTgt Entrada de tiacutetulo em lista dedefiniccedilotildees
Insere um tiacutetulo em uma lista de definiccedilatildeo Aentrada de tiacutetulo vai aparecer alinhada agraveesquerda da paacuteginaNormalmente vem seguido de um item do tipoltDDgt
ltDDgt Entrada de definiccedilatildeo emlista de definiccedilotildees
Insere uma definiccedilatildeo (antecedido ou natildeo porltDTgt) Este item vai aparecer numa margemmais interna agrave paacutegina (como se tivesse umatabulaccedilatildeo antes)
Fora de listas de definiccedilatildeo pode ser utilizadopara produzir este mesmo efeito (Umaldquotabulaccedilatildeo)
Uma lista de definiccedilotildees
ltDLgtltDTgt Tiacutetulo 1
ltDDgt definiccedilatildeo altDDgt definiccedilatildeo b
ltDTgt Tiacutetulo 2ltDDgt definiccedilatildeo a
ltDLgt
ltPREgtltPREgt Texto preacute-formatado Manteacutem a exata formataccedilatildeo do texto digitado
ltBgtltBgt Negrito--o00o--
ltIgtltIgt Itaacutelico--o00o--
ltADRESSgtltADRESSgt
Endereccedilo Quanto a visualizaccedilatildeo normalmente apenascoloca o trecho em itaacutelico
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
27
ltIMG SRC=ldquordquogt Inserccedilatildeo de imagem
= nome ou URL dearquivo imagem
Marcaccedilatildeo para inserir uma imagem napaacutegina Esta imagem deve estarpreferencialmente em formato gif Pode estarna mesma maacutequina (apontar com o nome oupath completa) ou em outra maacutequina (apontarcom URL)
ltIMG ALING=ldquordquoSRC=ldquordquogt
Alinhamento de imagem OpcionalDefine o alinhamento de uma imagem napaacutegina Aceita os seguintes valoresTOP = alinha o texto com o alto da figuraMIDDLE = alinha o texto com o meio da figuraBOTTOM = alinha o texto com o rodapeacute dafiguraRIGHT = alinha a figura agrave direita da telaLEFT = alinha a figura agrave esquerda da telaFaz ainda com que o texto que esteja ao ladocontorne a figura
ltHRgt insere linha horizontal--o00o--
ltHR SIZE=ngt Largura da linha horizontal
n= nuacutemero
OpcionalExtensatildeo opcional que define a largura dalinha
ltHR WIDTH=ngt Ocupaccedilatildeo da tela da linhahorizontal
n= nuacutemero
OpcionalDefine o quanto da tela uma linha vai ocupar
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
28
IVTabela de Acentuaccedilatildeo Caracteres EspeciaisAs notaccedilotildees presentes em marcaccedilotildees devem ser representadas com notaccedilotildeesespeciais para que possam ser exibidas em tela Estas notaccedilotildees especiaissempre se iniciam por amp (e comercial) e encerram-se com (ponto e viacutergula)
Notaccedilatildeo descriccedilatildeo aparecircnciaamplt ldquoMaior querdquo gtampgt ldquoMenor querdquo ltampamp E comercial ampampquot aspas duplas ldquoampreg marca registrada Ograveampcopy copyrights Oacute
Eacute possiacutevel utilizar facilidades de acentuaccedilatildeo (padratildeo do Windows por exemplo)em documentos HTML No entanto desta forma apenas poderaacute visualizar aacentuaccedilatildeo o computador que reconhecer este padratildeo especiacutefico
Segue abaixo o padratildeo para acentuaccedilatildeo- ISO Latin-1 alphabet - semelhante aoutilizado para exibir caracteres das marcaccedilotildees e que poderaacute ser visualizado pelagrande maioria das maacutequinas
Caracter NotaccedilatildeoAcento agudo ampxacute onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento grave ampxgrave onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaAcento circunflexo ampxcirc onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com til ampxtilde onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetra com trema ampxuml onde x eacute uma letra qualquer maiuacutescula ou minuacutesculaLetras unidas ampAelig = macr e ampaelig = aeligLetra com argola ampAring = Aring e amparing = aringCedilha ampCcedil = Ccedil e ampccedil= ccedilN com til ampNtilde = Ntilde e ampntilde = ntildeO cortado ampOslash = Oslash e amposlash = oslashTHORN maiuacutesculo ampTHORN = THORN(Icelandic)thorn minuacutesculo ampthorn= thorn (Icelandic)eth minuacutesculo ampeth eth (Icelandic)eth maiuacutesculo ampETH= ETH (Icelandic)Caracter alematildeo ampszlig = szlig
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
29
V Tabela de CoresTabela original em httpwwwinfinetwwwimagescolorindexhtmlWhite rgb=FFFFFFRed rgb=FF0000Green rgb=00FF00Blue rgb=0000FFMagenta rgb=FF00FFCyan rgb=00FFFFYellow rgb=FFFF00Black rgb=000000Aquamarine rgb=70DB93Bakers Chocolatergb=5C3317Blue Violet rgb=9F5F9FBrass rgb=B5A642Bright Gold rgb=D9D919Brown rgb=A62A2ABronze rgb=8C7853Bronze II rgb=A67D3DCadet Blue rgb=5F9F9FCool Copper rgb=D98719Copper rgb=B87333Coral rgb=FF7F00Corn Flower Bluergb=42426FDark Brown rgb=5C4033Dark Green rgb=2F4F2FDark Green Copperrgb=4A766EDark Olive Greenrgb=4F4F2FDark Orchid rgb=9932CDDark Purple rgb=871F78Dark Slate Bluergb=6B238EDark Slate Greyrgb=2F4F4FDark Tan rgb=97694FDark Turquoisergb=7093DBDark Wood rgb=855E42Dim Grey rgb=545454Dusty Rose rgb=856363Feldspar rgb=D19275Firebrick rgb=8E2323Forest Greenrgb=238E23Gold rgb=CD7F32Goldenrod rgb=DBDB70Grey rgb=C0C0C0Green Copperrgb=527F76
Green Yellowrgb=93DB70Hunter Greenrgb=215E21Indian Red rgb=4E2F2FKhaki rgb=9F9F5FLight Blue rgb=C0D9D9Light Grey rgb=A8A8A8Light Steel Bluergb=8F8FBDLight Wood rgb=E9C2A6Lime Green rgb=32CD32Mandarian Orangergb=E47833Maroon rgb=8E236BMedium Aquamarinergb=32CD99Medium Bluergb=3232CDMedium Forest Greenrgb=6B8E23Medium Goldenrodrgb=EAEAAEMedium Orchidrgb=9370DBMedium Sea Greenrgb=426F42Medium Slate Bluergb=7F00FFMedium Spring Greenrgb=7FFF00Medium Turquoisergb=70DBDBMedium Violet Redrgb=DB7093Medium Woodrgb=A68064Midnight Bluergb=2F2F4FNavy Blue rgb=23238ENeon Blue rgb=4D4DFFNeon Pink rgb=FF6EC7New Midnight Bluergb=00009CNew Tan rgb=EBC79EOld Gold rgb=CFB53BOrange rgb=FF7F00Orange Red rgb=FF2400Orchid rgb=DB70DBPale Green rgb=8FBC8F
Pink rgb=BC8F8FPlum rgb=EAADEAQuartz rgb=D9D9F3Rich Blue rgb=5959ABSalmon rgb=6F4242Scarlet rgb=8C1717Sea Green rgb=238E68Semi-Sweet Chocolatergb=6B4226Sienna rgb=8E6B23Silver rgb=E6E8FASky Blue rgb=3299CCSlate Blue rgb=007FFFSpicy Pink rgb=FF1CAESpring Greenrgb=00FF7FSteel Blue rgb=236B8ESummer Skyrgb=38B0DETan rgb=DB9370Thistle rgb=D8BFD8Turquoise rgb=ADEAEAVery Dark Brownrgb=5C4033Very Light Greyrgb=CDCDCDViolet rgb=4F2F4FViolet Red rgb=CC3299Wheat rgb=D8D8BFYellow Greenrgb=99CC32
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
PG Redes de Computadores
ITabelas em HTML
a Principais Marcaccedilotildeesb Atributos de Tabelasc Outros Elementos de Controle
aPrincipais MarcaccedilotildeesSegue abaixo o conjunto de marcaccedilotildees essenciais para desenhar tabelas em HTML Algunsatributos podem ser definidos para cada uma dessas marcaccedilotildees Falaremos desses atributos maisadiante
middot ltTABLEgtltTABLEgtToda tabela deve ser iniciada com a marcaccedilatildeo lttablegt e encerrada com lttablegt
ATENCcedilAtildeO Dessa forma a tabela vai aparecer sem bordas mas dividindo linhas e ceacutelulas
Para que a tabela apareccedila com bordas simples defina dessa forma lttable bordergtlttablegtAntes e depois de uma tabela acontece sempre uma quebra de linha
middot ltTRgtltTRgtCada linha de uma tabela deve sempre aparecer entre as marcaccedilotildees lttrgt e lttrgt (TR = TableRow)
middot ltTDgtltTDgtEsta eacute a marcaccedilatildeo que define cada ceacutelula de uma tabela As ceacutelulas de uma tabela devem sempreaparecer entre as marcaccedilotildees de linhas (lttrgt e lttrgt) Como padratildeo o texto nas ceacutelulas eacute alinhadoa esquerda
middot ltTHgtltTHgtDesta forma satildeo definidos os tiacutetulos de uma tabela Estes podem ser posicionados em qualquerceacutelula A diferenccedila entre a marcaccedilatildeo de ceacutelula e tiacutetulo de ceacutelula eacute que o tiacutetulo aparece em negrito
Vamos ver entatildeo o exemplo de uma tabela utilizando essas marcaccedilotildees baacutesicas
lttable bordergt
lttrgtlttdgtItensMecircslttdgtltthgtJaneiroltthgtltthgtFevereiroltthgtltthgtMarccediloltthgtlttrgt
lttrgtltthgtUsuariosltthgtlttdgt80lttdgtlttdgt93lttdgtlttdgt120lttdgtlttrgt
lttrgtltthgtLinhasltthgtlttdgt3lttdgtlttdgt3lttdgtlttdgt5lttdgtlttrgt
lttablegt
Vai aparecer dessa forma
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
31
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
32
b AtributosAs marcaccedilotildees das tabelas podem apresentar resultados diferentes se acompanhadas de algunsatributos Vamos ver os principais
middot ltBORDERgtEsse atributo aparece junto a marcaccedilatildeo TABLE Caso esse atributo natildeo apareccedila a tabela natildeo teraacutebordas
Ou seja como jaacute vimos para obter uma tabela com bordas ela deve ser delimitada pelasmarcaccedilotildees lttable bordergt lttablegt
middot ltALIGNgtEste atributo pode ser aplicado a TRTH e TD e controla como seraacute o alinhamento do texto dentrode uma ceacutelula com relaccedilatildeo agraves bordas laterais
Aceita os valores left center right respectivamente para alinhar a esquerda centralizar ou alinhara direita
Veja o exemplo
lttable bordergt
lttrgtlttdgtPrimeira ceacutelulalttdgtlttdgtSegunda ceacutelulalttdgtlttdgtTerceira ceacutelulalttdgtlttrgt
lttrgtlttd align=centergtcentrolttdgtlttd align=leftgtesquerdalttdgtlttd align=rightgtdireitalttdgt
lttrgt
lttablegt
Aparece assim
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
33
middot ltVALIGNgtPode ser aplicado a TRTH e TD e define o alinhamento do texto nas ceacutelulas com relaccedilatildeo a bordasuperior e inferior
Aceita os valores top middle e bottomlttable bordergt
lttrgtlttdgt Teste para linhamentoltbrgtcom relaccedilatildeo a bordasltbrgtinferior e superiorltbrgtlttdgt
lttd valign=topgt TOP lttdgtlttd valign=middlegtMIDDLElttdgtlttd valign=bottongtBOTTOMlttdgt
lttrgt
lttablegt
Aparece assim
middot ltNOWRAPgtEste atributo evita que haja uma quebra de linha dentro de uma ceacutelula Cautela ao utilizaacute-lo paranatildeo produzir ceacutelulas muito largas
middot ltCOLSPANgtPode ser aplicado a TH ou TD Define quantas colunas uma ceacutelula poderaacute abranger Por padratildeocada ceacutelula corresponde a uma coluna ou seja COLSPAN=1
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
34
Vejamos um exemplo
lttable bordergtlttrgtlttd colspan=3gt3colunaslttdgtlttdgtnormallttdgtlttdgtnormallttdgtlttrgtlttrgtlttdgtcol 1lttdgtlttdgtcol 2lttdgtlttdgtcol3lttdgtlttdgtcol 4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
Que fica assim
middot ltROWSPANgtEste atributo pode ser aplicado a ceacutelulas (TH e TD) e define quantas linhas uma mesma ceacutelulapode abranger Assim como na marcaccedilatildeo anterior o padratildeo eacute uma ceacutelula corresponder a umalinha
Novamente vamos ver exemplos
lttable bordergtlttrgtlttd rowspan=3gt3 linhaslttdgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol5lttdgt lttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttrgtlttdgtcol 2lttdgtlttdgtcol 3lttdgtlttdgtcol4lttdgtlttdgtcol 5lttdgtlttrgtlttablegt
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
35
Apresenta-se dessa forma
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
36
c Mais elementos de controleVamos ver agora mais um conjunto de extensotildees que permitem maior controle sobre tabelasEstas satildeo especialmente uacuteteis na criaccedilatildeo de muacuteltiplas tabelas intercaladas
middot BORDER=ltvaluegtAcrescentando um valor ao atributo BORDER eacute possiacutevel colocar tabelas em maior destaque
lttable border=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLSPACING=ltvaluegtEste atributo eacute aplicaacutevel agrave marcaccedilatildeo TABLE Como padratildeo o Netscape 11 utiliza espaccedilo 2 entreas ceacutelulas Este atributo define o espaccedilo entre cada ceacutelula na tabela
lttable border cellspacing=5gtlttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
middot CELLPADDING=ltvaluegt
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
37
Este atributo eacute aplicado tambeacutem agrave marcaccedilatildeo TABLE e define a distacircncia entre o texto e a bordade cada ceacutelula
Veja exemplo
lttable border cellpadding=8gt
lttrgtlttdgtteste1lttdgt lttdgtteste2lttdgt lttdgtteste3lttdgtlttrgtlttrgtlttdgtteste4lttdgt lttdgtteste5lttdgt lttdgtteste6lttdgtlttrgtlttablegt
A tabela mais compacta possiacutevel seria definida como lttable border=0 cellspacing=0cellpadding=0gt
middot WIDTH=ltvalue or percentgtEste atributo pode ser aplicado tanto a TABLE como a TH e TD A ele tanto pode ser associadoum valor em pixels (ponto em tela graacutefica) como um valor percentual Ou seja determina oquanto da tela uma tabela ou ceacutelula de tabela deveraacute ocupar
Vamos ver os exemplos
lttable border width=50gtlttrgtlttdgtsegundalttdgtlttdgtterampccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsampaacutebadolttdgtlttrgtlttablegt
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
38
Segundo exemplo - aplicando width a uma ceacutelula
lttable bordergtlttrgtlttd width=50gtsegundalttdgtlttdgtterccedilalttdgtlttdgtquartalttdgtlttrgtlttrgtlttdgtquintalttdgtlttdgtsextalttdgtlttdgtsaacutebadolttdgtlttrgtlttablegt
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
39
II Tabela de Comandosmiddot Marcaccedilotildeeslttablegt e lttablegt = define iniacutecio e fim da tabelalttrgtlttrgt = define cada linha da tabelalttdgtlttdgt = define cada ceacutelula da tabela Um conjunto de ceacutelulas aparece sempre delimitado pelasmarcaccedilotildees de linha (lttrgtlttrgt)ltthgtltthgt = define tiacutetulos na tabela Na prampacutetica satildeo ceacutelulas onde o texto aparece emdestaque (negrito) Podem aparecer em qualquer posiccedilatildeo na tabela
middot Atributosltbordergt = determina que uma tabela tenha bordas Aparece sempre associado a marcaccedilatildeoltTABLE BORDERgt
ltaligngt = Controla o alinhamento horizontal do texto em uma linha ou ceacutelula Pode aparecerassociado a TR TD ou TH Aceita os valores
left = alinha agrave esquerda right = alinha agrave a direita center = centraliza
Como nos exemplos
lttr align=centergt lttd align=leftgt ltth align=rightgt
ltvaligngt = controla o alinhamento vertical do conteuacutedo de cada ceacutelula da tabela Pode aparecerassociado a TR TD ou TH Aceita os valores
top = alinha com o alto da ceacutelulamiddle = alinha no meiobottom = alinha com a parte de baixo da ceacutelula
Como nos exemploslttr align=topgtlttd align=middlegtltth align=bottomgt
ltrowspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas linhas uma ceacutelulaabrange
Ex ltrowspan=2gt ltrowspan=3gt
ltcolspangt = Aparece associado a ceacutelulas (TD ou TH) e determina quantas colunas uma ceacutelulaabrange
Ex ltcolspan=2gt ltcolspan=3gt
middot Atribuiccedilatildeo de ValoresBORDER=ltvaluegt = define a largura da bordaCELLSPACING=ltvaluegt = define espaccedilamento entre ceacutelulasCELLPADDING=ltvaluegt = define distacircncia entre o texto e a borda das ceacutelulasWIDTH=ltvalue or percentgt = determina o quanto da tela uma tabela deve ocupar
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
40
I Sobre este TutorialNeste tutorial vocecirc vai aprender a criar Formulaacuterios Eletrocircnicos que permitem um usuaacuterio doWeb submeter informaccedilotildees para o provedor do serviccedilo
Existem vaacuterios tipos de campos de entrada como
middot campos de entrada de textomiddot menus de muacuteltipla escolha ou escolha uacutenicamiddot bototildees sim-ou-natildeomiddot bototildees para submissatildeo ou limpeza de formulaacuterio
Cada uma destes campos tem funcionalidade proacutepria e vocecirc vai aprender em que situaccedilatildeo utilizaacute-los em seus formulaacuterios
Para melhor compreender a notaccedilatildeo utilizada nos formulaacuterios vocecirc primeiro precisa se familiarizarcom HTML (Hypertext Markup Language) Consulte se necessaacuterio o nosso tutorial sobre HTMLbaacutesico disponiacutevel em httpwwwcr-dfrnpbrhipertextoscr-dfcursoshtml1
Se vocecirc jaacute conhece HTML as marcaccedilotildees utilizadas em formulaacuterios seguem a mesma convenccedilatildeoe portanto seraacute faacutecil aprender
Contudo formulaacuterios HTML sempre seguem um padratildeo
ltTITLEgtTiacutetulo do DocumentoltTITLEgt
no iniacutecio e o restante do documento a seguir
Aleacutem disto as marcaccedilotildees que definem o formulaacuterio precisam ser iniciadas e finalizadas comoestas marcaccedilotildees de listas
ltULgtltLIgtPrimeiro item da listaltLIgtSegundo item da listaltULgt
ltFORMgtconteuacutedo do formulaacuterio
ltFORMgt
Uma uacuteltima observaccedilatildeo vocecirc pode ter muacuteltiplos formulaacuterios em um uacutenico hiperdocumento Apenascertifique-se que os blocos ltFORMgtltFORMgt natildeo se sobrepotildeem
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
41
II Codificaccedilatildeo baacutesica
Como vimos um formulaacuterio comeccedila com a marcaccedilatildeo ltFORMgt e termina com ltFORMgt Outrositens devem ser especificados
middot Primeiro o formulaacuterio precisa saber como enviar a informaccedilatildeo para o servidor Existem doismeacutetodos GET e POST
METHOD=GETA maioria dos documentos HTML satildeo recuperados a partir da requisatildeo de uma uacutenica URL aoservidor Assim um formulaacuterio que utilize este meacutetodo envia toda sua informaccedilatildeo ao final da URLativada
METHOD=POSTEste meacutetodo transmite toda a informaccedilatildeo fornecida via formulaacuterio imediatamente apoacutes a URLativada Ou seja quando o servidor recebe uma ativaccedilatildeo de um formulaacuterio utilizando POST elesabe que precisa continuar ouvindo para obter a informaccedilatildeo Este eacute o melhor meacutetodo
middot Segundo o formulaacuterio precisa saber para onde enviar a informaccedilatildeo Esta eacute a URL sendoativada a partir do formulaacuterio e ela eacute referenciada atraveacutes da marcaccedilatildeo ACTION Esta URL emgeral aponta para um script CGI que iraacute receber e decodificar os resultados Lembre-se que sevocecirc estaacute referenciando um script que reside no mesmo servidor do formulaacuterio vocecirc natildeo precisaincluir a URL completa
ACTION=cgi-binpost-query para um script no seu servidor
ACTION=httpwwwcr-dfrnpbrcgi-binpost-query para um script no servidor do CRDF
Apoacutes vocecirc construir estas marcaccedilotildees seu formulaacuterio geralmente teraacute a seguinte estrutura
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Marcaccedilotildees de campos de entrada e HTML em geral
ltFORMgt
Observe que este formulaacuterio utiliza o meacutetodo POST e envia as informaccedilotildees digitadas para umscript local chamado post-query no diretoacuterio cgi-bin do servidor
Outra informaccedilatildeo importante cada marcaccedilatildeo de entrada em um formulaacuterio tem uma opccedilatildeo NAMEassociada de tal forma que o script saiba qual o nome isto eacute como chamar cada valor digitadoCertamente vocecirc pode definir mais de um campo de entrada textual ou menu dentro de umformulaacuterio mas certifique-se de que cada um possui um nome diferente
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
42
III Texto
a Entrada de texto comum - TEXTb Entrada de texto protegido senha - PASSWORDc Entrada oculta - HIDDENd Entrada de vaacuterias linhas de texto - TEXTAREA
a Entrada de texto comum - TEXTA forma mais simples de campo de entrada eacute a marcaccedilatildeo text Este campo permite a digitaccedilatildeo deuma uacutenica palavra ou linha de texto e possui uma largura default de 20 caracteres
OpccedilotildeesVALUE= OPCIONALUtilizando a marcaccedilatildeo VALUE vocecirc especifica que texto apareceraacute no campo quando o formulaacuteriofor exibido
SIZE= OPCIONALEsta marcaccedilatildeo altera o tamanho deste campo exibido na telaObs o usuaacuterio sempre poderaacute digitar mais caracteres do que o tamanho do campo na tela pois otexto iraacute se deslocar a esquerda dentro do campo
MAXLENGTH= OPCIONALSe vocecirc deseja limitar o nuacutemero de caracteres que o usuaacuterio pode digitar basta usar estamarcaccedilatildeo O formulaacuterio iraacute emitir um bip de erro se o usuaacuterio tentar digitar aleacutem do permitido emMAXLENGTH
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Qual o seu primeiro nomeltINPUT TYPE=text NAME=primeiro_nome VALUE=carlos SIZE=10 MAXLENGTH=15gt
ltFORMgt
Obs
middot O valor informado em NAME deve utilizar sublinhado em vez de espaccedilos em branco Inserirespaccedilos em branco nestes nomes pode causar problemas no servidor na decodificaccedilatildeo dosvalores informados
middot Se seu formulaacuterio possui apenas um campo de entrada textual ao teclar ENTER neste campoo formulaacuterio seraacute submetido como se o usuaacuterio tivesse acionado o botatildeo SUBMIT
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
43
b Entrada de texto protegido senha - PASSWORDMarcaccedilotildees de entrada do tipo password satildeo idecircnticas aos campos do tipo text exceto pelofato de todos os caracteres serem exibidos como asteriscos ( )-OpccedilotildeesVALUE= OPCIONALA marcaccedilatildeo VALUE especifica um valor default para este campo
SIZE= OPCIONALEsta troca o tamanho do campo de password exibido na tela
MAXLENGTH= OPCIONALLimita o nuacutemero de caracteres que o usuaacuterio pode informar como password
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Informe sua senha de acesso (8 caracteres)ltINPUT TYPE=password VALUE=xpto NAME=sua_senha SIZE=8 MAXLENGTH=8gt
ltFORMgt
Obs
middot Se vocecirc pretende utilizar MAXLENGTH para limitar o nuacutemero de caracteres informados tenhacerteza de especificar um SIZE com o mesmo tamanho para fornecer ao usuaacuterio o sentimentode qual a largura do campo Esta regra natildeo foi utilizada no primeiro exemplo que possui SIZEigual a 10 mas MAXLENGTH de 15 o que faz o campo se deslocar nos uacuteltimos 5 caracterescaso o valor informado possua mais do que 10 caracteres
middot Mesmo que o valor default VALUE esteja representado por asteriscos o usuaacuterio podevisualizar o seu valor atraveacutes da recuperaccedilatildeo do fonte do hiperdocumento em HTML (umaopccedilatildeo comum na maioria dos clientes WWW)
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
44
c Entrada oculta - HIDDENAleacutem da marcaccedilatildeo PASSWORD com um valor VALUE default eacute possiacutevel esconder informaccedilatildeopassada dentro de blocos FORM com uma marcaccedilatildeo HIDDEN Esta informaccedilatildeo eacute recebida peloscript de decodificaccedilatildeo no servidor mas natildeo eacute diretamente exibida ao usuaacuterio no formulaacuterio
OpccedilotildeesVALUE= OBRIGATOacuteRIOAtraveacutes da marcaccedilatildeo VALUE vocecirc deve especificar o texto oculto a ser enviado ao scriptprocessador do formulaacuterio
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Vocecirc natildeo pode visualizar nada aqui embaixoltINPUT TYPE=hidden NAME=nome_oculto VALUE=form12gt
ltFORMgt
Obs
middot Mesmo que o valor especificado em HIDDEN VALUE natildeo seja exibido no formulaacuterio o usuaacuteriopode vecirc-lo atraveacutes da operaccedilatildeo de visualizaccedilatildeo do fonte do hiperdocumento da mesma formacomo no campo PASSWORD
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
45
d Entrada de vaacuterias linhas de texto - TEXTAREAA marcaccedilatildeo TEXTAREA natildeo utiliza o formato convencional INPUT TYPE=text dos exemplosanteriores Ao contraacuterio uma marcaccedilatildeo ltTEXTAREAgt delimita o seu iniacutecio e a marcaccedilatildeoltTEXTAREAgt o seu fim
OpccedilotildeesROWS= OBRIGATOacuteRIOEspecifica o nuacutemero de linhas da entrada textual
COLS= OBRIGATOacuteRIOEspecifica o nuacutemero de colunas da entrada textual
Texto default OPCIONALSe vocecirc deseja que um texto seja exibido no campo textual ao abrir o formulaacuterio simplesmentecoloque este texto entre as marcaccedilotildees de iniacutecio e fim da TEXTAREA
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Por favor escreva aqui suas sugestotildees duacutevidas e criacuteticasltBRgtltTEXTAREA NAME=critica ROWS=3 COLS=40gtGostaria de obter mais informaccedilotildees sobreeste servidor GratoltTEXTAREAgt
ltFORMgt
Obs
middot O usuaacuterio dispotildee de Scrollbars para digitar aleacutem do nuacutemero de linhas e colunas definidas emROWS e COLS
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
46
IV Menus
a Menus com opccedilotildees - SELECTb Listas paginaacutevies - SELECT com SIZE
a Menus com opccedilotildees - SELECTMenu de opccedilatildeo uacutenica
A marcaccedilatildeo SELECT segue a mesma convencatildeo de TEXTAREA Ou seja as opccedilotildees de menuficam entre a marcaccedilatildeo de iniacutecio ltSELECTgt e a de fim ltSELECTgt
OpccedilotildeesOPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo presente no menu
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidor Se natildeo for definido o nome da opccedilatildeo eacute enviadoao servidor
SELECTED OPCIONALPor default a primeira OPTION eacute exibida no menu Esta marcaccedilatildeo estabelece uma opccedilatildeo demenu a ser exibida inicialmente quando natildeo se deseja que seja a primeira OPTION
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Onde vocecirc pretende fazer turismo nas feacuteriasltSELECT NAME=lugares_para_vergtltOPTIONgtFortalezaltOPTION VALUE=sulgtFlorianoacutepolis ou Porto AlegreltOPTIONgtRio de JaneiroltOPTION SELECTEDgtBrasiacutelialtOPTION VALUE=amazoniagtManausltSELECTgt
ltFORMgt
Obs
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
47
middot Se vocecirc possui mais do que 3 ou 4 opccedilotildees de escolha e o usuaacuterio soacute pode selecionar umaentatildeo este elemento de entrada eacute o melhor As pessoas frequentemente utilizam vaacuteriosRADIOBUTTONS que veremos a seguir
middot O script decodificador no servidor provavelmente apreciaraacute uma uacutenica palavra para VALUEem vez de muacuteltiplas palavras Vocecirc sempre pode utilizar sublinhado para separar expressotildeescompostas
b Listas paginaacuteveis - SELECT com SIZEA uacutenica diferenccedila entre este elemento de entrada e o anterior SELECT eacute a introduccedilatildeo da opccedilatildeoSIZE Ela especifica quantas linhas com opccedilotildees de menu seratildeo exibidas na janela
OpccedilotildeesMULTIPLE OPCIONALEspecifica que muacuteltiplas opccedilotildees podem ser selecionadas em oposiccedilatildeo ao exemplo anterior doSELECT onde apenas uma opccedilatildeo pode ser selecionada no menu
SIZE= OBRIGATOacuteRIONuacutemero de linhas (opccedilotildees de menu) exibidas na janela
OPTION OBRIGATOacuteRIOEspecifica uma opccedilatildeo da lista
VALUE= OPCIONALEspecifica o valor da opccedilatildeo retornada ao servidorSe natildeo for definido o nome da opccedilatildeo eacute enviado ao servidor
SELECTED OPCIONALEsta opccedilatildeo determina uma OPTION default para ser selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Que facilidades de acomodaccedilatildeo vocecirc desejaltBRgtltSELECT NAME=opcional MULTIPLE SIZE=5gtltOPTIONgtTelevisatildeoltOPTION VALUE=casal SELECTEDgtCama de CasalltOPTIONgtAr CondicionadoltOPTIONgtFaxltOPTION SELECTEDgtModem V34ltOPTIONgtSaunaltOPTIONgtLavanderialtOPTIONgtFrigo-BarltSELECTgt
ltFORMgt
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
48
Obs
middot Este elemento de entrada eacute bom para listas com muitas opccedilotildees porque eacute possiacutevel controlarquantas seratildeo exibidas por vez
middot Em alguns clientes WWW eacute necessaacuterio teclar simultaneamente as teclas CONTROL ouSHIFT para selecionar muacuteltiplos itens
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
49
V Bototildees
a Bototildees sim ou natildeo - CHECKBOXb Bototildees com opccedilotildees - RADIOc Bototildees de submissatildeo e limpeza
a Bototildees sim ou natildeo - CHECKBOXRetornando ao formato de INPUT TYPE= a marcaccedilatildeo CHECKBOXES eacute perfeita para escolherentre duas opccedilotildees
OpccedilotildeesVALUE= OPCIONALEspecifica o valor da opccedilatildeo enviado ao servidor Se natildeo for definido o valor on eacute enviado aoscript decodificador
CHECKED OPCIONALEsta marcaccedilatildeo define a opccedilatildeo selecionada por default
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
ltINPUT TYPE=checkbox NAME=boletim CHECKEDgtSim eu desejo receber o boletim denotiacuteciasltPgtltINPUT TYPE=checkbox NAME=infogtSim eu gostaria de receber mais informaccedilotildees turiacutesticasltDLgt
ltFORMgt
Obs
middot Este elemento funciona melhor para respostas do tipo simnatildeo ou onoffmiddot Vocecirc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME mas diferentes VALUES
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
50
b Bototildees com opccedilotildees - RADIO
RADIOBUTTONS utilizam uma notaccedilatildeo similar a de CHECKBOXES contudo apenas uma opccedilatildeopode ser escolhida
OpccedilotildeesVALUE= OBRIGAToacuteRIOEspecifica o valor da opccedilatildeo a ser enviado para o servidorSe natildeo for definido um valor on eacute enviado ao script decodificador
CHECKED RECOMENDADOEsta marcaccedilatildeo especifica qual botatildeo estaraacute selecionado por defaultUma vez que uma seleccedilatildeo precisa ser feita eacute melhor prover uma opccedilatildeo pre-selecionada
ltFORM METHOD=POST ACTION=cgi-binpost-querygt
Suas preferecircncias na viagemltDLgtltDDgtClasse do BilheteltINPUT TYPE=radio NAME=classe VALUE=ecogteconocircmicaltINPUT TYPE=radio NAME=classe VALUE=exegtexecutivaltINPUT TYPE=radio NAME=classe VALUE=pri CHECKEDgtprimeiraltDDgtLocalizaccedilatildeoltINPUT TYPE=radio NAME=local VALUE=frentegtaacuterea fumanteltINPUT TYPE=radio NAME=local VALUE=trasgtaacuterea natildeo fumanteltDLgt
ltFORMgt
Obs
middot Como jaacute foi mencionado RADIOBUTTONS natildeo satildeo boa escolha para listas com muitos itensporque o cliente tem problemas para exibir muitos bototildees Eacute melhor utilizar o menu SELECT
middot Uma vez que um botatildeo eacute selecionado ele natildeo pode ser desmarcado sem selecionar outrobotatildeo que possua o mesmo NAME A seleccedilatildeo default pode ser restaurada com a utilizaccedilatildeo dobotatildeo RESET introduzido a seguir
middot Se vocecirc utiliza vaacuterios RADIOBUTTONS com o mesmo NAME e nenhum VALUES o servidornatildeo seraacute capaz de dizer que botatildeo foi selecionado uma vez que o valor on seraacute retornadapara qualquer um deles
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
51
c Bototildees de submissatildeo e limpeza - RESET E SUBMITEm vez do usuaacuterio corrigir cada INPUT um botatildeo RESET pode ser utilizado para restaurar todosos campos a seus valores default como se nenhuma informaccedilatildeo houvesse sido digitada
E finalmente o FORM precisa de uma opccedilatildeo para enviar toda a informaccedilatildeo digitada para oservidor uma vez que o usuaacuterio terminou de preencher os todos os campos de entrada O botatildeoSUBMIT transfere toda a informaccedilatildeo para a URL especificada no elemento ACTION
OpccedilotildeesVALUE= OPCIONALEspecifica o texto a ser exibido no botatildeoSe natildeo for especificado os textos default Reset e Submit Query seratildeo colocados nos bototildeesRESET e SUBMIT respectivamente
NAME= OPCIONALSe NAME for definido em um botatildeo SUBMIT o formulaacuterio iraacute transmitir o valor do conteuacutedo doelemento VALUE permitindo que vocecirc tenha muacuteltiplos bototildees SUBMIT numa espeacutecie de versatildeosimplificada de um RADIOBUTTONS
ltFORM METHOD=POST ACTION=cgi-bindonothinggt
Qual o seu primeiro nome ltINPUT TYPE=textgtltBRgtAperte este botatildeo ltINPUT TYPE=radio NAME=nadagtltBRgtltINPUT TYPE=reset VALUE=Limpa camposgtltINPUT TYPE=submitgt
ltFORMgt
Obs
middot Normalmente o script decodificador retorna um hiperdocumento apoacutes ele processar ainformaccedilatildeo do formulaacuterio
middot Nem todos os clientes suportam muacuteltiplos bototildees SUBMIT Eacute melhor utilizar apenas um uacutenicobotatildeo SUBMIT para transmitir a informaccedilatildeo digitada no formulaacuterio
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
52
Extensotildees do NetscapeEste documento eacute uma traduccedilatildeo e adaptaccedilatildeo do documento disponiacutevel em(httphomemcomcomassistnet_siteshtml_extensionshtml)
A Netscape Communications desenvolveu uma seacuterie de extensotildees especiacuteficas seguem algumasabaixoUm documento completo sobre estas extensotildees estaacute disponiacutevel na NetscapeCom em(httphomemcomcomassistnet_siteshtml_extensionshtml)
middot ltHRgtA netscape desenvolveu 5 novas tags para serem aplicadas junto agrave marcaccedilatildeo HR (horizontal rule)
ltHR SIZE=nuacutemerogtA tag SIZE define a largura da linha horizontal
ltHR WIDTH=percentualgtA linha padratildeo ocupa toda a extensatildeo da tela Com esta Tag eacute possiacutevel determinar opercentual de ocupaccedilatildeo da tela de um linha
ltHR ALIGN=left|right|centergtAssim eacute possiacutevel alinhar linhas horizontais que natildeo ocupem toda a tela seja agrave direita agraveesquerda ou centralizadas
ltHR NOSHADEgtProduz uma linha realmente soacutelida sem nenhum tipo de sombra
middot ltULgtUtilizando-se as extensotildees TYPE=disc TYPE=circle or TYPE=square eacute possivel definir oformato do indicador de uma lista natildeo numerada (UL)
middot ltOLgtDa mesma forma eacute possiacutevel definir o tipo de algarismos em listas numeradas usando asextensotildees
(TYPE=A) para letras maiuacutesculas(TYPE=a) para letras minuacutesculas(TYPE=I) para numerais romanos grandes(TYPE=i) para numerais romanos pequenos(TYPE=1) nuacutemeros padratildeo
Para listas que devem comeccedilar com valores diferentes de 1 pode se usar a tag STARTPor exemplo START=5 vai exibir E e V v or 5 de acordo com a tag TYPE
middot ltLIgtAgrave marcaccedilatildeo LI tambeacutem podem ser atribuidas extensotildees TYPE como em UL e OLconforme explicado acima Para listas numeradas pode ser usado VALUE para atribuir umvalor a um item
middot ltIMGgtltIMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottomgt
A marcaccedilatildeo ALIGN=left faraacute com que os demais elementos sejam alinhados agrave direita eabaixo da imagem Assim eacute possiacutevel fazer um texto contornar uma figura alinhada aesquerda da paacutegina ALIGN=right se comporta de modo semelhante mas na borda direitada tela
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
53
As novas extensotildees para HTML do NETSCAPE possibilitam ainda ALIGN=topALIGN=texttop ALIGN=middle ALIGN=absmiddle ALIGN=baseline ALIGN=bottom eALIGN=absbottom permitindo refinamentos no controle de alinhamento
ltIMG WIDTH=valor HEIGHT=valorgtAs marcaccedilotildees WIDTH e HEIGHT podem definir o tamanho da imagem acelerando otrabalho do browser Ao inveacutes de esperar a imagem chegar o browser sabe previamenteseu tamanho agilizando a transferecircncia Eacute tambeacutem possiacutevel alterar o tamanho original deuma imagem usando-se destas marcaccedilotildees No entanto desta forma pode se perder aqualidade da imagem
ltIMG BORDER=valuegtDefine a espessura da borda de uma imagem Pode-se usar border=o por exemplo paraeliminar bordas de imagens que estatildeo definidas como links
ltIMG VSPACE=valor HSPACE=valorgtPara as images flutuantes VSPACE controla o espaccedilo vertical acima e abaixo da figuraenquanto HSPACE controla o espaccedilo horizontal a esquerda e a direita da figura
NovosElementos
middot ltNOBRgtNOBR define que uma linha natildeo pode ser quebrada em sua exibiccedilatildeo Eacute utilizado em par =ltNOBRgteltNOBRgt
middot ltWBRgtWBR significa Word BReak Eacute utilizado em uma linha definida como NOBR paradeterminar em qual palavra a linha pode ser quebrada se necessaacuterio Natildeo produz um BRautomaacutetico mas indica ao browser onde quebrar a linha se necessaacuterio
middot ltFONT SIZE=valorgt ltFONTgtCom esta marcaccedilatildeo vocecirc pode definir tamanho de fonte Satildeo aceitos valores entre 1-7 Otamanho padratildeo da marcaccedilatildeo FONT eacute 3 O valor tambeacutem pode ser definido opcionalmentecom os caracteres + or - antes do nuacutemero
middot ltBASEFONT SIZE=valuegtAltera o tamanho da BASEFONT relativo a todas as marcaccedilotildees FONT O padratildeo eacute 3
middot ltCENTERgtUtilizado aos pares para centralizar elementos do seu texto em html
NovasEntidades
Aleacutem dos caracteres especiais jaacute em uso foram criados
ampreg -gt Marca Registrada -gt regampcopy -gt Copyright -gt copy
Iacutendice
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
54
I Sobre esse TutorialII Interlaced GifIII Imagens TransparentesIVMapas sensiacuteveisI Sobre esee TutorialNeste tutorial vamos ver alguns recursos de manipulaccedilatildeo de imagens bastante utilizados por sitesWWW
Para a obtenccedilatildeo desses recursos veremos algumas boas dicas sobre dois programasespecificamente o Lview e o Mapedit
Eacute importante que vocecirc jaacute conheccedila HTML - Hypertext Markup Language Se natildeo conhece semproblema tambeacutem daacute uma lida cuidadosa nos nossos outros tutoriais sobre HTML disponiacuteveis emhttpwwwcr-dfrnpbrhipertextoscr-dfcursos
Este tutorial faz parte de um conjunto de moacutedulos destinados a quem deseja publicarproverinformaccedilatildeo na Internet atraveacutes de serviccedilo do tipo WWW (World Wide Web)
Atualmente - janeiro de 1996 - este conjunto compreende 7 moacutedulos
1 Introduccedilatildeo Geral a Internet2 HTML Baacutesico3 Tabelas em HTML4 Formulaacuterios em HTML5 Muacuteltiplas Janelas - Frames6 Manipulaccedilatildeo de Imagens7 Guia de Estilo
Informaccedilotildees adicionais podem ser solicitadas a webmastercr-dfrnpbr
II Interlaced GIFDefiniccedilatildeo
Imagens gif definidas como interlaced tornam a transmissatildeo de uma paacutegina mais confortaacutevel aousuaacuterio uma vez que ao inveacutes de trazer a imagem em bloco o browser exibe a imagemaumentando sua resoluccedilatildeo gradativamente
Dependendo da resoluccedilatildeo da imagem haveraacute diferenccedila de niacutevel de resoluccedilatildeo final em um arquivointerlaced no padratildeo gif89a ou gif87a De um modo geral o formato gif87a oferece melhorresoluccedilatildeo para arquivos interlaced
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo gif como interlaced selecione o menu OPTIONS e ative a opccedilatildeo SAVEGIFs INTERLACED Caso vocecirc observe perda de resoluccedilatildeo na imagem salve-a no padratildeo gif87a
III Imagens Transparentes
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
55
Definiccedilatildeo
O formato gif89a permite que se defina que uma cor em um arquivo fique transparenteExemplo
Criando Imagens Transparentes com LVIEW PRO
1 Selecione o menu Retouch2 Neste menu escolha a opccedilatildeo Color Depth3 Defina como Palette Image e clique em OK4 Selecione o menu Options5 Escolha Background Color6 Clique no botatildeo Dropper7 O curso vai ficar com a aparecircncia de um conta gotas8 Clique com o cursor sobre a cor que vocecirc deseja que fique transparente9 Salve a imagem como gif89a (file =gt Save as)
Atenccedilatildeo vocecirc soacute iraacute visualizar a transparecircncia da imagem ao exibiacute-la com o browser Na tela doLview a aparecircncia do arquivo natildeo eacute alterada
IV Imagens SensiacuteveisDefiniccedilatildeo
Imagens sensiacuteveis ou mapas clicaacuteveis satildeo imagens que conteacutem vaacuterios links associados a elasUma aplicaccedilatildeo comum para este recurso eacute a utilizaccedilatildeo de mapas geograacuteficos em que ao se clicarem cada regiatildeoaacutereacidade seraacute obtido um arquivo diferente
Passo a Passo
Para criar uma imagem sensiacutevel eacute preciso
1 Mapear as coordenadas do arquivo imagem gerando um arquivo do tipo map2 Copiar o arquivo map para o seu servidor3 Atualizar na aacuterea do servidor www a existecircncia do novo map (normalmente no arquivo
imagemapcom que se encontra no diretoacuterio usrlocaletchttpdconf)4 Inserir o arquivo em uma paacutegina incluindo a extensatildeo ismap junto a imagem da seguinte
forma ltimg src=nome_do_arquivogif ismapgt5 Fazer uma acircncora da imagem para o programa que interpreta mapas no servidor - imagemap -
com a identificaccedilatildeo do mapa a ser associado a esta imagem Exemplo lta href=cgi-binimagemapmapa1gtltimg src=arquivogifgtltagt
Gerando o Arquivo MAP com MAPEDIT FOR WINDOWS
Transparente Fundo normal
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
56
1 Selecione no menu file a opccedilatildeo opencreate2 Defina o tipo de servidor como (NCSA Apache )3 Na janela GIF Filename localize o arquivo imagem que vocecirc quer mapear (use o botatildeo de
browse para chegar ateacute ele se estiver no PC)4 Digite na janela Map Filename o nome que vocecirc deseja dar ao arquivo map5 Clique ok O Mapedit vai informar que o arquivo map natildeo existe e pedir confirmaccedilatildeo para sua
criaccedilatildeo6 Em seguida o arquivo imagem que foi especificado seraacute exibido na tela do Mapedit7 No menu tools selecione o formato da primeira aacuterea que vocecirc quer mapear (poliacutegono ciacuterculo
ou retacircngulo)8 Mantendo o botatildeo esquerdo do mouse pressionado delimite a aacuterea que vocecirc quer mapear e
clique no botatildeo direito do mouse9 Surgiraacute uma janela de diaacutelogo em que vocecirc deve inserir a URL que deseja associar agravequela aacuterea
e opcionalmente comentaacuterios10Repita operaccedilatildeo semelhante ateacute concluir o mapeamento completo da imagem11Escolha no menu file a opccedilatildeo Save As12Confirme o correto formato do arquivo map e o nome do arquivo
Copiando MAP para o Servidor
O arquivo map referente a esta imagem deveraacute estar armazenado juntamente com as suaspaacuteginas e imagens a serem tornadas disponiacuteveis no WWWEacute interessante criar um subdiretoacuterio no servidor exclusivamente para armazenar os arquivos mapa serem utilizados
Atualizando o MAP no IMAGEMAPCONF
Uma vez copiado o arquivo map para o servidor para que ele funcione eacute necessaacuterio inserir sualocalizaccedilatildeo em um arquivo chamado imagemapconf eacute este o arquivo consultado no servidor parainterpretar qualquer imagem sensiacutevel
O imagemapconf eacute um arquivo texto que se encontra na aacuterea de configuraccedilatildeo do servidor Porisso normalmente soacute o administrador da maacutequina teraacute acessso a ele Basta entatildeo solicitar aoadministrador que atualize o imagemapconf toda vez que um novo map for criado
O imagemapconf estaacute localizado no diretoacuterio usrlocaletchttpdconf e tem a seguinte aparecircncia
Mapeamento de imagens ex do riobackbone datahttpdhtdocsrnpbackbonemapwood homeservicoshttpdhtdocstutorialimagem-clicavelwoodmapBrasil iswwwSVIBrasilmapBRnorte iswwwSVIBRnortemapBRnordeste iswwwSVIBRnordestemapBRsudeste iswwwSVIBRsudestemapBRcentro iswwwSVIBRcentromapBRsul iswwwSVIBRsulmapclique homeservicoshttpdhtdocscthdoccliquemapa1mapwood3 iswwwmercosulwood2mapmercosul iswwwmercosulmercosulmap
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo
57
Inserindo a Imagem Mapeada na Paacutegina
Para inserir uma imagem mapeada em uma paacutegina abra uma acircncora apontando para o imagemapna aacuterea de cgi-bin do seu servidor especifique o nome com que o mapa referente estaacutereferenciado no imagemapconf e insira a imagem no interior da acircncora associando o atributoISMAP da seguinte forma
lta href=cgi-binimagemapmapa1gtltimg src=brasilgif ismapgtltagt
Onde mapa1 eacute o nome utitilizado no arquivo imagemapconf para referenciar o arquivo map criadopara o arquivo brasilgif no exemplo