Professional Documents
Culture Documents
INTRODUÇÃO _________________________________ 3
EDIÇÃO DE DOCUMENTOS __________________________________ 4
COMANDOS DE HTML ___________________________________ 5
ATRIBUTOS ____________________________________________ 5
COMENTÁRIOS __________________________________________ 6
COMPONENTES BÁSICOS ___________________________________ 6
CRIANDO UM DOCUMENTO _________________________________ 7
IMAGENS _____________________________________ 37
INSERINDO IMAGENS _____________________________________ 39
ATRIBUTOS ___________________________________________ 40
IMAGENS DE FUNDO _____________________________________ 42
IMAGENS MAPEADAS ____________________________________ 45
LIGAÇÕES (LINKS) ____________________________ 48
LINKS PARA ARQUIVOS __________________________________ 48
LINKS PARA SEÇÕES DE DOCUMENTOS _______________________ 51
HIPERLINK COM IMAGEM MAPEADA _________________________ 55
TABELAS _____________________________________ 62
ANINHANDO TABELAS ___________________________________ 65
MESCLANDO CÉLULAS ___________________________________ 67
ALTERANDO DIMENSÕES __________________________________ 70
IMAGEM DE FUNDO ______________________________________ 73
FRAMES ______________________________________ 75
COMPOSIÇÕES COM FRAMES ______________________________ 81
LIGANDO FRAMES ______________________________________ 85
ENCADEANDO FRAMES ___________________________________ 88
FORMULÁRIOS _______________________________ 91
OS OBJETOS DE FORMULÁRIOS ____________________________ 91
INSERINDO OBJETOS ____________________________________ 93
FAZENDO O FORMULÁRIO FUNCIONAR _______________________ 99
INTRODUÇÃO
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. Porém não é necessário que você conecte-se à Internet
para poder ver as páginas que está editando.
EDIÇÃO DE DOCUMENTOS
Existem também tags chamadas “vazias”, pois não marcam uma região
de texto, apenas inserem algum elemento ou formatação no documento:
<tag>
Todas as tags possuem atributos que podem ser utilizados ou não, de-
pendendo da formatação desejada para o texto. Eles definem alguma
característica especial e são colocados na etiqueta inicial.
As tags HTML não são sensíveis à caixa, ou seja, tanto faz escrevê-la
com letras maiúsculas ou minúsculas. Sendo assim, <FONT>, <Font>
ou <font> são a mesma coisa.
Atributos
Um atributo define várias 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.
Todo bom programador inclui comentários em seu código para uma pos-
terior manutenção feita por ele mesmo ou por outra pessoa. Estes co-
mentários não são interpretados pelo navegador, sendo úteis no entendi-
mento de como o código está sendo executado.
Componentes básicos
<HTML>
<HEAD>
<TITLE>Titulo do Documento</TITLE>
elementos opcionais
</HEAD>
<BODY>
textos,imagens,links
</BODY>
</HTML>
Criando um documento
Salve este documento com o nome de modelo.htm, para não ter que
digitar toda estrutura básica novamente a cada novo documento.
http://www.meunome.com.br/primeiro.htm
HTML BÁSICO
Agora que você aprendeu a editar, salvar como html e abrir um docu-
mento no navegador, está na hora de começar a aprender como formatar
o texto, inserir figuras e links e criar tabelas e frames.
CABEÇALHOS
Existem duas etiquetas que permitem uma quebra de linha, são elas:
<BR> e <P>. A primeira avança uma linha imediatamente após ser en-
contrada, e a segunda força um novo parágrafo 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, não 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>Parágrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta BR</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<BR>
Não cheguem atrasados.<BR>
Até lá.
</BODY>
</HTML>
<P>
Como vimos, esta Tag além de causar uma quebra da linha, também
adiciona uma linha em branco. Ela é utilizada para criar parágrafos, se-
parando blocos de texto que podem ser formatados em conjunto.
<HTML>
<HEAD>
<TITLE>Parágrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta P</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<P>
<P ALIGN=center> Não cheguem atrasados.</P>
Até lá.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Parágrafos</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Etiqueta P</H1>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<P>
<P ALIGN=center> Não 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 função continuará a mesma. Isto ocorre com outras etique-
tas que podem estar em qualquer posição 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
edentação, e é muito utilizado em outras linguagens de programação.
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>
Em outubro, 27 a 29, iremos para o nosso
acampamento na estância de Atibaia. Sairemos
dia 27 às 13 horas da sede do clube.<HR>
<CENTER>Não cheguem atrasados.<HR>
Até lá.</CENTER>
</BODY>
</HTML>
<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>
FORMATAÇÃO DO TEXTO
Formatação de Caracteres
Etiqueta Função
<B> texto </B> Negrito
<I> texto </I> Itálico
<U> texto </U> Sublinhado
<TT> texto </TT> Teletipo - caracteres monoespaçados
<STRIKE> texto </STRIKE> Riscado
<SUP> texto </SUP> Sobrescrito
<SUB> texto </SUB> Subescrito
<BIG> texto </BIG> Fonte um pouco maior
<SMALL> texto </SMALL> Fonte um pouco menor
<HTML>
<HEAD>
<TITLE>Formatação de texto</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center>Formatadores físicos</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 dói, e não se sente;<BR>
é um <B>contentamento</B> descontente,<BR>
é <B>dor</B> que desatina sem doer.<P>
É um não <B>querer</B> mais que bem querer;<BR>
é um <B>andar</B> solitário 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>corações humanos</BIG> <U>amizade</U>,<BR>
se tão contrário a si é o mesmo <I>Amor</I>?<P>
<TT>(Camões)</TT>
</BODY>
</HTML>
Lógica
Etiqueta Função
<CITE> Destaca citações, como títulos de revistas e filmes
<CODE> Indica trechos de código de programa
<DFN> Descreve um termo
<EM> Enfatiza o texto - itálico
<KBD> Indica uma entrada via teclado
<SAMP> Representa a saída de um programa
<STRONG> Enfatiza o texto - negrito
<VAR> Indica valores que o usuário deverá escrever
Caracteres especiais
Caracteres especiais são aqueles que não são interpretados por alguns
navegadores ou não são possíveis de serem digitados pelo teclado. Para
representar estes caracteres, utilizamos seqüências de escape, indicadas
por três partes:
1 - o caracter &
2 - um número ou cadeia de caracteres
3 - o caracter ;
Ex: ç = ç
ã = ã
Outro uso para esse recurso é quando se deseja utilizar na página,
caracteres de uso do HTML, tais como: < , > e &.
Entidade Caracter
< <
> >
& &
<HTML>
<HEAD>
<TITLE>Formatação 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>
Blocos
<ADDRESS>
Esta etiqueta cria um bloco de texto para endereços, identificando o au-
tor do documento. Este bloco pode conter endereço para contato, e-mail,
link para a página do webmaster e outras informações a respeito do do-
cumento. Ela geralmente é colocada no final da página.
<HTML>
<HEAD>
<TITLE>Address</TITLE>
</HEAD>
<BODY>
<HR><ADDRESS>
Esta página foi desenvolvida por Marcos:
omix@bol.com.br
</ADDRESS><HR>
</BODY>
</HTML>
<BLOCKQUOTE>
Blockquote destaca um bloco de texto separando-o em um novo pará-
grafo. Ele pode tanto aparecer em itálico 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>
<HTML>
<HEAD><TITLE>Pre</TITLE></HEAD>
<BODY><H2>PRE</H2><HR>
População 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>
Com o atributo FACE alteramos o nome da fonte que será mostrada pelo
navegador. Caso a fonte especificada não esteja instalada no computador
do usuário, o sistema a substituirá pela fonte padrão. Mas é possível evitar
esta substituição criando uma lista preferencial de fontes, onde se não for
encontrada a primeira, a segunda será utilizada e assim por diante.
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 número nesta base precedi-
do pelo caracter “#” indicando a intensidade de cada cor primária (red,
Para usar um dos nomes predefinidos, basta digitar o nome da cor dese-
jada.
<HTML>
<HEAD><TITLE>Fonte Cores</TITLE></HEAD>
<BODY>
<H3>Olhe abaixo e diga as <U>CORES</U>, não as
palavras.</H3>
<FONT FACE=’arial black’ SIZE=5>
<FONT COLOR=green>AMARELO</FONT>
<FONT COLOR=red> AZUL </FONT>
LISTAS
Em algumas páginas é útil colocar listas formatadas com itens para enu-
merar informações. Elas podem apresentar resumos do conteúdo da
página ou funcionarem como ponto de ligação entre as diversas informa-
ções do site (links). O código HTML suporta os seguintes tipos de listas:
Criamos uma lista não 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.
<UL>
<LI TYPE=circle>Peru
<LI TYPE=disc>Suriname
<LI TYPE=square>Uruguai
</UL>
Lista ordenadas
<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
Países da América do Sul com maior área.
<OL>
<LI>Brasil
<LI>Argentina
<LI>Peru
</OL>
</BODY></HTML>
<H3>America do Sul</H3>
Países mais populosos
<OL TYPE=I>
<LI>Brasil
<LI>Colômbia
</OL>
Países menos populosos
<OL TYPE=i START=11>
<LI>Quiana
<LI>Suriname
</OL>
Lista de glossário
<DL>
<DT>IBGE
<DD>Instituto Brasileiro de Geografia e
Estatística
<DT>INSS
<DD>Instituto Nacional do Seguro Social
<DT>EMBRAPA
<DD>Empresa Brasileira de Pesquisa Agropecuária
</DL>
Podemos utilizar este tipo de lista também para organizar a página, pois
ele permite uma tabulação bem prática do texto.
<UL TYPE=disc>
<LI TYPE=square>Santo Amaro
<LI>Moóca
.
.
.
<LI>Goiás
<OL><LI VALUE=6 TYPE=I>Goiânia</OL>
</UL><HR>
Todo bom site possui imagens integradas ao texto. Estas imagens aju-
dam a tornar as páginas da Internet mais atraentes para o usuário, moti-
vando ainda mais suas visitas.
GIF - É o formato utilizado para imagens com poucas cores e altos con-
trastes sem perda durante a compressão (lossless), sendo ideal para
ilustrações, gráficos e figuras ou imagens de textos com até 256 cores.
Estes arquivos podem ser entrelaçados permitindo uma visualização
gradativa da imagem indo de uma menor para uma maior qualidade du-
rante o carregamento. O formato GIF permite também fundos transpa-
rentes que causam a impressão de uma integração maior à página sem
dar a aparência de uma caixa. É possível criar também pequenas anima-
ções utilizando diversas imagens GIF juntamente com um programa que
sobrepõe 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 transição suave entre elas (baixo contraste), como por
exemplo fotografias e arte digitalizada. Ele permite vários graus de
compactação com perda (lossey) da imagem, sendo uma maior
compactação responsável por uma menor qualidade desta. Este forma-
to não é muito bom para figuras com poucas cores pois durante a
compactação o programa força uma transição gradativa entre as cores
dando ao final a impressão de figuras embaçadas.
<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>BANDEIRAS</H1>
<IMG SRC=”brasil.gif”>  
<IMG SRC=”guiana.gif”><HR>
<IMG SRC=”argentina.gif”><BR>
<CENTER><IMG SRC=”uruguai.gif”></CENTER><HR>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>BANDEIRAS</H1>
Esta é a bandeira do Brasil:
<IMG SRC=”brasil.gif” ALT=”Brasil” WIDTH=20%>.
Ela foi criada para a república.<P>
A bandeira da Guiana
( <IMG SRC=”guiana.gif” ALT=”Guiana” ALIGN=middle
WIDTH=50> ) é pouco conhecida por nós.<BR>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY>
<H1>GUIANA</H1>
<IMG SRC=”guiana.gif” ALT=”Guiana” ALIGN=left
VSPACE=5 HSPACE=10>
Antigamente uma colônia holandesa, que passa a ser
controlada pelos ingleses em 1815 após grandes
disputas. Rivalidades entre
negros escravos trazidos pelos holandeses,
indianos trazidos pelos ingleses e indígenas
nativos passam a fazer parte do contexto
nacional. Após a independência em 1966, dão inicio
discussões com a Venezuela e o Suriname a respeito
de divisas territoriais, que são resolvidas
diplomaticamente.<P>
IMAGENS DE FUNDO
Mesmo ocupando toda a área visível, as diversas cópias das figuras pe-
quenas serão transmitidas pelo servidor apenas uma única vez, ficando
o navegador responsável pela sua repetição.
<BODY BACKGROUND=”ULR”>
<HEAD><TITLE>Imagens</TITLE></HEAD>
<BODY BACKGROUND=”fundo1.gif”>
<H1>GUIANA</H1>
IMAGENS MAPEADAS
<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"
Mais a frente, veremos uma figura mapeada com ligações para diversas
páginas, que será criada com um programa específico para mapear figuras.
Âncoras locais são aquelas que estão no mesmo site do link que as
chama, ou seja, estão no mesmo diretório ou em subdiretórios do diretório
onde está o documento principal.
<HTML>
<HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<H1>Países</H1>
A <A HREF=”guiana1.htm”>Guiana</A> foi colonizada
pelos ingleses.
</BODY>
</HTML>
Se a página que estiver na pasta paises contém um link para uma ima-
gem da subpasta america, este link deverá ter a seguinte sintaxe:
Caso uma página na pasta america tenha um link para uma imagem da
Europa, é necessário subir um nível com “../” e depois descer até imagens:
<A HREF=”http://www.cce.ufsc.br/index.htm”>
Universidade </A>
<A
HREF=”mailto:alguem@serv.com.br?SUBJECT=Convite”>
Convite</A>
<HTML>
<HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<A NAME=topo><H1>Países</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 países 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 país da América do sul.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
<A NAME=”guiana”><FONT SIZE=5 COLOR=navy>Guiana
</FONT></A><P>
Até hoje a Guiana ainda apresenta problemas de
fronteiras.<BR>
<P ALIGN=right><A HREF=”#topo”>Voltar</A>
<HR SIZE=5>
</BODY>
</HTML>
Altere o último exercício eliminando a lista inicial para formar outra com
ícones antes do nome de cada país, que levarão o usuário para uma
seção com a bandeira do país correspondente.
<HTML>
<HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<A NAME=topo><H1>Países</H1></A>
<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>
<A HREF=”arquivo.htm#seção>
index.htm
<HTML><HEAD><TITLE>Países</TITLE></HEAD>
<BODY>
<A NAME=topo><H1>Países</H1></A>
<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”>
<IMG SRC=”bandeira.gif” HSPACE=5></A>
<A HREF=”texto.htm#brasil”>Brasil</A><BR>
<A HREF=”texto.htm#bandguiana”>
<IMG SRC=”bandeira.gif” HSPACE=5></A>
<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>
A Argentina é um dos países que fazem fronteira
com o Brasil.<BR>
<P ALIGN=right><A HREF=”index.htm#topo”>Voltar</A>
<HR SIZE=5><BR><BR><BR><BR><HR>
A imagem mapeada também pode ser um link, tendo cada uma de suas
regiões associada a uma determinada âncora, que pode estar tanto no
mesmo documento quanto em qualquer outro lugar na Internet.
http://xoom.com/helpcenter/mapthis/mainmenu
- Usado para criar áreas não uniformes que possuem vários vérti-
ces.
- A Arrow é usada para selecionar, mover, editar e redimensionar
áreas do mapa.
- Edita as informação da área selecionada.
Na caixa de diálogo 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 não for carregada pelo navegador.
A partir do menu Goodies >> Test Map... abra a janela de teste verifi-
cando se todas as áreas estão corretas e quando estiver acabado o tes-
te, clique no botão Done. Caso alguma área não esteja de acordo com
os seus propósitos, basta selecioná-la e editar arrastando um dos seus
pontos de delimitação ou então apagá-la para fazer uma nova área.
Quando o mapa estiver do seu gosto, clique no menu File >> Save e na
caixa de diálogo 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 usuário clicar em uma região não
mapeada da figura.
<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=CIRCLE COORDS=”105,64,22"
HREF=”olho.htm” ALT=”Olho”>
<AREA SHAPE=POLY
Mas observe que o Map This fez somente o mapa para nós. Agora para
tornar este mapa funcional, precisamos indicar qual é a figura de base,
como fizemos anteriormente no tópico de figuras, e completar o código
para uma página completa.
<HTML><HEAD><TITLE>Cabeça 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=CIRCLE COORDS=”41,64,22"
HREF=”olho.htm” ALT=”Olho”>
<AREA SHAPE=CIRCLE COORDS=”105,64,22"
HREF=”olho.htm” ALT=”Olho”>
<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"
Faça por sua conta uma página 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.
<TABLE>
<TR>
<TD>País
<TD>População
<TD>Área
</TR>
<TR>
<TD>Argentina
<TD>34.000
<TD>2.780
</TR>
<TR>
<TD>Brasil
<TD>157.070
<TD>8.547
</TR>
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 ]
ANINHANDO TABELAS
<TABLE>
<TR>
<TD><TABLE>conteúdo da segunda tabela</TABLE>
<TD><TABLE>conteúdo da terceira tabela</TABLE>
</TR>
</TABLE>
<TABLE>
<TR>
<TD><IMG SRC=”america_sul3.gif”>
<TD>
<TABLE BORDER>
<TR>
<TH>País
ROWSPAN = número
COLSPAN = número
Quando você desejar que uma determinada célula ocupe duas ou mais
linhas é necessário utilizar o atributo ROWSPAN juntamente com a tag
TD informando quantas linhas esta célula ocupará.
Altere a página do nosso exemplo incluindo mais uma coluna com uma
célula mesclando duas linhas.
<TABLE>
<TR>
<TD BGCOLOR=silver><IMG SRC=”america_sul3.gif”>
<TD>
<TABLE BORDER>
<TR>
<TH>País
<TH>População
<TH>Área
<TH>Idioma
</TR>
<TR>
<TD>Brasil
<TD ALIGN=right>157.070
<TD ALIGN=right>8.547
<TD>Português
</TR>
No exemplo a seguir, utilizamos várias cores para cada uma das tags
que compõem a tabela e mesclamos duas células em linha e mais duas
em coluna..
ALTERANDO DIMENSÕES
Exemplo 1
<TABLE BORDER=2 WIDTH=330 BGCOLOR=#f0f0ff>
<TR>
<TH BGCOLOR=silver WIDTH=25>  <TH>A <TH>B <TH>C
</TR>
<TR>
<TH>1 <TD>Célula A1 <TD>Célula B1 <TD>Célula C1
</TR>
<TR>
<TH>2 <TD>Célula A2 <TD>Célula B2 <TD>Célula C2
</TR></TABLE>
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%> 
<TH WIDTH=40%>A <TH>B <TH>C
</TR>
<TR>
<TH>1 <TD>Célula A1 <TD>Célula B1 <TD>Célula C1
</TR>
<TR>
<TH HEIGHT=43>2 <TD>Célula A2
<TD>Célula B2 <TD>Célula C2
</TR>
</TABLE>
<TABLE BORDER>
<CAPTION ALIGN=top><B>AMÉRICA DO SUL</B></CAPTION>
<CAPTION ALIGN=bottom>População 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
IMAGEM DE FUNDO
produtos.htm
<HTML><HEAD>
<TITLE>Produtos</TITLE>
</HEAD>
servicos.htm
<HTML>
<HEAD>
<TITLE>Serviços</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5 COLOR=red FACE=”algerian”>
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ção permanente e por toda vida
de nossos produtos sem nenhum custo adicional.</P>
<P ALIGN=right><A HREF=”menu.htm”>menu</A></P>
</BODY></HTML>
</HEAD>
<FRAMESET COLS=100,300,*>
<FRAME SRC=”empresa.htm”>
A listagem a seguir constrói uma página com dois frames em linha, sen-
do que um possui o triplo da altura do outro.
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=*,3*>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”produtos.htm”>
</FRAMESET></HTML>
<FRAMESET ROWS=”30%,*”>
<FRAME SRC=”a.html”>
<FRAMESET COLS=”30%,*”>
<FRAME SRC=”b.html”>
<FRAME SRC=”c.html”>
</FRAMESET>
</FRAMESET>
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=30%,*>
<FRAMESET COLS=*,*>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”servicos.htm”>
</FRAMESET>
<FRAME SRC=”produtos.htm”>
</FRAMESET>
</HTML>
Exemplo 1
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRMESET ROWS=30%,* FRAMESPACING=10>
<FRAMESET COLS=*,*>
<FRAME SRC=”empresa.htm”>
<FRAME SRC=”servicos.htm” SCROLLING=no>
</FRAMESET>
<FRAME SRC=”produtos.htm”>
</FRAMESET>
</HTML>
Exemplo 2
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=*,2* FRAMESPACING=10 FRAMEBORDER=0>
<FRAME SRC=”empresa.htm” MARGINWIDTH=50>
<FRAME SRC=”produtos.htm” MARGINHEIGHT=20>
</FRAMESET>
</HTML>
LIGANDO FRAMES
Para fazer esta ligação 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.
HREF = URL
TARGET = Frame
Documento principal
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS=30%,*>
<FRAME NAME=”menu” SRC=”menu.htm”>
<FRAME NAME=”conteudo” SRC=”vazio.htm”>
</FRAMESET></HTML>
menu.htm
<HTML><HEAD>
<TITLE>Frame</TITLE>
<BASE TARGET=”conteudo”>
</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>
servicos.htm
<P ALIGN=right>
<A HREF=”empresa.htm” TARGET=”menu”>
empresa</A>  
<A HREF=”produtos.htm”>produtos</A></P>
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>
produtos_b.htm
<HTML><HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET ROWS=40,*>
<FRAME NAME=”menu_produtos” SRC=”menu_produtos.htm”
SCROLLING=no>
<FRAME NAME=”conteudo_produtos”
SRC=”produtos_inicio.htm”>
</FRAMESET></HTML>
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
<HTML><HEAD></HEAD><BODY>
<FONT SIZE=5 COLOR=red FACE=algerian>PRODUTOS</
FONT><P>
<FONT SIZE=4 COLOR=maroon>Vendemos o que há
de melhor no mercado global.</FONT><P>
</BODY></HTML>
rodas.htm
<HTML><HEAD></HEAD><BODY>
<TABLE BORDER=2 ALIGN=center>
<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
</TABLE></BODY></HTML>
Os formulários são bastante utilizados nos sites da Web, pois através de-
les é possível coletar informações de várias pessoas, solicitar a opinião
dos visitantes, fazer uma votação onde os visitantes escolhem entre um
item e outro, etc, assim, podemos concluir que os formulários permitem
coletar informações dos usuários. As respostas fornecidas pelos visitan-
tes são armazenadas, e depois você pode acessá-las e compará-las.
Mas para que este formulário funcione, é preciso que no servidor tenha
um programa, escrito em outra linguagem, responsável em receber e
processar o formulário.
OS OBJETOS DE FORMULÁRIOS
1, 2 e 5 – Campo de texto
3 e 4 – Menu de lista
6 - Botões de opção
7 - Área de texto
8 e 9 - Botões de comando
Inicialmente vamos criar uma página que envia somente o nome do usu-
ário guando este clicar no botão 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>
<TABLE>
<TR>
<TD VALIGN=”top”><B>Possui em sua casa</B>:
<TD>
<INPUT TYPE=”checkbox” NAME=”bens”
VALUE=”geladeira”>Geladeira<BR>
<INPUT TYPE=”checkbox” NAME=”bens”
VALUE=”automóvel”>Automóvel<BR>
<INPUT TYPE=”checkbox” NAME=”bens”
VALUE=”televisao”>Televisão
</TR>
</TABLE>
<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>
Dentro da tag TEXTAREA podemos incluir um texto padrão para ser exi-
bido ao usuário.
<B>Sugestões</B><BR>
<TEXTAREA NAME=”sugestao” COLS=30 ROWS=5>
Digite aqui suas sugestões
</TEXTAREA>
A maioria dos provedores nos oferece pronto um scrip que envia as res-
postas do formulário para um e-mail especificado e exibe uma página de
agradecimento ao usuário. Este scrip recebe valores de campos ocultos
<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”
Os formulários são enviados por um dos dois métodos: GET, que envia
os resultados do formulário 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 método deve
ser utilizado.
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.
25. Coloque uma legenda na tabela anterior e mais uma coluna com
figura que ocupe todas três linhas.
26. Altera as dimensões da tabela para que todas colunas tenhas a mes-
ma largura.
27. O que é frame e como ele é implementado em HTML?
28. Faça uma página com a seguinte estrutura de frames.
29. Ponha no frame A links para abrir páginas nos outros frames.
30. Em uma das páginas carregadas no frame B, faça um link que abra
uma página em D que tenha mais dois frames.