00293 - programando em html

5/26/2018 00293 - Programando Em HTML

1/104

SumrioINTRODUO _________________________________ 3

EDIODEDOCUMENTOS__________________________________ 4COMANDOSDEHTML ___________________________________ 5ATRIBUTOS ____________________________________________ 5COMENTRIOS__________________________________________ 6COMPONENTES BSICOS ___________________________________ 6CRIANDOUMDOCUMENTO _________________________________ 7

HTML BSICO _________________________________ 9CABEALHOS ___________________________________________ 9PARGRAFOS__________________________________________ 12SEPARADORES _________________________________________ 15FORMATAODOTEXTO _________________________________ 17FORMATAODECARACTERES_____________________________ 17BLOCOS _____________________________________________ 22FONTE_______________________________________________ 25

LISTAS_______________________________________________ 29ANINHANDOECOMBINANDOLISTAS _________________________ 34

IMAGENS_____________________________________ 37INSERINDOIMAGENS _____________________________________ 39ATRIBUTOS ___________________________________________ 40IMAGENSDEFUNDO_____________________________________ 42

IMAGENSMAPEADAS ____________________________________ 45


2/104

LIGAES (LINKS)____________________________ 48LINKSPARAARQUIVOS __________________________________ 48LINKSPARASEESDEDOCUMENTOS _______________________ 51HIPERLINKCOMIMAGEMMAPEADA_________________________ 55

TABELAS _____________________________________ 62ANINHANDOTABELAS ___________________________________ 65MESCLANDOCLULAS___________________________________ 67ALTERANDODIMENSES__________________________________ 70IMAGEMDEFUNDO ______________________________________ 73

FRAMES ______________________________________ 75COMPOSIESCOMFRAMES______________________________ 81LIGANDOFRAMES ______________________________________ 85ENCADEANDOFRAMES___________________________________ 88

FORMULRIOS _______________________________ 91OSOBJETOSDEFORMULRIOS ____________________________ 91

INSERINDOOBJETOS ____________________________________ 93FAZENDOOFORMULRIOFUNCIONAR_______________________ 99

EXERCCIOS ________________________________ 101


3/104

Programando em HTML

Pgina: 3Celta Informtica - F: (11) 4331-1586

INTRODUO

Antes de iniciar este curso importante que voc saiba o que WorldWide Web (www), consiga operar um navegador(browser) e o que uma homepage. Porm no necessrio que voc conecte-se Internetpara poder ver as pginas que est editando.

A HTML (HyperText Markup Language) uma linguagem utilizada para aedio de documentos da Web que possui etiquetas para formatar o tex-

to e figuras que sero apresentados pelo navegador e cria ligaes entrepginas, criando o conceito de hipertexto. Ela composta por comandoscolocados entre parnteses angulares (< e >). Estes comandos sochamados de etiquetas (tags) que informam ao navegador como os tex-tos e imagens sero exibidos na pgina.

Toda pgina Web um arquivo de texto gravado com a extenso .htm(Windows) ou .html(Unix) que possui comandos HTML e est gravado

em um servidor. Quando o computador cliente solicita uma pgina, oservidor envia para ele o arquivo html que o navegador se encarregar deinterpretar e exibir a pgina solicitada.


4/104

Programando em HTML


EDIO DE DOCUMENTOS

Um documento HTML pode ser criado utilizando um simples editor detextos como o Bloco de Notas do Windows ou um editor de HTML quepossui atalhos para os comandos e insere automaticamente as etique-tas, orientando na digitao dos seus elementos, e aumentando muito aprodutividade. Existem atualmente editores do tipo WYSIWYG (what yousee is what you get - o que voc v o que voc quer) que permitem aconstruo da pgina sem a necessidade de digitar ou ver o cdigo HTML,tais como o Dreamweaver e FrontPage.

Neste curso iremos utilizar o Bloco de Notas do Windows, pois o queinteressa voc se familiarizar bastante com as tags HTML e casoutilizassemos algum editor, estas tags seriam colocadas automaticamen-te prejudicando o seu aprendizado.


5/104

Programando em HTML


Comandos de HTML

Como voc j sabe, um documento HTML possui tags que informamcomo a pgina ser exibida pelo navegador. A maioria dessas tags pos-suem tambm sua correspondente de fechamento:

texto formatado

Este fechamento necessrio porque estas tags servem para definir aformatao de uma poro de texto, e por isso devemos marcar ondecomea e termina o texto com a formatao especificada por ela.

Existem tambm tags chamadas vazias, pois no marcam uma regio

de texto, apenas inserem algum elemento ou formatao no documento:

Todas as tags possuem atributos que podem ser utilizados ou no, de-pendendo da formatao desejada para o texto. Eles definem algumacaracterstica especial e so colocados na etiqueta inicial.

texto formatado

As tags HTML no so sensveis caixa, ou seja, tanto faz escrev-lacom letras maisculas ou minsculas. Sendo assim, , ou so a mesma coisa.

Atributos

Um atributo define vrias propriedades para uma tag. Por exemplo, a tag texto possui o atributo COLORquedetermina qual ser a cor da font utilizada no texto.

O atributo sempre includo na tag inicial e nunca na tag final, e o seuvalor delimitado por aspas simples ou duplas. Estas aspas so opcionaisse o valor do atributo consistir somente de letras (a-z), dgitos (0-9), hfene ponto. O nome dos atributos no so sensveis a caixa mas seus valo-res podem ser.


6/104

Programando em HTML


Comentrios

Todo bom programador inclui comentrios em seu cdigo para uma pos-terior manuteno feita por ele mesmo ou por outra pessoa. Estes co-mentrios no so interpretados pelo navegador, sendo teis no entendi-

mento de como o cdigo est sendo executado.Um comentrio em HTML comea com , nopodendo ser utilizados dentro do comentrio. Por exemplo:

Componentes bsicos

A estrutura bsica de um documento HTML a seguinte:

Titulo do Documento elementos opcionais textos,imagens,links

A etiqueta ... marca o incio o final do documento HTML,e entre ela existem as sees de cabealho (head) e corpo (body) dodocumento.

O cabealho delimitado por ... e contm informa-es sobre o documento e seu contedo que podem ser recuperadospor robs de busca na Internet, e no sero exibidos na pgina.

A principal informao contida no cabealho o ttulo do documento queaparece na barra de ttulo do navegador e est delimitado pela etiqueta.... Este ttulo no deve ser nem muito longo e nem

muito curto, ele deve indicar claramente o contedo da pgina. Ele pre-cisa ter algum significado para o internauta pois alm de ser exibido pe-los programas de busca, o ttulo ser listado nos favoritos do navegador(bookmark).


7/104

Programando em HTML


O corpo do documento contm todas as informaes que sero exibidaspelo navegador, tais como: cabealhos, pargrafos, imagens, listas, ta-belas e links. Ele est delimitado pela etiqueta ....

Criando um documento

Para iniciar e edio de um documento, abra o Bloco de notas do Windowse digite o texto mostrado a seguir.

Salve este documento com o nome de modelo.htm, para no ter quedigitar toda estrutura bsica novamente a cada novo documento.

Aps salvar, inclua um ttulo e algum texto no corpo do documento. Salveo arquivo com o nome de primeiro.htm, utilizando a opo Salvar como...do menu Arquivo, no esquecendo de informar a extenso .htmou oarquivo ser gravado como .txt. Observe a figura.


8/104

Programando em HTML


No navegador utilize o menu Arquivo> Abrir...e procure pelo arquivo

que voc acabou de salvar.

Repare na informao da barra de ttulo, no endereo e no contedo dapgina.


9/104

Programando em HTML


Na caixa de lista do endereo informado o local do arquivo no computa-dor, quando esta pgina for publicada, ou seja, gravada em um servidorWeb, o endereo ser alguma coisa parecida com:

http://www.meunome.com.br/primeiro.htm

Repare que o texto na pgina apareceu sem quebra de linha apesar deter sido pressionada a tecla Enter aps a digitao da palavra pgina noBloco de notas. Isto ocorre porque o navegador no recebeu uma instru-o para quebrar a linha ou qualquer outra que modificasse o texto, eleapenas exibiu o que estava na tag .

HTML BSICO

Agora que voc aprendeu a editar, salvar como html e abrir um docu-

mento no navegador, est na hora de comear a aprender como formataro texto, inserir figuras e links e criar tabelas e frames.

CABEALHOS

Todo documento possui cabealhos que separam sees ou tpicos quefacilitam a visualizao de quem os l, permitindo um melhor acompa-

nhamento das idias expostas. O HTML possui a etiqueta que criacabealhos na rea de visualizao das pginas.

Existem seis tipos de cabealhos no HTML com formatao prpria eprontos para serem utilizados, indo de a . Sendo detamanho maior que .


10/104

Programando em HTML


Faa o seguinte documento:

Que ser exibido desta forma no navegador.


11/104

Programando em HTML


Os cabealhos possuem o atributo ALIGN que faz o alinhamento do texto.

ALIGN = [ left | center | right | justify ]

Defina o atributo ALIGN para as etiquetas de cabealho como mostra a

figura.


12/104

Programando em HTML


PARGRAFOS

Como vimos no primeiro exemplo, o HTML no quebra ou avana linhasquando pressionamos a tecla Enter, ele s avanar uma linha aps umcomando especfico que mande ele fazer isto.

Existem duas etiquetas que permitem uma quebra de linha, so elas:
e

. A primeira avana uma linha imediatamente aps ser en-contrada, e a segunda fora um novo pargrafo inserindo uma linha embranco separando blocos de texto.

Este comando quebra a linha em determinado ponto, dando continuida-de ao texto em outra linha, no possuindo seu correspondente fecha-mento (etiqueta vazia). J que o navegador quebra linhas automatica-mente de forma a caberem em sua janela, utilizamos o
paraformatar o texto ao nosso gosto.

Pargrafos

Etiqueta BREm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.
No cheguem atrasados.

At l.

Como vimos, esta Tag alm de causar uma quebra da linha, tambmadiciona uma linha em branco. Ela utilizada para criar pargrafos, se-parando blocos de texto que podem ser formatados em conjunto.


13/104

Programando em HTML


Esta etiqueta pode ser utilizada somente no final de um pargrafo oujuntamente com sua correspondente de fechamento (
) envolvendouma regio do texto para formatao. Como a Tag , ela tambmpossui o atributo ALIGN.
O exemplo anterior ficaria da seguinte forma com o uso de

.

Pargrafos

Etiqueta PEm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.


At l.


14/104

Programando em HTML


As duas etiquetas de quebra de linha (BR) e pargrafo (P) tambm po-dem ser combinadas:

Pargrafos

Etiqueta PEm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.


At l.

Repare que a etiqueta
pode estar no meio de uma linha no Bloco denotas que sua funo continuar a mesma. Isto ocorre com outras etique-tas que podem estar em qualquer posio no documento, desde que res-

peitada a ordem de leitura dos comandos. Mas para facilitar a vida do pro-gramador, devemos utilizar deslocamentos do texto separando e agrupan-do os diversos comandos. Este deslocamento conhecido comoedentao, e muito utilizado em outras linguagens de programao.


15/104

Programando em HTML


SEPARADORES

Separadores so linhas horizontais que dividem o documento, desta-cando ttulos e separando diferentes tipos de informao .

Estas linhas podem ser usadas com os atributos de altura (SIZE), largu-ra (WIDTH), sombra (NOSHADE) e alinhamento (ALIGN)

Separadores

SeparadoresEm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.No cheguem atrasados.

At l.


16/104

Programando em HTML


Neste exemplo foi includa a etiqueta , como o nome j diz,centraliza o texto que estiver entre ela e sua correspondente de fecha-mento .

O atributo SIZEdo separador indicado por um valor inteiro de pixels,enquanto que o atributo WIDTHpode ser indicado tanto em pixels quanto

em porcentagem da largura da pgina.Quando um valor absoluto de pixels utilizado, o comprimento da linhapermanecer o mesmo independente da dimenso da janela do navega-dor, enquanto que ao utilizar porcentagem, este comprimento mudar deacordo com o redimensionamento do navegador. O padro para HR100% da largura.

Separadores

SeparadoresLinha de tamanho fixo

Linha de tamanho proporcional


17/104

Programando em HTML


Observe nas figuras anteriores a alterao na largura da linha proporcio-nal quando a janela do navegador foi redimensionada.

FORMATAO DO TEXTO

O texto em uma pgina Web pode ser formatado como se estivssemosem um programa editor de textos, alterando a fonte ou o estilo doscaracteres apresentados. O HTML possui etiquetas que realizam estaformatao sendo necessrio utilizar em todas elas a sua correspon-dente de fechamento, indicando o incio e fim do trecho de texto a serformatado.

Formatao de Caracteres

Os comandos para formatao de texto dividem-se em elementos lgi-cose fsicos. A formatao lgica depende de como o navegador estconfigurado, garantindo uma uniformidade na apresentao de cabea-lhos, pargrafos, listas e outros elementos preconfigurados. Naformatao fsica, so especificados claramente os estilos de texto de-sejado: negrito, itlico, cor, grifado, dentre outros.


18/104

Programando em HTML


Fsica

So utilizadas as seguintes etiquetas para a formatao fsica do texto:

Fonte um pouco menor texto

Fonte um pouco maior texto

Subescrito texto

Sobrescrito texto

Riscado texto

Teletipo - caracteres monoespaados texto Sublinhado texto

Itlico texto Negrito texto

FunoEtiqueta

O programa abaixo mostra o uso de alguns formatadores de texto utiliza-dos no clebre soneto de Cames.

Formatao de texto

Formatadores fsicos

Soneto - 05Amor um fogo que arde sem se

ver,
ferida que di, e no se sente;
um contentamento descontente,
dor que desatina sem doer.

um no querer mais que bem querer;
um andar solitrio entre a gente;
nunca contentar se de contente;
um cuidar que ganha em se perder.

querer estar preso por vontade;
servir a quem vence, o vencedor;
ter com quem nos mata, lealdade.

Mas como causar pode seu favor
nos coraes humanos amizade,

se to contrrio a si o mesmo Amor?

(Cames)


19/104

Programando em HTML


Lgica

Esta formatao utilizada quando se deseja formatar o texto utilizandoum dos padres disponveis. Por exemplo, quando vocformata um tex-to como cabealho no especificado como este texto serapresenta-do pois toda esta definio jesta internamente programada no navega-

dor.

Indica valores que o usurio deverescreverEnfatiza o texto - negritoRepresenta a sada de um programa

Indica uma entrada via teclado

Enfatiza o texto - itlico

Descreve um termo

Indica trechos de cdigo de programa

Destaca citaes, como ttulos de revistas e filmesFunoEtiqueta


20/104

Programando em HTML


Estes formatadores so utilizados da mesma forma que os formatadoresfsicos, devendo o texto que se queira formatar estar entre a etiqueta esua correspondente de fechamento:

texto .

Podemos tambm combinar os diversos comandos de formatao paradeterminado trecho do texto. Desde que observados se as etiquetasesto sendo abertas e fechadas na ordem correta evitando possveiserros na apresentao por alguns navegadores.

Correto: Texto em cdigo e negrito.

Incorreto: Texto em cdigo e negrito.

Caracteres especiais

Caracteres especiais so aqueles que no so interpretados por algunsnavegadores ou no so possveis de serem digitados pelo teclado. Pararepresentar estes caracteres, utilizamos seqncias de escape, indicadaspor trs partes:

1 - o caracter &2 - um nmero ou cadeia de caracteres3 - o caracter ;

Ex: ç= &atilde=

Outro uso para esse recurso quando se deseja utilizar na pgina,caracteres de uso do HTML, tais como: e &.

&&

>>


21/104

Programando em HTML


Na tabela a seguir temos os caracteres mais utilizados pela lngua portu-guesa.

espao&nbsp

CaracterEntidadeCaracterEntidade

importante a utilizao destes caracteres de escape na construo desua pgina, pois garante que ela seja visualizada corretamente por qual-quer navegador no importado a lngua configurada no computador dousurio.

O exemplo seguinte ilustra o uso das seqncias de escape.

Formatao de texto

Caracteres especiaisA etiqueta utilizada para

a edio de documentos HTML.


22/104

Programando em HTML


Blocos

Com o HTML podemos tambm criar blocos de texto destacando-os dorestante da pgina. As etiquetas utilizadas so as seguintes:, e .

Esta etiqueta cria um bloco de texto para endereos, identificando o au-tor do documento. Este bloco pode conter endereo para contato, e-mail,link para a pgina do webmaster e outras informaes a respeito do do-cumento. Ela geralmente colocada no final da pgina.

Address

Esta pgina foi desenvolvida por Marcos: [email protected]


23/104

Programando em HTML


Blockquote destaca um bloco de texto separando-o em um novo par-grafo. Ele pode tanto aparecer em itlico quanto edentado, dependendodo navegador utilizado.

Blockquote

BLOCKQUOTEOs dias esto se passando muitorpido, por isso:

Nunca deixe para realizar as tarefas de sua

responsabilidade
o mais rpido possvel.Tenha isso em mente.


24/104

Programando em HTML


Utilizamos a etiqueta PREpara inserir na pgina um texto com o mesmoformato que ele foi digitado, respeitando os espaamentos, fontes, mar-cas de tabulao e quebras de linha feitas com a tecla Enter, formatandoo texto na tela com uma fonte monoespaada como a Courier. Ela muito til para exibir textos que necessitam deste tipo de fonte como porexemplo: listagens de programas e planilhas.

No entanto, os comandos HTML colocadas entre e se-ro interpretados pelo navegador normalmente.

PrePRE

Populao brasileiraAno Total(mil)

1940 41.2361950 51.9441960 70.0701970 93.1381980 119.0021991 146.825

1996 157.069 Fonte: IBGE


25/104

Programando em HTML


Fonte

A linguagem HTML possui recursos para alterar o tipo, cor e tamanho dafonte utilizada nos textos. Estes recursos so implementados com aetiqueta e seus atributos SIZE (tamanho), FACE (tipo) e COLOR

(cor).

O atributo SIZEdetermina o tamanho da fonte a ser mostrada e varia emnmeros inteiros de 1 at7, sendo o tamanho 3, definido como padro.

Fonte tamanho 3
Fonte tamanho 5
Fonte tamanho 2

O atributo SIZE tambm pode ser incrementado ou decrementado, colo-cando-se um sinal(+ ou -) antes do nmero, baseando-se no tamanho padro de fonte(SIZE=3).

Fonte tamanho 3
Fonte tamanho 5

Fonte tamanho 2Os dois exemplos anteriores apresentam o mesmo efeito de tamanhoda fonte que mostrado na prxima figura.

Com o atributo FACEalteramos o nome da fonte que sermostrada pelonavegador. Caso a fonte especificada no esteja instalada no computadordo usurio, o sistema a substituirpela fonte padro. Mas possvel evitar

esta substituio criando uma lista preferencial de fontes, onde se no forencontrada a primeira, a segunda serutilizada e assim por diante.


26/104

Programando em HTML


Fonte

Meu corao desmaiapensativo,

Cismando em tua rosa predileta.
Sou teu plido amantevaporoso,
Sou teu Romeu... teu lnguido poeta!...
Sonho-te s vezes virgem... seminua...

Roubo-te um casto beijo luz da lua...
E tu s Julieta...

Castro Alves

Por ltimo temos o atributo COLORque especifica a cor do texto. A cor

escolhida utilizando-se o formato hexadecimal, RGB ou uma entre asdezesseis constantes para nome de cor.O formato hexadecimal composto de um nmero nesta base precedi-do pelo caracter #indicando a intensidade de cada cor primria (red,


27/104

Programando em HTML


green e blue) na composio da cor final. Estes valores variam de 00 (0)a FF (255) para cada uma das cores.

Texto na cor violeta azulado

Para usar um dos nomes predefinidos, basta digitar o nome da cor dese-jada.

Texto em verdeTexto em verde oliva

Na tabela a seguir so mostradas os nomes das dezesseis corespredefinidas.

#00FFFFaqua#FF00FFfuchsia

#008080teal#800080purple#0000FFblue#FF0000red

#000080navy#800000maroon

#FFFF00yellow#000000white

#808000olive#808080gray

#00FF00lime#C0C0C0silver

#008000green#000000black

HexadecimalCorHexadecimalCor

No exemplo a seguir mostrado o uso do atributo COLOR, e repare queestsendo usado um encadeamento da etiqueta FONT. A primeira eti-

queta determina a fonte utilizada e o tamanho do texto e as outras deter-minam a cor de cada palavra.

Fonte Cores

Olhe abaixo e diga as CORES, no as palavras.

AMARELO&nbspAZUL&nbsp


28/104

Programando em HTML


LARANJA

PRETO

&nbspCINZA&nbspVERDE

VERDE

&nbspAZUL&nbspVERMELHO
ROXO

LARANJA

AMARELO

Vocencontrou dificuldade pois, o ladodireito do crebro tenta dizer a cor, mas o

lado esquerdo insiste em ler a palavra.

Na listagem anterior foi utilizado o caracter especial &nbsppara inserirum espao a mais entre algumas palavras. A etiqueta FONT inclui umespao automaticamente e caso vocdeseje incluir mais espaos embranco, necessrio utilizar esse caracter especial. Ele tambm tildurante a digitao de um texto qualquer, pois o HTML aceita somenteum espao entre palavras, mesmo que existam 20 espaos no cdigo,na pgina sermostrado apenas um.


29/104

Programando em HTML


Primeiro Segundo Terceiro

Primeiro &nbsp&nbsp Segundo &nbsp&nbsp Terceiro

LISTAS

Em algumas pginas til colocar listas formatadas com itens para enu-merar informaes. Elas podem apresentar resumos do contedo dapgina ou funcionarem como ponto de ligao entre as diversas informa-

es do site (links). O cdigo HTML suporta os seguintes tipos de listas:

Listas no ordenadas, que acrescentando uma marca no incio de cadalinha do texto.

Listas ordenadas, que enumeram cada item com nmeros ou letras.

Listas de glossrio, utilizadas para descrever cada item listado.

Listas no ordenadas

Criamos uma lista no ordenada com duas etiquetas, uma para iniciar alista (UL) e outra para indicar cada linha desta lista (LI). O comando e seu correspondente de fechamento devem envolver to-dos os itens da lista.


30/104

Programando em HTML


Listas

Pases da Amrica do Sul

Argentina BolviaBrasil ChileColmbia EquadorGuiana ParaguaiPeru SurinameUruguai Venezuela

possvel modificar o marcador utilizado neste tipo de lista alterando oatributo TYPEda etiqueta . Existem trs tipos de marcadores: circle,disce square.

Argentina Bolvia Brasil Chile Colmbia Equador


31/104

Programando em HTML


Podemos tambm alterar o marcador de cada linha individualmente,modificando o atributo TYPE da etiqueta .

Peru

Suriname Uruguai

Lista ordenadas

A lista ordenada utilizada quando desejamos enumerar os itens apre-sentados. Ela criada com a tag e sua correspondente de fecha-mento , mais a tag para cada item desta lista, da mesmaforma que na Lista no ordenada.

Listas

Pases da Amrica do Sul com maior rea.

BrasilArgentinaPeru


32/104

Programando em HTML


A etiqueta possui dois atributos: TYPEe START. TYPE determinao estilo de nmero que sermostrado pelo navegador, e possui os se-guintes valores:

1 - nmero decimal: 1, 2, 3, 4, 5, ...

a - alfabeto minsculo: a, b, c, d, e, ...

A - alfabeto maisculo: A, B, C, D, E, ...

i - nmeros romanos minsculos: i, ii, iii, iv, v, ...

I - nmeros romanos maisculos: I, II, III, IV, V, ...

O atributo START indica qual sero ponto de partida da lista.

America do Sul

Pases mais populosos

Brasil

ColmbiaPases menos populosos

Quiana

Suriname


33/104

Programando em HTML


Lista de glossrio

Esta lista tambm chamadas Lista de definio, pois permite incluiruma descrio de cada item listado. A etiqueta marca este tipo delista, que possui mais duas outras etiquetas para indicar o termo a serdefinido () e sua definio ().

IBGEInstituto Brasileiro de Geografia eEstatstica

INSSInstituto Nacional do Seguro Social

EMBRAPAEmpresa Brasileira de Pesquisa Agropecuria

Podemos utilizar este tipo de lista tambm para organizar a pgina, poisele permite uma tabulao bem prtica do texto.


34/104

Programando em HTML


Regies, estados e maiorescidadesSul

Rio Grande do SulPorto Alegre

GravataSanta Catarina

BlumenauJoinvile

ParanCuritiba

LondrinaSudesteCentro-oeste

Como exerccio, complete a lista com cidades e estados do sudeste ecentro-oeste brasileiros.

Aninhando e combinando listas

Podemos colocar uma lista dentro de outra (aninhar) de mesmo tipo oude tipos diferentes, criando uma estrutura hierrquica de itens e subitens.

No aninhamento de listas no ordenadas, o marcador de linha seralte-rado automaticamente a cada sub-lista e tambm cada uma destas serdeslocada mais para direita. Faa o seguinte exemplo:


35/104

Programando em HTML


Aninhamento de listas no ordenadasPrimeiro item principal

Primeiro item secundrio

Segundo item secundrioItem da lista de terceiro nvel

Segundo item principalTerceiro item principal

O aninhamento de listas ordenadas funciona da mesma forma para aslistas no ordenadas, bastando apenas trocar a etiqueta pela .Faa esta troca na listagem anterior e veja o resultado dos dois casos nafigura a seguir.

No aninhamento com os dois tipos de listas cria-se uma estrutura mais

elegante e complicada, sendo necessrio tomar um certo cuidado nomomento de abrir e fechar cada uma das etiquetas de lista. Por isso importante contar as etiquetas de abertura e sua correspondente de fe-chamento para a listas ficarem conforme vocdeseja.

Lista de filiais por ordem de rentabilidade

So PauloSanto AndrSo Paulo


36/104

Programando em HTML


Santo AmaroMoca

Votuporanga

Mato-Grosso

CuiabRondonpolis

GoisGoinia

No cdigo desse exemplo usamos os atributos START da lista ordenadae VALUEda etiqueta para dar uma continuidade classificao dasfiliais na pgina. O atributo VALUE funciona para as linhas da lista orde-nada da mesma forma que START.

A etiqueta possui tambm o atributo TYPEque especifica o tipo de

marcadorou de nmeroque serutilizado, dependendo se ela estemuma lista no ordenada ou ordenada. Faa as seguintes alteraes eveja o resultado:

Santo AmaroMoca..

.GoisGoinia


37/104

Programando em HTML


IMAGENS

Todo bom site possui imagens integradas ao texto. Estas imagens aju-dam a tornar as pginas da Internet mais atraentes para o usurio, moti-vando ainda mais suas visitas.

Mas ao mesmo tempo que ajudam, as imagens podem atrapalhar sevocno escolher adequadamente o seu tamanho de arquivo e em quetipo elas sero salvas. Pois para arquivos de imagem muito grandes, apgina demorarpara ser visualizada, desmotivando com isso o usurioque logo pularpara outro site. Por outro lado se esta mesma imagemfor salva em um formato incorreto ela ficardeformada e feia, apesar deo arquivo ser pequeno. Devido a isto tudo, importante vocconheceralgum programa que trabalhe e salve suas imagens nos formatos acei-tos pela WEB, tais como o Macromedia Fireworks e Adobe Photoshop.

Os formatos aceitos pelos navegadores para arquivos de imagens, com-primem estas a fim de diminuir seu tamanho e tempo de carregamento,so eles : GIF,JPGe PNG.

GIF- o formato utilizado para imagens com poucas cores e altos con-trastes sem perda durante a compresso (lossless), sendo ideal parailustraes, grficos e figuras ou imagens de textos com at256 cores.Estes arquivos podem ser entrelaados permitindo uma visualizaogradativa da imagem indo de uma menor para uma maior qualidade du-rante o carregamento. O formato GIF permite tambm fundos transpa-rentes que causam a impresso de uma integrao maior pgina semdar a aparncia de uma caixa. possvel criar tambm pequenas anima-es utilizando diversas imagens GIF juntamente com um programa quesobrepe estas imagens a tempo regulares e salvas em um nico arqui-vo GIF, formando o que conhecemos como GIF animado.

JPEG- Este formato utilizado para conter imagens que possuem mui-tas cores e uma transio suave entre elas (baixo contraste), como porexemplo fotografias e arte digitalizada. Ele permite vrios graus decompactao com perda (lossey) da imagem, sendo uma maiorcompactao responsvel por uma menor qualidade desta. Este forma-to no muito bom para figuras com poucas cores pois durante acompactao o programa fora uma transio gradativa entre as coresdando ao final a impresso de figuras embaadas.


38/104

Programando em HTML


PNG - Ele o mais novo formato para arquivos grficos utilizados naWEB, suportado somente pelos navegadores da gerao 4 em diante,no sendo visualizado pelos navegadores mais antigos. Os arquivos PNGcombinam as melhores caractersticas do GIF e JPEG, pois permitemtransparncias e podem conter fotografias exibidas com milhes de co-res preservando tambm as cores slidas e ilustraes com texto,compactando as imagens sem perda. Geralmente os arquivos PNG so

maiores que os JPEG da mesma imagem sendo recomendados somentepara imagens com baixo contraste (tons contnuos) que contm transpa-rncias.

Quando colocamos imagens em uma pgina devemos tomar certos cui-dados quanto ao tempo de carga desta pgina. Observando que quantomaior a dimenso e profundidade de cores de uma figura maior serotamanho do seu arquivo mesmo com o uso de um dos trs formatos

descritos acima, tendo sempre como parmetro que uma figura com15Kb leva aproximadamente 6 segundos para ser carregada com ummodem de 28,8Kbps.

A resoluo da imagem outro parmetro importante pois os monitoresconseguem exibir somente figuras com aproximadamente 72 pixels porpolegada, no adiantando portanto, ter uma imagem com 600x600 pon-tos por polegada de resoluo, fazendo apenas o arquivo ficar enorme

sem nenhum benefcio prtico.


39/104

Programando em HTML


INSERINDO IMAGENS

Usamos o elemento IMGpara inserir imagens na pgina na linha de tex-to. Este elemento possui obrigatoriamente o atributo SRCque contm alocalizao da imagem, que pode estar tanto no mesmo diretrio quanto

em qualquer lugar da WEB. O conjunto destes dois elementos formam aetiqueta indicando uma imagem nocdigo HTML.

O URLo local da Internet onde a imagem est- seu endereo, porexemplo: http://www.america.com.br/brasil.gif. Quando a imagem esti-ver no mesmo diretrio que o arquivo HTML, no necessrio indicartodo o endereo bastando apenas informar o nome.

No exemplo a seguir utilizado o comando IMG para exibir as bandeirasde alguns pases. Repare que estas imagens so tratadas pelo navega-dor como se fossem caracteres de texto.

Imagens BANDEIRAS &nbsp&nbsp


40/104

Programando em HTML


ATRIBUTOS

Alm do atributo SRC, o elemento IMG possui outros atributos opcionaisque determinam o tamanho da imagem, seu alinhamento, como seraborda e o espao deixado entre a imagem e outros elementos da pgina.

ALT- Contm o texto que aparece quando o mouse passado sobre aimagem, ou quando ela no carregada pelo navegador.

ALIGN- Determina o alinhamento da imagem em relao ao texto, e slaterais da janela do navegador. Podendo ser: top, middle, bottom, left eright.

USEMAP- utilizado para indicar que a imagem um mapa de ima-gem, e que cada regio dela serum link diferente.

WIDTH- Este atributo determina a largura da imagem em pixel, indepen-dente de seu tamanho original. A imagem sersempre forada a caberna dimenso especificada, se WIDTH for menor que a largura da ima-gem, ela sercomprimida e vice-versa. Ele pode ser dado tanto em valorabsoluto quanto em porcentagem do tamanho da janela.

HEIGHT - Determina a altura da imagem e funciona semelhante aoWIDTH.

BORDER- Especifica a largura da borda da imagem.

VSPACEe HSPACE- Determinam os espaos em branco deixados en-tre a figura e os outros elementos da pgina.

Imagens

BANDEIRASEsta a bandeira do Brasil:.Ela foi criada para a repblica.

A bandeira da Guiana( ) pouco conhecida por ns.


41/104

Programando em HTML


O atributo ALIGN alinha a imagem com relao ao texto utilizando osparmetros top, middle e bottom. Os parmetros left e right alinham aimagem em relao borda da janela. E caso no seja especificado umvalor para o atributo ALIGN, o padro ser: ALIGN=bottom.

Neste prximo exemplo so utilizados outros parmetros de ALIGN e

tambm para borda e espaamentos. Salve-o com o nome deguiana.htm.

Imagens

GUIANA

Antigamente uma colnia holandesa, que passa asercontrolada pelos ingleses em 1815 aps grandesdisputas. Rivalidades entrenegros escravos trazidos pelos holandeses,

indianos trazidos pelos ingleses e indgenasnativos passam a fazer parte do contexto

nacional. Aps a independncia em 1966, do inicio

discusses com a Venezuela e o Suriname a respeitode divisas territoriais, que so resolvidasdiplomaticamente.


42/104

Programando em HTML


Experimente alterar ALIGN=right e os parmetros de VSPACE, HSPACEe BORDER. Altere tambm o alinhamento do pargrafo:

Antigamente uma colnia ...diplomaticamente.

IMAGENS DE FUNDO

A imagem de fundo ou segundo plano elimina o fundo branco ou cinza,trazendo mais vida s pginas. Ela deve ter o formato de um dos tipospermitidos na Web e no ser muito grande, evitando uma demora nocarregamento da pgina.As imagens utilizadas como fundo (background) podem ser de dimen-ses pequenas ou do tamanho total da tela. Quando for pequena, o nave-gador irrepetir esta imagem diversas vezes atcompletar toda a rea


43/104

Programando em HTML


visvel da pgina, enquanto que a de dimenses maiores no serrepe-tida, desde que ela seja maior ou igual a rea visvel da janela do navega-dor.

Mesmo ocupando toda a rea visvel, as diversas cpias das figuras pe-

quenas sero transmitidas pelo servidor apenas uma nica vez, ficandoo navegador responsvel pela sua repetio.

Como exemplo vamos utilizar uma figura pequena chamada fundo1.gif euma maior com o nome de fundo2.jpg.

A figura de fundo adicionada ao cdigo HTML utilizando-se o parmetroBACKGROUNDda etiqueta BODYjuntamente com o URL da imagemdesejada.

Aproveite o exerccio anterior incluindo nele a figura fundo1.gif como fun-do.

Imagens

GUIANA


44/104

Programando em HTML


Utilizando os atributos de BODY podemos definir uma imagem de fundo,como vimos, alterar a cor de fundo do documento e mudar a cor do textoe dos links. As cores so atribudas da mesma forma que feita paramudar a cor da fonte, podendo usar tanto o padro RGB quanto as vari-veis predefinidas.

Os atributos de BODY so:

BACKGROUND- URL da figura de fundo do documentoBGCOLOR- cor de fundo do documentoTEXT- cor do texto, padro=pretoLINK- cor do link, padro=azulVLINK- cor do link visitado, padro=vermelho-prpuraALINK- cor do link ativo

No exemplo a seguir, a figura fundo2.jpg o fundo com o texto em branco(white). Repare que a cor do fundo foi alterada para azul, no caso de oservidor no encontrar a figura de fundo, tornando o texto ilegvel em umfundo padro branco. E as cores dos links no foram alteradas, e nem bom fazer isso, pois os usurios jesto acostumados com as corespadro.


45/104

Programando em HTML


Imagens

GUIANA

IMAGENS MAPEADAS

As imagens mapeadas possuem regies delimitadas pelo cdigo HTMLque servem como referncia ao acesso outros documentos a partir de

um clique sobre cada regio.

Existem trs tipos de delimitao de reas: retangular, circular e poligonal.Para delimitar cada regio, devemos informar um grupo de coordenadasque depende do formato de cada regio escolhida. So elas:

Retngulo= esquerda, topo, direita, base (x1, y

1, x

2, y

2)

Polgono= x1, y

1, x

2, y

2, ..., x

N,y

N(x

1, y

1, x

2, y

2, x

3, y

3)

Crculo= centroX, centroY, raio (x1, y1,r)


46/104

Programando em HTML


Como vimos anteriormente, a Tag IMGpossui o atributo USEMAPindi-cando que a imagem um mapa e qual o nome do mapa de coordena-das ela deverutilizar.

O mapa definido pela Tag que con-tm uma outra Tag responsvel pelas definies de cada regio e suas

coordenadas chamada AREA.

A seguir so apresentados as principais atributos da Tag AREA:

SHAPE - Determina a forma geomtrica da rea, podendo ser: rect,circle, polye default. Default utilizada para indicar o restante da ima-gem.

COORDS- So as coordenadas de cada regio.

HREF - Contm o URL que sersolicitado quando o usurio der umclique na regio delimitada.ALT- Texto alternativo que aparece, caso a figura no possa ser exibidaou quando o ponteiro do mouse ficar parado por alguns instantes sobre aregio.

Faa o exemplo a seguir, utilizando a figura mapa_robo.gifcomo ummapa chamado mapa:

Mapas

Figura mapeada


47/104

Programando em HTML


ALT=nariz>

As coordenadas dessa figura podem ser obtidas atravs do Photoshop ouFireworks, posicionando-se o ponteiro do mouse sobre os vrtices e ano-tando suas coordenadas.

Mais a frente, veremos uma figura mapeada com ligaes para diversaspginas, que sercriada com um programa especfico para mapear figuras.


48/104

Programando em HTML


LIGAES (LINKS)

Os documentos apresentados na Internet possuem o conceito hipertexto,que so pginas a partir das quais podemos acessar qualquer outra p-gina, ou trechos, no importando em que local da Internet ela esteja. O

uso do hipertexto tambm facilita a edio de documentos longos, pois ousurio pode facilmente ir de um ponto ao outro, acessando tpicos ousees com apenas um clique.

Essas ligaes entre documentos HTML so chamadas de hypertextlinksou hiperlinks (ligao de hipermdia) ou simplesmente links. Queso ligaes entre dois pontos, a fonte e o destino.

A fonte de uma hiperligao comumente chamada apenas de link, queo navegador destaca geralmente em azul e sublinhado, indicando queso ligaes de hipertexto. Este linkpode ser qualquer texto ou imagemque ao ser clicado levaro usurio ato destino.

O destino ou ncoraum ponto de referncia de um documento ouendereo que seracessado por um linkquando o usurio der um cliquenele e pode ser de qualquer formato de mdia eletrnica (arquivo de texto,imagem, vdeo, HTML e outros). Existem ncoras para arquivos e paratrechos de documentos.

LINKS PARA ARQUIVOS

ncoras locais so aquelas que esto no mesmo site do link que aschama, ou seja, esto no mesmo diretrio ou em subdiretrios do diretrioonde esto documento principal.

Para construir um link utilizamos a Tag , e seus principais parmetros:

HREF- Contm o URL do documento de destino - o arquivo eletrnico a seracessado.

NAME- Determina o nome do destino a ser acessado por um link - ncora.

link ou; ncora


49/104

Programando em HTML


Vamos agora criar um documento HTML que possui um link para a pgi-na guiana.hmt construda anteriormente.

Pases

PasesA Guiana foi colonizadapelos ingleses.

Caso o arquivo desejado esteja em um diretrio abaixo ou acima, utiliza-mos o mesmo esquema de caminhos parecidos com o DOS, conside-rando o diretrio atual para iniciar as buscas. Suponha a seguinte rvorede pastas:

Se a pgina que estiver na pasta paisescontm um link para uma ima-gemda subpasta america, este link deverter a seguinte sintaxe:

texto

Caso uma pgina na pasta americatenha um link para uma imagem daEuropa, necessrio subir um nvel com ../e depois descer atimagens:

texto


50/104

Programando em HTML


E para subir dois nveis e descer um, se a imagem estiver na pastasimbolos:

texto

Os caminhos para os links criados anteriormente so chamados Links

relativos, pois informam a localizao completa do arquivo desejadotendo apenas como base o diretrio da arquivo ativo. Os links podemconter tambm o caminho completo do arquivo, quando so chamadosLinks absolutos, teis quando tem-se a certeza de que o arquivo dedestino no tersua localizao modificada.

Um exemplo de Link absoluto seria:

Universidade

No parmetro HREF podemos utilizar outros tipos de URL da Internet,tais como o ftp, gopherou um URL para o correio eletrnico, que ao seracionado pelo usurio, abre uma nova mensagem no programa de cor-reio eletrnico do seu sistema, com o destinatrio determinado pelo link.Por exemplo:

Univ Fed do RioGrande do SulDownload

NetscapeMeunome

No link para o correio eletrnico podemos incluir um textos automatica-mente, no campo assunto ou um texto padro.

Para incluir um assunto faa o seguinte:

Convite

E inclua um texto padro na mensagem, acrescentando &BODY=e o

texto, da seguinte forma:Convite


51/104

Programando em HTML


LINKS PARA SEES DE DOCUMENTOS

Alm de acessar arquivos completos atravs de um link, podemos tam-bm acessar sees especficas do documento. Este recurso permiteuma navegao mais rpida em documentos longos, pois atravs do

sumrio, podemos ir direto ao assunto desejado.

Primeiro devemos criar os links e depois nomear um trecho do docu-mento ou imagem como ncora. Siga o exemplo:

Pases

Pases

ArgentinaBrasilGuiana

Argentina

A Argentina um dos pases que fazem fronteiracom o Brasil.

Voltar

Brasil

O Brasil o maior pas da Amrica do sul.

Voltar

Guiana

Athoje a Guiana ainda apresenta problemas defronteiras.

Voltar


52/104

Programando em HTML


Como dito anteriormente, as imagens tambm podem ser links da mes-mo forma que o texto, servindo tanto como origem quanto destino de um

hiperlink.

Altere o ltimo exerccio eliminando a lista inicial para formar outra comcones antes do nome de cada pas, que levaro o usurio para umaseo com a bandeira do pas correspondente.

Pases

PasesArgentina
Brasil
Guiana


53/104

Programando em HTML


Argentina

A Argentina um dos pases que fazem fronteiracom o Brasil.

Voltar

Brasil

O Brasil o maior pas da Amrica do Sul.

Voltar

Guiana


Voltar


54/104

Programando em HTML


Repare que quando a imagem um link, ela envolvida por uma moldurada mesma cor que um link de texto.

Tambm pode existir hiperlink ligando um documento e uma seo deoutro. Vamos supor que no exerccio anterior, os textos sobre os pases

estivessem em outro documento HTML, para acessarmos uma das se-es deste segundo documento necessitaramos construir um hiperlinkcom o atributo HREF contendo o nome do arquivo e sua respectiva se-o:

Divida o exerccio anterior em dois arquivo HTML, um deles scom os

nomes dos pases, chamado: index.htm, e o outro com o restante, cha-mado: texto.htm. Faa as alteraes listadas a seguir.

index.htmPases

Pases

Argentina
Brasil
Guiana

texto.htmTexto

Argentina

A Argentina um dos pases que fazem fronteira

com o Brasil.

Voltar


55/104

Programando em HTML


Brasil

O Brasil o maior pas da Amrica do Sul.

Voltar

Guiana


Voltar

HIPERLINK COM IMAGEM MAPEADA

A imagem mapeada tambm pode ser um link, tendo cada uma de suasregies associada a uma determinada ncora, que pode estar tanto nomesmo documento quanto em qualquer outro lugar na Internet.

No tpico referente imagens, construmos uma imagem mapeada ma-nualmente sem o uso de um programa especfico para isso. Mas destavez iremos utilizar um programa chamado Map This.

O Map Thisum programa freeware que vocencontra no endereoabaixo, ou em algum site de busca.

http://xoom.com/helpcenter/mapthis/mainmenu

Esse programa faz somente o mapa da figura no realizando qualquermodificao nela. Aps a abertura do programa, clique no menu File>>Newe escolha a figura que servircomo plano de fundo do mapa.


56/104

Programando em HTML


Como exemplo escolha a figura mapa_robo.gifutilizada anteriormentecomo modelo de mapa.

Esta programa possui botes na barra de ferramentas associados aosparmetros do atributo SHAPEda tag AREAe outros botes operacionaisque so os seguintes:

- Usado para criar reas retangulares no mapa.

- Cria reas circulares no mapa.

- Usado para criar reas no uniformes que possuem vrios vrti-

ces.

- A Arrow usada para selecionar, mover, editar e redimensionar

reas do mapa.

- Edita as informao da rea selecionada.

- Apaga a rea selecionada.


57/104

Programando em HTML


Para demarcar um retngulo (RECT), clique no boto especfico e arras-te o ponteiro do canto superior esquerdo ato canto inferior direito darea que deseja demarcar. No exemplo, o rosto do rob.

A rea circular (CIRCLE) feita arrastando o ponteiro a partir do centroda regio a ser demarcando atsua periferia.

Um polgono (POLY) demarcado com um clique em cada um dos seusvrtices, fechando ele com um duplo-clique no ltimo vrtice.

Demarque todas as reas do robcomo mostra a figura abaixo. Sendoque o retngulo deverser feito primeiro, pois seno o usurio no teracesso aos crculos que estaro sobrepostos.


58/104

Programando em HTML


Aps demarcar todas reas, clique no boto seta da barra de ferramen-tas e clique-direito em um dos crculos, escolhendo a opo Edit AreaInfodo pop menu.

Na caixa de dilogo Area Setting, determine o URL que serchamado quan-

do for dado um clique nesta rea. E na caixa de texto Internal commentabout this area, escreva o texto alternativo mostrado quando o ponteiroficar sobre a rea ou se a figura no for carregada pelo navegador.

No exemplo iremos construir quatro links, para os seguintes locais: duaspginas, uma figura e uma ncora na mesma pgina. Siga a tabela abai-xo para definir os parmetros de cada uma das reas:

Rostorosto.htmRetngulo

Cabelocabelo.jpgPolgonoNariz#narizPolgono

Olhoolho.htmCrculosComentrioURLObjeto

Aps estas definies Map This nos oferece a possibilidade de testar omapa construdo, onde ao passar o ponteiro sobre uma rea, a URL as-sociada serexibida na barra de status.

A partir do menu Goodies>> Test Map...abra a janela de teste verifi-cando se todas as reas esto corretas e quando estiver acabado o tes-te, clique no boto Done. Caso alguma rea no esteja de acordo comos seus propsitos, basta selecion-la e editar arrastando um dos seuspontos de delimitao ou ento apag-la para fazer uma nova rea.


59/104

Programando em HTML


Quando o mapa estiver do seu gosto, clique no menu File>> Savee na

caixa de dilogo Setting for this Mapfiledo nome cabeca_roboparao mapa, escreva seu nome como autor e na caixa de texto Default URLdigite #forapara ncora quando o usurio clicar em uma regio nomapeada da figura.

Salve o mapa com o nome de cara_robo.htme o formato (File Format)HTML. Feche o Map This e abra o arquivo cara_robo.htm com o seueditor de HTML ou com o Bloco de Notas do Windows. Este arquivo deve

estar parecido com a listagem mostrada a seguir.


60/104

Programando em HTML


COORDS=14,22,26,3,45,12,57,3,76,12,93,3,115, 15,134,2,146,23,14,22,14,22" HREF=cabelo.jpg ALT=Cabelo>

Mas observe que o Map This fez somente o mapa para ns. Agora paratornar este mapa funcional, precisamos indicar qual a figura de base,

como fizemos anteriormente no tpico de figuras, e completar o cdigopara uma pgina completa.

Cabea do rob


61/104

Programando em HTML


HREF=#nariz ALT=Nariz>


62/104

Programando em HTML


TABELAS

As tabelas so utilizadas para controlar vrios aspectos da formataode uma pgina, organizando informaes atravs de linhas e colunas.Com elas podemos criar layouts de pginas utilizando-as para demarcar

regies onde sero colocados textos e figuras.

Uma tabela construda com a tag e que marcamo seu incio e fim. E pelas tags e que informam onde come-am as linhas e colunas.

A tabela construda linha a linha com a tag indicando o incio deuma linha. E para cada coluna nesta linha, utilizamos a tag , for-mando com isso uma clula.

Na listagem a seguir temos o exemplo de uma tabela simples com qua-tro linhas e trs colunas. Digite este cdigo complementando-o com oselementos bsicos de uma pgina HTML.

PasPopulaorea

Argentina34.0002.780

Brasil157.0708.547


63/104

Programando em HTML


Colmbia35.7001.140

A tag TABLE possui os atributos BORDER, que determina a espessura

das bordas da tabela em pixel, e ALIGN, que informa a posio de exibi-o da tabela no navegador.

As tags TD e TR possuem dois atributos que determinam o alinhamentodo texto para toda a linha (TR) ou somente para determinada clula (TD).Um deles, o ALIGNinforma o alinhamento horizontal e o VALIGNdeter-mina o alinhamento vertical.

BORDER= pixel

ALIGN= [ left | center | right ] (valores para a tag TR)

ALIGN= [ left | center | right | justify ] (valores para a tag TD)

VALIGN=[ top | middle | bottom ]

Quando o atributo BORDER informado sem nenhum valor, o navega-dor constri a tabela com borda igual a um pixel.

Altere o cdigo da pgina anterior implementando os recursos de borda ealinhamento. No prximo exemplo temos tambm como novidade a tag que utilizada para construir clulas da mesma forma que a tag, informando que a clula um ttulo, centralizando e colocandonegrito em seu contedo.


64/104

Programando em HTML


PasPopulaorea

Argentina

34.0002.780

Brasil

157.0708.547

Colmbia35.7001.140


65/104

Programando em HTML


Uma clula pode conter texto, figuras, figuras mapeadas e qualquer ou-tro objeto permitido em uma pgina HTML. Para inserir uma imagem naclula, basta utilizar a tag IMG logo aps a tag TD.

ANINHANDO TABELAS

As tabelas tambm podem ser aninhadas, contendo uma tabela dentrode outra e assim sucessivamente. Fazemos isso colocando a definiode uma tabela dentro de uma clula.

contedo da segunda tabela

contedo da terceira tabela

Inclua mais algumas linhas no exemplo anterior, para colocar a nossaprimeira tabela dentro de uma tabela maior sem bordas, contendo umaclula com uma imagem.

Pas


66/104

Programando em HTML


Populaorea

Argentina

34.0002.780

Brasil

157.0708.547

Colmbia35.700

1.140

Enquanto construmos tabelas aninhadas, muito importante observar-mos a abertura e fechamento de cada uma delas para uma perfeita

visualizao. E tambm prestar bastante ateno quantidade de colu-nas de cada tabela, pois para cada linha teremos que ter o mesmo n-mero de colunas ou clulas que nas outras linhas da mesma tabela.


67/104

Programando em HTML


MESCLANDO CLULAS

Em uma tabela HTML podemos mesclar clulas umas com as outras damesma forma que no editor de texto. As clulas da tabela so mescla-dos quando usamos os atributos ROWSPANe COLSPANdas tags TD e

TH.

ROWSPAN= nmero

COLSPAN= nmero

Quando vocdesejar que uma determinada clula ocupe duas ou maislinhas necessrio utilizar o atributo ROWSPAN juntamente com a tagTD informando quantas linhas esta clula ocupar.

Altere a pgina do nosso exemplo incluindo mais uma coluna com uma

clula mesclando duas linhas.

PasPopulaoreaIdioma

Brasil

157.070

8.547Portugus


68/104

Programando em HTML


Argentina

34.0002.780

Espanhol

Colmbia35.700

1.140

Na listagem anterior a clula que contm o mapa est com a cor defundo alterada pela atributo BGCOLOR. Na tag TD este atributo funciona

da mesma forma quando o usamos para colorir o fundo da pgina. Astags TABLE e TR tambm podem ter sua cor de fundo alterada, sendoque altera a cor de toda tabela, e altera a cor de fundo da linha. A definio de cor paraa clula sobrepe a cor da linha que por sua vez sobrepe a cor dadapara a tabela.

Como dito anteriormente, as clulas podem ser mescladas ocupando,alm de linhas, duas ou mais colunas utilizando-se o atributo COLSPAN.


69/104

Programando em HTML


No exemplo a seguir, utilizamos vrias cores para cada uma das tagsque compem a tabela e mesclamos duas clulas em linha e mais duasem coluna..

Pas

IdiomaPopulao(mil)rea(mil Km2)

BrasilPortugus

157.0708.547

Argentina

Espanhol34.000

2.780

Colmbia35.700

1.140

Total226.77012.467


70/104

Programando em HTML


ALTERANDO DIMENSES

Quando uma tabela criada, as dimenses das linhas e colunas sodeterminadas pelo maior contedo existente na clula. Na clula quecontm o mapa, ela que especifica a altura de toda a linha, e nas colu-nas Populaoe reaso os ttulos que determinam a largura de to-das as linhas abaixo deles.

Para alterar o tamanho das clulas e da tabela utilizamos o atributoWIDTH, que pode ser informado em porcentagem ou em pixels. Sendoque na tag TABLE a largura proporcional em relao dimenso da

janela do navegador e na tag TD esta proporo em relao largurada tabela.

O uso das larguras proporcional e absoluta mostrado nos dois exem-plos a seguir.

Exemplo 1

&nbsp A B C

1 Clula A1 Clula B1 Clula C1



71/104

Programando em HTML


A linha da tabela pode ter sua altura modificada pelo atributo HEIGHTfuncionando da mesma forma que WIDTH.

Exemplo 2

&nbspA B C


2 Clula A2Clula B2 Clula C2

Para afastar uma clula de outra usamos o atributo CELLSPACINGjun-

tamente com um nmero que determina a distncia entre elas. O atribu-to CELLPADDINGcausa o afastamento do contedo da clula e suaborda, indicado tambm por um nmero de pixels.


72/104

Programando em HTML


&nbsp A B C


2 Clula A2Clula B2 Clula C2

Em algumas tabelas temos a necessidade de incluir uma legenda naparte superior ou inferior delas para mostrar um ttulo ou a fonte dos seusdados. Em uma pgina HTML as legendas so feitas pela tag CAPTIONcolocada dentro de uma definio de tabela ( ... ).Esta tag possui o atributo ALIGN e seus seguintes valores:

ALIGN=[ top | bottom | left | right ]

AMRICA DO SULPopulao em mil habitantes
rea em mil Km2MAIORES

MENORES

Pop.157.070


73/104

Programando em HTML


Pop.410rea8.547rea163

Pop.34.000

Pop.3.220rea2.780rea176

IMAGEM DE FUNDO

Para inserir uma imagem de fundo numa tabela, utilizamos o atributoBACKGROUND

com seu valor igual o URL da imagem desejada, comoutilizado para pgina.

No exemplo seguinte, estsendo utilizado o atributo BACKGROUNDpara colocar uma imagem no fundo da tabela e tambm links sob o mapade cada pas que levaro o usurio para pginas especficas.

AMRICA DO SUL

Populao em milhabitantes
rea em mil Km2MAIORES

MENORES

BrasilPop.157.070
SurinamePop.410

rea8.547rea163

Argentina


74/104

Programando em HTML


Pop.34.000
UruguaiPop.3.220

rea2.780rea176


75/104

Programando em HTML


FRAMES

Frame ou moldura um recurso da linguagem HTML que permite aonavegador exibir duas ou mais pginas simultaneamente na mesma ja-nela. Caso voctenha a necessidade de exibir uma pgina contendo a

apresentao da empresa e uma lista de seus produtos e mais umapgina para cada produto, o usurio teria que voltar para a pgina deapresentao se desejasse ver outro produto.

Com o uso do frame, a lista de produtos poderser constantementeexibida enquanto o usurio visualiza os produtos em uma outra moldurana mesma janela do navegador.

Para construir uma pgina com a estrutura mostrada na figura acima, necessrio construir na verdade trs pginas HTML, sendo uma princi-pal (frame.htm) com as definies de frame e as outras duas com ocontedo de cada frame (frame1.htm e frame2.htm).Inicialmente vamos construir quatro pginas sem a utilizao de frames,

com os recursos de navegao vistos at agora. Partindo da pginamenu.htm poderemos acessar as pginas empresa.htm, produtos.htmeservicos.htme a partir delas o menu novamente.


76/104

Programando em HTML


menu.htm

Menu

Menu

Empresa

Produtos

Servios

empresa.htm

Empresa

EMPRESA

Somos empresa que vem atuando nomercado nacional oferecendosolues para o ramo de

veculos. Com uma poltica de

Qualidade e Tecnologia enfrentamos com otimismoe

confiana todos os obstculos,

pois

o desafio para oferecer a melhorsoluo nos motiva a crescer cada

vez mais.

menu

produtos.htm

Produtos


77/104

Programando em HTML


PRODUTOS

Vendemos o que h&aacute

de

melhor no mercado global.

MOTORRODAS

VirabrequimGota

Correia

Beca

Vela

Estrela

menu


78/104

Programando em HTML


servicos.htm

Servios

SERVIOS

Ns oferecemos a melhororientao aos nossos clientes na

escolhe do produto que melhor atende s

suasexigncias. Alm de dar

manuten&atildeo permanente e por toda vida

de nossos produtos sem nenhum custo adicional.

menu


79/104

Programando em HTML


Antes de trabalhar com frames necessrio um planejamento prvio decomo sero lay-out da pgina e de que modo os frames estaro. Nesteplanejamento devero ser determinadas as dimenses de cada frame,bem como se a janela do navegador serdividida em colunas, linhas ouuma combinao de ambas.

Aps o planejamento, o arquivo principal ser formado pela tage sua correspondente de fechamento ,contendo entre elas as definies de diviso e contedo da pgina. Estatag possui os seguintes atributos:

COLS= [ pixel | % | * ] Determina o tamanho e quantidade dascolunas.

FRAMEBORDER= [ 0 | 1 ] Se igual a 0, no exibe bordas.

FRAMESPACING= [ pixel ] Espao entre os frames.ROWS= [ pixel | % | * ] Determina o tamanho e quantidadedas linhas.

Os valores dos atributos COLS e ROWS podem ser um nmero inteiroem pixel, uma porcentagem do espao vertical ou horizontal, ou um com-primento expresso como i*, onde ium nmero inteiro.Na rea da janela, o navegador primeiro destina dimenses em pixel e

porcentagem, ento divide o espao remanescente entre todos elemen-tos com dimenses relativas. Para um elemento com comprimento de3* serdestinado o triplo do espao de um elemento com comprimento1*. O valor * equivalente a 1* e muitas vezes usado para preencher oespao restante da janela.

Para indicar o contedo de cada frame, utilizamos a tag jun-tamente com seu atributo SRCinformando que pgina sercarregadadentro do frame. A tag FRAME substitui a tag BODY dos documento

HTML normais.

Frame


80/104

Programando em HTML


Na listagem anterior apesar de as dimenses serem exatas, o navega-dor irpreencher toda sua janela com os trs frames nas proporesindicadas pelos valores absolutos. Neste exemplo poderamos, ento,ter usado na linha do FRAMESET o asterisco no dimensionamento doltimo frame para ocupar o restante da janela, ao invs de um valor abso-luto. Altere o exemplo e redimensione a janela do navegador.

A listagem a seguir constri uma pgina com dois frames em linha, sen-do que um possui o triplo da altura do outro.

Frame


81/104

Programando em HTML


COMPOSIES COM FRAMES

Para dividir uma janela com frames em linhas e colunas, necessriocombinar estes frames inserindo uma definio de frame (FRAMESET)dentro de outra, na posio de uma tag FRAME normal.


82/104

Programando em HTML



83/104

Programando em HTML


Faa o prximo exemplo que cria uma pgina com duas linhas de frames,sendo a linha superior dividida em duas colunas de frames.

Frame

A tag FRAME possui alm do atributo SRC, os seguintes atributos:

NAME- Nome do frame para sua identificao quando se usa o atributoTARGET.

SRC- Endereo (URL) do contedo do frame.

FRAMEBORDER= [ 1 | 0 ] - Se igual a 1, o frame terborda.

MARGINWIDTH- Largura da margem em pixel

MARGINHEIGHT- Altura da margem em pixel

NORESIZE- Quando usado, no permite o redimensionamento do frame

SCROLLING= [ yes | no | auto ] - Exibe ou no as barras de rolagem.


84/104

Programando em HTML


Faa os dois exemplos a seguir para ver a utilizao desses atributos,faa tambm testes com outros valores e atributos em linhas diferentesdas mostradas.

Exemplo 1

Frame

Exemplo 2

Frame


85/104

Programando em HTML


LIGANDO FRAMES

Atagora trabalhamos com frames exibidos de uma forma independenteuns dos outros, criando um documento principal que exibe outros emmolduras separadas, sem nenhuma ligao um com o outro.

Para fazer esta ligao devemos primeiro nomear cada frame no arquivoprincipal para depois com o atributo TARGETpoder apontar o link para oframe desejado. Este atributo pertence s tags BASEe A.

A tag BASEdeve ser localizada no cabealho da pgina, sendo respon-svel por informar ao navegador qual sero documento base vinculadoaos links da pgina, que pode ser tanto um frame quanto uma outra URL.Seus atributos so:

HREF = URL

TARGET = Frame


86/104

Programando em HTML


No prximo exerccio faa uma arquivo principal definindo o nome dosframes, e altere os quatro arquivos j construdos (menu.htm,servicos.htm, produtos.htm e empresa.htm).

O arquivo vazio.htm contm somente as definies bsicas de uma p-

gina HTML. Ele usado para o Netscape no abrir os documentos emoutro frame seno o frame de nome conteudo.

Documento principal

Frame

menu.htm

Frame

Menu

Empresa

Produtos

Servios

servicos.htm

empresa&nbsp&nbsp

produtos


87/104

Programando em HTML


Observe que na pgina servicos.htmo link empresa possui o seu atri-buto TARGETapontando para o frame menu, ou seja, quando o usurioder um clique nele, a pgina empresa.htmsercarregada no lugar ocu-pado pela pgina menu.htm.


88/104

Programando em HTML


ENCADEANDO FRAMES

Fazemos encadeamento de frames carregando um arquivo com defini-es de frameset dentro da tag FRAME de outro arquivo. Este recurso semelhante ao utilizado quando desejamos encadear tabelas, colocan-

do uma tabela dentro da clula de outra.

frame.htm

subframe.htm

Partindo do exerccio anterior iremos exibir uma pgina com definies deframes no lugar da pgina produtos.htm. Esta nova pgina terum framesuperior com links para pginas que sero exibidas no frame inferior.

Inicie alterando a linha do arquivo menu.htm que abre a pgina produto.htmfazendo ela apontar para a nova pgina:


89/104

Programando em HTML


Empresa

ProdutosServios

Construa o cdigo da pgina produtos_b.htmque contm a definiodos frames:

produtos_b.htm

Frame

Nos dois frames da pgina produtos_b.htm sero carregados quatro ar-quivos. Um deles no frame superior - menu_produtos.htm e os outros

trs no frame inferior - produtos_inicio.htm, motor.htm e rodas.htm.

menu_produtos.htm

Motor

Rodas

produtos_inicio.htm

PRODUTOS

Vendemos o que h&aacutede melhor no mercado global.


90/104

Programando em HTML


motor.htm

MOTOR

Virabrequim

Correia

Vela

rodas.htm

RODAS

Gota

Beca

Estrela


91/104

Programando em HTML


FORMULRIOS

Os formulrios so bastante utilizados nos sites da Web, pois atravs de-les possvel coletar informaes de vrias pessoas, solicitar a opiniodos visitantes, fazer uma votao onde os visitantes escolhem entre um

item e outro, etc, assim, podemos concluir que os formulrios permitemcoletar informaes dos usurios. As respostas fornecidas pelos visitan-tes so armazenadas, e depois vocpode acess-las e compar-las.

Mas para que este formulrio funcione, preciso que no servidor tenhaum programa, escrito em outra linguagem, responsvel em receber eprocessar o formulrio.

Obs: Neste curso serensinando apenas a linguagem HTML referente criao e envio do formulrio.

OS OBJETOS DE FORMULRIOS

Os formulrios so compostos por vrios objetos, onde uns oferecemopes para serem clicados e outros exibem campos de texto editveis(atravs da utilizao de comportamentos, vocpodervalidar as infor-maes digitadas pelo usurio). A prxima figura exibe um simples for-mulrio que foi criado em uma pgina.


92/104

Programando em HTML


Os itens numerados na figura anterior representam alguns objetos deformulrio, os quais so denominados:

1, 2 e 5Campo de texto3 e 4Menu de lista

6 - Botes de opo7 - rea de texto8 e 9 - Botes de comando

Alm desses quatro objetos, ainda temos: caixa de seleo, campo dearquivos, campo de imagens, campo oculto e menu de salto.

Campos de texto: tambm chamados caixas de texto, so utilizadospara coletar informaes dos usurios, onde estes podero digitar qual-quer tipo de texto: alfabtico ou numrico. O texto digitado exibido emuma linha simples.

Botes: realizam tarefas quando so clicados, ou seja, so aquilo quefaz o formulrio fazer algo, como enviar as informaes e redefinir osdados dos formulrios.Campos de imagens: podem ser utilizados no lugar do boto Enviar,onde este pode ser substitudo por um boto de imagens.Caixas de seleo: permitem que o usurio faa uma ou mais seleesem um conjunto de opes.Botes de opo: enquanto as caixas de seleo podem aparecer indi-vidualmente ou em grupos, os botes de opo aparecem sempre emgrupos. A seleo de um dos botes do grupo cancela a seleo detodos os outros.

Menus de lista: apresentam um conjunto de valores que os usuriospodero escolher.Campos de arquivos: permitem que o usurio procure os arquivos nosdiscos rgidos, carregando-os como dados do formulrio.Campos ocultos: permitem armazenar informaes (como o destinat-rio dos dados do formulrio ou o assunto do formulrio) que no foremrelevantes ao usurio, mas que sero utilizadas pelo aplicativo que pro-cessa o formulrio.Menu de salto: permite inserir um menu no qual cada opo se vinculaa um documento ou arquivo.

rea de texto: uma caixa de texto onde o usurio pode digitar inmerapalavras com linhas mltiplas (exibem uma barra de rolagem).


93/104

Programando em HTML


INSERINDO OBJETOS

Para construirmos um formulrio utilizamos a tag e sua cor-respondente de fechamento . entre elas que sero coloca-dos os elementos que formam um formulrio interativo.

A tag FORM possui os seguintes atributos:

ACTION= URL Especifica o endereo onde esto programa queirprocessar o formulrio

METHOD= [get | post]Indica o mtodo utilizado pelo servidor paraprocessar o formulrio

Um campo para entrada de dados definido com a tag , tendoos dados digitados pelo usurio atribudos a uma varivel com nome etipo especficos. Esta tag possui os seguintes atributos:

TYPE = [ text | password | checkbox | radio | submit | reset | file | hidden |image | button ]

text- Campo de texto.password - Campo texto que mostra astericos no lugar do texto

digitado.checkbox- Caixa de seleo.radio- Boto de opo.submit- Boto para envio dos dados do formulrio.reset- Boto que apaga os textos do formulrio.file- Campo de arquivo.hidden- Campo de arquivo.image- Campo de imagem.button- Boto de comando.

NAME = varivel- Nome da varivel que recebero contedo do campo.VALUE = texto- Representa o valor padro do campo.CHECKED- Seleciona o campos do tipo checkbox.SIZE = nmero- Define o tamanho do campo, sugerindo um nmero de

caracteres.


94/104

Programando em HTML


MAXLENGTH = nmero- Nmero mximo de caracteres para a entra-da de texto

Inicialmente vamos criar uma pgina que envia somente o nome do usu-rio guando este clicar no boto Enviar.

Formulrio

Os botes de opo so feitos informando o mesmo nome de varivelpara todos do mesmo grupo mas com valores diferentes.

Opes de uso da Internet:

Estudo

Pesquisa

Trabalho

Lazer


95/104

Programando em HTML


A caixa de opo funciona semelhante ao boto de opo, com a diferen-a de poder ter mais de um campo selecionado ao mesmo tempo.

Possui em sua casa:

Geladeira
Automvel
Televiso

O menu de lista criado com as tags ..., quedefine a lista e seu comportamento, e , que define os ele-

mentos de escolha da lista. Numa lista o usurio escolhe um ou maisitens aps dar um clique na sua seta.


96/104

Programando em HTML


A tag SELECT possui os seguintes atributos:

NAME= varivel- Nome da varivel que recebero contedo do campo.

MULTIPLE- Permite selees mltiplas

SIZE= nmero- Define o nmero de opes visveis na lista.

Data da nascimento:

01

02

03

04

05

Janeiro

Fevereiro

Maro

Criamos uma rea de texto com a tag ...eseus atributos:

NAME= varivel- nome da varivel que recebero contedo do campo.

COLS= nmero- especifica a largura da caixa de texto.

ROWS= nmero- especifica o nmero de linhas da caixa (altura).

Dentro da tag TEXTAREA podemos incluir um texto padro para ser exi-bido ao usurio.

Sugestes

Digite aqui suas sugestes

A maioria dos provedores nos oferece pronto um scrip que envia as res-postas do formulrio para um e-mail especificado e exibe uma pgina deagradecimento ao usurio. Este scrip recebe valores de campos ocultos


97/104

Programando em HTML


(hidden) no formulrio e que indicam os endereos da pgina de agrade-cimento e do e-mail de resposta.

Na listagem a seguir temos o cdigo completo da primeira ilustraodeste tpico, repare os valores do atributo ACTIONe dos campos ocul-

tos emaildestinoe resposta:

Formulario

E-mail:

0102

03

04

Janeiro

Fevereiro

Maro


98/104

Programando em HTML


SIZE=6">

Opes de uso da Internet:Estudo

PesquisaTrabalhoLazer

Comentrios:


99/104

Programando em HTML


FAZENDO O FORMULRIO FUNCIONAR

Toda vez que um usurio preenche os campos do formulrio e clica noboto Enviar, os dados vo para o servidor na forma de uma string (ca-deia de caracteres) agrupados em pares. Cada um desses pares possui

o nome da varivel e o seu valor que o script CGI (ou outro script perso-nalizado) recebe para ser executado, pois sassim vocpoderrecupe-rar e acessar os dados resultantes do formulrio.

varivel1=valor1&varivel2=valor2 ... &variveln=nome

n

Os formulrios so enviados por um dos dois mtodos: GET, que enviaos resultados do formulrio no URL enviado para o script; e POST, quecodifica o material enviado para o script. Consulte seu programador ouadministrador de sistema para vocsaber determinar qual mtodo deveser utilizado.

Aps o usurio preencher o formulrio e der um clique no boto Enviar,este serencaminhado ao seu provedor de hospedagem e l, o scriptCGI recebendo a string com os valores da variveis, enviarum e-mailpara vocda seguinte forma:


100/104

Programando em HTML


Form ResultsThis form was submitted with a method of

POST

The URL it was posted from: http://www.dominio.com.br/formulario.htm

The host that posted it: 200.193.220.27 (200.193.220.27)

Location of Thank You Page: http://www.dominio.com.br/grato.htmEmail Results to: [email protected]

Submit Date: Sun Sep 24 22:19:13 EDT 2000

Form Values

Variable nome= Hamilton LuizVariable campoemail= [email protected] data= 03Variable mes= MaroVariable ano= 1968Variable opcao= lazerVariable comentarios = Gostei muito do

que existe no seu site. Mas a parte visualdeixa a desejar.


101/104

Programando em HTML


EXERCCIOS

1. Quais os componentes bsicos de um programa HTML?

2. Para editar um programa HTML que ferramentas so necessrias?

3. Que comando utilizado para inserir linhas em branco e quebra delinha?

4. O que so tags ou etiquetas?

5. Quais as tags alteram o estilo do texto para negrito e itlico?

6. Crie uma pgina semelhante mostrada na figura.

7. Qual a tag utilizada para alterar a fonte do texto e seus atributos?

8. Construa uma pgina utilizando vrios atributos da tag do exerccio

anterior.

9. Faa uma pgina com cabealho, texto na cor branca e fundo navy,tendo o seguinte texto:

Existem diversas maneiras e promover o um site.Vocpode distribuir panfletos, anunciar em jornais e revistas ouainda a velha divulgao boca-a-boca.

10. Quais os tipos de lista podemos criar com HTML e que tags so

utilizadas?

11. Faa o cdigo da lista mostrada a seguir.


102/104

Programando em HTML


12. Complemente a lista anterior colocando pequenas definies em cadaum dos itens.

13. Altere a lista de forma que ela exiba pequenos quadrados no lugardos nmeros.

14. Quais os tipos de imagens podemos carregar em uma pgina deInternet?

15. Quando usar cada um desses tipos?

16. Como fazemos para inserir uma figura na pgina?

17. Faa a seguinte pgina, utilizando as figuras brasil.gif e fundo1.gif:

18. Aumente a largura e diminua a altura da figura central, colocandoalgum texto antes e depois dela.

19. Faa uma pgina com a bandeira Argentina e um texto do lado direitodessa bandeira.

20. O que um hyperlink, e com fazemos um em HTML?

21. Mapeie a bandeira do Brasil, e faa ela ter links para pginas com a

descrio de suas partes.22. Continuando com o exerccio anterior, crie uma lista abaixo do mapa

com o nome de estados brasileiros, e links para uma rpida descri-o de cada estado na mesma pgina.

23. Quais as tags utilizadas para a confeco de tabelas em HTML?

24. Monte uma tabela com borda espessa, fundo vermelho e letras bran-cas, conforme a figura.


103/104

Programando em HTML


25. Coloque uma legenda na tabela anterior e mais uma coluna comfigura que ocupe todas trs linhas.

26. Altera as dimenses da tabela para que todas colunas tenhas a mes-ma largura.

27. O que frame e como ele implementado em HTML?

28. Faa uma pgina com a seguinte estrutura de frames.

29. Ponha no frame Alinks para abrir pginas nos outros frames.

30. Em uma das pginas carregadas no frame B, faa um link que abrauma pgina em Dque tenha mais dois frames.

31. Crie um formulrio que obtenha os dados pessoais do usurio, e al-guns gostos pessoais utilizando todos os objetos de formulrio vistos.


104/104

Celta Informtica

http://www.celtainformatica.com.br

00293 - programando em html

Documents