I.CaracterísticasGeraisdoHTML - clubedainformatica.com.br · 13 f.TextoPré-formatado...

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


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


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


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


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


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


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


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


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


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


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






Escrito desta forma


Apresenta-se assim

4

2 Cabeccedilalhos









3 Paraacutegrafos



5

4 Quebras de linha





6













7













8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





3






Escrito desta forma


Apresenta-se assim

4

2 Cabeccedilalhos









3 Paraacutegrafos



5

4 Quebras de linha





6













7













8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





4

2 Cabeccedilalhos









3 Paraacutegrafos



5

4 Quebras de linha





6













7













8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





5

4 Quebras de linha





6













7













8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





6













7













8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





7













8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





8






9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





9

e Listas







Vai aparecer assim


10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





10













ltDLgt

11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





11









ltULgt

12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





12


13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





13



Apresenta-se assim



14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





14









15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





15







Fica assim

16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





16


17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





17




18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





18




19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





19





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





20











21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





21







22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





22




Veja os exemplos

23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





23


Observe


24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





24










Imagem de fundo











Define a cor para



25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





25

paacutegina























26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





26




--o00o--













ltDLgt






27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





27








n= nuacutemero



n= nuacutemero


28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





28






29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





29





ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57






ITabelas em HTML










lttable bordergt




lttablegt


31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





31

32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





32






Veja o exemplo

lttable bordergt



lttrgt

lttablegt

Aparece assim

33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





33





lttrgt

lttablegt

Aparece assim



34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





34

Vejamos um exemplo


Que fica assim




35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





35


36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





36







37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





37


Veja exemplo







38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





38



39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





39





Como nos exemplos










40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





40













ltFORMgt


41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





41












ltFORMgt



42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





42

III Texto








ltFORMgt

Obs



43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





43






ltFORMgt

Obs



44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





44





ltFORMgt

Obs


45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





45







ltFORMgt

Obs


46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





46

IV Menus









ltFORMgt

Obs

47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





47











ltFORMgt

48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





48

Obs



49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





49

V Bototildees







ltFORMgt

Obs



50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





50







ltFORMgt

Obs




51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





51







ltFORMgt

Obs



52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





52















53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





53





NovosElementos






NovasEntidades



Iacutendice

54














55

Definiccedilatildeo







Passo a Passo








56














57





54














55

Definiccedilatildeo







Passo a Passo








56














57





55

Definiccedilatildeo







Passo a Passo








56














57





56














57





57





I.CaracterísticasGeraisdoHTML - clubedainformatica.com.br · 13 f.TextoPré-formatado...

Documents

Transcript of I.CaracterísticasGeraisdoHTML - clubedainformatica.com.br · 13 f.TextoPré-formatado...