Programando em HTML

Sumrio
INTRODUO _________________________________ 3
EDIO DE DOCUMENTOS __________________________________ 4
COMANDOS DE HTML ___________________________________ 5
ATRIBUTOS ____________________________________________ 5
COMENTRIOS __________________________________________ 6
COMPONENTES BSICOS ___________________________________ 6
CRIANDO UM DOCUMENTO _________________________________ 7
HTML BSICO _________________________________ 9
CABEALHOS ___________________________________________ 9
PARGRAFOS __________________________________________ 12
SEPARADORES _________________________________________ 15
FORMATAO DO TEXTO _________________________________ 17
FORMATAO DE CARACTERES _____________________________ 17
BLOCOS _____________________________________________ 22
FONTE _______________________________________________ 25
LISTAS _______________________________________________ 29
ANINHANDO E COMBINANDO LISTAS _________________________ 34
IMAGENS_____________________________________ 37
INSERINDO IMAGENS _____________________________________ 39
ATRIBUTOS ___________________________________________ 40
IMAGENS DE FUNDO _____________________________________ 42
IMAGENS MAPEADAS ____________________________________ 45
LIGAES (LINKS) ____________________________ 48
LINKS PARA ARQUIVOS __________________________________ 48
LINKS PARA SEES DE DOCUMENTOS _______________________ 51
HIPERLINK COM IMAGEM MAPEADA _________________________ 55
TABELAS _____________________________________ 62
ANINHANDO TABELAS ___________________________________ 65
MESCLANDO CLULAS ___________________________________ 67
ALTERANDO DIMENSES __________________________________ 70
IMAGEM DE FUNDO ______________________________________ 73
FRAMES______________________________________ 75
COMPOSIES COM FRAMES ______________________________ 81
LIGANDO FRAMES ______________________________________ 85
ENCADEANDO FRAMES ___________________________________ 88
FORMULRIOS _______________________________ 91
OS OBJETOS DE FORMULRIOS ____________________________ 91
INSERINDO OBJETOS ____________________________________ 93
FAZENDO O FORMULRIO FUNCIONAR _______________________ 99
EXERCCIOS ________________________________ 101
Programando em HTML
Pgina: 3
Celta Informtica - F: (11) 4331-1586
INTRODUO
Antes de iniciar este curso importante que voc saiba o que World
Wide Web (www), consiga operar um navegador (browser) e o que
uma homepage. Porm no necessrio que voc conecte-se Internet
para poder ver as pginas que est editando.
A HTML (HyperText Markup Language) uma linguagem utilizada para a
edio de documentos da Web que possui etiquetas para formatar o tex-
to e figuras que sero apresentados pelo navegador e cria ligaes entre
pginas, criando o conceito de hipertexto. Ela composta por comandos
colocados entre parnteses angulares (< e >). Estes comandos so
chamados 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, o
servidor envia para ele o arquivo html que o navegador se encarregar de
interpretar e exibir a pgina solicitada.
Programando em HTML
Pgina: 4
EDIO DE DOCUMENTOS
Um documento HTML pode ser criado utilizando um simples editor de
textos como o Bloco de Notas do Windows ou um editor de HTML que
possui atalhos para os comandos e insere automaticamente as etique-
tas, orientando na digitao dos seus elementos, e aumentando muito a
produtividade. Existem atualmente editores do tipo WYSIWYG (what you
see is what you get - o que voc v o que voc quer) que permitem a
construo 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 que
interessa voc se familiarizar bastante com as tags HTML e caso
utilizassemos algum editor, estas tags seriam colocadas automaticamen-
te prejudicando o seu aprendizado.
Programando em HTML
Pgina: 5
Comandos de HTML
Como voc j sabe, um documento HTML possui tags que informam
como a pgina ser exibida pelo navegador. A maioria dessas tags pos-
suem tambm sua correspondente de fechamento:
<tag> texto formatado </tag>
Este fechamento necessrio porque estas tags servem para definir a
formatao de uma poro de texto, e por isso devemos marcar onde
comea 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:
<tag>
Todas as tags possuem atributos que podem ser utilizados ou no, de-
pendendo da formatao desejada para o texto. Eles definem alguma
caracterstica especial e so colocados na etiqueta inicial.
<tag atributo1=valor1 atributo2=valor2> texto formatado </tag>
As tags HTML no so sensveis caixa, ou seja, tanto faz escrev-la
com letras maisculas ou minsculas. Sendo assim, <FONT>, <Font>
ou <font> so a mesma coisa.
Atributos
Um atributo define vrias propriedades para uma tag. Por exemplo, a tag
<FONT COLOR=red> texto </FONT> possui o atributo COLOR que
determina qual ser a cor da font utilizada no texto.
O atributo sempre includo na tag inicial e nunca na tag final, e o seu
valor delimitado por aspas simples ou duplas. Estas aspas so opcionais
se o valor do atributo consistir somente de letras (a-z), dgitos (0-9), hfen
e ponto. O nome dos atributos no so sensveis a caixa mas seus valo-
res podem ser.
Programando em HTML
Pgina: 6
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 <!, e termina com >, no
podendo ser utilizados dentro do comentrio. Por exemplo:
<! Este texto um comentrio >
Componentes bsicos
A estrutura bsica de um documento HTML a seguinte:
<HTML>
<HEAD>
<TITLE>Titulo do Documento</TITLE>
elementos opcionais
</HEAD>
<BODY>
textos,imagens,links
</BODY>
</HTML>
A etiqueta <HTML>...</HTML> marca o incio o final do documento HTML,
e entre ela existem as sees de cabealho (head) e corpo (body) do
documento.
O cabealho delimitado por <HEAD>...</HEAD> e contm informa-
es sobre o documento e seu contedo que podem ser recuperados
por robs de busca na Internet, e no sero exibidos na pgina.
A principal informao contida no cabealho o ttulo do documento que
aparece na barra de ttulo do navegador e est delimitado pela etiqueta
<TITLE>...</TITLE>. 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).
Programando em HTML
Pgina: 7
O corpo do documento contm todas as informaes que sero exibidas
pelo navegador, tais como: cabealhos, pargrafos, imagens, listas, ta-
belas e links. Ele est delimitado pela etiqueta <BODY>...</ BODY>.
Criando um documento
Para iniciar e edio de um documento, abra o Bloco de notas do Windows
e digite o texto mostrado a seguir.
Salve este documento com o nome de modelo.htm, para no ter que
digitar toda estrutura bsica novamente a cada novo documento.
Aps salvar, inclua um ttulo e algum texto no corpo do documento. Salve
o arquivo com o nome de primeiro.htm, utilizando a opo Salvar como...
do menu Arquivo, no esquecendo de informar a extenso .htm ou o
arquivo ser gravado como .txt. Observe a figura.
Programando em HTML
Pgina: 8
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 da
pgina.
Programando em HTML
Pgina: 9
Na caixa de lista do endereo informado o local do arquivo no computa-
dor, quando esta pgina for publicada, ou seja, gravada em um servidor
Web, 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 de
ter sido pressionada a tecla Enter aps a digitao da palavra pgina no
Bloco de notas. Isto ocorre porque o navegador no recebeu uma instru-
o para quebrar a linha ou qualquer outra que modificasse o texto, ele
apenas exibiu o que estava na tag <BODY>.
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 formatar
o texto, inserir figuras e links e criar tabelas e frames.
CABEALHOS
Todo documento possui cabealhos que separam sees ou tpicos que
facilitam a visualizao de quem os l, permitindo um melhor acompa-
nhamento das idias expostas. O HTML possui a etiqueta <H> que cria
cabealhos na rea de visualizao das pginas.
Existem seis tipos de cabealhos no HTML com formatao prpria e
prontos para serem utilizados, indo de <H1> a <H6>. Sendo <H1> de
tamanho maior que <H6>.
Programando em HTML
Pgina: 10
Faa o seguinte documento:
Que ser exibido desta forma no navegador.
Programando em HTML
Pgina: 11
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.
Programando em HTML
Pgina: 12
PARGRAFOS
Como vimos no primeiro exemplo, o HTML no quebra ou avana linhas
quando pressionamos a tecla Enter, ele s avanar uma linha aps um
comando especfico que mande ele fazer isto.
Existem duas etiquetas que permitem uma quebra de linha, so elas:
<BR> e <P>. A primeira avana uma linha imediatamente aps ser en-
contrada, e a segunda fora um novo pargrafo inserindo uma linha em
branco separando blocos de texto.
<BR>
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 <BR> para
formatar o texto ao nosso gosto.
<HTML>
<HEAD>
<TITLE>Pargrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta BR</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estncia de Atibaia. Sairemos
dia 27 s 13 horas da sede do clube.<BR>
No cheguem atrasados.<BR>
At l.
</BODY>
</HTML>
<P>
Como vimos, esta Tag alm de causar uma quebra da linha, tambm
adiciona uma linha em branco. Ela utilizada para criar pargrafos, se-
parando blocos de texto que podem ser formatados em conjunto.
Programando em HTML
Pgina: 13
Esta etiqueta pode ser utilizada somente no final de um pargrafo ou
juntamente com sua correspondente de fechamento (</P>) envolvendo
uma regio do texto para formatao. Como a Tag <H>, ela tambm
possui o atributo ALIGN.
O exemplo anterior ficaria da seguinte forma com o uso de <P>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta P</H1>
dia 27 s 13 horas da sede do clube.<P>
<P ALIGN=center> No cheguem atrasados.</P>
At l.
</BODY>
</HTML>
Programando em HTML
Pgina: 14
As duas etiquetas de quebra de linha (BR) e pargrafo (P) tambm po-
dem ser combinadas:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta P</H1>
dia 27 s 13 horas da sede do clube.<P>
<P ALIGN=center> No cheguem atrasados.<BR>
At l.</P>
</BODY>
</HTML>
Repare que a etiqueta <BR> pode estar no meio de uma linha no Bloco de
notas 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 como
edentao, e muito utilizado em outras linguagens de programao.
Programando em HTML
Pgina: 15
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)
<HTML>
<HEAD>
<TITLE>Separadores</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Separadores</H1><HR>
dia 27 s 13 horas da sede do clube.<HR>
<CENTER>No cheguem atrasados.<HR>
At l.</CENTER>
</BODY>
</HTML>
Programando em HTML
Pgina: 16
Neste exemplo foi includa a etiqueta <CENTER>, como o nome j diz,
centraliza o texto que estiver entre ela e sua correspondente de fecha-
mento </CENTER>.
O atributo SIZE do separador indicado por um valor inteiro de pixels,
enquanto que o atributo WIDTH pode ser indicado tanto em pixels quanto
em porcentagem da largura da pgina.
Quando um valor absoluto de pixels utilizado, o comprimento da linha
permanecer o mesmo independente da dimenso da janela do navega-
dor, enquanto que ao utilizar porcentagem, este comprimento mudar de
acordo com o redimensionamento do navegador. O padro para HR
100% da largura.
<HTML>
<HEAD>
<TITLE>Separadores</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Separadores</H1><HR SIZE=5>
<CENTER>Linha de tamanho fixo<HR SIZE=3
WIDTH=130>
Linha de tamanho proporcional<HR WIDTH=50%>
</CENTER>
</BODY>
</HTML>
Programando em HTML
Pgina: 17
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 estivssemos
em um programa editor de textos, alterando a fonte ou o estilo dos
caracteres apresentados. O HTML possui etiquetas que realizam esta
formatao sendo necessrio utilizar em todas elas a sua correspon-
dente de fechamento, indicando o incio e fim do trecho de texto a ser
formatado.
Formatao de Caracteres
Os comandos para formatao de texto dividem-se em elementos lgi-
cos e fsicos. A formatao lgica depende de como o navegador est
configurado, garantindo uma uniformidade na apresentao de cabea-
lhos, pargrafos, listas e outros elementos preconfigurados. Na
formatao fsica, so especificados claramente os estilos de texto de-
sejado: negrito, itlico, cor, grifado, dentre outros.
Programando em HTML
Pgina: 18
Fsica
So utilizadas as seguintes etiquetas para a formatao fsica do texto:
Fonte um pouco menor <SMALL> texto </SMALL>
Fonte um pouco maior <BIG> texto </BIG>
Subescrito <SUB> texto </SUB>
Sobrescrito <SUP> texto </SUP>
Riscado <STRIKE> texto </STRIKE>
Teletipo - caracteres monoespaados <TT> texto </TT>
Subli nhado <U> texto </U>
Itlico <I> texto </I>
Negrito <B> texto </B>
Funo Etiqueta
O programa abaixo mostra o uso de alguns formatadores de texto utiliza-
dos no clebre soneto de Cames.
<HTML>
<HEAD>
<TITLE>Formatao de texto</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Formatadores fsicos</H1><HR
SIZE=5>
<H2 ALIGN=center>Soneto - 05</H2>
<I>Amor</I> um <B>fogo</B> que arde sem se
ver,<BR>
<B>ferida</B> que di, e no se sente;<BR>
um <B>contentamento</B> descontente,<BR>
<B>dor</B> que desatina sem doer.<P>
um no <B>querer</B> mais que bem querer;<BR>
um <B>andar</B> solitrio entre a gente;<BR>
nunca <B>contentar</B> se de contente;<BR>
um cuidar que <B>ganha</B> em se perder.<P>
<B>querer estar preso</B> por vontade;<BR>
<B>servir</B> a quem vence, o vencedor;<BR>
ter com quem nos mata, <B>lealdade</B>.<P>
Mas como <U>causar</U> pode seu favor<BR>
nos <BIG>coraes humanos</BIG> <U>amizade</U>,<BR>
se to contrrio a si o mesmo <I>Amor</I>?<P>
<TT>(Cames)</TT>
</BODY>
</HTML>
Programando em HTML
Pgina: 19
Lgica
Esta formatao utilizada quando se deseja formatar o texto utilizando
um dos padres disponveis. Por exemplo, quando voc formata um tex-
to como cabealho no especificado como este texto ser apresenta-
do pois toda esta definio j esta internamente programada no navega-
dor.
Indica valores que o usurio dever escrever <VAR>
Enfati za o texto - negri to <STRONG>
Representa a sada de um programa <SAMP>
Indica uma entrada via teclado <KBD>
Enfati za o texto - itlico <EM>
Descreve um termo <DFN>
Indica trechos de cdigo de programa <CODE>
Destaca citaes, como ttulos de revistas e filmes <CITE>
Funo Etiqueta
Programando em HTML
Pgina: 20
Estes formatadores so utilizados da mesma forma que os formatadores
fsicos, devendo o texto que se queira formatar estar entre a etiqueta e
sua correspondente de fechamento:
<KBD> texto </KBD>.
Podemos tambm combinar os diversos comandos de formatao para
determinado trecho do texto. Desde que observados se as etiquetas
esto sendo abertas e fechadas na ordem correta evitando possveis
erros na apresentao por alguns navegadores.
Correto: <B><CODE>Texto em cdigo e negrito.</CODE></B>
Incorreto: <B><CODE>Texto em cdigo e negrito.</B></CODE>
Caracteres especiais
Caracteres especiais so aqueles que no so interpretados por alguns
navegadores ou no so possveis de serem digitados pelo teclado. Para
representar estes caracteres, utilizamos seqncias de escape, indicadas
por trs partes:
1 - o caracter &
2 - um nmero ou cadeia de caracteres
3 - o caracter ;
Ex: &#231 =
&atilde =
Outro uso para esse recurso quando se deseja utilizar na pgina,
caracteres de uso do HTML, tais como: < , > e &.
& &
> >
< <
Caracter Entidade
Programando em HTML
Pgina: 21
Na tabela a seguir temos os caracteres mais utilizados pela lngua portu-
guesa.
espao &nbsp
Ü ü
Ú ú
&Oti lde; õ
Ô ô
Ó ó
Í í
Ê ê
É é
Ç ç
Ã ã
À à
Â â
Á á
Caracter Entidade Caracter Entidade
importante a utilizao destes caracteres de escape na construo de
sua pgina, pois garante que ela seja visualizada corretamente por qual-
quer navegador no importado a lngua configurada no computador do
usurio.
O exemplo seguinte ilustra o uso das seqncias de escape.
<HTML>
<HEAD>
<TITLE>Formatao de texto</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Caracteres especiais</H1><HR
SIZE=5>
A etiqueta <H1> é utilizada para<BR>
a edição de documentos HTML.
</BODY>
</HTML>
Programando em HTML
Pgina: 22
Blocos
Com o HTML podemos tambm criar blocos de texto destacando-os do
restante da pgina. As etiquetas utilizadas so as seguintes:
<ADDRESS>, <BLOCKQUOTE> e <PRE>.
<ADDRESS>
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.
<HTML>
<HEAD>
<TITLE>Address</TITLE>
</HEAD>
<BODY>
<HR><ADDRESS>
Esta pgina foi desenvolvida por Marcos:
omix@bol.com.br
</ADDRESS><HR>
</BODY>
</HTML>
Programando em HTML
Pgina: 23
<BLOCKQUOTE>
Blockquote destaca um bloco de texto separando-o em um novo par-
grafo. Ele pode tanto aparecer em itlico quanto edentado, dependendo
do navegador utilizado.
<HTML>
<HEAD>
<TITLE>Blockquote</TITLE>
</HEAD>
<BODY>
<H2>BLOCKQUOTE</H2><HR>
Os dias estão se passando muito
rápido, por isso:
<BLOCKQUOTE>
Nunca deixe para realizar as tarefas de sua
responsabilidade<BR>
o mais rápido possível.
</BLOCKQUOTE>
Tenha isso em mente.
</BODY>
</HTML>
Programando em HTML
Pgina: 24
<PRE>
Utilizamos a etiqueta PRE para inserir na pgina um texto com o mesmo
formato que ele foi digitado, respeitando os espaamentos, fontes, mar-
cas de tabulao e quebras de linha feitas com a tecla Enter, formatando
o texto na tela com uma fonte monoespaada como a Courier. Ela
muito til para exibir textos que necessitam deste tipo de fonte como por
exemplo: listagens de programas e planilhas.
No entanto, os comandos HTML colocadas entre <PRE> e </PRE> se-
ro interpretados pelo navegador normalmente.
<HTML>
<HEAD><TITLE>Pre</TITLE></HEAD>
<BODY><H2>PRE</H2><HR>
Populao brasileira
<PRE>
<B>Ano</B> <B>Total</B>(mil)
1940 41.236
1950 51.944
1960 70.070
1970 93.138
1980 119.002
1991 146.825
1996 157.069
</PRE>
Fonte: IBGE
</BODY>
</HTML>
Programando em HTML
Pgina: 25
Fonte
A linguagem HTML possui recursos para alterar o tipo, cor e tamanho da
fonte utilizada nos textos. Estes recursos so implementados com a
etiqueta <FONT> e seus atributos SIZE (tamanho), FACE (tipo) e COLOR
(cor).
O atributo SIZE determina o tamanho da fonte a ser mostrada e varia em
nmeros inteiros de 1 at 7, sendo o tamanho 3, definido como padro.
<FONT>Fonte tamanho 3</FONT><BR>
<FONT SIZE=5>Fonte tamanho 5</FONT><BR>
<FONT SIZE=2>Fonte tamanho 2</FONT>
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).
<FONT>Fonte tamanho 3</FONT><BR>
<FONT SIZE=+2>Fonte tamanho 5</FONT><BR>
<FONT SIZE=-1>Fonte tamanho 2</FONT>
Os dois exemplos anteriores apresentam o mesmo efeito de tamanho
da fonte que mostrado na prxima figura.
Com o atributo FACE alteramos o nome da fonte que ser mostrada pelo
navegador. Caso a fonte especificada no esteja instalada no computador
do usurio, o sistema a substituir pela fonte padro. Mas possvel evitar
esta substituio criando uma lista preferencial de fontes, onde se no for
encontrada a primeira, a segunda ser utilizada e assim por diante.
Programando em HTML
Pgina: 26
<HTML>
<HEAD><TITLE>Fonte</TITLE></HEAD>
<BODY>
<FONT FACE=comic sans ms>Meu corao desmaia
pensativo, </FONT><BR>
<FONT FACE=verdana>Cismando em tua rosa
predileta.</FONT><BR>
<FONT FACE=lucida SIZE=5>Sou teu plido amante
vaporoso, </FONT><BR>
<FONT FACE=avantgarde>Sou teu Romeu... teu
lnguido poeta!...</FONT><BR>
<FONT FACE=comic sans ms>Sonho-te s vezes
virgem... seminua...</FONT><BR>
<FONT FACE=verdana>Roubo-te um casto beijo
luz da lua... </FONT><BR>
<FONT FACE=lucida SIZE=5> E tu s Julieta...
</FONT><P>
<FONT FACE=albertus medium, verdana
SIZE=2>Castro Alves</FONT>
</BODY>
</HTML>
Por ltimo temos o atributo COLOR que especifica a cor do texto. A cor
escolhida utilizando-se o formato hexadecimal, RGB ou uma entre as
dezesseis 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,
Programando em HTML
Pgina: 27
green e blue) na composio da cor final. Estes valores variam de 00 (0)
a FF (255) para cada uma das cores.
<FONT COLOR = #rrggbb>
<FONT COLOR = #9169A1>Texto na cor violeta azulado</FONT>
Para usar um dos nomes predefinidos, basta digitar o nome da cor dese-
jada.
<FONT COLOR = green>Texto em verde</FONT>
<FONT COLOR = olive>Texto em verde oliva</FONT>
Na tabela a seguir so mostradas os nomes das dezesseis cores
predefinidas.
#00FFFF
aqua
#FF00FF
fuchsia
#008080
teal
#800080
purple
#0000FF
blue
#FF0000
red
#000080
navy
#800000
maroon
#FFFF00
yellow
#000000
whi te
#808000
oli ve
#808080
gray
#00FF00
lime
#C0C0C0
silver
#008000
green
#000000
black
Hexadecimal Cor Hexadecimal Cor
No exemplo a seguir mostrado o uso do atributo COLOR, e repare que
est sendo 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.
<HTML>
<HEAD><TITLE>Fonte Cores</TITLE></HEAD>
<BODY>
<H3>Olhe abaixo e diga as <U>CORES</U>, no as
palavras.</H3>
<FONT FACE=arial black SIZE=5>
<FONT COLOR=green>AMARELO</FONT>
<FONT COLOR=red>&nbspAZUL&nbsp</FONT>
Programando em HTML
Pgina: 28
<FONT COLOR=blue>LARANJA</FONT><BR>
<FONT COLOR=red>PRETO</FONT>
<FONT COLOR=blue>&nbspCINZA&nbsp</FONT>
<FONT COLOR=black>VERDE</FONT><BR>
<FONT COLOR=black>VERDE</FONT>
<FONT COLOR=green>&nbspAZUL&nbsp</FONT>
<FONT COLOR=blue>VERMELHO</FONT><BR>
<FONT COLOR=blue>ROXO</FONT>
<FONT COLOR=red>LARANJA</FONT>
<FONT COLOR=green>AMARELO</FONT>
</FONT><HR>
Voc encontrou dificuldade pois, o lado
direito do crebro tenta dizer a cor, mas o
lado esquerdo insiste em ler a palavra.
</BODY></HTML>
Na listagem anterior foi utilizado o caracter especial &nbsp para inserir
um espao a mais entre algumas palavras. A etiqueta FONT inclui um
espao automaticamente e caso voc deseje incluir mais espaos em
branco, necessrio utilizar esse caracter especial. Ele tambm til
durante a digitao de um texto qualquer, pois o HTML aceita somente
um espao entre palavras, mesmo que existam 20 espaos no cdigo,
na pgina ser mostrado apenas um.
Programando em HTML
Pgina: 29
<HR><FONT FACE=arial black SIZE=4>
Primeiro Segundo Terceiro<BR>
Primeiro &nbsp&nbsp Segundo &nbsp&nbsp Terceiro<HR>
LISTAS
Em algumas pginas til colocar listas formatadas com itens para enu-
merar informaes. Elas podem apresentar resumos do contedo da
pgina 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 cada
linha 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 a
lista (UL) e outra para indicar cada linha desta lista (LI). O comando
<UL> e seu correspondente de fechamento </UL> devem envolver to-
dos os itens da lista.
Programando em HTML
Pgina: 30
<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
Pases da Amrica do Sul
<UL>
<LI>Argentina <LI>Bolvia
<LI>Brasil <LI>Chile
<LI>Colmbia <LI>Equador
<LI>Guiana <LI>Paraguai
<LI>Peru <LI>Suriname
<LI>Uruguai <LI>Venezuela
</UL>
</BODY>
</HTML>
possvel modificar o marcador utilizado neste tipo de lista alterando o
atributo TYPE da etiqueta <UL>. Existem trs tipos de marcadores: circle,
disc e square.
<UL TYPE=circle><LI>Argentina <LI>Bolvia </UL>
<UL TYPE=disc> <LI>Brasil <LI>Chile </UL>
<UL TYPE=square><LI>Colmbia <LI>Equador </UL>
Programando em HTML
Pgina: 31
Podemos tambm alterar o marcador de cada linha individualmente,
modificando o atributo TYPE da etiqueta <LI>.
<UL>
<LI TYPE=circle>Peru
<LI TYPE=disc>Suriname
<LI TYPE=square>Uruguai
</UL>
Lista ordenadas
A lista ordenada utilizada quando desejamos enumerar os itens apre-
sentados. Ela criada com a tag <OL> e sua correspondente de fecha-
mento </OL>, mais a tag <LI> para cada item desta lista, da mesma
forma que na Lista no ordenada.
<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
Pases da Amrica do Sul com maior rea.
<OL>
<LI>Brasil
<LI>Argentina
<LI>Peru
</OL>
</BODY></HTML>
Programando em HTML
Pgina: 32
A etiqueta <OL> possui dois atributos: TYPE e START. TYPE determina
o estilo de nmero que ser mostrado 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 ser o ponto de partida da lista.
<H3>America do Sul</H3>
Pases mais populosos
<OL TYPE=I>
<LI>Brasil
<LI>Colmbia
</OL>
Pases menos populosos
<OL TYPE=i START=11>
<LI>Quiana
<LI>Suriname
</OL>
Programando em HTML
Pgina: 33
Lista de glossrio
Esta lista tambm chamadas Lista de definio, pois permite incluir
uma descrio de cada item listado. A etiqueta <DL> marca este tipo de
lista, que possui mais duas outras etiquetas para indicar o termo a ser
definido (<DT>) e sua definio (<DD>).
<DL>
<DT>IBGE
<DD>Instituto Brasileiro de Geografia e
Estatstica
<DT>INSS
<DD>Instituto Nacional do Seguro Social
<DT>EMBRAPA
<DD>Empresa Brasileira de Pesquisa Agropecuria
</DL>
Podemos utilizar este tipo de lista tambm para organizar a pgina, pois
ele permite uma tabulao bem prtica do texto.
Programando em HTML
Pgina: 34
<DL><FONT SIZE=5>Regies, estados e maiores
cidades</FONT>
<DT><B>Sul</B>
<DD>Rio Grande do Sul
<DL><DD>Porto Alegre
<DD>Gravata</DL>
<DD>Santa Catarina
<DL><DD>Blumenau
<DD>Joinvile</DL>
<DD>Paran
<DL><DD>Curitiba
<DD>Londrina</DL>
<DT><B>Sudeste
<DT>Centro-oeste</B>
</DL>
Como exerccio, complete a lista com cidades e estados do sudeste e
centro-oeste brasileiros.
Aninhando e combinando listas
Podemos colocar uma lista dentro de outra (aninhar) de mesmo tipo ou
de tipos diferentes, criando uma estrutura hierrquica de itens e subitens.
No aninhamento de listas no ordenadas, o marcador de linha ser alte-
rado automaticamente a cada sub-lista e tambm cada uma destas ser
deslocada mais para direita. Faa o seguinte exemplo:
Programando em HTML
Pgina: 35
<HR><B>Aninhamento de listas no ordenadas</B>
<UL>
<LI>Primeiro item principal
<UL>
<LI>Primeiro item secundrio
<LI>Segundo item secundrio
<UL>
<LI>Item da lista de terceiro nvel
</UL>
</UL>
<LI>Segundo item principal
<LI>Terceiro item principal
</UL><HR>
O aninhamento de listas ordenadas funciona da mesma forma para as
listas no ordenadas, bastando apenas trocar a etiqueta <UL> pela <OL>.
Faa esta troca na listagem anterior e veja o resultado dos dois casos na
figura a seguir.
No aninhamento com os dois tipos de listas cria-se uma estrutura mais
elegante e complicada, sendo necessrio tomar um certo cuidado no
momento 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 voc deseja.
<HR><B>Lista de filiais por ordem de rentabilidade</
B>
<UL>
<LI>So Paulo
<OL>
<LI>Santo Andr
<LI>So Paulo
Programando em HTML
Pgina: 36
<UL TYPE=disc>
<LI>Santo Amaro
<LI>Moca
</UL>
<LI>Votuporanga
</OL>
<LI>Mato-Grosso
<OL START=4>
<LI>Cuiab
<LI>Rondonpolis
</OL>
<LI>Gois
<OL><LI VALUE=6>Goinia</OL>
</UL><HR>
No cdigo desse exemplo usamos os atributos START da lista ordenada
e VALUE da etiqueta <LI> para dar uma continuidade classificao das
filiais na pgina. O atributo VALUE funciona para as linhas da lista orde-
nada da mesma forma que START.
A etiqueta <LI> possui tambm o atributo TYPE que especifica o tipo de
marcador ou de nmero que ser utilizado, dependendo se ela est em
uma lista no ordenada ou ordenada. Faa as seguintes alteraes e
veja o resultado:
<UL TYPE=disc>
<LI TYPE=square>Santo Amaro
<LI>Moca
.
.
.
<LI>Gois
<OL><LI VALUE=6 TYPE=I>Goinia</OL>
</UL><HR>
Programando em HTML
Pgina: 37
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 se
voc no escolher adequadamente o seu tamanho de arquivo e em que
tipo elas sero salvas. Pois para arquivos de imagem muito grandes, a
pgina demorar para ser visualizada, desmotivando com isso o usurio
que logo pular para outro site. Por outro lado se esta mesma imagem
for salva em um formato incorreto ela ficar deformada e feia, apesar de
o arquivo ser pequeno. Devido a isto tudo, importante voc conhecer
algum 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,JPG e PNG.
GIF - o formato utilizado para imagens com poucas cores e altos con-
trastes sem perda durante a compresso (lossless), sendo ideal para
ilustraes, grficos e figuras ou imagens de textos com at 256 cores.
Estes arquivos podem ser entrelaados permitindo uma visualizao
gradativa 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 sem
dar a aparncia de uma caixa. possvel criar tambm pequenas anima-
es utilizando diversas imagens GIF juntamente com um programa que
sobrepe 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 por
exemplo fotografias e arte digitalizada. Ele permite vrios graus de
compactao com perda (lossey) da imagem, sendo uma maior
compactao responsvel por uma menor qualidade desta. Este forma-
to no muito bom para figuras com poucas cores pois durante a
compactao o programa fora uma transio gradativa entre as cores
dando ao final a impresso de figuras embaadas.
Programando em HTML
Pgina: 38
PNG - Ele o mais novo formato para arquivos grficos utilizados na
WEB, suportado somente pelos navegadores da gerao 4 em diante,
no sendo visualizado pelos navegadores mais antigos. Os arquivos PNG
combinam as melhores caractersticas do GIF e JPEG, pois permitem
transparncias 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 somente
para 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 quanto
maior a dimenso e profundidade de cores de uma figura maior ser o
tamanho do seu arquivo mesmo com o uso de um dos trs formatos
descritos acima, tendo sempre como parmetro que uma figura com
15Kb leva aproximadamente 6 segundos para ser carregada com um
modem de 28,8Kbps.
A resoluo da imagem outro parmetro importante pois os monitores
conseguem exibir somente figuras com aproximadamente 72 pixels por
polegada, no adiantando portanto, ter uma imagem com 600x600 pon-
tos por polegada de resoluo, fazendo apenas o arquivo ficar enorme
sem nenhum benefcio prtico.
Programando em HTML
Pgina: 39
INSERINDO IMAGENS
Usamos o elemento IMG para inserir imagens na pgina na linha de tex-
to. Este elemento possui obrigatoriamente o atributo SRC que contm a
localizao da imagem, que pode estar tanto no mesmo diretrio quanto
em qualquer lugar da WEB. O conjunto destes dois elementos formam a
etiqueta <IMG SRC=URL_da_imagem> indicando uma imagem no
cdigo HTML.
O URL o local da Internet onde a imagem est - seu endereo, por
exemplo: http://www.america.com.br/brasil.gif. Quando a imagem esti-
ver no mesmo diretrio que o arquivo HTML, no necessrio indicar
todo o endereo bastando apenas informar o nome.
No exemplo a seguir utilizado o comando IMG para exibir as bandeiras
de alguns pases. Repare que estas imagens so tratadas pelo navega-
dor como se fossem caracteres de texto.
<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>BANDEIRAS</H1>
<IMG SRC=brasil.gif>&nbsp&nbsp
<IMG SRC=guiana.gif><HR>
<IMG SRC=argentina.gif><BR>
<CENTER><IMG SRC=uruguai.gif></CENTER><HR>
</BODY>
</HTML>
Programando em HTML
Pgina: 40
ATRIBUTOS
Alm do atributo SRC, o elemento IMG possui outros atributos opcionais
que determinam o tamanho da imagem, seu alinhamento, como ser a
borda e o espao deixado entre a imagem e outros elementos da pgina.
ALT - Contm o texto que aparece quando o mouse passado sobre a
imagem, ou quando ela no carregada pelo navegador.
ALIGN - Determina o alinhamento da imagem em relao ao texto, e s
laterais da janela do navegador. Podendo ser: top, middle, bottom, left e
right.
USEMAP - utilizado para indicar que a imagem um mapa de ima-
gem, e que cada regio dela ser um link diferente.
WIDTH - Este atributo determina a largura da imagem em pixel, indepen-
dente de seu tamanho original. A imagem ser sempre forada a caber
na dimenso especificada, se WIDTH for menor que a largura da ima-
gem, ela ser comprimida e vice-versa. Ele pode ser dado tanto em valor
absoluto quanto em porcentagem do tamanho da janela.
HEIGHT - Determina a altura da imagem e funciona semelhante ao
WIDTH.
BORDER - Especifica a largura da borda da imagem.
VSPACE e HSPACE - Determinam os espaos em branco deixados en-
tre a figura e os outros elementos da pgina.
<HTML>
<BODY>
<H1>BANDEIRAS</H1>
Esta a bandeira do Brasil:
<IMG SRC=brasil.gif ALT=Brasil WIDTH=20%>.
Ela foi criada para a repblica.<P>
A bandeira da Guiana
( <IMG SRC=guiana.gif ALT=Guiana ALIGN=middle
WIDTH=50> ) pouco conhecida por ns.<BR>
</BODY>
</HTML>
Programando em HTML
Pgina: 41
O atributo ALIGN alinha a imagem com relao ao texto utilizando os
parmetros top, middle e bottom. Os parmetros left e right alinham a
imagem em relao borda da janela. E caso no seja especificado um
valor 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 de
guiana.htm.
<HTML>
<BODY>
<H1>GUIANA</H1>
<IMG SRC=guiana.gif ALT=Guiana ALIGN=left
VSPACE=5 HSPACE=10>
Antigamente uma colnia holandesa, que passa a ser
controlada pelos ingleses em 1815 aps grandes
disputas. Rivalidades entre
negros escravos trazidos pelos holandeses,
indianos trazidos pelos ingleses e indgenas
nativos passam a fazer parte do contexto
nacional. Aps a independncia em 1966, do inicio
discusses com a Venezuela e o Suriname a respeito
de divisas territoriais, que so resolvidas
diplomaticamente.<P>
Programando em HTML
Pgina: 42
<CENTER>
<IMG SRC=guiana.gif ALT=Guiana BORDER=3>
</CENTER>
</BODY></HTML>
Experimente alterar ALIGN=right e os parmetros de VSPACE, HSPACE
e BORDER. Altere tambm o alinhamento do pargrafo:
<P ALIGN=right>Antigamente uma colnia ...
diplomaticamente.</P>
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 tipos
permitidos na Web e no ser muito grande, evitando uma demora no
carregamento 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 ir repetir esta imagem diversas vezes at completar toda a rea
Programando em HTML
Pgina: 43
visvel da pgina, enquanto que a de dimenses maiores no ser repe-
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, ficando
o navegador responsvel pela sua repetio.
Como exemplo vamos utilizar uma figura pequena chamada fundo1.gif e
uma maior com o nome de fundo2.jpg.
A figura de fundo adicionada ao cdigo HTML utilizando-se o parmetro
BACKGROUND da etiqueta BODY juntamente com o URL da imagem
desejada.
<BODY BACKGROUND=ULR>
Aproveite o exerccio anterior incluindo nele a figura fundo1.gif como fun-
do.
<BODY BACKGROUND=fundo1.gif>
<H1>GUIANA</H1>
Programando em HTML
Pgina: 44
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 texto
e dos links. As cores so atribudas da mesma forma que feita para
mudar 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 documento
BGCOLOR - cor de fundo do documento
TEXT - cor do texto, padro=preto
LINK - cor do link, padro=azul
VLINK - cor do link visitado, padro=vermelho-prpura
ALINK - 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 o
servidor no encontrar a figura de fundo, tornando o texto ilegvel em um
fundo padro branco. E as cores dos links no foram alteradas, e nem
bom fazer isso, pois os usurios j esto acostumados com as cores
padro.
Programando em HTML
Pgina: 45
<BODY BACKGROUND=fundo2.jpg TEXT=white BGCOLOR=blue>
<H1>GUIANA</H1>
IMAGENS MAPEADAS
As imagens mapeadas possuem regies delimitadas pelo cdigo HTML
que 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 coordenadas
que depende do formato de cada regio escolhida. So elas:
Retngulo = esquerda, topo, direita, base (x
1
, y
1
, x
2
, y
2
)
Polgono = x
1
, y
1
, x
2
, y
2
, ..., x
N
,

y
N
(x
1
, y
1
, x
2
, y
2
, x
3
, y
3
)
Crculo = centro
X
, centro
Y
, raio (x
1
, y
1
,r)
Programando em HTML
Pgina: 46
Como vimos anteriormente, a Tag IMG possui o atributo USEMAP indi-
cando que a imagem um mapa e qual o nome do mapa de coordena-
das ela dever utilizar.
O mapa definido pela Tag <MAP NAME=nome do mapa> 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, poly e default. Default utilizada para indicar o restante da ima-
gem.
COORDS - So as coordenadas de cada regio.
HREF - Contm o URL que ser solicitado quando o usurio der um
clique na regio delimitada.
ALT - Texto alternativo que aparece, caso a figura no possa ser exibida
ou quando o ponteiro do mouse ficar parado por alguns instantes sobre a
regio.
Faa o exemplo a seguir, utilizando a figura mapa_robo.gif como um
mapa chamado mapa:
<HTML>
<HEAD><TITLE>Mapas</TITLE></HEAD>
<BODY>
<H2>Figura mapeada</H2>
<IMG SRC=mapa_robo.gif USEMAP=#mapa>
<MAP NAME=mapa>
<AREA SHAPE=circle COORDS=41,65,22"
ALT=olho direito>
<AREA SHAPE=circle COORDS=106,64,22"
ALT=olho esquerdo>
<AREA SHAPE=poly COORDS=78,26,62,88,78,83"
Programando em HTML
Pgina: 47
ALT=nariz>
<AREA SHAPE=rect COORDS=4,23,151,101"
ALT=rosto>
<AREA SHAPE=poly COORDS=13,22,26,3,45,12,58,3,
76,13,93,3,115,15,134,3,145,22" ALT=coroa>
</MAP>
</BODY>
</HTML>
As coordenadas dessa figura podem ser obtidas atravs do Photoshop ou
Fireworks, posicionando-se o ponteiro do mouse sobre os vrtices e ano-
tando suas coordenadas.
Mais a frente, veremos uma figura mapeada com ligaes para diversas
pginas, que ser criada com um programa especfico para mapear figuras.
Programando em HTML
Pgina: 48
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 o
usurio pode facilmente ir de um ponto ao outro, acessando tpicos ou
sees com apenas um clique.
Essas ligaes entre documentos HTML so chamadas de hypertext
links ou hiperlinks (ligao de hipermdia) ou simplesmente links. Que
so ligaes entre dois pontos, a fonte e o destino.
A fonte de uma hiperligao comumente chamada apenas de link, que
o navegador destaca geralmente em azul e sublinhado, indicando que
so ligaes de hipertexto. Este link pode ser qualquer texto ou imagem
que ao ser clicado levar o usurio at o destino.
O destino ou ncora um ponto de referncia de um documento ou
endereo que ser acessado por um link quando o usurio der um clique
nele e pode ser de qualquer formato de mdia eletrnica (arquivo de texto,
imagem, vdeo, HTML e outros). Existem ncoras para arquivos e para
trechos de documentos.
LINKS PARA ARQUIVOS
ncoras locais so aquelas que esto no mesmo site do link que as
chama, ou seja, esto no mesmo diretrio ou em subdiretrios do diretrio
onde est o documento principal.
Para construir um link utilizamos a Tag <A>, e seus principais parmetros:
HREF - Contm o URL do documento de destino - o arquivo eletrnico a ser
acessado.
NAME - Determina o nome do destino a ser acessado por um link - ncora.
<A HREF=destino>link</A> ou; <A NAME=nome>ncora</A>
Programando em HTML
Pgina: 49
Vamos agora criar um documento HTML que possui um link para a pgi-
na guiana.hmt construda anteriormente.
<HTML>
<HEAD><TITLE>Pases</TITLE></HEAD>
<BODY>
<H1>Pases</H1>
A <A HREF=guiana1.htm>Guiana</A> foi colonizada
pelos ingleses.
</BODY>
</HTML>
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 rvore
de pastas:
Se a pgina que estiver na pasta paises contm um link para uma ima-
gem da subpasta america, este link dever ter a seguinte sintaxe:
<A HREF=america/imagens/praia.jpg> texto </A>
Caso uma pgina na pasta america tenha um link para uma imagem da
Europa, necessrio subir um nvel com ../ e depois descer at imagens:
<A HREF=../europa/imagens/praia.jpg> texto </A>
Programando em HTML
Pgina: 50
E para subir dois nveis e descer um, se a imagem estiver na pasta
simbolos:
<A HREF=../../simbolos/praia.jpg> texto </A>
Os caminhos para os links criados anteriormente so chamados Links
relativos, pois informam a localizao completa do arquivo desejado
tendo apenas como base o diretrio da arquivo ativo. Os links podem
conter tambm o caminho completo do arquivo, quando so chamados
Links absolutos, teis quando tem-se a certeza de que o arquivo de
destino no ter sua localizao modificada.
Um exemplo de Link absoluto seria:
<A HREF=http://www.cce.ufsc.br/index.htm>
Universidade </A>
No parmetro HREF podemos utilizar outros tipos de URL da Internet,
tais como o ftp, gopher ou um URL para o correio eletrnico, que ao ser
acionado pelo usurio, abre uma nova mensagem no programa de cor-
reio eletrnico do seu sistema, com o destinatrio determinado pelo link.
Por exemplo:
<A HREF=gopher://penta.ufrgs.br/>Univ Fed do Rio
Grande do Sul</A>
<A HREF=ftp://ftp.netscape.com/pub/>Download
Netscape</A>
<A HREF=mailto:meunome@servidor.com.br>Meunome</
A>
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:
<A
HREF=mailto:alguem@serv.com.br?SUBJECT=Convite>
Convite</A>
E inclua um texto padro na mensagem, acrescentando &BODY= e o
texto, da seguinte forma:
<A HREF=mailto:alguem@ser.com.br?SUBJECT=Convite
&BODY=Quero receber o convite para seu prximo
evento.>Convite</A>
Programando em HTML
Pgina: 51
LINKS PARA SEES DE DOCUMENTOS
Alm de acessar arquivos completos atravs de um link, podemos tam-
bm acessar sees especficas do documento. Este recurso permite
uma 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:
<HTML>
<BODY>
<A NAME=topo><H1>Pases</H1></A>
<UL>
<LI><A HREF=#argentina>Argentina</A>
<LI><A HREF=#brasil>Brasil</A>
<LI><A HREF=#guiana>Guiana</A>
</UL><HR><BR><BR><BR><BR><HR>
<A NAME=argentina><FONT SIZE=5
COLOR=navy>Argentina</FONT></A><P>
A Argentina um dos pases que fazem fronteira
com o Brasil.<BR>
<P ALIGN=right><A HREF=#topo>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=brasil><FONT SIZE=5 COLOR=navy>Brasil
</FONT></A><P>
O Brasil o maior pas da Amrica do sul.<BR>
<A NAME=guiana><FONT SIZE=5 COLOR=navy>Guiana
</FONT></A><P>
At hoje a Guiana ainda apresenta problemas de
fronteiras.<BR>
<HR SIZE=5>
</BODY>
</HTML>
Programando em HTML
Pgina: 52
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 com
cones antes do nome de cada pas, que levaro o usurio para uma
seo com a bandeira do pas correspondente.
<HTML>
<BODY>
<A HREF=#bandargentina><IMG SRC=bandeira.gif
HSPACE=5></A>
<A HREF=#argentina>Argentina</A><BR>
<A HREF=#bandbrasil><IMG SRC=bandeira.gif
HSPACE=5></A>
<A HREF=#brasil>Brasil</A><BR>
<A HREF=#bandguiana><IMG SRC=bandeira.gif
HSPACE=5></A>
<A HREF=#guiana>Guiana</A><BR>
<HR><BR><BR><BR><BR><HR>
Programando em HTML
Pgina: 53
<A NAME=argentina><FONT SIZE=5 COLOR=navy>
Argentina</FONT></A><P>
com o Brasil.<BR>
</FONT></A><P>
O Brasil o maior pas da Amrica do Sul.<BR>
</FONT></A><P>
fronteiras.<BR>
<A NAME=bandargentina>
<IMG SRC=argentina.gif></A><P>
<A NAME=bandbrasil><IMG SRC=brasil.gif></
A><P>
<A NAME=bandguiana><IMG SRC=guiana.gif></A>
</BODY>
</HTML>
Programando em HTML
Pgina: 54
Repare que quando a imagem um link, ela envolvida por uma moldura
da mesma cor que um link de texto.
Tambm pode existir hiperlink ligando um documento e uma seo de
outro. 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 hiperlink
com o atributo HREF contendo o nome do arquivo e sua respectiva se-
o:
<A HREF=arquivo.htm#seo>
Divida o exerccio anterior em dois arquivo HTML, um deles s com os
nomes dos pases, chamado: index.htm, e o outro com o restante, cha-
mado: texto.htm. Faa as alteraes listadas a seguir.
index.htm
<HTML><HEAD><TITLE>Pases</TITLE></HEAD>
<BODY>
<A HREF=texto.htm#bandargentina>
<IMG SRC=bandeira.gif HSPACE=5></A>
<A HREF=texto.htm#argentina>Argentina</A><BR>
<A HREF=texto.htm#bandbrasil>
<A HREF=texto.htm#brasil>Brasil</A><BR>
<A HREF=texto.htm#bandguiana>
<A HREF=texto.htm#guiana>Guiana</A><P>
</BODY></HTML>
texto.htm
<HTML><HEAD><TITLE>Texto</TITLE></HEAD>
<BODY>
<A NAME=argentina><FONT SIZE=5
COLOR=navy>Argentina</FONT></A><P>
com o Brasil.<BR>
<P ALIGN=right><A HREF=index.htm#topo>Voltar</A>
Programando em HTML
Pgina: 55
</FONT></A><P>
O Brasil o maior pas da Amrica do Sul.<BR>
<P ALIGN=right><A HREF=index.htm#topo>Voltar</
A>
</FONT></A><P>
fronteiras.<BR>
<P ALIGN=right><A HREF=index.htm#topo>Voltar</
A>
<A NAME=bandargentina>
<IMG SRC=argentina.gif></A><P>
<A NAME=bandbrasil><IMG SRC=brasil.gif></
A><P>
<A NAME=bandguiana><IMG SRC=guiana.gif></A>
</BODY></HTML>
HIPERLINK COM IMAGEM MAPEADA
A imagem mapeada tambm pode ser um link, tendo cada uma de suas
regies associada a uma determinada ncora, que pode estar tanto no
mesmo 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 desta
vez iremos utilizar um programa chamado Map This.
O Map This um programa freeware que voc encontra no endereo
abaixo, ou em algum site de busca.
http://xoom.com/helpcenter/mapthis/mainmenu
Esse programa faz somente o mapa da figura no realizando qualquer
modificao nela. Aps a abertura do programa, clique no menu File >>
New e escolha a figura que servir como plano de fundo do mapa.
Programando em HTML
Pgina: 56
Como exemplo escolha a figura mapa_robo.gif utilizada anteriormente
como modelo de mapa.
Esta programa possui botes na barra de ferramentas associados aos
parmetros do atributo SHAPE da tag AREA e outros botes operacionais
que 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.
Programando em HTML
Pgina: 57
Para demarcar um retngulo (RECT), clique no boto especfico e arras-
te o ponteiro do canto superior esquerdo at o canto inferior direito da
rea que deseja demarcar. No exemplo, o rosto do rob.
A rea circular (CIRCLE) feita arrastando o ponteiro a partir do centro
da regio a ser demarcando at sua periferia.
Um polgono (POLY) demarcado com um clique em cada um dos seus
vrtices, fechando ele com um duplo-clique no ltimo vrtice.
Demarque todas as reas do rob como mostra a figura abaixo. Sendo
que o retngulo dever ser feito primeiro, pois seno o usurio no ter
acesso aos crculos que estaro sobrepostos.
Programando em HTML
Pgina: 58
Aps demarcar todas reas, clique no boto seta da barra de ferramen-
tas e clique-direito em um dos crculos, escolhendo a opo Edit Area
Info do pop menu.
Na caixa de dilogo Area Setting, determine o URL que ser chamado quan-
do for dado um clique nesta rea. E na caixa de texto Internal comment
about this area, escreva o texto alternativo mostrado quando o ponteiro
ficar sobre a rea ou se a figura no for carregada pelo navegador.
No exemplo iremos construir quatro links, para os seguintes locais: duas
pginas, uma figura e uma ncora na mesma pgina. Siga a tabela abai-
xo para definir os parmetros de cada uma das reas:
Rosto rosto.htm Retngulo
Cabelo cabelo.jpg Polgono
Nari z #nari z Polgono
Olho olho.htm Crculos
Comentrio URL Objeto
Aps estas definies Map This nos oferece a possibilidade de testar o
mapa construdo, onde ao passar o ponteiro sobre uma rea, a URL as-
sociada ser exibida 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 com
os seus propsitos, basta selecion-la e editar arrastando um dos seus
pontos de delimitao ou ento apag-la para fazer uma nova rea.
Programando em HTML
Pgina: 59
Quando o mapa estiver do seu gosto, clique no menu File >> Save e na
caixa de dilogo Setting for this Mapfile d o nome cabeca_robo para
o mapa, escreva seu nome como autor e na caixa de texto Default URL
digite #fora para ncora quando o usurio clicar em uma regio no
mapeada da figura.
Salve o mapa com o nome de cara_robo.htm e o formato (File Format)
HTML. Feche o Map This e abra o arquivo cara_robo.htm com o seu
editor de HTML ou com o Bloco de Notas do Windows. Este arquivo deve
estar parecido com a listagem mostrada a seguir.
<BODY>
<MAP NAME=cabeca_robo>
<! #$-:Image Map file created by Map THIS! >
<! #$-:Map THIS! free image map editor by Todd
C. Wilson >
<! #$-:Please do not edit lines starting
with #$ >
<! #$VERSION:1.30 >
<! #$AUTHOR:Eu mesmo >
<! #$DATE:Tue Sep 05 10:19:11 2000 >
<! #$PATH:C:\Meus documentos\ >
<! #$GIF:mapa_robo.gif >
<AREA SHAPE=CIRCLE COORDS=41,64,22"
HREF=olho.htm ALT=Olho>
<AREA SHAPE=POLY
Programando em HTML
Pgina: 60
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>
<AREA SHAPE=POLY
COORDS=78,27,79,85,62,90,78,27,78,27"
HREF=#nariz ALT=Nariz>
<AREA SHAPE=RECT COORDS=3,24,153,102"
REF=rosto.htm ALT=Rosto>
<AREA SHAPE=default HREF=#fora>
</MAP></BODY>
Mas observe que o Map This fez somente o mapa para ns. Agora para
tornar este mapa funcional, precisamos indicar qual a figura de base,
como fizemos anteriormente no tpico de figuras, e completar o cdigo
para uma pgina completa.
<HTML><HEAD><TITLE>Cabea do rob</TITLE></HEAD>
<BODY>
<IMG SRC=mapa_robo.gif USEMAP=#cabeca_robo>
<MAP NAME=cabeca_robo>
<! #$-:Image Map file created by Map THIS! >
<! #$-:Map THIS! free image map editor by
Todd C. Wilson >
<! #$-:Please do not edit lines starting
with #$ >
<! #$VERSION:1.30 >
<! #$AUTHOR:Eu mesmo >
<! #$DATE:Tue Sep 05 10:19:11 2000 >
<! #$PATH:C:\Meus documentos\ >
<! #$GIF:mapa_robo.gif >
<AREA SHAPE=POLY
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>
<AREA SHAPE=POLY
COORDS=78,27,79,85,62,90,78,27,78,27"
Programando em HTML
Pgina: 61
HREF=#nariz ALT=Nariz>
<AREA SHAPE=RECT COORDS=3,24,153,102"
HREF=rosto.htm ALT=Rosto>
<AREA SHAPE=default HREF=#fora>
</MAP>
<HR SIZE=20>
<A NAME=nariz><H3>Nariz</H3></A>
O nariz do rob apenas um enfeite, sem nenhuma
pretenso de funcionar como o nariz dos
animais.<P>
Voc clicou numa <A NAME=fora>rea</A> sem
link.
</BODY></HTML>
Faa por sua conta uma pgina que fale sobre os olhos e outra para o
rosto, chamadas olho.htm e rosto.htm respectivamente, para testar
completamente o funcionamento do mapa que acabamos de construir.
Programando em HTML
Pgina: 62
TABELAS
As tabelas so utilizadas para controlar vrios aspectos da formatao
de 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 <TABLE> e </TABLE> que marcam
o seu incio e fim. E pelas tags <TR> e <TD> que informam onde come-
am as linhas e colunas.
A tabela construda linha a linha com a tag <TR> indicando o incio de
uma linha. E para cada coluna nesta linha, utilizamos a tag <TD>, 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 os
elementos bsicos de uma pgina HTML.
<TABLE>
<TR>
<TD>Pas
<TD>Populao
<TD>rea
</TR>
<TR>
<TD>Argentina
<TD>34.000
<TD>2.780
</TR>
<TR>
<TD>Brasil
<TD>157.070
<TD>8.547
</TR>
Programando em HTML
Pgina: 63
<TR>
<TD>Colmbia
<TD>35.700
<TD>1.140
</TR>
</TABLE>
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 alinhamento
do texto para toda a linha (TR) ou somente para determinada clula (TD).
Um deles, o ALIGN informa o alinhamento horizontal e o VALIGN deter-
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 e
alinhamento. No prximo exemplo temos tambm como novidade a tag
<TH> que utilizada para construir clulas da mesma forma que a tag
<TD>, informando que a clula um ttulo, centralizando e colocando
negrito em seu contedo.
Programando em HTML
Pgina: 64
<TABLE BORDER ALIGN=center>
<TR>
<TH>Pas
<TH>Populao
<TH>rea
</TR>
<TR>
<TD>Argentina
<TD ALIGN=right>34.000
</TR>
<TR>
<TD>Brasil
</TR>
<TR>
<TD>Colmbia
</TR>
</TABLE>
Programando em HTML
Pgina: 65
Uma clula pode conter texto, figuras, figuras mapeadas e qualquer ou-
tro objeto permitido em uma pgina HTML. Para inserir uma imagem na
clula, basta utilizar a tag IMG logo aps a tag TD.
ANINHANDO TABELAS
As tabelas tambm podem ser aninhadas, contendo uma tabela dentro
de outra e assim sucessivamente. Fazemos isso colocando a definio
de uma tabela dentro de uma clula.
<TABLE>
<TR>
<TD><TABLE>contedo da segunda tabela</TABLE>
<TD><TABLE>contedo da terceira tabela</TABLE>
</TR>
</TABLE>
Inclua mais algumas linhas no exemplo anterior, para colocar a nossa
primeira tabela dentro de uma tabela maior sem bordas, contendo uma
clula com uma imagem.
<TABLE>
<TR>
<TD><IMG SRC=america_sul3.gif>
<TD>
<TABLE BORDER>
<TR>
<TH>Pas
Programando em HTML
Pgina: 66
<TH>Populao
<TH>rea
</TR>
<TR>
<TD>Argentina
</TR>
<TR>
<TD>Brasil
</TR>
<TR>
<TD>Colmbia
</TR>
</TABLE>
</TABLE>
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.
Programando em HTML
Pgina: 67
MESCLANDO CLULAS
Em uma tabela HTML podemos mesclar clulas umas com as outras da
mesma forma que no editor de texto. As clulas da tabela so mescla-
dos quando usamos os atributos ROWSPAN e COLSPAN das tags TD e
TH.
ROWSPAN = nmero
COLSPAN = nmero
Quando voc desejar que uma determinada clula ocupe duas ou mais
linhas necessrio utilizar o atributo ROWSPAN juntamente com a tag
TD informando quantas linhas esta clula ocupar.
Altere a pgina do nosso exemplo incluindo mais uma coluna com uma
clula mesclando duas linhas.
<TABLE>
<TR>
<TD BGCOLOR=silver><IMG SRC=america_sul3.gif>
<TD>
<TABLE BORDER>
<TR>
<TH>Pas
<TH>Populao
<TH>rea
<TH>Idioma
</TR>
<TR>
<TD>Brasil
<TD>Portugus
</TR>
Programando em HTML
Pgina: 68
<TR>
<TD>Argentina
<TD ROWSPAN=2 VALIGN=top>Espanhol
</TR>
<TR>
<TD>Colmbia
</TR>
</TABLE>
</TR>
</TABLE>
Na listagem anterior a clula que contm o mapa est com a cor de
fundo alterada pela atributo BGCOLOR. Na tag TD este atributo funciona
da mesma forma quando o usamos para colorir o fundo da pgina. As
tags TABLE e TR tambm podem ter sua cor de fundo alterada, sendo
que <TABLE BGCOLOR=xxxx> altera a cor de toda tabela, e <TR
BGCOLOR=xxxx> altera a cor de fundo da linha. A definio de cor para
a clula sobrepe a cor da linha que por sua vez sobrepe a cor dada
para a tabela.
Como dito anteriormente, as clulas podem ser mescladas ocupando,
alm de linhas, duas ou mais colunas utilizando-se o atributo COLSPAN.
Programando em HTML
Pgina: 69
No exemplo a seguir, utilizamos vrias cores para cada uma das tags
que compem a tabela e mesclamos duas clulas em linha e mais duas
em coluna..
<TABLE BORDER BGCOLOR=#cccccc>
<TR BGCOLOR=#999999>
<TH>Pas
<TH>Idioma
<TH>Populao(mil)
<TH>rea(mil Km<SUP>2</SUP>)
</TR>
<TR>
<TD BGCOLOR=#333333><FONT COLOR=white>Brasil
</FONT>
<TD>Portugus
</TR>
<TR>
<TD>Argentina
<TD ROWSPAN=2>Espanhol
</TR>
<TR>
<TD>Colmbia
</TR>
<TR>
<TD COLSPAN=2 ALIGN=center>
<FONT COLOR=red><B>Total</B></FONT>
<TD ALIGN=right><B>226.770</B>
<TD ALIGN=right><B>12.467</B>
</TR></TABLE>
Programando em HTML
Pgina: 70
ALTERANDO DIMENSES
Quando uma tabela criada, as dimenses das linhas e colunas so
determinadas pelo maior contedo existente na clula. Na clula que
contm o mapa, ela que especifica a altura de toda a linha, e nas colu-
nas Populao e rea so os ttulos que determinam a largura de to-
das as linhas abaixo deles.
Para alterar o tamanho das clulas e da tabela utilizamos o atributo
WIDTH, que pode ser informado em porcentagem ou em pixels. Sendo
que na tag TABLE a largura proporcional em relao dimenso da
janela do navegador e na tag TD esta proporo em relao largura
da tabela.
O uso das larguras proporcional e absoluta mostrado nos dois exem-
plos a seguir.
Exemplo 1
<TABLE BORDER=2 WIDTH=330 BGCOLOR=#f0f0ff>
<TR>
<TH BGCOLOR=silver WIDTH=25>&nbsp <TH>A <TH>B <TH>C
</TR>
<TR>
<TH>1 <TD>Clula A1 <TD>Clula B1 <TD>Clula C1
</TR>
<TR>
</TR></TABLE>
Programando em HTML
Pgina: 71
A linha da tabela pode ter sua altura modificada pelo atributo HEIGHT
funcionando da mesma forma que WIDTH.
Exemplo 2
<TABLE BORDER=2 WIDTH=60% BGCOLOR=#f0f0ff>
<TR>
<TH BGCOLOR=silver WIDTH=10%>&nbsp
<TH WIDTH=40%>A <TH>B <TH>C
</TR>
<TR>
</TR>
<TR>
<TH HEIGHT=43>2 <TD>Clula A2
<TD>Clula B2 <TD>Clula C2
</TR>
</TABLE>
Para afastar uma clula de outra usamos o atributo CELLSPACING jun-
tamente com um nmero que determina a distncia entre elas. O atribu-
to CELLPADDING causa o afastamento do contedo da clula e sua
borda, indicado tambm por um nmero de pixels.
Programando em HTML
Pgina: 72
<TABLE BORDER CELLPADDING=5 CELLSPACING=0>
<TR>
<TH BGCOLOR=silver>&nbsp <TH>A <TH>B <TH>C
</TR>
<TR>
</TR>
<TR>
<TH HEIGHT=43>2 <TD>Clula A2
<TD>Clula B2 <TD>Clula C2
</TR>
</TABLE>
Em algumas tabelas temos a necessidade de incluir uma legenda na
parte superior ou inferior delas para mostrar um ttulo ou a fonte dos seus
dados. Em uma pgina HTML as legendas so feitas pela tag CAPTION
colocada dentro de uma definio de tabela (<TABLE> ... </TABLE>).
Esta tag possui o atributo ALIGN e seus seguintes valores:
ALIGN=[ top | bottom | left | right ]
<TABLE BORDER>
<CAPTION ALIGN=top><B>AMRICA DO SUL</B></CAPTION>
<CAPTION ALIGN=bottom>Populao em mil
habitantes<BR>rea em mil Km<SUP>2</SUP>
</CAPTION>
<TR><TD COLSPAN=3 ALIGN=center>MAIORES
<TD COLSPAN=3 ALIGN=center>MENORES</TR>
<TR><TD ROWSPAN=2>
<IMG SRC=brasil.gif><TD>Pop.<TD>157.070
Programando em HTML
Pgina: 73
<TD ROWSPAN=2>
<IMG SRC=suriname.gif><TD>Pop.<TD>410</TR>
<TR><TD>rea<TD>8.547<TD>rea<TD>163</TR>
<TR><TD ROWSPAN=2>
<IMG SRC=argentina.gif><TD>Pop.<TD>34.000
<TD ROWSPAN=2>
<IMG SRC=uruguai.gif><TD>Pop.<TD>3.220</TR>
</TABLE>
IMAGEM DE FUNDO
Para inserir uma imagem de fundo numa tabela, utilizamos o atributo
BACKGROUND com seu valor igual o URL da imagem desejada, como
utilizado para pgina.
No exemplo seguinte, est sendo utilizado o atributo BACKGROUND
para colocar uma imagem no fundo da tabela e tambm links sob o mapa
de cada pas que levaro o usurio para pginas especficas.
<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=5
BACKGROUND=america_sul.gif>
<CAPTION ALIGN=top><B>AMRICA DO SUL</B></
CAPTION>
<CAPTION ALIGN=bottom>Populao em mil
habitantes<BR>rea em mil Km<SUP>2</SUP>
</CAPTION>
<TR><TD COLSPAN=3 ALIGN=center>MAIORES
<TD COLSPAN=3 ALIGN=center>MENORES</TR>
<TR><TD ROWSPAN=2 ALIGN=center>
<IMG SRC=brasil.gif><BR>
<A HREF=brasil.htm>Brasil</A>
<TD>Pop.<TD>157.070
<TD ROWSPAN=2 ALIGN=center>
<IMG SRC=suriname.gif><BR>
<A HREF=suriname.htm>Suriname</A>
<TD>Pop.<TD>410
<TR><TD ROWSPAN=2 ALIGN=center>
<IMG SRC=argentina.gif><BR>
<A HREF=argentina.htm>Argentina</A>
Programando em HTML
Pgina: 74
<TD>Pop.<TD>34.000
<TD ROWSPAN=2 ALIGN=center>
<IMG SRC=uruguai.gif><BR>
<A HREF=uruguai.htm>Uruguai</A>
<TD>Pop.<TD>3.220
</TABLE>
Programando em HTML
Pgina: 75
FRAMES
Frame ou moldura um recurso da linguagem HTML que permite ao
navegador exibir duas ou mais pginas simultaneamente na mesma ja-
nela. Caso voc tenha a necessidade de exibir uma pgina contendo a
apresentao da empresa e uma lista de seus produtos e mais uma
pgina para cada produto, o usurio teria que voltar para a pgina de
apresentao se desejasse ver outro produto.
Com o uso do frame, a lista de produtos poder ser constantemente
exibida enquanto o usurio visualiza os produtos em uma outra moldura
na 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 o
contedo 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 pgina
menu.htm poderemos acessar as pginas empresa.htm, produtos.htm
e servicos.htm e a partir delas o menu novamente.
Programando em HTML
Pgina: 76
menu.htm
<HTML><HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<H1>Menu</H1><HR>
<CENTER>
<UL>
<LI><A HREF=empresa.htm>Empresa</A>
<LI><A HREF=produtos.htm>Produtos</A>
<LI><A HREF=servicos.htm>Serviços</A>
</UL></CENTER>
</BODY></HTML>
empresa.htm
<HTML>
<HEAD>
<TITLE>Empresa</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5 COLOR=red FACE=algerian>
EMPRESA</FONT>
<P ALIGN=justify>Somos empresa que vem atuando no
mercado nacional oferecendo
soluções para o ramo de
veículos. Com uma política de
Qualidade e Tecnologia enfrentamos com otimismo
e
confiança todos os obstáculos,
pois
o desafio para oferecer a melhor
solução nos motiva a crescer cada
vez mais.</P>
<P ALIGN=right><A HREF=menu.htm>menu</A></P>
</BODY></HTML>
produtos.htm
<HTML><HEAD>
<TITLE>Produtos</TITLE>
</HEAD>
Programando em HTML
Pgina: 77
<BODY>
PRODUTOS</FONT><P>
<FONT SIZE=4 COLOR=maroon>Vendemos o que h&aacute
de
melhor no mercado global.</FONT><P>
<TABLE BORDER=2 ALIGN=center>
<TR><TH COLSPAN=2>MOTOR<TH COLSPAN=2>RODAS
<TR ALIGN=center>
<TD WIDTH=29%><IMG SRC=virabrequim.gif>
<TD WIDTH=21%>Virabrequim
<TD WIDTH=29%><IMG SRC=roda_gota.gif>
<TD WIDTH=21%>Gota
<TR ALIGN=center>
<TD><IMG SRC=correia.gif>
<TD>Correia
<TD><IMG SRC=roda_beca.gif>
<TD>Beca
<TR ALIGN=center>
<TD><IMG SRC=vela.gif>
<TD>Vela
<TD><IMG SRC=roda_estrela.gif>
<TD>Estrela
</TABLE>
</BODY></HTML>
Programando em HTML
Pgina: 78
servicos.htm
<HTML>
<HEAD>
<TITLE>Serviços</TITLE>
</HEAD>
<BODY>
SERVIÇOS</FONT><P>
<P ALIGN=justify>Nós oferecemos a melhor
orientação aos nossos clientes na
escolhe do produto que melhor atende às
suas
exigências. Além de dar
manutenç&atildeo permanente e por toda vida
de nossos produtos sem nenhum custo adicional.</P>
</BODY></HTML>
Programando em HTML
Pgina: 79
Antes de trabalhar com frames necessrio um planejamento prvio de
como ser o lay-out da pgina e de que modo os frames estaro. Neste
planejamento devero ser determinadas as dimenses de cada frame,
bem como se a janela do navegador ser dividida em colunas, linhas ou
uma combinao de ambas.
Aps o planejamento, o arquivo principal ser formado pela tag
<FRAMESET> e sua correspondente de fechamento </FRAMESET>,
contendo entre elas as definies de diviso e contedo da pgina. Esta
tag possui os seguintes atributos:
COLS = [ pixel | % | * ] Determina o tamanho e quantidade das
colunas.
FRAMEBORDER = [ 0 | 1 ] Se igual a 0, no exibe bordas.
FRAMESPACING = [ pixel ] Espao entre os frames.
ROWS = [ pixel | % | * ] Determina o tamanho e quantidade
das linhas.
Os valores dos atributos COLS e ROWS podem ser um nmero inteiro
em pixel, uma porcentagem do espao vertical ou horizontal, ou um com-
primento expresso como i*, onde i um 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 de
3* ser destinado o triplo do espao de um elemento com comprimento
1*. O valor * equivalente a 1* e muitas vezes usado para preencher o
espao restante da janela.
Para indicar o contedo de cada frame, utilizamos a tag <FRAME> jun-
tamente com seu atributo SRC informando que pgina ser carregada
dentro do frame. A tag FRAME substitui a tag BODY dos documento
HTML normais.
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS=100,300,100>
<FRAME SRC=empresa.htm>
<FRAME SRC=produtos.htm>
<FRAME SRC=servicos.htm>
</FRAMESET></HTML>
Programando em HTML
Pgina: 80
Na listagem anterior apesar de as dimenses serem exatas, o navega-
dor ir preencher toda sua janela com os trs frames nas propores
indicadas pelos valores absolutos. Neste exemplo poderamos, ento,
ter usado na linha do FRAMESET o asterisco no dimensionamento do
ltimo frame para ocupar o restante da janela, ao invs de um valor abso-
luto. Altere o exemplo e redimensione a janela do navegador.
</HEAD>
<FRAMESET COLS=100,300,*>
A listagem a seguir constri uma pgina com dois frames em linha, sen-
do que um possui o triplo da altura do outro.
<HTML><HEAD>
</HEAD>
<FRAMESET ROWS=*,3*>
</FRAMESET></HTML>
Programando em HTML
Pgina: 81
COMPOSIES COM FRAMES
Para dividir uma janela com frames em linhas e colunas, necessrio
combinar estes frames inserindo uma definio de frame (FRAMESET)
dentro de outra, na posio de uma tag FRAME normal.
<FRAMESET ROWS=30%,*>
<FRAME SRC=a.html>
<FRAMESET COLS=30%,*>
<FRAME SRC=b.html>
<FRAME SRC=c.html>
</FRAMESET>
</FRAMESET>
Programando em HTML
Pgina: 82
<FRAME SRC=a.htm>
<FRAME SRC=b.htm>
<FRAME SRC=c.htm>
</FRAMESET>
</FRAMESET>
<FRAMESET SCROLLING=no ROWS=20%,*>
<FRAMESET SCROLLING=no COLS=30%,*>
<FRAME SRC=a.htm>
<FRAME SRC=b.htm>
</FRAMESET>
<FRAMESET SCROLLING=no COLS=*,30%>
<FRAMESET SCROLLING=no ROWS=*,*>
<FRAME SRC=c.htm>
<FRAME SRC=d.htm>
</FRAMESET>
<FRAME SRC=e.htm>
</FRAMESET>
</FRAMESET>
Programando em HTML
Pgina: 83
Faa o prximo exemplo que cria uma pgina com duas linhas de frames,
sendo a linha superior dividida em duas colunas de frames.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=*,*>
<FRAME SRC=servicos.htm>
</FRAMESET>
</FRAMESET>
</HTML>
A tag FRAME possui alm do atributo SRC, os seguintes atributos:
NAME - Nome do frame para sua identificao quando se usa o atributo
TARGET.
SRC - Endereo (URL) do contedo do frame.
FRAMEBORDER = [ 1 | 0 ] - Se igual a 1, o frame ter borda.
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.
Programando em HTML
Pgina: 84
Faa os dois exemplos a seguir para ver a utilizao desses atributos,
faa tambm testes com outros valores e atributos em linhas diferentes
das mostradas.
Exemplo 1
<HTML><HEAD>
</HEAD>
<FRMESET ROWS=30%,* FRAMESPACING=10>
<FRAMESET COLS=*,*>
<FRAME SRC=servicos.htm SCROLLING=no>
</FRAMESET>
</FRAMESET>
</HTML>
Exemplo 2
<HTML><HEAD>
</HEAD>
<FRAMESET ROWS=*,2* FRAMESPACING=10 FRAMEBORDER=0>
<FRAME SRC=empresa.htm MARGINWIDTH=50>
<FRAME SRC=produtos.htm MARGINHEIGHT=20>
</FRAMESET>
</HTML>
Programando em HTML
Pgina: 85
LIGANDO FRAMES
At agora trabalhamos com frames exibidos de uma forma independente
uns dos outros, criando um documento principal que exibe outros em
molduras separadas, sem nenhuma ligao um com o outro.
Para fazer esta ligao devemos primeiro nomear cada frame no arquivo
principal para depois com o atributo TARGET poder apontar o link para o
frame desejado. Este atributo pertence s tags BASE e A.
A tag BASE deve ser localizada no cabealho da pgina, sendo respon-
svel por informar ao navegador qual ser o documento base vinculado
aos links da pgina, que pode ser tanto um frame quanto uma outra URL.
Seus atributos so:
HREF = URL
TARGET = Frame
Programando em HTML
Pgina: 86
No prximo exerccio faa uma arquivo principal definindo o nome dos
frames, 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 em
outro frame seno o frame de nome conteudo.
Documento principal
<HTML><HEAD>
</HEAD>
<FRAME NAME=menu SRC=menu.htm>
<FRAME NAME=conteudo SRC=vazio.htm>
</FRAMESET></HTML>
menu.htm
<HTML><HEAD>
<BASE TARGET=conteudo>
</HEAD><BODY>
<H1>Menu</H1><HR>
<CENTER>
<UL>
<LI><A HREF=produtos.htm>Produtos</A>
<LI><A HREF=servicos.htm>Servios</A>
</UL></CENTER>
</BODY></HTML>
servicos.htm
<P ALIGN=right>
<A HREF=empresa.htm TARGET=menu>
empresa</A>&nbsp&nbsp
<A HREF=produtos.htm>produtos</A></P>
Programando em HTML
Pgina: 87
Observe que na pgina servicos.htm o link empresa possui o seu atri-
buto TARGET apontando para o frame menu, ou seja, quando o usurio
der um clique nele, a pgina empresa.htm ser carregada no lugar ocu-
pado pela pgina menu.htm.
Programando em HTML
Pgina: 88
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
<HTML><HEAD></HEAD>
<FRAMESET SCROLLING=no ROWS=20%,*>
<FRAMESET SCROLLING=no COLS=30%,*>
<FRAME SRC=a.htm>
<FRAME SRC=b.htm>
</FRAMESET>
<FRAME SRC=subframe.htm>
</FRAMESET></HTML>
subframe.htm
<HTML><HEAD></HEAD>
<FRAMESET SCROLLING=no ROWS=*,*>
<FRAME SRC=c.htm>
<FRAME SRC=d.htm>
</FRAMESET></HTML>
Partindo do exerccio anterior iremos exibir uma pgina com definies de
frames no lugar da pgina produtos.htm. Esta nova pgina ter um frame
superior com links para pginas que sero exibidas no frame inferior.
Inicie alterando a linha do arquivo menu.htm que abre a pgina produto.htm
fazendo ela apontar para a nova pgina:
Programando em HTML
Pgina: 89
<UL>
<LI><A HREF=produtos_b.htm>Produtos</A>
<LI><A HREF=servicos.htm>Servios</A>
Construa o cdigo da pgina produtos_b.htm que contm a definio
dos frames:
produtos_b.htm
<HTML><HEAD>
</HEAD>
<FRAMESET ROWS=40,*>
<FRAME NAME=menu_produtos SRC=menu_produtos.htm
SCROLLING=no>
<FRAME NAME=conteudo_produtos
SRC=produtos_inicio.htm>
</FRAMESET></HTML>
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
<HTML><HEAD></HEAD><BODY>
<TABLE ALIGN=center>
<TR ALIGN=center>
<TD WIDTH=100><A HREF=motor.htm
TARGET=conteudo_produtos>Motor</A>
<TD WIDTH=100><A HREF=rodas.htm
TARGET=conteudo_produtos>Rodas</A></TR>
</TABLE></BODY></HTML>
produtos_inicio.htm
<FONT SIZE=5 COLOR=red FACE=algerian>PRODUTOS</
FONT><P>
<FONT SIZE=4 COLOR=maroon>Vendemos o que h&aacute
de melhor no mercado global.</FONT><P>
</BODY></HTML>
Programando em HTML
Pgina: 90
motor.htm
<TR><TH COLSPAN=2>MOTOR
<TR ALIGN=center>
<TD WIDTH=29%><IMG SRC=virabrequim.gif>
<TD WIDTH=21%>Virabrequim
<TR ALIGN=center>
<TD><IMG SRC=correia.gif>
<TD>Correia
<TR ALIGN=center>
<TD><IMG SRC=vela.gif>
<TD>Vela
rodas.htm
<TR><TH COLSPAN=2>RODAS
<TR ALIGN=center>
<TD WIDTH=29%><IMG SRC=roda_gota.gif>
<TD WIDTH=21%>Gota
<TR ALIGN=center>
<TD><IMG SRC=roda_beca.gif>
<TD>Beca
<TR ALIGN=center>
<TD><IMG SRC=roda_estrela.gif>
<TD>Estrela
Programando em HTML
Pgina: 91
FORMULRIOS
Os formulrios so bastante utilizados nos sites da Web, pois atravs de-
les possvel coletar informaes de vrias pessoas, solicitar a opinio
dos visitantes, fazer uma votao onde os visitantes escolhem entre um
item e outro, etc, assim, podemos concluir que os formulrios permitem
coletar informaes dos usurios. As respostas fornecidas pelos visitan-
tes so armazenadas, e depois voc pode acess-las e compar-las.
Mas para que este formulrio funcione, preciso que no servidor tenha
um programa, escrito em outra linguagem, responsvel em receber e
processar o formulrio.
Obs: Neste curso ser ensinando apenas a linguagem HTML referente
criao e envio do formulrio.
OS OBJETOS DE FORMULRIOS
Os formulrios so compostos por vrios objetos, onde uns oferecem
opes para serem clicados e outros exibem campos de texto editveis
(atravs da utilizao de comportamentos, voc poder validar as infor-
maes digitadas pelo usurio). A prxima figura exibe um simples for-
mulrio que foi criado em uma pgina.

Programando em HTML
Pgina: 92
Os itens numerados na figura anterior representam alguns objetos de
formulrio, os quais so denominados:
1, 2 e 5 Campo de texto
3 e 4 Menu de lista
6 - Botes de opo
7 - rea de texto
8 e 9 - Botes de comando
Alm desses quatro objetos, ainda temos: caixa de seleo, campo de
arquivos, campo de imagens, campo oculto e menu de salto.
Campos de texto: tambm chamados caixas de texto, so utilizados
para coletar informaes dos usurios, onde estes podero digitar qual-
quer tipo de texto: alfabtico ou numrico. O texto digitado exibido em
uma linha simples.
Botes: realizam tarefas quando so clicados, ou seja, so aquilo que
faz o formulrio fazer algo, como enviar as informaes e redefinir os
dados 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 selees
em 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 em
grupos. A seleo de um dos botes do grupo cancela a seleo de
todos os outros.
Menus de lista: apresentam um conjunto de valores que os usurios
podero escolher.
Campos de arquivos: permitem que o usurio procure os arquivos nos
discos 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 forem
relevantes 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 vincula
a um documento ou arquivo.
rea de texto: uma caixa de texto onde o usurio pode digitar inmera
palavras com linhas mltiplas (exibem uma barra de rolagem).
Programando em HTML
Pgina: 93
INSERINDO OBJETOS
Para construirmos um formulrio utilizamos a tag <FORM> e sua cor-
respondente de fechamento </FORM>. 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 est o programa que
ir processar o formulrio
METHOD = [get | post]Indica o mtodo utilizado pelo servidor para
processar o formulrio
<FORM METHOD=post ACTION=http://servidor.br/
cgi-bin/cadastro>
Um campo para entrada de dados definido com a tag <INPUT>, tendo
os dados digitados pelo usurio atribudos a uma varivel com nome e
tipo 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 receber o 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.
Programando em HTML
Pgina: 94
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.
<HTML><HEAD><TITLE>Formulário</TITLE><HEAD>
<BODY>
<P ALIGN=center><FONT FACE=Arial Rounded MT
Bold, Bookman Old Style, Brush Script
COLOR=#3300CC SIZE=5">Exemplo de
formulário simples</FONT></P>
<FORM METHOD=post ACTION=URL do CGI>
<P><B>Nome</B>:
<INPUT TYPE=text NAME=nome size=25"></P>
</FORM>
</BODY></HTML>
Os botes de opo so feitos informando o mesmo nome de varivel
para todos do mesmo grupo mas com valores diferentes.
<P><B>Opções de uso da Internet</B>:
<INPUT TYPE=radio NAME=opcao
VALUE=estudo>Estudo
VALUE=pesquisa>Pesquisa
VALUE=trabalho>Trabalho
<INPUT TYPE=radio NAME=opcao VALUE=lazer
CHECKED>Lazer
</P>
Programando em HTML
Pgina: 95
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.
<TABLE>
<TR>
<TD VALIGN=top><B>Possui em sua casa</B>:
<TD>
<INPUT TYPE=checkbox NAME=bens
VALUE=geladeira>Geladeira<BR>
VALUE=automvel>Automóvel<BR>
VALUE=televisao>Televisão
</TR>
</TABLE>
O menu de lista criado com as tags <SELECT>...</SELECT>, que
define a lista e seu comportamento, e <OPTION>, que define os ele-
mentos de escolha da lista. Numa lista o usurio escolhe um ou mais
itens aps dar um clique na sua seta.
Programando em HTML
Pgina: 96
A tag SELECT possui os seguintes atributos:
NAME = varivel - Nome da varivel que receber o contedo do campo.
MULTIPLE - Permite selees mltiplas
SIZE = nmero - Define o nmero de opes visveis na lista.
<P><B>Data da nascimento</B>:
<SELECT NAME=dia>
<OPTION SELETED>01
<OPTION>02
<OPTION>03
<OPTION>04
<OPTION>05
</SELECT>
<SELECT NAME=mes>
<OPTION SELECTED>Janeiro
<OPTION>Fevereiro
<OPTION>Março
</SELECT></P>
Criamos uma rea de texto com a tag <TEXTAREA>...</TEXTAREA> e
seus atributos:
NAME = varivel - nome da varivel que receber o 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.
<B>Sugestes</B><BR>
<TEXTAREA NAME=sugestao COLS=30 ROWS=5>
Digite aqui suas sugestes
</TEXTAREA>
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 de
agradecimento ao usurio. Este scrip recebe valores de campos ocultos
Programando em HTML
Pgina: 97
(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 ilustrao
deste tpico, repare os valores do atributo ACTION e dos campos ocul-
tos emaildestino e resposta:
<HTML><HEAD><TITLE>Formulario</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF BACKGROUND=3.jpg>
<P ALIGN=center><FONT FACE=Arial Rounded MT
Bold,
Bookman Old Style, Brush Script COLOR=#3300CC
SIZE=5">Exemplo de Objetos de Formulário
</FONT></P>
<FORM METHOD=post
ACTION=http://www.dominio.com.br/cgi-bin/
enviarform.cgi>
<INPUT TYPE=hidden NAME=emaildestino
VALUE=adilson@ziq.com.br>
<INPUT TYPE=hidden NAME=resposta
VALUE=grato.htm>
<P><B>Nome</B>:
<INPUT TYPE=text NAME=nome SIZE=50">
</P>
<P><B>E-mail</B>:
<INPUT TYPE=text NAME=campoemail SIZE=30">
</P>
<P><B>Data da nascimento</B>:
<SELECT NAME=data SIZE=1">
<OPTION SELECTED>01
<OPTION>02
<OPTION>03
<OPTION>04
</SELECT>
<SELECT name=mes>
<OPTION SELECTED>Janeiro
<OPTION>Fevereiro
<OPTION>Março
</SELECT>
<INPUT TYPE=text NAME=ano MAXLENGTH=4
Programando em HTML
Pgina: 98
SIZE=6"></P>
<P><B>Opções de uso da Internet</
B>:
VALUE=estudo>Estudo
VALUE=pesquisa>Pesquisa
VALUE=trabalho>Trabalho
<INPUT TYPE=radio NAME=opcao VALUE=lazer
CHECKED>Lazer</P>
<P><B>Comentários</B>:
<TEXTAREA NAME=comentarios COLS=50"
ROWS=3"></TEXTAREA></P>
<P>
<INPUT TYPE=submit NAME=enviar
VALUE=Enviar>
<INPUT TYPE=reset NAME=apagar
VALUE=Redefinir></P>
</FORM></BODY></HTML>
Programando em HTML
Pgina: 99
FAZENDO O FORMULRIO FUNCIONAR
Toda vez que um usurio preenche os campos do formulrio e clica no
boto 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 s assim voc poder recupe-
rar e acessar os dados resultantes do formulrio.
varivel1=valor1&varivel2=valor2 ... &varivel
n
=nome
n
Os formulrios so enviados por um dos dois mtodos: GET, que envia

os resultados do formulrio no URL enviado para o script; e POST, que
codifica o material enviado para o script. Consulte seu programador ou
administrador de sistema para voc saber determinar qual mtodo deve
ser utilizado.
Aps o usurio preencher o formulrio e der um clique no boto Enviar,
este ser encaminhado ao seu provedor de hospedagem e l, o script
CGI recebendo a string com os valores da variveis, enviar um e-mail
para voc da seguinte forma:
Programando em HTML
Pgina: 100
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.htm
Email Results to: adilson@ziq.com.br
Submit Date: Sun Sep 24 22:19:13 EDT 2000
Form Values
Variable nome = Hamilton Luiz

Variable campoemail = omix@bol.com.br
Variable data = 03
Variable mes = Março
Variable ano = 1968
Variable opcao = lazer
Variable comentarios = Gostei muito do
que existe no seu site. Mas a parte visual
deixa a desejar.
Programando em HTML
Pgina: 101
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 de
linha?
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.
Voc pode distribuir panfletos, anunciar em jornais e revistas ou
ainda 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.
Programando em HTML
Pgina: 102
12. Complemente a lista anterior colocando pequenas definies em cada
um dos itens.
13. Altere a lista de forma que ela exiba pequenos quadrados no lugar
dos nmeros.
14. Quais os tipos de imagens podemos carregar em uma pgina de
Internet?
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, colocando
algum texto antes e depois dela.
19. Faa uma pgina com a bandeira Argentina e um texto do lado direito
dessa 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.
Programando em HTML
Pgina: 103
25. Coloque uma legenda na tabela anterior e mais uma coluna com
figura 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 A links para abrir pginas nos outros frames.
30. Em uma das pginas carregadas no frame B, faa um link que abra
uma pgina em D que 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.
Celta Informtica
http://www.celtainformatica.com.br

Programando em HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programando em HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Sumrio

Os formulrios so enviados por um dos dois mtodos: GET, que envia

Variable nome = Hamilton Luiz

Você também pode gostar