RNP

REDE NACONAL DE PESQUSA

Centro Regional de Braslia CR/DF
___________________________________________________________________________________
ftp://ftp.ufpr.br/pub/PET/apostilas/ap_html.zip maro 1996
Tutorial - Autoria em World Wide Web
Hypertext Markup Language (HTML)
Tabelas
Formulrios
Extenses o Nets!ape
Frames
Verso Revisada e Reestruturada pelo
"rupo PET#$n%ormti!a &FPR
Copyright 1995 Rede Nacional de Pesquisa - RNP
PERMTDA A REPRODUO DO PRESENTE
MATERAL, DESDE QUE TENHA FNS EDUCACONAS
OU DE PESQUSA, DEVENDO, NO ENTANTO, SER
MENCONADOS EXPRESSAMENTE OS DRETOS
AUTORAS RESERVADOS RNP. VEDADA A
REPRODUO PARA QUASQUER OUTROS FNS, A
MENOS QUE CONCEDDA EXPRESSA AUTORZAO
PELA RNP.
_______________________________________________________________
Centro Regional RNP - Braslia - CR/DF
SAS Quadra 5 Lote 6 Bloco H sala 700
70070-914 - Braslia - DF
Telefone: (061)226.4699 Fax: (061) 226.9328
Email: apoio@cr-df.rnp.br
URL: http://www.cr-df.rnp.br/
2
2
'&M(R$)
*+ ,ara!ter-sti!as "erais o HTML 05
.+ ,riano /o!umentos em HTML 06
HTML "Mnimo" 06
0+ Mar!a1es 2si!as 07
Ttulos 07
Cabealhos 08
Pargrafos 08
Quebras de linha 09
3+ $nterligano /o!umentos 10
Para comear 10
Documentos em Outros Diretrios 10
Ligando URL's 11
Ligando sesses especficas em outro documento 11
nterligando sesses em uma pgina 12
4+ Listas 13
Listas No Numeradas 13
Listas Numeradas 14
Listas de Definies 14
Listas ntercaladas 15
5+ )utras Mar!a1es 17
Texto Pr-formatado 17
Caracteres especiais 17
Endereos 18
Barras horizontais 20
6+ $nserino imagens 22
Alinhamento 23
7+ ,ontrole e ,ores e gr%i!os e %uno 25
Cores e elementos grficos de fundo 25
Cores das letras e links 26
8+ Tabelas 27
Principais Marcaes 27
Atributos de tabelas 28
Outros Elementos de Controle 31
*9+ Formulrios 35
Codificao bsica do formulrio 36
Texto 37
a.entrada de texto comum 37
b.entrada de texto protegido, senha 38
c. entrada oculta 39
d. entrada de vrias linhas de texto 40
Menus 41
a. menus com opes 41
b. listas paginveis 42
Botes 43
a. botes sim-ou-no 43
b. botes com opes 44
3
3
c, botes de submisso e limpeza 46
**+ Extenses o Nets!ape 47
*.+ Frames 50
Estrutura Bsica - Frame document 50
Sintaxe 51
a. frameset 51
b. frame 55
c. noframes 56
ntercalando Frameset - exemplos 57
Links entre frames 58
*0+ :p;ni!es 60
A1.Tabela de Comandos 60
A2.Tabela de Acentuao/ Caracteres Especiais 66
A3.Tabela de Cores 67
4
4
*+ ,ara!ter-sti!as "erais o HTML
Documentos HTML so arquivos escritos em ASC - texto.
Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad)
Existem editores especficos para vrias plataformas
Existem conversores de vrios formatos, por exemplo, doc para html
A unidade mnima de informao a "pgina
H diferenas entre os diversos clientes Web, de forma que nem todas as marcaes e
seus correspondentes recursos so suportadas por todos eles. Quando um cliente no
entende uma determinada marcao, ele simplesmente a ignora. Ao criar um documento,
importante test-lo com vrios clientes.
Voc pode visualizar um documento que esteja criando com NCSA Mosaic
(ou qualquer outro cliente Web). asta abr!"lo com o comando #pen $ocal
%ile dispon!vel na op&'o %ile do menu.
HTML utiliza marcaes especficas e distintas para dizer ao Web browser como exibir o
documento.
(mportante) *+M$ n'o ,az di,eren&a entre mai-sculas e min-sculas (n'o .
/case sensitive/). 0nt'o a nota&'o 1title2 . equivalente a 1+(+$02 ou
1+i+l02.
,omo s<o as Mar!a1es HTML=
As marcaes do HTML - tags - consistem do sinal (<), (o smbolo de "menor que"),
seguida pelo nome da marcao e fechada por (>) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabealho</H1>. O
smbolo que termina uma determinada marcao igual aquele que a inicia, antecedido
por uma barra (/) e precedido pelo texto referente.
No exemplo, <H1> avisa ao cliente Web para iniciar a formatao do primeiro nvel de
cabealho e </H1> avisa que o cabealho acabou.
H excesses a esse funcionamento em pares das marcaes. Por exemplo, a que indica
um final de pargrafo: <P> . No necessita de uma correspondente: </P>. A marcao que
indica quebra de linha - <br> - tambm no precisa de uma correspondente, e outras tais
como <hr> e <li>..
Exemplos e Mar!a1es
A notao: <TTLE> (e a correspondente </TTLE>), especificam o ttulo de um
documento.
A notao: <H1> (e a correspondente </H1>), indica a aparncia de um cabealho.
A notao: <P> a marcao para final de pargrafo.
5
5
.+ ,riano /o!umentos HTML
HTML >M-nimo>

Todo documento deve ser identificado como HTML (<html> </html>), ter uma rea de
cabealho (<head></head>) com o nome para o documento (<title> </title>), um ttulo
principal e uma rea definida como corpo(<body></body>) do contedo do documento.
Como o exemplo a seguir:
<HTML>
<HEAD>
<TTLE>HTML Mnimo</TTLE>
</HEAD>
<BODY>
<H1>Este o primeiro nvel de cabealho</H1>
Bem-vindo ao mundo do HTML.
Este o primeiro pargrafo.<P>
E este o segundo.<P>
</BODY>
</HTML>
Esta pgina vai aparecer assim:
6
6
0+ Mar!a1es 2si!as
T-tulos
Todo documento em HTML deve possuir um ttulo. De um modo geral o ttulo aparece em
lugar separado da pgina (por exemplo, alto da tela no Netscape), e utilizado para
identificar o documento em outros contextos ( por exemplo, buscas Wais). interessante
que o ttulo possa sugerir claramente o contedo do documento.
Ateno porque o conceito de ttulo diferente de cabealho. O ttulo est mais para o
nome do arquivo. No um elemento relevante na visualizao do documento como
acontece com o cabealho.
A marcao utilizada para ttulos <title> e seu par </title>.
Escrito desta forma:
<html>
<title> Este o ttulo</title>
<body>
<h2>E este o cabealho de nvel 2</h2>
Aqui entra o texto do documento ...
</body>
</html>
Apresenta-se assim:
7
7
,abe1al?os
"Cabealhos" normalmente so usados para ttulos e sub-ttulos de uma pgina.
HTML possui seis nveis de cabealhos, numerados de 1 a 6, sendo o nmero 1 o de maior
destaque. Cabealhos so exibidos em letras maiores e em negrito. O primeiro cabealho
em cada documento deve estar marcado como <H1>.
:TEN@A): ao definir o tamanho de um cabealho, voc no est definindo o tamanho da
letra (fonte 10, fonte 14). Voc apenas define que ele aparecer com maior tamanho e
destaque que o resto do texto. O tamanho exato com que ele ser visualizado definido
pelo programa visualizador de html (browser) de cada pessoa que acessar a informao.
As notaes relativas a cabealhos so:
<Hy>Texto do cabealho </Hy >
onde y um nmero entre 1 e 6 especificando o nvel do cabealho.
O conjunto de notaes possveis o que segue:
<H1>Headings</H1>
<H2>Headings</H2>
<H3>Headings</H3>
<H4>Headings</H4>
<H5>Headings</H5>
<H6>Headings</H6>
Pargra%os
A marcao <p> utilizada para definir o incio de um novo pargrafo, deixando uma linha
em branco entre cada pargrafo.HTML no reconhece o caracter de quebra de linha dos
editores de texto. Mesmo que exista uma linha em branco, os clientes Web s reconhecem
o incio de um novo pargrafo mediante a marcao apropriada.
Existem algumas excees. Por exemplo, inserindo uma marcao de pargrafo depois de
<P>, <lL>,<Hy> e outras, esta ser ignorada.

Buebras e lin?a
A marcao <br> faz uma quebra de linha sem acrescentar espao extra entre as
linhas.Veja a diferena do uso de <p> e <br> ,nos exemplos a seguir:
<html>
<body>
<h1>Utilizando p</h1>
Vamos separar esta sentena com marcao de pargrafo.<p>
Para verificar a diferena.
</body>
</html>
<html>
<body>
<h1>Utilizando br</h1>
Diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha<br>
Diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha<br>
Deu pra notar?
</body>
</html>
Veja a diferena no uso das duas notaes:
9
9
3+ $nterligano /o!umentos
Para !ome1ar
O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e
tambm imagens) a outros documentos. Os clientes exibem em destaque estas reas ou
pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata
de um link, ou interligao, no hipertexto.
A marcao C:D, que define o ponto de partida para os links, denominada de En!ora.
Para incluir uma ncora em seu documento:
1. nicie a ncora com C: . ( H um espao depois de A.)
2. Especifique o documento a ser interligado, inserindo parmetro
HREFF>%ilename> seguido do sinal: D
3. nsira o texto que vai funcionar como link no documento corrente
4. Anote a marcao de final da ncora: CG:D.
Um exemplo de referncia a um hipertexto:
C: HREFF>ListaPraias+?tml>DPraiasCG:D
A palavra HPraiasII definida como o marcador do link para se chegar ao documento
ListaPraias.html, que est no mesmo diretrio do documento corrente. Ou seja, >Praias>
aparece em negrito e se eu clicar nessa palavra ser exibido o documento apontado -
ListaPraias.html
$nterligano /o!umentos em )utros /iretJrios
possvel interligar documentos em outro diretrio especificando-se o caminho relativo a
partir do documento corrente, em relao ao que est sendo interligado.
Por exemplo, um link para o arquivo 'ergipe+?tml localizado no
subdiretrio Estaos seria assim:
C: HREFF>EstaosG'ergipe+?tml>D'ergipeCG:D
Estes so dos denominados links relativos. tambm possvel usar o caminho
completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padro
do sistema UNX.
mportante: se voc quiser referenciar um diretrio a partir do "raiz do seu servidor www,
inicie a notao com G. sto , se voc tiver uma notao desta forma
C: HREFFHGimagensGin!on*+gi%KD, significa que o arquivo in!on*+gi% dever ser buscado
no diretrio imagens que est imediatamente acima do diretrio raiz do seu servidor
WWW.
1!
1!
Ligano &RLLs
O World Wide Web utiliza-se das &ni%orm Resour!e Lo!ators (&RLs) para especificar a
localizao de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e,
gopher, WAS), o endereo do servidor, e a localizao do arquivo.
Se escreve de acordo com o esquema abaixo:
protocolo://servidor[:port]/path/filename
Onde protocolo uma das seguintes definies
file um arquivo no seu sistema local, ou servidor de ftp
http um arquivo em um servidor World Wide Web
gopher um arquivo em um servidor Gopher
WAS um arquivo em um servidor WAS
news um Usenet newsgroup
telnet uma conexo Telnet
Por exemplo, para incluir um link para o HTML 2eginnerLs "uie, em um documento, deve
ser usado:
C: HREF F >?ttpMGGNNN+n!sa+uiu!+euG"eneralG$nternetGOOOG
HTMLPrimer+?tml>D N,':Is 2eginnerIs "uie to HTMLCG:D
O que torna a sentena KN,':Is 2eginnerIs "uie to HTMLII um link para tal
documento.
Para mais informaes sobre URLs, veja em
WWW Names and Addresses3 45(s3 45$s3 45Ns, escrito por pessoas do CERN,
disponvel em ?ttpMGGin%o+!ern+!?G?ypertextGOOOG:ressingG:ressing+?tml.
A e6inner7s 8uide to 45$s, localizado no menu de Help do NCSA Mosaic, e disponvel
em ?ttpMGGNNN+n!sa+uiu!+euGemoNebGurl#primer+?tml
Ligano sesses espe!-%i!as em outro o!umento
Para fazer links com sesses de outros documentos o processo o mesmo da sesso
anterior. Faz-se uma ncora normalmente, e apenas acrescentado, aps a url do
documento de destino, o sinal P e uma palavra, ou identificador. O identificador "volta" no
nosso exemplo:
Este o meu Ca ?re%F>inex.9+?tmPQolta>DlinkCGaD para o ltimo item do ndice deste
tutorial.
No ndice do tutorial - arquivo index20.htm - dever haver uma notao que reconhea a
palavra/identificador informado no ponto de partida.
Pode ser: Ca nameF>Qolta>DCliDFormulrios EletrRni!osCGaD.
11
11
$nterligano sesses em uma pgina
HTML permite que se faam ligaes entre diferentes trechos de um documento. Voc
pode apontar uma palavra ou trecho de um texto utilizando uma ncora de nome (named
anchor). Este recurso bastante usado na gerao de ndices de contedo no incio de
uma pgina.
O passo a passo :
1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo
item1-, precedido do caracter P,da seguinte forma:
Veja o incio da Ca ?re%F>Pitem*>Dsegunda sessoCGaD+
2.Defina o "ponto de chegada", atribuindo a ele uma ncora de nome, com o nome
correspondente ao do ponto de partida, assim:
Esta Ca nameF>intem*>Dsegunda sessoCGaD trata de..
12
12
4+ Listas
Listas N<o Numeraas
Para criar uma lista no numerada:
1. Comece com a marcao de incio de lista: C&LD+
2. nsira a marcao CL$D antes de cada item da lista item. (No necessrio fechar
a marcao com </L> )
3. Encerre com a marcao de fim de lista: CG&LD+
Abaixo o exemplo de uma lista com dois itens:
<HTML>
<BODY>
<UL>
<L> mas
<L> bananas
</UL>
</BODY>
</HTML>
Vai aparecer assim:
Cada marcao <L> pode conter vrios pargrafos.
13
13
Listas Numeraas
Uma lista numerada - ou ordenada - semelhante a uma lista no numerada, exceto
porque utiliza marcao C)LD ao invs de C&LD. Os itens so identificados utilizando-se
a mesma notao CL$D .
Uma lista criada assim:
<OL>
<L> laranjas
<L> peras
<L> uvas
</OL>
Resulta neste formato:
Listas e /e%ini1es
Uma lista de definies normalmente consiste em alternar um termo (abreviado como /T) e
uma definio (abreviado como //). Clientes Web browsers geralmente mostram a
definio em nova linha com outro alinhamento.
Exemplo de uma lista de definio:
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications, is located on the
campus of the University of llinois at Urbana-Champaign. NCSA is one of the
participants in the National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in thaca, New York. CTC is
another participant in the National MetaCenter for Computational Science and
Engineering.
</DL>
14
14
Ser vista desta forma:
As entradas <DT> e <DD> podem conter vrios pargrafos (separados por <P> ), listas,
ou outras definies.
A marcao <DD> pode tambm ser utilizada, fora de uma lista de definies como se
fosse uma tabulao (insere um espao no incio da frase).
Listas $nter!alaas
As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo
resultados bastante interessantes. A prtica que vai mostrar qual o nmero mximo de
listas que vale a pena intercalar. Pode-se inclusive ter um pargrafo, intercalado com uma
lista que contenha um nico item.
Exemplo de lista intercalada:
<UL>
<L> Estados da regio sul do Brasil:
<UL>
<L> Rio Grande do Sul
<L> Santa Catarina
</UL>
<L> Um estado da regio nordeste:
<UL>
<L> Pernambuco
</UL>
</UL>
15
15
exibida com este formato:
16
16
5+ )utras Mar!a1es
Texto PrS#%ormatao
A marcao <PRE>(derivada de preformatted) delimita uma rea de texto em que
espaos, novas linhas e tabulaes so mantidas. Ou seja, o texto ser apresentado
exatamente da forma como foi digitado, mesmo que no hajam marcaes do html. uma
forma de se preservar o formato de um texto
Este recurso utilizado por exemplo para listas de programas.Vejamos um exemplo:
odem ser definidos links dentro de textos pr-formatados. No entanto, deve-se evitar utilizar
outros caracteres das marcaes em reas <PRE>. sto porque caracteres como <, >, and
& possuem um significado especfico no HTML.
O ideal utilizar as sequncias especiais, (&lt;, &gt;, and &amp;, respectivamente) sempre
que precisar representar esses caracteres. Veremos mais sobre no prximo item.
,ara!teres Espe!iais
O HTML permite que se apliquem estilos especficos a palavras ou sentenas.
Vamos ver algumas opes:
C2DCG2D texto em negrito
C$DCG$D texto em itlico
E o efeito de cada uma delas:
Para representar os caracteres das tags, utilize a seguintes notaes:
TltU para representar C
TgtU para representar D
TampU para representar T
TVuotUpara representar >
Uma lista completa dessas notaes especiais pode ser obtida no CERN, em:
?ttpMGGNNN+N0+orgG?ypertextGOOOGMark&pG$')lat*+?tml
Caso o editor que voc esteja utilizando no acentue, possvel tambm utilizar
17
17
notaes especiais para acentuao. H uma lista delas ao final deste documento.
:ten1<oM Ao contrrio do resto do HTML, as notaes especiais diferenciam letras
maisculas de minsculas. No possvel usar 9$+: no lugar de 9lt:.
Enere1os
A marcao C://RE''DCG://RE''D habitualmente utilizada para especificar o autor
do documento e a forma de contato com ele (por exemplo, o endereo eletrnico).
Geralmente o ltimo item de uma pgina.
Por exemplo, a ltima linha do e6iner7s 8uide em que foi baseado este tutorial assim:
<ADDRESS>
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
</ADDRESS>
E o resultado :
Existe ainda um recurso para criar um item na pgina que, ao ser selecionado, abre uma
janela, e permite que se envie uma mensagem eletrnica para um endereo especfico.
Para isso utiliza-se a varivel >mailtoM>
1
1
Veja o exemplo abaixo, para enviar mensagens de dvidas para o
endereo eletrnico apoio@cr-df.rnp.br
Qualquer dvida ou comentrio, voc pode enviar um email ao
<a href="mailto:apoio@cr-df.rnp.br">pessoal de apoio
</a> a usurios do CR-DF.
Fica assim:
E ao se clicar em "pessoal de apoio, se abrir uma janela para envio de mensagem
eletrnica, como abaixo:
19
19
2arras HoriWontais
A marcao <HR> produz uma linha horizontal no documento. possvel determinar uma
largura maior para as barras, utilizando-se a extenso "size".
Veja os exemplos:
2!
2!
ainda possvel determinar o quanto da largura da pgina a linha horizontal vai ocupar.
Para isso utiliza-se a extenso Nit?F .
Observe
:ten1<oM a extenso width no determina o comprimento da linha (em cm ou mm),
mas o quanto da largura da pgina ela deve ocupar.
21
21
6+ $nserino imagens
As imagens dentro de uma pgina devem estar preferencialmente no formato >+gi%>. Este
o formato mais universalmente aceito pelos visualizadores de WWW (browsers). O
Netscape consegue decodificar outros formatos como o >+Xpg> e >+rgb>, mas esta
capacidade no comum a todos os programas.
Utiliza-se a seguinte notao para incluir uma imagem:
1im6 src;/diret<rio=arquivo/2
No exemplo:
22
22
:lin?amento
Toda imagem includa pode ser posicionada (align=...) na tela das seguintes
formas: TOP, MDDLE, BOTTOM, LEFT e RGHT.
As trs primeiras opes definem a posio da imagem com relao ao texto.
Veja os exemplos:
As duas ltimas definem a posio da imagem na pgina, a direita ou esquerda:
23
23
:ten1<oM De um modo geral no necessrio incluir essa anotao para alinhar a
imagem a esquerda. Caso seja omitida a opo "align", a imagem aparecer a
esquerda da pgina.
Uma imagem pode ser tambm alinhada direita da pgina:
Uma imagem pode ser ainda um boto sensvel: Para isso basta incluir uma imagem no
interior de uma ncora.
1a >re,;/.=inde?.>tm/21im6 src;/..=ima6es=stop.6i,21=a2

24
24
7+ ,ontrole e ,ores e "r%i!os e Funo
,ores e elementos gr%i!os e %uno
) :tributo 2:,Y"R)&N/
O atributo Background deve ser aplicado marcao CboyD. Este atributo especifica a
URL de uma imagem que ser utilizada como fundo (background) de uma pgina. Esta
imagem ocupar toda a rea de fundo da tela.
Deve ser escrito desta forma:
1bod@ bacA6round;/ima6es=,undo.6i,/2 .. toda a pB6ina .. 1=bod@2
importante ter cuidado para que elementos de fundo no prejudiquem a leitura do texto
em tela. De um modo geral, esses elementos devem aparecer em cores bem claras e
sutis.
Sempre vale a pena visitar outras pginas que utilizam esse recurso para recolher
boas idias.
) :tributo 2",)L)R
Este atributo tambm deve acompanhar a marcao CboyD. Ele permite que se defina
uma cor padro para o fundo da pgina, sem necessidade de um arquivo imagem para
isso.
O formato da marcao :
1bod@ b6color;/Crr66bb/2Aqui ,ica a pB6ina1=bod@2
Onde "#rrggbb" um cdigo hexadecimal no padro "red-green-blue" utilizado para
especificar a cor de fundo.
Sugerimos a consulta a uma tabela desses padres disponvel em servio da NFNET,
em: ?ttpMGGNNN+in%i+netGNNNimagesG!olorinex+?tml . Uma verso desta tabela encontra-
se no final deste documento.
25
25
,ores e letras e links
) atributo TEZT
Este atributo utilizado para controlar a cor do texto "normal" em uma pgina. Ou seja
define a cor de todo o texto do documento exceto os links. O atributo deve acompanhar a
marcao C2)/[D, escrevendo-se da seguinte forma:
1bod@ te?t;/Crr66bb/2Aqui entra o documento1=bod@2
Onde "RGB" um cdigo hexadecimal do trio "red-green-blue", exatamente no mesmo
padro daquele utilizado no atributo BGCOLOR. Para conhecer as variaes desse padro
sugerimos consulta a tabela disponvel na NFNET citada anteriormente.
)s atributos L$NY\ ]L$NY e :L$NY
Este atributo controla a cor de textos que funcionem como link na pgina.
1. LNK define cores de links nao consultados
2. VLNK se referente a links j consultados e
3. ALNK determina cor de links quando ativados.
A notao absolutamente igual anterior, seguindo os mesmos padres para definir as
cores. Uma definio completa incluiria ento:
1bod@ te?t;/Crr66bb/ linA;/Crr66bb/ vlinA;/Crr66bb/ alinA;/Crr66bb/2
Aqui entra o documento
1=bod@2
26
26
8+ Tabelas
Prin!ipais Mar!a1es
Segue abaixo o conjunto de marcaes essenciais para desenhar tabelas em HTML.
Alguns atributos podem ser definidos para cada uma dessas marcaes. Falaremos
desses atributos mais adiante.
CT:2LEDCGT:2LED
Toda tabela deve ser iniciada com a marcao <table> e encerrada com </table>.
ATENO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e clulas.
Para que a tabela aparea com bordas simples, defina dessa forma <table
border></table>.
Antes e depois de uma tabela, acontece sempre uma quebra de linha.
CTRDCGTRD
Cada linha de uma tabela deve sempre aparecer entre as marcaes <tr> e </tr>. (TR =
Table Row)
CT/DCGT/D
Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela devem
sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto nas
clulas alinhado a esquerda.
CTHDCGTHD
Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados em
qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo
aparece em negrito.
Vamos ver ento o exemplo de uma tabela utilizando essas marcaes bsicas.
<table border>
<tr>
<td>tens/Ms</td>
<th>Janeiro</th><th>Fevereiro</th><th>Maro</th>
</tr>
<tr>
<th>Usuarios</th><td>80</td><td>93</td><td>120</td>
</tr>
<tr>
<th>Linhas</th><td>3</td><td>3</td><td>5</td>
</tr>
</table>
27
27
Vai aparecer dessa forma:
:tributos e tabelas
As marcaes das tabelas, podem apresentar resultados diferentes, se acompanhadas de
alguns atributos. Vamos ver os principais:
C2)R/ERD
Esse atributo aparece junto a marcao TABLE. Caso esse atributo no aparea, a tabela
no ter bordas.
Ou seja, como j vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas
marcaes Ctable borerD CGtableD+
C:L$"ND
Este atributo pode ser aplicado a TR,TH e TD, e controla como ser o alinhamento do texto
dentro de uma clula, com relao s bordas laterais. Aceita os valores left, center, right,
respectivamente para alinhar a esquerda, centralizar ou alinhar a direita.
Veja o exemplo:
<table border>
<tr>
<td>Primeira clula</td><td>Segunda clula</td><td>Terceira clula</td>
</tr>
<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>
</tr>
</table>
2
2
Aparece assim:
C]:L$"ND
Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas clulas com relao
a borda superior e inferior. Aceita os valores top3 middle e bottom
Exemplo:
<table border>
<tr>
<td> Teste para linhamento<br>
com relao a bordas<br>
inferior e superior<br>
</td>
<td valign=top> TOP </td>
<td valign=middle>MDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>
Aparece assim:
29
29
CN)OR:PD
Este atributo evita que haja uma quebra de linha dentro de uma clula. Cautela ao utiliz-
lo, para no produzir clulas muito largas.
C,)L'P:ND
Pode ser aplicado a TH ou TD. Define quantas colunas uma clula poder abranger. Por
padro cada clula corresponde a uma coluna, ou seja COLSPAN=1.
Vejamos um exemplo
<table border>
<tr>
<td colspan=3>3colunas</td><td>normal</td><td>normal</td>
</tr>
<tr>
<td>col 1</td><td>col 2</td><td>col3</td><td>col 4</td><td>col 5</td>
</tr>
</table>
Que fica assim:
CR)O'P:ND
Este atributo pode ser aplicado a clulas (TH e TD) e define quantas linhas uma mesma
clula pode abranger. Assim como na marcao anterior, o padro uma clula
corresponder a uma linha.
3!
3!
Novamente, vamos ver exemplos:
<table border>
<tr>
<td rowspan=3>3 linhas</td>
<td>col 2</td><td>col 3</td><td>col4</td><td>col5</td> </tr>
<tr>
<td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td>
</tr>
<tr>
<td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td>
</tr>
</table>
Apresenta-se dessa forma:
)utros elementos e !ontrole
Vamos ver agora mais um conjunto de extenses que permitem maior controle sobre
tabelas. Estas so especialmente teis na criao de mltiplas tabelas intercaladas.
2)R/ERFCQalueD
Acrescentando um valor ao atributo BORDER possvel colocar tabelas em maior
destaque:
<table border=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>
31
31
Vai aparecer assim:
,ELL'P:,$N"FCQalueD
Este atributo aplicvel marcao TABLE. Como padro, o Netscape 1.1 utiliza espao
2 entre as clulas. Este atributo define o espao entre cada clula na tabela.
<table border cellspacing=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>
Vai aparecer assim:
32
32
,ELLP://$N"FCQalueD
Este atributo aplicado tambm marcao TABLE e define a distncia entre o texto e a
borda de cada clula.
Veja exemplo:
<table border cellpadding=8>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>
Vai aparecer assim:
A tabela mais compacta possvel seria definida como: <table border=0 cellspacing=0
cellpadding=0>
O$/THFCQalue or per!entD
Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser
associado um valor em "pixels" (ponto em tela grfica), como um valor percentual. Ou seja,
determina o quanto da tela uma tabela ou clula de tabela dever ocupar.
Vamos ver os exemplos:
<table border width=50%>
<tr>
<td>segunda</td>
<td>ter&ccedil;a</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>s&aacute;bado</td>
</tr>
33
33
</table>
Vai aparecer assim:
Segundo exemplo - aplicando width a uma clula:
<table border>
<tr>
<td width=50%>segunda</td>
<td>tera</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sbado</td>
</tr>
</table>
Vai aparecer assim:
34
34
*9+ Formulrios
Neste captulo, voc vai aprender a criar "Formulrios Eletrnicos", que permitem um
usurio do Web submeter informaes para o provedor do servio.
Existem vrios tipos de campos de entrada, como:
campos de entrada de texto
menus de mltipla escolha ou escolha nica
botes sim-ou-no
botes para submisso ou limpeza de formulrio
Cada uma destes campos tem funcionalidade prpria e voc vai aprender em que situao
utiliz-los em seus formulrios.
Para melhor compreender a notao utilizada nos formulrios, voc primeiro precisa se
familiarizar com HTML (Hypertext Markup Language). Consulte, se necessrio, o tutorial da
RNP sobre HTML bsico disponvel em:
?ttpMGGNNN+!r#%+rnp+brG?ipertextosG!r#%G!ursosG?tml*G
Se voc j conhece HTML, as marcaes utilizadas em formulrios seguem a mesma
conveno, e portanto, ser fcil aprender.
Contudo, formulrios HTML sempre seguem um padro:
<TTLE>Ttulo do Documento</TTLE>
no incio, e o restante do documento a seguir.
Alm disto, as marcaes que definem o formulrio precisam ser iniciadas e finalizadas,
como
estas marcaes de listas.
<UL>
<L>Primeiro item da lista
<L>Segundo item da lista
</UL>
<FORM>
contedo do formulrio...
</FORM>
Uma ltima observao: voc pode ter mltiplos formulrios em um nico hiperdocumento.
Apenas certifique-se que os blocos <FORM></FORM> no se sobrepem.
35
35
,oi%i!a1<o bsi!a
Como vimos, um formulrio comea com a marcao CF)RMD e termina com CGF)RMD+
Outros itens devem ser especificados:
Primeiro, o formulrio precisa saber como enviar a informao para o servidor. Existem
dois
mtodos, GET e POST.
METH)/F>"ET>
A maioria dos documentos HTML so recuperados a partir da requiso de uma nica URL
ao servidor. Assim, um formulrio que utilize este mtodo, envia toda sua informao ao
final da URL ativada.
METH)/F>P)'T>
Este mtodo transmite toda a informao fornecida via formulrio, imediatamente aps a
URL ativada. Ou seja, quando o servidor recebe uma ativao de um formulrio utilizando
POST ele sabe que precisa continuar "ouvindo" para obter a informao. Este o melhor
mtodo.
'eguno, o formulrio precisa saber para onde enviar a informao. Esta a URL
sendo ativada a partir do formulrio, e ela referenciada atravs da marcao :,T$)N.
Esta URL em geral aponta para um script CG que ir receber e decodificar os
resultados. Lembre-se que se voc est referenciando um script que reside no mesmo
servidor do formulrio, voc no precisa incluir a URL completa.
ACTON="/cgi-bin/post-query" para um script no seu servidor
ACTON="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do
CR/DF
Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte estrutura:
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Marcaes de campos de entrada e HTML em geral
</FORM>
Observe que este formulrio utiliza o mtodo POST e envia as informaes digitadas para
um script local chamado post-query no diretrio /cgi-bin do servidor.
Outra informao importante: cada marcao de entrada em um formulrio tem uma opo
N:ME associada, de tal forma que o script saiba qual o nome, isto , como chamar cada
valor digitado. Certamente voc pode definir mais de um campo de entrada textual ou
menu dentro de um formulrio, mas certifique-se de que cada um possui um nome
diferente.
Texto
36
36
Entraa e texto !omum # TEZT
A forma mais simples de campo de entrada a marcao text. Este campo permite a
digitao de uma nica palavra ou linha de texto, e possui uma largura default de 20
caracteres.
)p1esM
]:L&EF>> )P,$)N:L
Utilizando a marcao VALUE voc especifica que texto aparecer no campo quando o
formulrio for exibido.
'$^EF>> )P,$)N:L
Esta marcao altera o tamanho deste campo exibido na tela.
Obs.: o usurio sempre poder digitar mais caracteres do que o tamanho do campo na
tela, pois o texto ir se deslocar a esquerda dentro do campo.
M:ZLEN"THF>> )P,$)N:L
Se voc deseja limitar o nmero de caracteres que o usurio pode digitar, basta usar esta
marcao. O formulrio ir emitir um bip de erro se o usurio tentar digitar alm do
permitido em MAXLENGTH.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Qual o seu primeiro nome?
<NPUT TYPE="text" NAME="primeiro_nome" VALUE="carlos" SZE="10"
MAXLENGTH="15">
</FORM>
Vai aparecer assim:
37
37
Obs.:
1. O valor informado em NAME deve utilizar sublinhado em vez de espaos em branco.
nserir espaos em branco nestes nomes pode causar problemas no servidor na
decodificao dos valores informados.
2. Se seu formulrio possui apenas um campo de entrada textual, ao teclar ENTER neste
campo o formulrio ser submetido, como se o usurio tivesse acionado o boto SUBMT.
Entraa e texto protegio\ sen?a # P:''O)R/
Marcaes de entrada do tipo passNor so idnticas aos campos do tipo text, exceto
pelo
fato de todos os caracteres serem exibidos como asteriscos ( *).
)p1esM
]:L&EF>> )P,$)N:L
A marcao VALUE especifica um valor default para este campo.
'$^EF>> )P,$)N:L
Esta troca o tamanho do campo de password exibido na tela.
M:ZLEN"THF>> )P,$)N:L
Limita o nmero de caracteres que o usurio pode informar como password.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
nforme sua senha de acesso (8 caracteres):
<NPUT TYPE="password" VALUE="xpto" NAME="sua_senha" SZE="8"
MAXLENGTH="8">
</FORM>
Vai aparecer assim:
Obs.:
1. Se voc pretende utilizar MAXLENGTH para limitar o nmero de caracteres informados,
tenha certeza de especificar um SZE com o mesmo tamanho, para fornecer ao usurio o
sentimento de qual a largura do campo. Esta regra no foi utilizada no primeiro exemplo,
que possui SZE igual a 10, mas MAXLENGTH de 15, o que faz o campo se deslocar nos
ltimos 5 caracteres caso o valor informado possua mais do que 10 caracteres.
2. Mesmo que o valor default VALUE esteja representado por asteriscos, o usurio pode
visualizar o seu valor atravs da recuperao do fonte do hiperdocumento em HTML (uma
opo comum na maioria dos clientes WWW).
3
3
Entraa o!ulta # H$//EN
Alm da marcao PASSWORD com um valor VALUE default, possvel
"esconder" informao passada dentro de blocos FORM com uma marcao H$//EN.
Esta informao recebida pelo script de decodificao no servidor, mas no
diretamente exibida ao usurio no formulrio.
)p1esM
]:L&EF>> )2R$":T_R$)
Atravs da marcao VALUE, voc deve especificar o texto oculto a ser enviado ao script
processador do formulrio.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Voc no pode visualizar nada aqui embaixo.
<NPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">
</FORM>
Obs.:
1. Mesmo que o valor especificado em HDDEN VALUE no seja exibido no formulrio, o
usurio pode v-lo atravs da operao de visualizao do fonte do hiperdocumento, da
mesma forma como no campo PASSWORD.
39
39
Entraa e Qrias lin?as e texto # TEZT:RE:
A marcao TEZT:RE: no utiliza o formato convencional NPUT TYPE="text" dos
exemplos
anteriores. Ao contrrio, uma marcao CTEZT:RE:D delimita o seu incio e a marcao
CGTEZT:RE:D o seu fim.
)p1esM
R)O'F>> )2R$":T_R$)
Especifica o nmero de linhas da entrada textual.
,)L'F>> )2R$":T_R$)
Especifica o nmero de colunas da entrada textual.
Texto e%ault )P,$)N:L
Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio,
simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Por favor, escreva aqui suas sugestes, dvidas e crticas:<BR>
<TEXTAREA NAME="critica" ROWS="3" COLS="40">
Gostaria de obter mais informaes sobre
este servidor. Grato.
</TEXTAREA>
</FORM>
Vai aparecer assim:
Obs.:
1. O usurio dispe de Scrollbars para digitar alm do nmero de linhas e colunas
definidas em ROWS e COLS.
4!
4!
Menus
Menus !om op1es # 'ELE,T
Menu de opo nica
A marcao 'ELE,T segue a mesma convenco de TEXTAREA. Ou seja, as opes de
menu ficam entre a marcao de incio C'ELE,TD e a de fim CG'ELE,TD.
)p1esM
)PT$)N )2R$":T_R$)
Especifica uma opo presente no menu.
]:L&EF>> )P,$)N:L
Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da opo
enviado ao servidor.
'ELE,TE/ )P,$)N:L
Por default, a primeira OPTON exibida no menu. Esta marcao estabelece uma opo
de menu a ser exibida inicialmente, quando no se deseja que seja a primeira OPTON.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Onde voc pretende fazer turismo nas frias?
<SELECT NAME="lugares_para_ver">
<OPTON>Fortaleza
<OPTON VALUE="sul">Florianpolis ou Porto Alegre
<OPTON>Rio de Janeiro
<OPTON SELECTED>Braslia
<OPTON VALUE="amazonia">Manaus
</SELECT>
</FORM>
Vai aparecer assim:
41
41
Obs.:
1. Se voc possui mais do que 3 ou 4 opes de escolha, e o usurio s pode selecionar
uma, ento este elemento de entrada o melhor. As pessoas frequentemente utilizam
vrios RADOBUTTONS, que veremos a seguir.
2. O script decodificador, no servidor, provavelmente apreciar uma nica palavra para
VALUE, em vez de mltiplas palavras. Voc sempre pode utilizar sublinhado para separar
expresses compostas.
Listas paginQeis # 'ELE,T !om '$^E
A nica diferena entre este elemento de entrada e o anterior 'ELE,T a introduo da
opo '$^E. Ela especifica quantas linhas com opes de menu sero exibidas na janela.
)p1esM
M&LT$PLE )P,$)N:L
Especifica que mltiplas opes podem ser selecionadas, em oposio ao exemplo
anterior do SELECT, onde apenas uma opo pode ser selecionada no menu.
'$^EF>> )2R$":T_R$)
Nmero de linhas (opes de menu) exibidas na janela.
)PT$)N )2R$":T_R$)
Especifica uma opo da lista.
]:L&EF>> )P,$)N:L
Especifica o valor da opo retornada ao servidor.
Se no for definido, o nome da opo enviado ao servidor.
'ELE,TE/ )P,$)N:L
Esta opo determina uma OPTON default para ser selecionada.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Que facilidades de acomodao voc deseja?<BR>
<SELECT NAME="opcional" MULTPLE SZE="5">
<OPTON>Televiso
<OPTON VALUE="casal" SELECTED>Cama de Casal
<OPTON>Ar Condicionado
<OPTON>Fax
<OPTON SELECTED>Modem V.34
<OPTON>Sauna
<OPTON>Lavanderia
<OPTON>Frigo-Bar
</SELECT>
</FORM>
42
42
Vai aparecer assim:
Obs.:
1. Este elemento de entrada bom para listas com muitas opes, porque possvel
controlar quantas sero exibidas por vez.
2. Em alguns clientes WWW, necessrio teclar simultaneamente as teclas CONTROL ou
SHFT para selecionar mltiplos itens.
2otes
2otes sim ou n<o # ,HE,Y2)Z
Retornando ao formato de $NP&T T[PEF>>, a marcao ,HE,Y2)ZE' perfeita
para escolher entre duas opes.
)p1esM
]:L&EF>> )P,$)N:L
Especifica o valor da opo enviado ao servidor. Se no for definido, o valor "on"
enviado ao script decodificador.
,HE,YE/ )P,$)N:L
Esta marcao define a opo selecionada por default.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
<NPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o boletim
de notcias.
<P>
<NPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informaes
tursticas.
</DL>
</FORM>
43
43
Vai aparecer assim:
Obs.:
1. Este elemento funciona melhor para respostas do tipo "sim/no" ou "on/off".
2. Voc pode simular uma lista SELECT MULTPLE criando CHECKBOXES com o mesmo
NAME, mas diferentes VALUES
2otes !om op1es # R:/$)
R:/$)2&TT)N' utilizam uma notao similar a de CHECKBOXES, contudo, apenas uma
opo pode ser escolhida.
)p1esM
]:L&EF>> )2R$":TJR$)
Especifica o valor da opo a ser enviado para o servidor.
Se no for definido, um valor "on" enviado ao script decodificador.
,HE,YE/ RE,)MEN/:/)
Esta marcao especifica qual boto estar selecionado por default.
Uma vez que uma seleo precisa ser feita, melhor prover uma opo pre-selecionada.
<FORM METHOD="POST" ACTON="/cgi-bin/post-query">
Suas preferncias na viagem:
<DL>
<DD>Classe do Bilhete:
<NPUT TYPE="radio" NAME="classe" VALUE="eco">econmica
<NPUT TYPE="radio" NAME="classe" VALUE="exe">executiva
<NPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira
<DD>Localizao:
<NPUT TYPE="radio" NAME="local" VALUE="frente">rea fumante
<NPUT TYPE="radio" NAME="local" VALUE="tras">rea no fumante
</DL>
</FORM>
44
44
Vai aparecer assim:
Obs.:
1. Como j foi mencionado, RADOBUTTONS no so boa escolha para listas com muitos
itens, porque o cliente tem problemas para exibir muitos botes. melhor utilizar o menu
SELECT.
2. Uma vez que um boto selecionado, ele no pode ser desmarcado sem selecionar
outro boto que possua o mesmo NAME. A seleo default pode ser restaurada com a
utilizao do boto RESET, introduzido a seguir.
3. Se voc utiliza vrios RADOBUTTONS com o mesmo NAME e nenhum VALUES, o
servidor no ser capaz de dizer que boto foi selecionado, uma vez que o valor "on" ser
retornada para qualquer um deles.
45
45
2otes e submiss<o e limpeWa # RE'ET E '&2M$T
Em vez do usurio corrigir cada NPUT, um boto RE'ET pode ser utilizado para
restaurar todos os campos a seus valores default, como se nenhuma informao houvesse
sido digitada.
E finalmente, o FORM precisa de uma opo para enviar toda a informao
digitada para o servidor, uma vez que o usurio terminou de preencher os todos os
campos de entrada. O boto '&2M$T transfere toda a informao para a URL
especificada no elemento ACTON.
)p1esM
]:L&EF>> )P,$)N:L
Especifica o texto a ser exibido no boto.
Se no for especificado, os textos default "Reset" e "Submit Query" sero colocados nos
botes RESET e SUBMT, respectivamente.
N:MEF>> )P,$)N:L
Se NAME for definido em um boto SUBMT, o formulrio ir transmitir o valor do contedo
do elemento VALUE, permitindo que voc tenha mltiplos botes SUBMT numa espcie
de verso simplificada de um RADOBUTTONS.
<FORM METHOD="POST" ACTON="/cgi-bin/donothing">
Qual o seu primeiro nome? <NPUT TYPE="text"><BR>
Aperte este boto: <NPUT TYPE="radio" NAME="nada"><BR>
<NPUT TYPE="reset" VALUE="Limpa campos">
<NPUT TYPE="submit">
</FORM>
Vai aparecer assim:
Obs.:
1. Normalmente, o script decodificador retorna um hiperdocumento aps ele processar a
informao do formulrio.
2. Nem todos os clientes suportam mltiplos botes SUBMT. melhor utilizar apenas um
nico boto SUBMT para transmitir a informao digitada no formulrio.
46
46
Extenses o Nets!ape
A Netscape Communications desenvolveu uma srie de extenses especficas,
seguem algumas abaixo.Um documento completo sobre estas extenses est disponvel
na Netscape.Com, em:
?ttpMGG?ome+m!om+!omGassistGnet`sitesG?tml`extensions+?tml
CHRD
A netscape desenvolveu 5 novas tags para serem aplicadas junto marcao HR
(horizontal rule)
CHR '$^EFnameroD
A tag SZE define a largura da linha horizontal.
CHR O$/THFper!entualD
A linha padro ocupa toda a extenso da tela. Com esta Tag possvel determinar
o percentual de ocupao da tela de um linha.
CHR :L$"NFle%tbrig?tb!enterD
Assim possvel alinhar linhas horizontais que no ocupem toda a tela, seja
direita, esquerda, ou centralizadas.
CHR N)'H:/ED
Produz uma linha realmente slida, sem nenhum tipo de sombra.
C&LD
Utilizando-se as extenses TYPE=disc, TYPE=circle, or TYPE=square possivel
definir o formato do indicador de uma lista no numerada (UL)
C)LD
Da mesma forma, possvel definir o tipo de algarismos em listas numeradas,
usando as extenses:
(TYPE=A) para letras maisculas
(TYPE=a) para letras minsculas
(TYPE=) para numerais romanos grandes
(TYPE=i) para numerais romanos pequenos
(TYPE=1) nmeros padro
Para listas que devem comear com valores diferentes de 1, pode se usar a tag
START. Por exemplo, START=5 vai exibir 'E', 'e', 'V', 'v', or '5' de acordo com a tag
TYPE.
CL$D
marcao L tambm podem ser atribuidas extenses TYPE, como em UL e OL,
conforme explicado acima. Para listas numeradas pode ser usado VALUE para
atribuir um valor a um item.
47
47
C$M"D
C$M" :L$"NFle%tbrig?tbtopbtexttopbmilebabsmilebbaselinebbottombabsbottomD
A marcao ALGN=left far com que os demais elementos sejam alinhados
direita e abaixo da imagem. Assim possvel fazer um texto contornar uma figura
alinhada a esquerda da pgina. ALGN=right se comporta de modo semelhante,
mas na borda direita da tela.
As novas extenses para HTML do NETSCAPE possibilitam ainda: ALGN=top,
ALGN=texttop, ALGN=middle, ALGN=absmiddle, ALGN=baseline, ALGN=bottom
e ALGN=absbottom, permitindo refinamentos no controle de alinhamento.
C$M" O$/THFQalor HE$"HTFQalorD
As marcaes WDTH e HEGHT podem definir o tamanho da imagem, acelerando
o trabalho do browser. Ao invs de esperar a imagem chegar, o browser sabe
previamente seu tamanho, agilizando a transferncia. tambm possvel alterar o
tamanho original de uma imagem usando-se destas marcaes. No entanto, desta
forma, pode se perder a qualidade da imagem.
C$M" 2)R/ERFQalueD
Define a espessura da borda de uma imagem. Pode-se usar border=o por exemplo
para eliminar bordas de imagens que esto definidas como links.
C$M" ]'P:,EFQalor H'P:,EFQalorD
Para as images flutuantes, VSPACE controla o espao vertical acima e abaixo da
figura, enquanto HSPACE controla o espao horizontal a esquerda e a direita da
figura.
NoQos
Elementos
CN)2RD
NOBR define que uma linha no pode ser quebrada em sua exibio. utilizado em
par = <NOBR>e</NOBR>.
CO2RD
WBR significa Word BReak. utilizado em uma linha definida como NOBR, para
determinar em qual palavra a linha pode ser quebrada se necessrio. No produz
um BR automtico, mas indica ao browser onde quebrar a linha se necessrio.
4
4
CF)NT '$^EFQalorD CGF)NTD
Com esta marcao voc pode definir tamanho de fonte. So aceitos valores entre
1-7. O tamanho padro da marcao FONT 3. O valor tambm pode ser definido
opcionalmente com os caracteres '+' or '-' , antes do nmero.
C2:'EF)NT '$^EFQalueD
Altera o tamanho da BASEFONT relativo a todas as marcaes FONT. O padro
3.
C,ENTERD
Utilizado aos pares para centralizar elementos do seu texto em html.
NoQas
Entiaes
Alm dos caracteres especiais j em uso, foram criados:
&reg; -> Marca Registrada ->
&copy; -> Copyright ->
49
49
*.+ Frames
Neste captulo, vamos ver uma facilidade ainda no "sacramentada" para os
HTMLeiros , mas que promete vir por a. a possibilidade de se dividir um hipertexto em
mltiplas janelas (,rames).
Agora, ateno por que at esse exato momento, maro 1996 s conheo um browser que
l essa facilidade. o Netscape, a partir da versao 2.0. Ento, muito cuidado,
recomendvel que voc crie sempre uma opo de navegao para quem estiver usando
um browser que no enxerga frames. Vamos ver como faz-lo.
Uma ltima observao antes de partirmos para a festa. Aqui importante que voc j
conhea HTML - Hypertext Markup Language. Se no conhece, sem problema tambm, d
uma lida cuidadosa nos tutoriais sobre HTML, disponveis em:
?ttpMGGNNN+!r#%+rnp+brG?ipertextosG!r#%G!ursosG
Este tutorial faz parte de um conjunto de mdulos destinados a quem deseja
publicar/prover informao na nternet, atravs de servio do tipo WWW (World Wide
Web).
No ms de janeiro de 1996 este conjunto compreendia 7 mdulos:
1. ntroduo Geral a nternet
2. HTML Bsico
3. Tabelas em HTML
4. Formulrios em HTML
5. Mltiplas Janelas - Frames
6. Extenses do Netscape
7. Guia de Estilo
nformaes adicionais podem ser solicitadas a webmaster@cr-df.rnp.br
Estrutura 2si!a # Frame /o!ument
O "Frame Document" um arquivo onde se define a estrutura das janelas para seu
hiperdocumento em HTML. Quantas sero e qual sua distribuio em tela. Neste
documento as marcaes <body> e seu par </body> so substitudas por <frameset> e
</frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nvel na
estrutura do seu servio de informaes baseado em WWW.
Pronto, agora preciso definir cada frame/janela internamente (s) rea(s) de frameset.
Ou seja, as caractersticas de cada janela e seus "contedos" - URL incial. Cada
janela/frame antecedido da marcao <frame>, como numa lista cada item antecedido
por <li>. Usualmente, uma URL vir associada a cada frame.
5!
5!
A estrutura mnima do ,rame document ser ento:
<html>
<head>
<title></title>
</head>
<frameset ...>
<frame src="URL">
<frame src="URL">
</frameset>
</html>
:ten1<o: Note que com apenas essas
marcaes o documento da estrutura
- Frame Document - no funciona.
necessrio que esteja definido algum
atributo para as reas de frameset,
assim como associadas urls a cada
frame, como veremos mais adiante.
:ten1<o $$: Voc poder ter - e
provavelmente ter - vrios
<frameset> intercalados. Da mesma
foma como possvel intercalar listas,
ou tabelas em HTML.
Cada uma destas marcaes - <frameset> e <frame> - aceita extenses, valores e
atributos, como veremos a seguir.
'intaxe
Frameset
Frameset aceita os atributos ROWS e COLS, referentes divises horizontais(como linhas
em uma tabela) e verticais (como colunas) entre janelas na tela. nternamente a
marcaes FRAMESET s podero aparecer outras FRAMESET, FRAME ou NOFRAMES.
$mportanteM No podem ser utilizadas as marcaes vlidas entre marcaes
C2)/[DCG2)/[D nem internamente a marcaes FRAMESET, nem antes dela, seno
FRAMESET ser ignorada.
:TR$2&T)'
*+ R)O' (<frameset rows="valor, valor, valor...>)
Define divises horizontais.entre janelas. Vem sempre acompanhado de valores
associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada
janela a ser criada dever haver um valor associado. Estes valores devem vir separados
por vrgulas.
Este valor poder ser:
NumSri!o # pixelsFD (5#WS;/DE3 FE/) Refere-se a quantos pixels cada frame
(ou janela) deve ocupar. A desvantagem desta notao que no possvel
ter controle do valor total de pixels que o cliente do usurio compreende.
Per!entualFD (5#WS;/GFH3 GFH3 FEH/) Pode ainda ser um valor percentual,
sempre somando um valor de 100%.
c o mStoo mais simples+
51
51
RelatiQoFD (5#WS;/GI3I/) Desta forma, define-se um valor relativo. No
exemplo, o primeiro frame vai ocupar dois teros da tela, e o segundo um
tero.
Exemplos M
1. Para dividir a tela do browser em trs janelas horizontais, sendo que a do meio mais
larga que as de cima e de baixo:
<html>
<head>
<title></title>
</head>
<frameset rows="20%, 60%,
20%">
<frame src="cell1.html">
<frame src="cell2.html">
<frame src="cell3.html">
</frameset>
</html>
2.Trs janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o
frame central dever ocupar o restante do espao:
<html>
<head>
<title></title>
</head>
<frameset rows="30, *,
50">
<frame src="cell1.html">
<frame src="cell2.html">
<frame src="cell3.html">
</frameset>
</html>
.+ ,)L' (<frameset cols="valor, valor, valor.. ">)
Funciona exatamente como a marcao anterior, no entanto, divide a tela em frames ou
janelas verticais.
Exemplos
52
52
Para dividir a tela do browser em trs janelas verticais
1.Trs colunas, sendo que a do meio mais larga que as de cima e de baixo:
<html>
<head>
<title></title>
</head>
<frameset cols="20%, 60% ,
20%">
<frame src="cell1.html">
<frame src="cell2.html">
<frame src="cell3.html">
</frameset>
</html>
53
53
2.Trs janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame
central dever ocupar o restante do espao:
<html>
<head>
<title></title>
</head>
<frameset cols="200, *,
100">
<frame src="cell1.html">
<frame src="cell2.html">
<frame src="cell3.html">
</frameset>
</html>
Ateno, para intercalar janelas verticais e horizontais, ser necessrio definir
vrias reas "FRAMESET". Para cada rea delimitida como "FRAMESET" voc
poder definir nmero de linhas OU colunas. Veremos como faz-lo mais adiante.
No possvel definir COLS e ROWS para uma mesma rea "FRAMESET.
54
54
Frame
A marcao FRAME define cada janela contida em uma rea "frameset. Esta marcao
no necessita de uma tag de finalizao (</frame>) e aceita 6 atributos possveis:
*+ 'R,F>url>
O atributo SRC define a URL que ser exibida em cada frame.
.+ N:MEF>nome`a`Xanela>
Este atributo utilizado para associar um nome a uma janela. Deve ser usado quando
uma janela - frame - for o destino de um link em outro documento (normalmente no
mesmo documento. Um frame apontando para outro. Tipo um ndice abrindo vrias urls em
outras janelas).
Este atributo opcional. Por padro, os frames no tem nome.
mportante, o nome_da_janela deve comear por caracter alfanumrico.
0+ M:R"$NO$/THF>Qalor>
Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia
entre o contedo da pgina e as margens da janela. O valor associado ser um valor
absoluto em pixels. O menor valor aceito ser 1.
Este atributo opcional, caso no venha definido, o browser usar o seu padro para
definir as margens no frame/janela.
3+ M:R"$NHE$"HTF>Qalor>
Tambm um atributo opcional. Funciona exatamente como o anterior, s que determina
as margens superior/inferior em cada frame.
4+ ',R)LL$N"F>yesGnoGauto>
Novamente, um atributo opcional, que define se uma janela deve possuir barra de
rolagem ou no. Caso seja definido como YES, a janela sempre possuir uma barra de
rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E,
finalmente, se vier como AUTO, o browser aplicar a barra quando necessrio.
O padro AUTO, portanto, se o atributo scrolling no vier definido, o browser aplicar a
barra de rolagem, sempre que necessrio.
5+ N)RE'$^E
Este atributo no possui valor associado. Quando ele no aparece, o usurio poder
alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padro que
todas as janelas possam ter seu tamanho alterado. NORESZE opcional
Um frame, com todos os atributos definidos seria escrito assim, por exemplo:
1,rame src;J>ttp)==KKK.cr"d,.rnp.brL name;J>omeL mar6inKidt>;JFL
mar6in>ei6>t;JFL scrollin6;JautoL noresize2
55
55
No%rames
Esta marcao possibilita que se crie uma opo de navegao na pgina para quem no
possui um browser que entende frames.
Ela aparece no documento de estrutura "Frame document", e sempre usada em pares
(<noframes>.. contedo... </noframes>). Quando o acesso for feito atravs de um browser
que entenda frames, o que estiver entre as marcaes "noframes" ser simplesmente
ignorado.
nternamente a uma rea "noframes" dever ser usada a estrutura padro de documentos
html (<head> </head>, <title> </title> <body> </body>, etc...).
Um exemplo:
<html>
<head>
<title>Teste, uso de frames</title>
</head>
<FRAMESET ROWS="15%, 85%">
<NOFRAMES>
<body bgcolor="#000000" text="#ffff00" link="#ff0000" >
Bem-vindo a uma pgina de teste.<p>
Para acess-la, voc deve utilizar a verso 2.0 ou acima do <i>browser</i><a href="http://home.netscape.com/comprod/mirror/index.html">
Netscape Navigator!</a>
</p>
<hr>
</body>
</NOFRAMES>
<FRAMESET COLS="25%, 75%">
<FRAME NAME="1" SRC="teste1.htm" NORESZE>
<FRAME NAME="2" SRC="teste2.htm" NORESZE>
</FRAMESET>
<FRAMESET COLS="30%, 70%">
<FRAME NAME="3" MARGNWDTH="50" SRC="teste3.htm">
<FRAMESET ROWS="65%, 35%">
<FRAME NAME="4" SRC="teste4.htm" NAME="chat">
<FRAME NAME="5" SRC="teste5.htm">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</html>
Veja como ela exibida, por exemplo, com o MOSAC (no l frame) e com o
NETSCAPE (l frame).
M)':$, # n<o l; %rame NET',:PE # l; %rame
56
56
$nter!alano Frameset # exemplos
Para tornar mais claro como se constrem mltiplas e intercaladas janelas - divises
horizontais e verticais - utilizando das marcaes de frames, seguem abaixo dois exemplos
de construo de documentos com mltiplas janelas.
Exemplo *
<html>
<head>
<title>Ttulo</title>
</head>
<frameset rows="30%, 70%">
<frameset cols="33%, 33%,
33%">
<frame src="">
<frame src="">
<frame src="">
</frameset>
<frameset cols="50%, 50%">
<frame src="">
<frame src="">
</frameset>
</frameset>
</html>
57
57
Exemplo .M
<html>
<head>
<title></title>
</head>
<frameset rows="15%,
85%">
<frame src="teste5.htm">
<frameset cols="25%,
75%">
<frame src="teste4.htm">
<frameset rows="85%,
15%">
<frame src="teste3.htm">
<frame src="teste2.htm">
</frameset>
</frameset>
</frameset>
</html>
Links entre %rames
A marcao TARGET, permite que se controle em qual janela um link especfico ser
exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com
uma espcie de indce do servio de informao e outra janela em que a navegao
propriamente dita vai ocorrer. Desta forma, o ndice est permanentemente disponvel
durante toda a consulta.
Para utilizar este recurso voc dever:
1. Atribuir um "name" a cada frame em seu "frame document" (name="valor").
2. No documento onde ser criado um link, que vai aparecer em outra janela, ao criar o
link, acrescentar a marcao target="valor"" ncora, da seguinte forma:
<a href="URL" target="valor">
Onde este valor idntico quele associado marcao name no frame document.
5
5
ExemploM

O frame document dever ser escrito assim: o documento que contm o ndice de
navegao (barra.htm), ser assim:
<html>
<head>
<title>Ttulo</title></head>
<frameset rows="80%, 20%">
<frame name="navega"" src="teste3.htm">
<frame src="barra.htm">
</frameset>
</html>
<html>
<head><title>Ttulo</title>
</head>
<body>
<a href="http://www.cr-df.rnp.br/"
target="navega"> [link para o cr-df]</a>
<a href="http://www.cr-df.rnp.br/"
target="navega"> [link para o cr-sp]</a>
<a href="http://www.cr-df.rnp.br/"
target="navega"> [link para o cr-pe]</a>
</body>
</html>
59
59
:p;ni!es
:*+ Tabela e ,omanos
Mar!a1<o Fun1<o ,ara!ter-sti!as
<HTML></HTML> Delimita o documento
(incio e fim)
Esta marcao deve ser inserida
imediatamente no incio e no final de
todo arquivo HTML
<HEAD></HEAD> Cabealho O cabealho de um arquivo html
uma rea para insero de
informaes que no sero visveis
na pgina HTML, tais como "title e
comentrios
<TTLE></TTLE> Ttulo do documento Nome a ser atribudo ao documento
HTML, mas que no ser visualizado
na pgina. Deve sempre aparecer na
rea definida como "head do
documento
<! > Comentrio ndicao de quaisquer comentrios,
tais como nome do autor, data de
criao, software utilizado para
autoria, etc. No visualizado na
pgina HTML (s quando solicitadao
o "source file)
Tambm deve aparecer na rea
definida como
"head do documento.
<BODY></BODY> Corpo do documento Delimita o corpo do documento. Vem
imediatamente abaixo da rea
definida como "head. Esta marcao
deve ser "fechada somente ao final
do documento, imediatamente
seguida da marcao </html>
Exemplo de como devem aparecer distribudas no arquivo as marcaes acima
citadas:
<html>
<head>
<title> Ttulo do documento</title>
<! autor: Joo das Couves>
<! ltima atualizao: 30/02/2001>
</head>
<body>
Bl bl bl ... aqui entra o contedo da pgina ... bl....
</body>
</html>
<BODY
2:,Y"R)&N/=""
>
</BODY>
magem de fundo
= arquivo imagem ou
url de arquivo imagem
nsere uma imagem como fundo da
pgina (mais ou menos como uma
"marca d'gua).
O arquivo deve estar em formato
.gif . Este arquivo pode estar na
mesma mquina (anotar sua
6!
6!
path/nome), ou em outra mquina
(indicar por URL)
<BODY
2",)L)R="#rrggb
b>
</BODY>
Cor padro de fundo
#rrggbb = cdigo de
cores rgb (ver tabela de
cores neste documento)
Define uma cor de fundo padro para
a pgina.
Esta cor pode variar de monitor para
monitor.
<BODY
TEZT="#rrggbb
L$NY="#rrggbb
]L$NY="#rrggbb
:L$NY="#rrggbb>
</BODY>
Cores do texto do
documento
#rrggbb = cdigo de
cores rgb (ver tabela de
cores neste documento)
Define a cor para:
text = texto normal da pgina
link = links da pgina
vlink = links consultados na pgina
alink = links ativados na pgina
<Hy></Hy> Ttulos ou cabealhos na
pgina
y = nmero de 1 a 6
Existem seis nveis de cabealho na
pgina (no confudir com cabealho
do documento = head):
<h1></h1>, <h2></h2> , etc.
Sendo H1 o maior e H6 o menor
nvel. Ateno, marcaes Hy
definem tamanho relativo do texto, e
os colocam em destaque
(normalmente negrito)
<P> Pargrafo nsere uma linha em branco entre
dois pargrafos
<BR> Quebra de linha Faz uma quebra de linha.
<A HREF="0 ">
texto</a>
ncora para hiperlink
referencial
0 = URL ou nome de
arquivo
Define um link.
O link vai aparecer em destaque na
pgina (normalmente outra cor e
sublinhado)
<A HREF="#">
texto</a>
ncora interna ou para
seo especfica em
outro documento
# = cdigo ou palavra
chave
Abre uma ncora para um outro
trecho dentro de uma mesma pgina,
ou para um trecho especfico em
outro documento.
*+ Tre!?o na mesma pgina
Aps a ncora de hiperlink
referencial, deve aparecer, entre
aspas, o caracter
# e uma palavra ou cdigo chave.
Este mesmo cdigo ou palavra
dever aparecer no "ponto de
chegada deste link interno, como
uma ncora de nome
(veja prximo item).
.+ Link para tre!?o espe!-%i!o em
outro o!umento
Deve ser efeito exatamente da
mesma forma, sendo que , antes do
caracter #, dever aparecer o nome
61
61
do arquivo que ser pretende 'ligar',
ou sua url completa.
<A NAME=" "> ncora de nome
= cdigo ou palavra
chave
Este o ponto de chegada de uma
ncora interna a um documento ou
para trecho especfico em outro
documento.
O cdigo ou palavra chave deve ser
idntico quele do ponto de partida.
No altera a visualizao do texto.
<A
HREF="MALTO:
xyz@algumlugar.br
>
Envio de email para
endereo especificado
Permite que se crie um link que ao
ser selecionado abrir uma tela de
composio de mensagem eletrnica
a ser enviada para o endereo
digitado aps MALTO:
<UL></UL> Delimita lista no
numerada
Deve ser escrita ao incio e ao final
da lista.
Casa item da lista antecedido da
marcao <L>
<OL></OL> Delimita lista numerada Deve ser escrita ao incio e ao final
da lista.
Casa item da lista antecedido da
marcao <L>
<L> Cada item de uma lista
numerada ou no
--o00o--
Uma lista no numerada:
<UL>
<L> item 1
<L> item 2
<L> item 3
</UL>
Uma lista numerada
<OL>
<L> item 1
<L> item 2
<L> item 3
</OL>
<DL></DL> Delimita lista de
definies
Deve ser escrita ao incio e ao final
da lista.
Cada item da lista antecedido da
marcao <DT> ou <DD>, conforme
explicado a seguir.
<DT> Entrada de ttulo em lista
de definies
nsere um ttulo em uma lista de
definio. A entrada de ttulo vai
aparecer alinhada esquerda da
pgina.
Normalmente vem seguido de um
item do tipo <DD>
<DD> Entrada de definio em
lista de definies
nsere uma definio (antecedido ou
no por <DT>). Este item vai
aparecer numa margem mais interna
pgina (como se tivesse uma
tabulao antes).
Fora de listas de definio pode ser
utilizado para produzir este mesmo
efeito (Uma "tabulao)
62
62
Uma lista de definies:
<DL>
<DT> Ttulo 1
<DD> definio a
<DD> definio b
<DT> Ttulo 2
<DD> definio a
</DL>
<PRE></PRE> Texto pr-formatado Mantm a exata formatao do texto
digitado.
<B></B> Negrito
--o00o--
<></> tlico
--o00o--
<ADRESS>
</ADRESS>
Endereo Quanto a visualizao, normalmente,
apenas coloca o trecho em itlico.
<MG SRC=".> nsero de imagem
. = nome ou URL de
arquivo imagem.
Marcao para inserir uma imagem
na pgina. Esta imagem deve estar
preferencialmente em formato .gif.
Pode estar na mesma mquina
(apontar com o nome ou path
completa) ou em outra mquina
(apontar com URL)
<MG :L$N"="
SRC=".>
Alinhamento de imagem Opcional.
Define o alinhamento de uma
imagem na pgina. Aceita os
seguintes valores:
TOP = alinha o texto com o alto da
figura
MDDLE = alinha o texto com o meio
da figura
BOTTOM = alinha o texto com o
rodap da figura
RGHT = alinha a figura direita da
tela
LEFT = alinha a figura esquerda da
tela. Faz ainda com que o texto que
esteja ao lado contorne a figura.
<HR> insere linha horizontal
--o00o--
<HR '$^E=n> Largura da linha
horizontal
n= nmero
Opcional
Extenso opcional que define a
largura da linha
<HR O$/TH=n%> Ocupao da tela da
linha horizontal
n= nmero
Opcional
Define o quanto da tela uma linha vai
ocupar.
63
63
Mar!a1es para TabelasM
<table> e </table> = define incio e fim da tabela.
<tr></tr> = define cada linha da tabela
<td></td> = define cada clula da tabela. Um conjunto de clulas aparece sempre
delimitado pelas marcaes de linha (<tr></tr>).
<th></th> = define ttulos na tabela. Na pr&acute;tica so clulas onde o texto aparece em
destaque (negrito). Podem aparecer em qualquer posio na tabela.
:tributos a TabelaM
<border> = determina que uma tabela tenha bordas. Aparece sempre associado a
marcao <TABLE BORDER>.
<align> = Controla o alinhamento horizontal do texto em uma linha ou clula. Pode
aparecer associado a TR, TD ou TH. Aceita os valores:
left = alinha esquerda
right = alinha direita
center = centraliza
<valign> = controla o alinhamento vertical do contedo de cada clula da tabela. Pode
aparecer associado a TR, TD ou TH. Aceita os valores:
top = alinha com o alto da clula
middle = alinha no meio
bottom = alinha com a parte de baixo da clula
<rowspan> = Aparece associado a clulas (TD ou TH) e determina quantas linhas uma
clula abrange.
<colspan> = Aparece associado a clulas (TD ou TH) e determina quantas colunas uma
clula abrange.
:tribui1<o e ]aloresM
BORDER=<value> define a largura da borda
CELLSPACNG=<value> define espaamento entre clulas
CELLPADDNG=<value> define distncia entre o texto e a borda das clulas
WDTH=<value or percent> determina o quanto da tela uma tabela deve ocupar
64
64
Mar!a1es para FramesM
Mar!a1<o Fun1<o G !ara!ter-sti!as
Estrutura Bsica
C?tmlD e CG?tmlD Delimita o "frame document", como em qualquer arquivo
html normal.
C?eaDCG?eaD Define cabea do documento, novamente, como em
qualquer arquivo html.
C%ramesetDCG%ramesetD delimita as janelas a serem usadas no documento. Podem
haver vrios frameset intercalados. Controla o
comportamente das janelas atravs de seus atributos.
C%rame sr!F>&RL>D Define cada janela/frame. Normalmente possui uma URL
associada. Aceita atributos e valores.
Sintaxe
ara !rameset
C%rameset roNsF>Qalor\ Qalor\
Qalor>D
define quantas linhas - janelas horizontais - e sua
ocupao na tela, para cada rea frameset. Aparecero
tantos valores quantas forem as janelas. Os valores
relativos a cada janela devero ser separados por vrgulas
.
Cada valor associado poder ser:
1. NumSri!o # em pixels = <frameset rows="30, 50">
2. Per!entual = <frameset rows="25%, 25%, 50%">
RelatiQo = <"2*,*">;
C%rameset !olsF>Qalor\ Qalor\
Qalor>D
define quantas colunas - janelas verticais - e sua ocupao
da tela. Funciona exatamente como a marcao interior
(associao de valores, com as mesmas opes).
ara !rame
C%rame 'R,F>&RL>D associa uma url a uma janela
C%rame N:MEF>Qalor>D associa um nome a uma janela
C%rame M:R"$NO$/THF>Qalor>D determina margem direita/esquerda em cada frame
C%rame M:R"$NHE$"HTF>Qalor>D determina margem superior/inferior em cada frame
C%rame
',R)LL$N"F>yesGnoGauto>D
define presena, ausncia, ou atribuio automtica (pelo
browser) de barras de rolagem
C%rame N)RE'$^E D mantm fixo o tamanho de cada janela/frame
ara "oframes
Cno%rameDCGno%rameD delimita rea para navegao opcional, destinada a quem
usa browser que no entenda 'frame'.nternamente, recebe
a marcao <body></body> delimitando o documento, e
todas as demais marcaes HTML.
#ar$et
Ca ?re%F>&RL> targetF>name>D Define a janela em que ser exibido um link ao ser ativado.
O name associado dever ser idntico ao name atribudo a
janela de destino no "frame document.
65
65
:.+Tabela e :!entua1<oG ,ara!teres Espe!iais
As notaes presentes em marcaes, devem ser representadas com notaes especiais
para que possam ser exibidas em tela. Estas notaes especiais sempre se iniciam por T
(e comercial) e encerram-se com U (ponto e vrgula).
Nota1<o es!ri1<o apar;n!ia
&lt; "Maior que D
&gt; "Menor que C
&amp; E comercial T
&quot; aspas duplas H
&reg; marca registrada
&copy copyrights
possvel utilizar facilidades de acentuao (padro do Windows por exemplo) em
documentos HTML. No entanto, desta forma, apenas poder visualizar a acentuao o
computador que reconhecer este padro especfico.
Segue abaixo o padro para acentuao- SO Latin-1 alphabet -, semelhante ao
utilizado para exibir caracteres das marcaes, e que poder ser visualizado pela grande
maioria das mquinas.
,ara!ter Nota1<o
Acento agudo &xacute; onde x uma letra qualquer, maiscula ou minscula
Acento grave &xgrave; onde x uma letra qualquer, maiscula ou minscula
Acento circunflexo &xcirc; onde x uma letra qualquer, maiscula ou minscula
Letra com til &xtilde; onde x uma letra qualquer, maiscula ou minscula
Letra com trema &xuml; onde x uma letra qualquer, maiscula ou minscula
Letras unidas &Aelig; = e &aelig; =
Letra com argola &Aring; = e &aring =
Cedilha &Ccedil; = @ e &ccedil= 1
N com til &Ntilde; = d e &ntilde; = e
O cortado &Oslash; = e &oslash; =
THORN maisculo &THORN = (celandic)
thorn minsculo &thorn= (celandic)
eth minsculo &eth (celandic)
eth maisculo &ETH;= (celandic)
Caracter alemo &szlig =
66
66
:0+ Tabela e ,ores
Tabela original em: ?ttpMGGNNN+in%i+netGNNNimagesG!olorinex+?tml
O?ite rgb=#FFFFFF
href="e002.html
TARGET="right NDMACRO
HtmlResAnchorRe
rgb=#FF0000
?re%F>e990+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or "reen
r"b#$!!%%!!
?re%F>e993+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 2lue
r"b#$!!!!%%
?re%F>e994+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Magenta
r"b#$%%!!%%
?re%F>e995+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or ,yan
r"b#$!!%%%%
?re%F>e996+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or [elloN
r"b#$%%%%!!
?re%F>e997+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 2la!k
r"b#$!!!!!!
?re%F>e998+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or
:Vuamarine r"b#$7!&'93
href="e010.html
TARGET="right NDMACRO
HtmlResAnchor Baker's
Chocolate rgb=#5C3317
href="e011.html
TARGET="right NDMACRO
HtmlResAnchor Blue Violet
rgb=#9F5F9F
?re%F>e9*.+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 2rass
r"b#$'5(642
href="e013.html
TARGET="right NDMACRO
HtmlResAnchor Bright Gold
rgb=#D9D919
?re%F>e9*3+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 2roNn
r"b#$(62(2(
?re%F>e9*4+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 2ronWe
r"b#$)753
href="e016.html
TARGET="right NDMACRO
HtmlResAnchor Bronze
rgb=#A67D3D
href="e017.html
TARGET="right NDMACRO
HtmlResAnchor Cadet Blue
rgb=#5F9F9F
href="e018.html
TARGET="right NDMACRO
HtmlResAnchor Cool Copper
rgb=#D98719
?re%F>e9*8+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or ,opper
r"b#$'7333
?re%F>e9.9+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or ,oral
r"b#$%%7%!!
href="e021.html
TARGET="right NDMACRO
HtmlResAnchor Corn Flower
Blue rgb=#42426F
href="e022.html
TARGET="right NDMACRO
HtmlResAnchor Dark Brown
rgb=#5C4033
href="e023.html
TARGET="right NDMACRO
HtmlResAnchor Dark Green
rgb=#2F4F2F
href="e024.html
TARGET="right NDMACRO
HtmlResAnchor Dark Green
Copper rgb=#4A766E
href="e025.html
TARGET="right NDMACRO
HtmlResAnchor Dark Olive
Green rgb=#4F4F2F
href="e026.html
TARGET="right NDMACRO
HtmlResAnchor Dark Orchid
rgb=#9932CD
href="e027.html
TARGET="right NDMACRO
HtmlResAnchor Dark Purple
rgb=#871F78
href="e028.html
TARGET="right NDMACRO
HtmlResAnchor Dark Slate
Blue rgb=#6B238E
href="e029.html
TARGET="right NDMACRO
HtmlResAnchor Dark Slate
Grey rgb=#2F4F4F
href="e030.html
TARGET="right NDMACRO
HtmlResAnchor Dark Tan
rgb=#97694F
href="e031.html
TARGET="right NDMACRO
HtmlResAnchor Dark
Turquoise rgb=#7093DB
href="e032.html
TARGET="right NDMACRO
HtmlResAnchor Dark Wood
rgb=#855E42
href="e033.html
TARGET="right NDMACRO
HtmlResAnchor Dim Grey
rgb=#545454
href="e034.html
TARGET="right NDMACRO
HtmlResAnchor Dusty Rose
rgb=#856363
?re%F>e904+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Felspar
r"b#$&19275
?re%F>e905+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Firebri!k
r"b#$E2323
href="e038.html
TARGET="right NDMACRO
HtmlResAnchor Forest Green
rgb=#238E23
?re%F>e908+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or "ol
r"b#$)&7%32
?re%F>e939+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or "olenro
r"b#$&'&'7!
?re%F>e93*+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or "rey
r"b#$)!)!)!
href="e042.html
TARGET="right NDMACRO
HtmlResAnchor Green
Copper rgb=#527F76
67
67
href="e043.html
TARGET="right NDMACRO
HtmlResAnchor Green
Yellow rgb=#93DB70
href="e044.html
TARGET="right NDMACRO
HtmlResAnchor Hunter
Green rgb=#215E21
href="e045.html
TARGET="right NDMACRO
HtmlResAnchor ndian Red
rgb=#4E2F2F
?re%F>e935+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Y?aki
r"b#$9%9%5%
href="e047.html
TARGET="right NDMACRO
HtmlResAnchor Light Blue
rgb=#C0D9D9
href="e048.html
TARGET="right NDMACRO
HtmlResAnchor Light Grey
rgb=#A8A8A8
href="e049.html
TARGET="right NDMACRO
HtmlResAnchor Light Steel
Blue rgb=#8F8FBD
href="e050.html
TARGET="right NDMACRO
HtmlResAnchor Light Wood
rgb=#E9C2A6
href="e051.html
TARGET="right NDMACRO
HtmlResAnchor Lime Green
rgb=#32CD32
href="e052.html
TARGET="right NDMACRO
HtmlResAnchor Mandarian
Orange rgb=#E47833
?re%F>e940+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Maroon
r"b#$E236'
href="e054.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Aquamarine rgb=#32CD99
href="e055.html
TARGET="right NDMACRO
HtmlResAnchor Medium Blue
rgb=#3232CD
href="e056.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Forest Green rgb=#6B8E23
href="e057.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Goldenrod rgb=#EAEAAE
href="e058.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Orchid rgb=#9370DB
href="e059.html
TARGET="right NDMACRO
HtmlResAnchor Medium Sea
Green rgb=#426F42
href="e060.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Slate Blue rgb=#7F00FF
href="e061.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Spring Green rgb=#7FFF00
href="e062.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Turquoise rgb=#70DBDB
href="e063.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Violet Red rgb=#DB7093
href="e064.html
TARGET="right NDMACRO
HtmlResAnchor Medium
Wood rgb=#A68064
href="e065.html
TARGET="right NDMACRO
HtmlResAnchor Midnight
Blue rgb=#2F2F4F
href="e066.html
TARGET="right NDMACRO
HtmlResAnchor Navy Blue
rgb=#23238E
href="e067.html
TARGET="right NDMACRO
HtmlResAnchor Neon Blue
rgb=#4D4DFF
href="e068.html
TARGET="right NDMACRO
HtmlResAnchor Neon Pink
rgb=#FF6EC7
href="e069.html
TARGET="right NDMACRO
HtmlResAnchor New
Midnight Blue rgb=#00009C
href="e070.html
TARGET="right NDMACRO
HtmlResAnchor New Tan
rgb=#EBC79E
href="e071.html
TARGET="right NDMACRO
HtmlResAnchor Old Gold
rgb=#CFB53B
?re%F>e96.+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or )range
r"b#$%%7%!!
href="e073.html
TARGET="right NDMACRO
HtmlResAnchor Orange Red
rgb=#FF2400
?re%F>e963+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or )r!?i
r"b#$&'7!&'
href="e075.html
TARGET="right NDMACRO
HtmlResAnchor Pale Green
rgb=#8FBC8F
?re%F>e965+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Pink
r"b#$')%%
?re%F>e966+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Plum
r"b#$E((&E(
?re%F>e967+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or BuartW
r"b#$&9&9%3
href="e079.html
TARGET="right NDMACRO
HtmlResAnchor Rich Blue
rgb=#5959AB
?re%F>e979+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 'almon
r"b#$6%4242
?re%F>e97*+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or '!arlet
r"b#$)1717
href="e082.html
TARGET="right NDMACRO
HtmlResAnchor Sea Green
rgb=#238E68
href="e083.html
TARGET="right NDMACRO
HtmlResAnchor Semi-Sweet
Chocolate rgb=#6B4226
?re%F>e973+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 'ienna
r"b#$E6'23
?re%F>e974+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or 'ilQer
r"b#$E6E%(
href="e086.html
TARGET="right NDMACRO
HtmlResAnchor Sky Blue
6
6
rgb=#3299CC
href="e087.html
TARGET="right NDMACRO
HtmlResAnchor Slate Blue
rgb=#007FFF
href="e088.html
TARGET="right NDMACRO
HtmlResAnchor Spicy Pink
rgb=#FF1CAE
href="e089.html
TARGET="right NDMACRO
HtmlResAnchor Spring Green
rgb=#00FF7F
href="e090.html
TARGET="right NDMACRO
HtmlResAnchor Steel Blue
rgb=#236B8E
href="e091.html
TARGET="right NDMACRO
HtmlResAnchor Summer Sky
rgb=#38B0DE
?re%F>e98.+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or Tan
r"b#$&'937!
?re%F>e980+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or T?istle
r"b#$&'%&
?re%F>e983+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or TurVuoise
r"b#$(&E(E(
href="e095.html
TARGET="right NDMACRO
HtmlResAnchor Very Dark
Brown rgb=#5C4033
href="e096.html
TARGET="right NDMACRO
HtmlResAnchor Very Light
Grey rgb=#CDCDCD
?re%F>e986+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or ]iolet
r"b#$4%2%4%
href="e098.html
TARGET="right NDMACRO
HtmlResAnchor Violet Red
rgb=#CC3299
?re%F>e988+?tml
T:R"ETF>rig?t $N/M:,R)
HtmlRes:n!?or O?eat
r"b#$&&'%
href="e100.html
TARGET="right NDMACRO
HtmlResAnchor Yellow
Green rgb=#99CC32
69
69
REFERfN,$:' 2$2L$)"R(F$,:'