Gui A HTML

RNP REDE NACIONAL DE PESQUISA
Centro Regional de Brasília CR/DF

___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia1.zip dezembro 1995
Tutorial - Autoria em World Wide Web
Parte I - Hypertext Markup Language (HTML) - Básico

(HTML 2.0 e algumas extensões do Netscape)
© Copyright 1995 Rede Nacional de Pesquisa - RNP
É PERMITIDA A REPRODUÇÃO DO PRESENTE MATERIAL, DESDE

QUE TENHA FINS EDUCACIONAIS OU DE PESQUISA, DEVENDO,
NO ENTANTO, SER MENCIONADOS EXPRESSAMENTE OS
DIREITOS AUTORAIS RESERVADOS À RNP. É VEDADA A
REPRODUÇÃO PARA QUAISQUER OUTROS FINS, A MENOS QUE
CONCEDIDA EXPRESSA AUTORIZAÇÃO PELA RNP.
________________________________________________________________
Centro Regional RNP - Brasília - CR/DF
SAS Quadra 5 Lote 6 Bloco H sala 700
70070-914 - Brasília - DF
Telefone: (061)226.4699 Fax: (061) 226.9328
Email: apoio@cr-df.rnp.br
URL: http://www.cr-df.rnp.br/
ÍNDICE
I . Características Gerais do HTML 3
II. Criando Documentos em HTML 4
a. HTML "Mínimo" 4
b. Marcações Básicas 5
1.Títulos 5
2.Cabeçalhos 6
3.Parágrafos 6
4.Quebras de linha 7
c. Interligando Documentos 8
1. Para começar 8
2. Documentos em Outros Diretórios 8
3. Ligando URL's 9
4. Ligando sessões específicas em outro documento 9
d. Interligando sessões em uma página 10
e. Listas 11
1. Listas Não Numeradas 11
2. Listas Numeradas 12
3. Listas de Definições 12
4. Listas Intercaladas 13
f. Texto Pré-formatado 15
g. Caracteres especiais 16
h. Endereços 17
i. Inserir imagens 19
j. Controle de Cores e gráficos de fundo 22

1. Cores e elementos gráficos de fundo 22
2. Cores das letras e links 23
k. Barras horizontais 24
III.Tabela de Comandos 26
IV.Tabela de Acentuação/ Caracteres Especiais 30
V.Tabela de Cores 31
2
I. Características Gerais do HTML
• Documentos HTML são arquivos escritos em ASCII - texto.
• Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad)
• Existem editores específicos para várias plataformas
• Existem conversores de vários formatos, por exemplo, doc para html
• A unidade mínima de informação é a “página”
Há diferenças entre os diversos clientes Web, de forma que nem todas as marcações
e seus correspondentes recursos são suportadas por todos eles. Quando um cliente
não entende uma determinada marcação, ele simplesmente a ignora. Ao criar um
documento, é importante testá-lo com vários clientes.
Você pode visualizar um documento que esteja criando com NCSA Mosaic
(ou qualquer outro cliente Web). Basta abrí-lo com o comando Open Local
File disponível na opção File do menu.
HTML utiliza marcações específicas e distintas para dizer ao Web browser como exibir o
documento.
Importante: HTML não faz diferença entre maiúsculas e minúsculas (não é

"case sensitive"). Então a notação <title> é equivalente a <TITLE> ou
<TiTlE>.
Como são as Marcações HTML?
As marcações do HTML - tags - consistem do sinal (<), (o símbolo de "menor que"), seguida
pelo nome da marcação e fechada por (>) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O

símbolo que termina uma determinada marcação é igual aquele que a inicia, antecedido por
uma barra (/) e precedido pelo texto referente.
No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de
cabeçalho e </H1> avisa que o cabeçalho acabou.
Há excessões a esse funcionamento em pares das marcações. Por exemplo, a que indica
um final de parágrafo: <P> . Não necessita de uma correspondente: </P>. A marcação que
indica quebra de linha - <br> - também não precisa de uma correspondente, e outras tais
como <hr> e <li>..
Exemplos de Marcações
• A notação: <TITLE> (e a correspondente </TITLE>), especificam o título de um

documento.
• A notação: <H1> (e a correspondente </H1>), indica a aparência de um cabeçalho.
• A notação: <P>é a marcação para final de parágrafo.
3
II. Criando Documentos HTML
a. HTML "Mínimo"
Todo documento deve ser identificado como HTML (<html> </html>), ter uma área de
cabeçalho (<head></head>) com o nome para o documento (<title> </title>), um título
principal e uma área definida como corpo(<body></body>) do conteúdo do documento. Como
o exemplo a seguir:
<HTML>
<HEAD>
<TITLE>Exemplo de HTML simples</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho</H1>
Bem-vindo ao mundo do HTML.
Este é o primeiro parágrafo.<P>
E este é o segundo.<P>
</BODY>
</HTML>
Esta página vai aparecer assim:
4
b. Marcações Básicas
1. Títulos
2. Cabeçalhos
3. Parágrafos
4. Quebras de linha
1. Títulos
Todo documento em HTML deve possuir um título. De um modo geral o título aparece em
lugar separado da página (por exemplo, alto da tela no Netscape), e é utilizado para
identificar o documento em outros contextos ( por exemplo, buscas Wais). É interessante que
o título possa sugerir claramente o conteúdo do documento.
Atenção porque o conceito de título é diferente de cabeçalho. O título está mais para o nome
do arquivo. Não é um elemento relevante na visualização do documento como acontece com
o cabeçalho.
A marcação utilizada para títulos é <title> e seu par </title>.
Escrito desta forma:
<html>
<title> Este é o título</title>
<body>
<h2>E este o cabeçalho de nível 2</h2>
Aqui entra o texto do documento ...
</body>
</html>
Apresenta-se assim:
5
2. Cabeçalhos
"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página.
HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior

destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O primeiro cabeçalho em
cada documento deve estar marcado como <H1>.
ATENÇÃO: ao definir o tamanho de um cabeçalho, você não 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 informação.
As notações relativas a cabeçalhos são:
<Hy>Texto do cabeçalho </Hy >
onde y é um número entre 1 e 6 especificando o nível do cabeçalho.
O conjunto de notações possíveis é o que segue:
<H1>Headings</H1>
<H2>Headings</H2>
<H3>Headings</H3>
<H4>Headings</H4>
<H5>Headings</H5>
<H6>Headings</H6>
3. Parágrafos
A marcação <p> é utilizada para definir o início de um novo parágrafo, deixando uma linha
em branco entre cada parágrafo.HTML não reconhece o caracter de quebra de linha dos
editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o
início de um novo parágrafo mediante a marcação apropriada.
Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de
<P>, <lLI>,<Hy> e outras, esta será ignorada.
6
4. Quebras de linha
A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas.Veja
a diferença do uso de <p> e <br> ,nos exemplos a seguir:
<html>
<body>
<h1>Utilizando p</h1>
Vamos separar esta sentença com marcação de parágrafo.<p>
Para verificar a diferença.
</body>
</html>
<html>
<body>
<h1>Utilizando br</h1>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Deu pra notar?
</body>
</html>
Veja a diferença no uso das duas notações:
7
c. Interligando Documentos
1. Para começar
2. Documentos em Outros Diretórios
3. Ligando URL’s
4. Ligando sessões específicas em outro documento
1. Para começar
O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e

também 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 interligação, no hipertexto.
A marcação <A>, que define o ponto de partida para os links, é denominada de âncora. Para
incluir uma âncora em seu documento:
1. Inicie a âncora com <A . ( Há um espaço depois de A.)

2. Especifique o documento a ser interligado, inserindo parâmetro HREF="filename"
seguido do sinal: >
3. Insira o texto que vai funcionar como link no documento corrente
4. Anote a marcação de final da âncora: </A>.
Um exemplo de referência a um hipertexto:

<A HREF="ListaPraias.html">Praias</A>
A palavra “Praias'' é definida como o marcador do link para se chegar ao documento

ListaPraias.html, que está no mesmo diretório do documento corrente. Ou seja, "Praias"
aparece em negrito e se eu clicar nessa palavra será exibido o documento apontado -
ListaPraias.html
2. Interligando Documentos em Outros Diretórios
É possível interligar documentos em outro diretório especificando-se o caminho relativo a

partir do documento corrente, em relação ao que está sendo interligado.
Por exemplo, um link para o arquivo Sergipe.html localizado no

subdiretório Estados seria assim:
<A HREF="Estados/Sergipe.html">Sergipe</A>
Estes são dos denominados links relativos. É também possível usar o caminho
completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padrão do
sistema UNIX.
Importante: se você quiser referenciar um diretório a partir do “raiz” do seu servidor www,
inicie a notação com /. Isto é, se você tiver uma notação desta forma
<A HREF=“/imagens/incon1.gif”>, significa que o arquivo incon1.gif deverá ser buscado
no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW.
3. Ligando URL’s
8
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a
localização de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e,
gopher, WAIS), o endereço do servidor, e a localização do arquivo.
Se escreve de acordo com o esquema abaixo:
protocolo://servidor[:port]/path/filename
Onde protocolo é uma das seguintes definições
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
WAIS um arquivo em um servidor WAIS
news um Usenet newsgroup
telnet uma conexão Telnet
Por exemplo, para incluir um link para o HTML Beginner’s Guide, em um documento, deve
ser usado:
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/

HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>
O que torna a sentença ”NCSA's Beginner's Guide to HTML'' um link para tal
documento.
Para mais informações sobre URLs, veja em
• WWW Names and Addresses, URIs, URLs, URNs, escrito por pessoas do CERN,
disponível em
http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html.
• A Beginner's Guide to URLs, localizado no menu de Help do NCSA Mosaic, e
disponível em http://www.ncsa.uiuc.edu/demoweb/url-primer.html
4. Ligando sessões específicas em outro documento
Para fazer links com sessões de outros documentos o processo é o mesmo da sessão
anterior. Faz-se uma âncora normalmente, e apenas é acrescentado, após a url do
documento de destino, o sinal # e uma palavra, ou identificador. O identificador é "volta" no
nosso exemplo:
Este é o meu <a href="index20.htm#volta">link</a> para o último item do índice deste

tutorial.
No índice do tutorial - arquivo index20.htm - deverá haver uma notação que reconheça a
palavra/identificador informado no ponto de partida.
Pode ser: <a name="volta"><li>Formulários Eletrônicos</a>.
9
d. Interligando sessões em uma página
HTML permite que se façam ligações 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 geração de índices de conteúdo no início de uma página.
O passo a passo é :
1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo item1-,

precedido do caracter #,da seguinte forma:
Veja o início da <a href="#item1">segunda sessão</a>.
2.Defina o "ponto de chegada", atribuindo a ele uma âncora de nome, com o nome
correspondente ao do ponto de partida, assim:
Esta <a name="intem1">segunda sessão</a> trata de..
10
e. Listas
1. Listas Não Numeradas

2. Listas Numeradas
3. Listas de Definições
4. Listas Intercaladas
1. Listas Não Numeradas
Para criar uma lista não numerada:
1. Comece com a marcação de início de lista: <UL>.

2. Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar
a marcação com </LI> )
3. Encerre com a marcação de fim de lista: </UL>.
Abaixo o exemplo de uma lista com dois itens:
<UL>
<LI> maçãs
<LI> bananas
</UL>
Vai aparecer assim:
Cada marcação <LI> pode conter vários parágrafos.
11
2. Listas Numeradas
Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto porque
utiliza marcação <OL> ao invés de <UL>. Os itens são identificados utilizando-se a
mesma notação <LI> .
Uma lista criada assim:
<OL>
<LI> laranjas
<LI> peras
<LI> uvas
</OL>
Resulta neste formato:
3. Listas de Definições
Uma lista de definições normalmente consiste em alternar um termo (abreviado como DT) e
uma definição (abreviado como DD). Clientes Web browsers geralmente mostram a
definição em nova linha com outro alinhamento.
Exemplo de uma lista de definição:
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications, is located on the campus
of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is
another participant in the National MetaCenter for Computational Science and
Engineering.
</DL>
12
Será vista desta forma:
As entradas <DT> e <DD> podem conter vários parágrafos (separados por <P> ), listas, ou
outras definições.
A marcação <DD> pode também ser utilizada, fora de uma lista de definições como se fosse
uma tabulação (insere um espaço no início da frase).
4. Listas Intercaladas
As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados

bastante interessantes. A prática é que vai mostrar qual o número máximo de listas que vale
a pena intercalar. Pode-se inclusive ter um parágrafo, intercalado com uma lista que
contenha um único item.
Exemplo de lista intercalada:
<UL>
<LI> Estados da região sul do Brasil:
<UL>
<LI> Rio Grande do Sul
<LI> Santa Catarina
</UL>
<LI> Um estado da região nordeste:
<UL>
<LI> Pernambuco
</UL>
</UL>
13
É exibida com este formato:
14
f. Texto Pré-formatado
A marcação <PRE>(derivada de ”preformatted”) delimita uma área de texto em que espaços,

novas linhas e tabulações são mantidas. Ou seja, o texto será apresentado exatamente da
forma como foi digitado, mesmo que não hajam marcações do html. É uma forma de se
preservar o formato de um texto
Este recurso é utilizado por exemplo para listas de programas.Vejamos um exemplo:

<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
Apresenta-se assim:
Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitar utilizar
outros caracteres das marcações em áreas <PRE>. Isto porque caracteres como <, >, and &
possuem um significado específico no HTML.
O ideal é utilizar as sequências especiais, (<, >, and &, respectivamente) sempre
que precisar representar esses caracteres. Veremos mais sobre no próximo item.
15
g. Caracteres Especiais
HTML permite que se apliquem estilos específicos a palavras ou sentenças.
Vamos ver algumas opções:
<B></B> texto em negrito

<I></I> texto em itálico
E o efeito de cada uma delas:
Para representar os caracteres das tags, utilize a seguintes notações:
< para representar <

> para representar >
& para representar &
"para representar "
Uma lista completa dessas notações especiais pode ser obtida no CERN, em:
http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html
Caso o editor que você esteja utilizando não acentue, é possível também utilizar
notações especiais para acentuação. Há uma lista delas ao final deste documento.
Atenção: Ao contrário do resto do HTML, as notações especiais diferenciam letras

maiúsculas de minúsculas. Não é possível usar &LT; no lugar de <.
16
h. Endereços
A marcação <ADDRESS></ADDRESS> é habitualmente utilizada para especificar o autor do

documento e a forma de contato com ele (por exemplo, o endereço eletrônico). Geralmente é
o último item de uma página.
Por exemplo, a última linha do Beginer's Guide 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 página que, ao ser selecionado, abre uma
janela, e permite que se envie uma mensagem eletrônica para um endereço específico. Para
isso utiliza-se a variável "mailto:"
Veja o exemplo abaixo, para enviar mensagens de dúvidas para o

endereço eletrônico apoio@cr-df.rnp.br
Qualquer dúvida ou comentário, você pode enviar um email ao

<a href="mailto:apoio@cr-df.rnp.br">pessoal de apoio
</a> a usuários do CR-DF.
Fica assim:
17
E ao se clicar em “pessoal de apoio”, se abrirá uma janela para envio de mensagem
eletrônica, como abaixo:
18
I. Inserir imagens
As imagens dentro de uma página devem estar preferencialmente no formato ".gif". Este é o
formato mais universalmente aceito pelos visualizadores de WWW (browsers). O Netscape
consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade não é
comum a todos os programas.
Utiliza-se a seguinte notação para incluir uma imagem:
<img src="diretório/arquivo">
No exemplo:
19
• Alinhamento das imagens
Toda imagem incluída pode ser posicionada (align=...) na tela das seguintes
formas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT.
As três primeiras opções definem a posição da imagem com relação ao texto.

Veja os exemplos:
As duas últimas definem a posição da imagem na página, a direita ou esquerda:
20
Atenção: De um modo geral não é necessário incluir essa anotação para alinhar a
imagem a esquerda. Caso seja omitida a opção "align", a imagem aparecerá a
esquerda da página.
Uma imagem pode ser também alinhada à direita da página:
Uma imagem pode ser ainda um botão sensível: Para isso basta incluir uma imagem no
interior de uma âncora.
<a href="./index.htm"><img src="../images/stop.gif></a>
21
j. Controle de Cores e Gráficos de Fundo
1. Cores e elementos gráficos de fundo

2. Cores de letras e links
1. Cores e elementos gráficos de fundo
• O Atributo Background
O atributo Background deve ser aplicado à marcação <body>. Este atributo especifica a
URL de uma imagem que será utilizada como fundo (background) de uma página. Esta
imagem ocupará toda a área de fundo da tela.
Deve ser escrito desta forma:
<body background="images/fundo.gif"> .. toda a página .. </body>
É importante ter cuidado para que elementos de fundo não 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 páginas que utilizam esse recurso para recolher
boas idéias.
• O Atributo BGColor
Este atributo também deve acompanhar a marcação <body>. Ele permite que se defina uma
cor padrão para o fundo da página, sem necessidade de um arquivo imagem para isso.
O formato da marcação é:
<body bgcolor="#rrggbb">Aqui fica a página</body>
Onde "#rrggbb" é um código hexadecimal no padrão "red-green-blue" utilizado para

especificar a cor de fundo.
Sugerimos a consulta a uma tabela desses padrões disponível em serviço da INFINET, em:
http://www.infi.net/wwwimages/colorindex.html . Uma versão desta tabela encontra-se
no final deste documento.
22
2. Cores de letras e links
• O atributo TEXT
Este atributo é utilizado para controlar a cor do texto "normal" em uma página. Ou seja define
a cor de todo o texto do documento exceto os links. O atributo deve acompanhar a marcação
<BODY>, escrevendo-se da seguinte forma:
<body text="#rrggbb">Aqui entra o documento</body>
Onde "RGB" é um código hexadecimal do trio "red-green-blue", exatamente no mesmo

padrão daquele utilizado no atributo BGCOLOR. Para conhecer as variações desse padrão
sugerimos consulta a tabela disponível na INFINET citada anteriormente.
• Os atributos LINK, VLINK e ALINK
Este atributo controla a cor de textos que funcionem como link na página.
1. LINK define cores de links nao consultados

2. VLINK se referente a links já consultados e
3. ALINK determina cor de links quando ativados.
A notação é absolutamente igual à anterior, seguindo os mesmos padrões para definir as

cores. Uma definição completa incluiria então:
<body text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">

Aqui entra o documento
</body>
23
k. Barras horizontais
A marcação <HR> produz uma linha horizontal no documento.
É possível determinar uma largura maior para as barras, utilizando-se a extensão "size".
Veja os exemplos:
24
É ainda possível determinar o quanto da largura da página a linha horizontal vai ocupar. Para
isso utiliza-se a extensão width= .
Observe
Atenção: a extensão width não determina o comprimento da linha (em cm ou mm),

mas o quanto da largura da página ela deve ocupar.
25
III. Tabela de Comandos
Marcação Função Características
<HTML></HTML> Delimita o documento Esta marcação deve ser inserida
(início e fim) imediatamente no início e no final de todo
arquivo HTML
<HEAD></HEAD> Cabeçalho O cabeçalho de um arquivo html é uma área
para inserção de informações que não serão
visíveis na página HTML, tais como “title” e
comentários
<TITLE></TITLE> Título do documento Nome a ser atribuído ao documento HTML,
mas que não será visualizado na página.
Deve sempre aparecer na área definida como
“head” do documento
<! > Comentário Indicação de quaisquer comentários, tais
como nome do autor, data de criação,
software utilizado para autoria, etc. Não é
visualizado na página HTML (só quando
solicitadao o “source file”)
Também 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 marcação deve ser “fechada”
somente ao final do documento,
imediatamente seguida da marcação </html>
Exemplo de como devem aparecer distribuídas no arquivo as marcações acima citadas:
<html>
<head>
<title> Título do documento</title>
<! autor: João das Couves>
<! última atualização: 30/02/2001>
</head>
<body>
Blá blá blá ... aqui entra o conteúdo da página ... blá....
</body>
</html>
<BODY Imagem de fundo Insere uma imagem como fundo da página
(mais ou menos como uma “marca d’água).
BACKGROUND=“ ☺ “> O arquivo deve estar em formato .gif . Este
</BODY> ☺ = arquivo imagem ou arquivo pode estar na mesma máquina
url de arquivo imagem (anotar sua path/nome), ou em outra máquina
(indicar por URL)
<BODY Cor padrão de fundo Define uma cor de fundo padrão para a
BGCOLOR=“#rrggbb”> página.
</BODY> #rrggbb = código de cores Esta cor pode variar de monitor para monitor.
rgb (ver tabela de cores
neste documento)
<BODY Cores do texto do Define a cor para:
TEXT=“#rrggbb” documento
LINK=“#rrggbb” text = texto normal da página
link = links da página
VLINK=“#rrggbb” #rrggbb = código de cores
vlink = links consultados na página
ALINK=“#rrggbb”> rgb (ver tabela de cores alink = links ativados na página
</BODY> neste documento)
<Hy></Hy> Títulos ou cabeçalhos na Existem seis níveis de cabeçalho na página
26
página (não confudir com cabeçalho do documento =
head):
y = número de 1 a 6 <h1></h1>, <h2></h2> , etc.
Sendo H1 o maior e H6 o menor nível.

Atenção, marcações Hy definem tamanho
relativo do texto, e os colocam em destaque
(normalmente negrito)
<P> Parágrafo Insere uma linha em branco entre dois
parágrafos
<BR> Quebra de linha Faz uma quebra de linha.
<A HREF=“ “> Âncora para hiperlink Define um link.
referencial O link vai aparecer em destaque na página
texto</a> (normalmente outra cor e sublinhado)
= URL ou nome de
arquivo
Âncora interna ou para Abre uma âncora para um outro trecho dentro
<A HREF=“# “>
ϒ seção específica em outro de uma mesma página, ou para um trecho
texto</a> documento específico em outro documento.
1. Trecho na mesma página

#ϒ = código ou palavra Após a âncora de hiperlink referencial, deve
aparecer, entre aspas, o caracter
chave # e uma palavra ou código chave. Este
mesmo código ou palavra deverá aparecer no
“ponto de chegada” deste link interno, como
uma âncora de nome
(veja próximo item).
2. Link para trecho específico em outro

documento
Deve ser efeito exatamente da mesma forma,
sendo que , antes do caracter #, deverá
aparecer o nome do arquivo que ser
pretende ‘ligar’, ou sua url completa.
Âncora de nome Este é o ponto de chegada de uma âncora
<A NAME=“ ϒ “> interna a um documento ou para trecho
específico em outro documento.
ϒ= código ou palavra O código ou palavra chave deve ser idêntico
chave
àquele do ponto de partida.
Não altera a visualização do texto.

<A HREF=“MAILTO: Envio de email para Permite que se crie um link que ao ser
xyz@algumlugar.br”> endereço especificado selecionado abrirá uma tela de composição
de mensagem eletrônica a ser enviada para o
endereço digitado após MAILTO:
27
<UL></UL> Delimita lista não numerada Deve ser escrita ao início e ao final da lista.
Casa item da lista é antecedido da marcação
<LI>
<OL></OL> Delimita lista numerada Deve ser escrita ao início e ao final da lista.
Casa item da lista é antecedido da marcação
<LI>
<LI> Cada item de uma lista --o00o--
numerada ou não
Uma lista não numerada: Uma lista numerada
<UL> <OL>
<LI> item 1 <LI> item 1
</UL> </OL>
<DL></DL> Delimita lista de definições Deve ser escrita ao início e ao final da lista.
Cada item da lista é antecedido da marcação
<DT> ou <DD>, conforme explicado a seguir.
<DT> Entrada de título em lista de Insere um título em uma lista de definição. A
definições entrada de título vai aparecer alinhada à
esquerda da página.
Normalmente vem seguido de um item do tipo
<DD>
<DD> Entrada de definição em Insere uma definição (antecedido ou não por
lista de definições <DT>). Este item vai aparecer numa margem
mais interna à página (como se tivesse uma
tabulação antes).
Fora de listas de definição pode ser utilizado

para produzir este mesmo efeito (Uma
“tabulação)
Uma lista de definições:
<DL>
<DT> Título 1
<DD> definição a
<DD> definição b
<DT> Título 2
<DD> definição a
</DL>
<PRE></PRE> Texto pré-formatado Mantém a exata formatação do texto digitado.

<B></B> Negrito
--o00o--
<I></I> Itálico
--o00o--
<ADRESS> Endereço Quanto a visualização, normalmente, apenas
</ADRESS> coloca o trecho em itálico.
28
Inserção de imagem Marcação para inserir uma imagem na
<IMG SRC=“ ✎”> página. Esta imagem deve estar
preferencialmente em formato .gif. Pode estar
✎ = nome ou URL de na mesma máquina (apontar com o nome ou
arquivo imagem. path completa) ou em outra máquina (apontar
com URL)
<IMG ALING=“” Alinhamento de imagem Opcional.
Define o alinhamento de uma imagem na
SRC=“ ✎”> página. Aceita os seguintes valores:
TOP = alinha o texto com o alto da figura
MIDDLE = alinha o texto com o meio da figura
BOTTOM = alinha o texto com o rodapé da
figura
RIGHT = 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 SIZE=n> Largura da linha horizontal Opcional
Extensão opcional que define a largura da
n= número linha
<HR WIDTH=n%> Ocupação da tela da linha Opcional
horizontal
Define o quanto da tela uma linha vai ocupar.
n= número
29
IV.Tabela de Acentuação/ Caracteres Especiais
As notações presentes em marcações, devem ser representadas com notações

especiais para que possam ser exibidas em tela. Estas notações especiais
sempre se iniciam por & (e comercial) e encerram-se com ; (ponto e vírgula).
Notação descrição aparência

> “Maior que” >
< “Menor que” <
& E comercial &
" aspas duplas “
® marca registrada 
&copy copyrights 
É possível utilizar facilidades de acentuação (padrão do Windows por exemplo)

em documentos HTML. No entanto, desta forma, apenas poderá visualizar a
acentuação o computador que reconhecer este padrão específico.
Segue abaixo o padrão para acentuação- ISO Latin-1 alphabet -, semelhante ao

utilizado para exibir caracteres das marcações, e que poderá ser visualizado pela
grande maioria das máquinas.
Caracter Notação
Acento agudo &xacute; onde x é uma letra qualquer, maiúscula ou minúscula
Acento grave &xgrave; onde x é uma letra qualquer, maiúscula ou minúscula
Acento circunflexo &xcirc; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com til &xtilde; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com trema &xuml; onde x é uma letra qualquer, maiúscula ou minúscula
Letras unidas &Aelig; = Æ e æ = æ
Letra com argola Å = Å e &aring = å
Cedilha Ç = Ç e &ccedil= ç
N com til Ñ = Ñ e ñ = ñ
O cortado Ø = Ø e ø = ø
THORN maiúsculo &THORN = Þ(Icelandic)
thorn minúsculo &thorn= þ (Icelandic)
eth minúsculo &eth ð (Icelandic)
eth maiúsculo Ð= Ð (Icelandic)
Caracter alemão &szlig = ß
30
V. Tabela de Cores
Tabela original em: http://www.infi.net/wwwimages/colorindex.html
31
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32

33
___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Parte II - Hypertext Markup Language (HTML) -

TABELAS

________________________________________________________________
Telefone: (061)226.4699 Fax: (061) 226.9328
34
ÍNDICE
I. Tabelas em HTML 3
a.Principais Marcações 3
b.Atributos de tabelas 5
c.Outros Elementos de Controle 9
III. Tabela de Comandos 12
35
I. Tabelas em HTML
a. Principais Marcações
b. Atributos de Tabelas
c. Outros Elementos de Controle
a. Principais Marcações
Segue abaixo o conjunto de marcações essenciais para desenhar tabelas em HTML. Alguns
atributos podem ser definidos para cada uma dessas marcações. Falaremos desses atributos mais
adiante.
• <TABLE></TABLE>
Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>.
ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e células.
Para que a tabela apareça com bordas simples, defina dessa forma <table border></table>.
Antes e depois de uma tabela, acontece sempre uma quebra de linha.
• <TR></TR>
Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>. (TR = Table
Row)
• <TD></TD>
Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre
aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado
a esquerda.
• <TH></TH>
Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer
célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.
Vamos ver então o exemplo de uma tabela utilizando essas marcações básicas.
<table border>
<tr>
<td>Itens/Mês</td>
<th>Janeiro</th><th>Fevereiro</th><th>Março</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>
Vai aparecer dessa forma:
36
37
b. Atributos
As marcações das tabelas, podem apresentar resultados diferentes, se acompanhadas de alguns

atributos. Vamos ver os principais:
• <BORDER>
Esse atributo aparece junto a marcação TABLE. Caso esse atributo não apareça, a tabela não terá
bordas.
Ou seja, como já vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas
marcações <table border> </table>.
• <ALIGN>
Este atributo pode ser aplicado a TR,TH e TD, e controla como será o alinhamento do texto dentro
de uma célula, com relação à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 célula</td><td>Segunda célula</td><td>Terceira célula</td>
</tr>
<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>
</tr>
</table>
Aparece assim:
38
• <VALIGN>
Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas células com relação a borda
superior e inferior.
Aceita os valores top, middle e bottom
<table border>
<tr>
<td> Teste para linhamento<br>
com relação a bordas<br>
inferior e superior<br>
</td>
<td valign=top> TOP </td>

<td valign=middle>MIDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>
Aparece assim:
• <NOWRAP>
Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao utilizá-lo, para
não produzir células muito largas.
• <COLSPAN>
Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por padrão
cada célula corresponde a uma coluna, ou seja COLSPAN=1.
39
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:
• <ROWSPAN>
Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma mesma célula
pode abranger. Assim como na marcação anterior, o padrão é uma célula corresponder a uma
linha.
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>
40
Apresenta-se dessa forma:
41
c. Mais elementos de controle
Vamos ver agora mais um conjunto de extensões que permitem maior controle sobre tabelas.
Estas são especialmente úteis na criação de múltiplas tabelas intercaladas.
• BORDER=<value>
Acrescentando um valor ao atributo BORDER é possível colocar tabelas em maior destaque:
<table border=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
</tr>
</table>
• CELLSPACING=<value>
Este atributo é aplicável à marcação TABLE. Como padrão, o Netscape 1.1 utiliza espaço 2 entre
as células. Este atributo define o espaço entre cada célula na tabela.
<table border cellspacing=5>

<tr>
</tr>
<tr>
</tr>
</table>
• CELLPADDING=<value>
42
Este atributo é aplicado também à marcação TABLE e define a distância entre o texto e a borda
de cada célula.
Veja exemplo:
<table border cellpadding=8>
<tr>
</tr>
<tr>
</tr>
</table>
A tabela mais compacta possível seria definida como: <table border=0 cellspacing=0
cellpadding=0>
• WIDTH=<value or percent>
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 gráfica), como um valor percentual. Ou seja, determina o
quanto da tela uma tabela ou célula de tabela deverá ocupar.
Vamos ver os exemplos:
<table border width=50%>

<tr>
<td>segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>
43
Segundo exemplo - aplicando width a uma célula:
<table border>
<tr>
<td width=50%>segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>
44
II. Tabela de Comandos
• Marcações:
<table> e </table> = define início e fim da tabela.

<tr></tr> = define cada linha da tabela
<td></td> = define cada célula da tabela. Um conjunto de células aparece sempre delimitado pelas
marcações de linha (<tr></tr>).
<th></th> = define títulos na tabela. Na pr´tica são células onde o texto aparece em
destaque (negrito). Podem aparecer em qualquer posição na tabela.
• Atributos
<border> = determina que uma tabela tenha bordas. Aparece sempre associado a marcação
<TABLE BORDER>.
<align> = Controla o alinhamento horizontal do texto em uma linha ou célula. Pode aparecer
associado a TR, TD ou TH. Aceita os valores:
left = alinha à esquerda right = alinha à a direita center = centraliza
Como nos exemplos:
<tr align=center> <td align=left> <th align=right>
<valign> = controla o alinhamento vertical do conteúdo de cada célula da tabela. Pode aparecer
associado a TR, TD ou TH. Aceita os valores:
top = alinha com o alto da célula

middle = alinha no meio
bottom = alinha com a parte de baixo da célula
Como nos exemplos:

<tr align=top>
<td align=middle>
<th align=bottom>
<rowspan> = Aparece associado a células (TD ou TH) e determina quantas linhas uma célula
abrange.
Ex: <rowspan=2> , <rowspan=3> ...
<colspan> = Aparece associado a células (TD ou TH) e determina quantas colunas uma célula
abrange.
Ex: <colspan=2> , <colspan=3> ...
• Atribuição de Valores
BORDER=<value> = define a largura da borda

CELLSPACING=<value> = define espaçamento entre células
CELLPADDING=<value> = define distância entre o texto e a borda das células
WIDTH=<value or percent> = determina o quanto da tela uma tabela deve ocupar
45
___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Parte III - Hypertext Markup Language (HTML) -

FORMULÁRIOS

________________________________________________________________
Telefone: (061)226.4699 Fax: (061) 226.9328
Formulários Eletrônicos
Este tutorial é uma tradução e adaptação do Carlos' FORM Tutorial

c-pero@uiuc.edu
ÍNDICE
I. Sobre este Tutorial 3
II . Codificação básica do formulário 4
III. Texto 5
a.entrada de texto comum 5
b.entrada de texto protegido, senha 6
c. entrada oculta 7
d. entrada de várias linhas de texto 8
IV. Menus 9
a. menus com opções 9
b. listas pagináveis 10
V. Botões 12
a. botões sim-ou-não 12
b. botões com opções 13
c, botões de submissão e limpeza 14
2
I. Sobre este Tutorial
Neste tutorial, você vai aprender a criar "Formulários Eletrônicos", que permitem um usuário do
Web submeter informações para o provedor do serviço.
Existem vários tipos de campos de entrada, como:
• campos de entrada de texto

• menus de múltipla escolha ou escolha única
• botões sim-ou-não
• botões para submissão ou limpeza de formulário
Cada uma destes campos tem funcionalidade própria e você vai aprender em que situação utilizá-
los em seus formulários.
Para melhor compreender a notação utilizada nos formulários, você primeiro precisa se familiarizar
com HTML (Hypertext Markup Language). Consulte, se necessário, o nosso tutorial sobre HTML
básico disponível em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/html1/
Se você já conhece HTML, as marcações utilizadas em formulários seguem a mesma convenção,

e portanto, será fácil aprender.
Contudo, formulários HTML sempre seguem um padrão:
<TITLE>Título do Documento</TITLE>
no início, e o restante do documento a seguir.
Além disto, as marcações que definem o formulário precisam ser iniciadas e finalizadas, como
estas marcações de listas.
<UL>
<LI>Primeiro item da lista
<LI>Segundo item da lista
</UL>
<FORM>
conteúdo do formulário...
</FORM>
Uma última observação: você pode ter múltiplos formulários em um único hiperdocumento. Apenas
certifique-se que os blocos <FORM></FORM> não se sobrepõem.
3
II. Codificação básica
Como vimos, um formulário começa com a marcação <FORM> e termina com </FORM>. Outros
itens devem ser especificados:
• Primeiro, o formulário precisa saber como enviar a informação para o servidor. Existem dois
métodos, GET e POST.
METHOD="GET"
A maioria dos documentos HTML são recuperados a partir da requisão de uma única URL ao
servidor. Assim, um formulário que utilize este método, envia toda sua informação ao final da URL
ativada.
METHOD="POST"
Este método transmite toda a informação fornecida via formulário, imediatamente após a URL
ativada. Ou seja, quando o servidor recebe uma ativação de um formulário utilizando POST ele
sabe que precisa continuar "ouvindo" para obter a informação. Este é o melhor método.
• Segundo, o formulário precisa saber para onde enviar a informação. Esta é a URL sendo
ativada a partir do formulário, e ela é referenciada através da marcação ACTION. Esta URL em
geral aponta para um script CGI que irá receber e decodificar os resultados. Lembre-se que se
você está referenciando um script que reside no mesmo servidor do formulário, você não precisa
incluir a URL completa.
ACTION="/cgi-bin/post-query" para um script no seu servidor
ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do CR/DF
Após você construir estas marcações, seu formulário geralmente terá a seguinte estrutura:
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Marcações de campos de entrada e HTML em geral
</FORM>
Observe que este formulário utiliza o método POST e envia as informações digitadas para um
script local chamado post-query no diretório /cgi-bin do servidor.
Outra informação importante: cada marcação de entrada em um formulário tem uma opção NAME
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
formulário, mas certifique-se de que cada um possui um nome diferente.
4
III. Texto
a. Entrada de texto comum - TEXT

b. Entrada de texto protegido, senha - PASSWORD
c. Entrada oculta - HIDDEN
d. Entrada de várias linhas de texto - TEXTAREA
a. Entrada de texto comum - TEXT
A forma mais simples de campo de entrada é a marcação text. Este campo permite a digitação de
uma única palavra ou linha de texto, e possui uma largura default de 20 caracteres.
Opções:
VALUE="" OPCIONAL
Utilizando a marcação VALUE você especifica que texto aparecerá no campo quando o formulário
for exibido.
SIZE="" OPCIONAL
Esta marcação altera o tamanho deste campo exibido na tela.
Obs.: o usuário sempre poderá digitar mais caracteres do que o tamanho do campo na tela, pois o
texto irá se deslocar a esquerda dentro do campo.
MAXLENGTH="" OPCIONAL
Se você deseja limitar o número de caracteres que o usuário pode digitar, basta usar esta
marcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do permitido em
MAXLENGTH.
Qual o seu primeiro nome?

<INPUT TYPE="text" NAME="primeiro_nome" VALUE="carlos" SIZE="10" MAXLENGTH="15">
</FORM>
Obs.:
• O valor informado em NAME deve utilizar sublinhado em vez de espaços em branco. Inserir
espaços em branco nestes nomes pode causar problemas no servidor na decodificação dos
valores informados.
• Se seu formulário possui apenas um campo de entrada textual, ao teclar ENTER neste campo
o formulário será submetido, como se o usuário tivesse acionado o botão SUBMIT.
5
b. Entrada de texto protegido, senha - PASSWORD
Marcações de entrada do tipo password são idênticas aos campos do tipo text, exceto pelo
fato de todos os caracteres serem exibidos como asteriscos ( *).
-
Opções:
VALUE="" OPCIONAL
A marcação VALUE especifica um valor default para este campo.
SIZE="" OPCIONAL
Esta troca o tamanho do campo de password exibido na tela.
MAXLENGTH="" OPCIONAL
Limita o número de caracteres que o usuário pode informar como password.
Informe sua senha de acesso (8 caracteres):

<INPUT TYPE="password" VALUE="xpto" NAME="sua_senha" SIZE="8" MAXLENGTH="8">
</FORM>
Obs.:
• Se você pretende utilizar MAXLENGTH para limitar o número de caracteres informados, tenha
certeza de especificar um SIZE com o mesmo tamanho, para fornecer ao usuário o sentimento
de qual a largura do campo. Esta regra não foi utilizada no primeiro exemplo, que possui SIZE
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.
• Mesmo que o valor default VALUE esteja representado por asteriscos, o usuário pode
visualizar o seu valor através da recuperação do fonte do hiperdocumento em HTML (uma
opção comum na maioria dos clientes WWW).
6
c. Entrada oculta - HIDDEN
Além da marcação PASSWORD com um valor VALUE default, é possível "esconder" informação
passada dentro de blocos FORM com uma marcação HIDDEN. Esta informação é recebida pelo
script de decodificação no servidor, mas não é diretamente exibida ao usuário no formulário.
Opções:
VALUE="" OBRIGATÓRIO
Através da marcação VALUE, você deve especificar o texto oculto a ser enviado ao script
processador do formulário.
Você não pode visualizar nada aqui embaixo.

<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">
</FORM>
Obs.:
• Mesmo que o valor especificado em HIDDEN VALUE não seja exibido no formulário, o usuário
pode vê-lo através da operação de visualização do fonte do hiperdocumento, da mesma forma
como no campo PASSWORD.
7
d. Entrada de várias linhas de texto - TEXTAREA
A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos exemplos
anteriores. Ao contrário, uma marcação <TEXTAREA> delimita o seu início e a marcação
</TEXTAREA> o seu fim.
Opções:
ROWS="" OBRIGATÓRIO
Especifica o número de linhas da entrada textual.
COLS="" OBRIGATÓRIO
Especifica o número de colunas da entrada textual.
Texto default OPCIONAL

Se você deseja que um texto seja exibido no campo textual ao abrir o formulário, simplesmente
coloque este texto entre as marcações de início e fim da TEXTAREA.
Por favor, escreva aqui suas sugestões, dúvidas e críticas:<BR>

<TEXTAREA NAME="critica" ROWS="3" COLS="40">
Gostaria de obter mais informações sobre
este servidor. Grato.
</TEXTAREA>
</FORM>
Obs.:
• O usuário dispõe de Scrollbars para digitar além do número de linhas e colunas definidas em
ROWS e COLS.
8
IV. Menus
a. Menus com opções - SELECT

b. Listas paginávies - SELECT com SIZE
a. Menus com opções - SELECT
Menu de opção única
A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções de menu

ficam entre a marcação de início <SELECT> e a de fim </SELECT>.
Opções:
OPTION OBRIGATÓRIO
Especifica uma opção presente no menu.
VALUE="" OPCIONAL
Especifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção é enviado
ao servidor.
SELECTED OPCIONAL
Por default, a primeira OPTION é exibida no menu. Esta marcação estabelece uma opção de
menu a ser exibida inicialmente, quando não se deseja que seja a primeira OPTION.
Onde você pretende fazer turismo nas férias?

<SELECT NAME="lugares_para_ver">
<OPTION>Fortaleza
<OPTION VALUE="sul">Florianópolis ou Porto Alegre
<OPTION>Rio de Janeiro
<OPTION SELECTED>Brasília
<OPTION VALUE="amazonia">Manaus
</SELECT>
</FORM>
Obs.:
9
• Se você possui mais do que 3 ou 4 opções de escolha, e o usuário só pode selecionar uma,
então este elemento de entrada é o melhor. As pessoas frequentemente utilizam vários
RADIOBUTTONS, que veremos a seguir.
• O script decodificador, no servidor, provavelmente apreciará uma única palavra para VALUE,
em vez de múltiplas palavras. Você sempre pode utilizar sublinhado para separar expressões
compostas.
b. Listas pagináveis - SELECT com SIZE
A única diferença entre este elemento de entrada e o anterior SELECT é a introdução da opção
SIZE. Ela especifica quantas linhas com opções de menu serão exibidas na janela.
Opções:
MULTIPLE OPCIONAL
Especifica que múltiplas opções podem ser selecionadas, em oposição ao exemplo anterior do
SELECT, onde apenas uma opção pode ser selecionada no menu.
SIZE="" OBRIGATÓRIO
Número de linhas (opções de menu) exibidas na janela.
OPTION OBRIGATÓRIO
Especifica uma opção da lista.
VALUE="" OPCIONAL
Especifica o valor da opção retornada ao servidor.
Se não for definido, o nome da opção é enviado ao servidor.
SELECTED OPCIONAL
Esta opção determina uma OPTION default para ser selecionada.
Que facilidades de acomodação você deseja?<BR>

<SELECT NAME="opcional" MULTIPLE SIZE="5">
<OPTION>Televisão
<OPTION VALUE="casal" SELECTED>Cama de Casal
<OPTION>Ar Condicionado
<OPTION>Fax
<OPTION SELECTED>Modem V.34
<OPTION>Sauna
<OPTION>Lavanderia
<OPTION>Frigo-Bar
</SELECT>
</FORM>
10
Obs.:
• Este elemento de entrada é bom para listas com muitas opções, porque é possível controlar
quantas serão exibidas por vez.
• Em alguns clientes WWW, é necessário teclar simultaneamente as teclas CONTROL ou
SHIFT para selecionar múltiplos itens.
11
V. Botões
a. Botões sim ou não - CHECKBOX

b. Botões com opções - RADIO
c. Botões de submissão e limpeza
a. Botões sim ou não - CHECKBOX
Retornando ao formato de INPUT TYPE="", a marcação CHECKBOXES é perfeita para escolher

entre duas opções.
Opções:
VALUE="" OPCIONAL
Especifica o valor da opção enviado ao servidor. Se não for definido, o valor "on" é enviado ao
script decodificador.
CHECKED OPCIONAL
Esta marcação define a opção selecionada por default.
<INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o boletim de

notícias.
<P>
<INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informações turísticas.
</DL>
</FORM>
Obs.:
• Este elemento funciona melhor para respostas do tipo "sim/não" ou "on/off".

• Você pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME, mas diferentes VALUES
12
b. Botões com opções - RADIO
RADIOBUTTONS utilizam uma notação similar a de CHECKBOXES, contudo, apenas uma opção
pode ser escolhida.
Opções:
VALUE="" OBRIGATóRIO
Especifica o valor da opção a ser enviado para o servidor.
Se não for definido, um valor "on" é enviado ao script decodificador.
CHECKED RECOMENDADO
Esta marcação especifica qual botão estará selecionado por default.
Uma vez que uma seleção precisa ser feita, é melhor prover uma opção pre-selecionada.
Suas preferências na viagem:

<DL>
<DD>Classe do Bilhete:
<INPUT TYPE="radio" NAME="classe" VALUE="eco">econômica
<INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva
<INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira
<DD>Localização:
<INPUT TYPE="radio" NAME="local" VALUE="frente">área fumante
<INPUT TYPE="radio" NAME="local" VALUE="tras">área não fumante
</DL>
</FORM>
Obs.:
• Como já foi mencionado, RADIOBUTTONS não são boa escolha para listas com muitos itens,
porque o cliente tem problemas para exibir muitos botões. É melhor utilizar o menu SELECT.
• Uma vez que um botão é selecionado, ele não pode ser desmarcado sem selecionar outro
botão que possua o mesmo NAME. A seleção default pode ser restaurada com a utilização do
botão RESET, introduzido a seguir.
• Se você utiliza vários RADIOBUTTONS com o mesmo NAME e nenhum VALUES, o servidor
não será capaz de dizer que botão foi selecionado, uma vez que o valor "on" será retornada
para qualquer um deles.
13
c. Botões de submissão e limpeza - RESET E SUBMIT
Em vez do usuário corrigir cada INPUT, um botão RESET pode ser utilizado para restaurar todos
os campos a seus valores default, como se nenhuma informação houvesse sido digitada.
E finalmente, o FORM precisa de uma opção para enviar toda a informação digitada para o
servidor, uma vez que o usuário terminou de preencher os todos os campos de entrada. O botão
SUBMIT transfere toda a informação para a URL especificada no elemento ACTION.
Opções:
VALUE="" OPCIONAL
Especifica o texto a ser exibido no botão.
Se não for especificado, os textos default "Reset" e "Submit Query" serão colocados nos botões
RESET e SUBMIT, respectivamente.
NAME="" OPCIONAL
Se NAME for definido em um botão SUBMIT, o formulário irá transmitir o valor do conteúdo do
elemento VALUE, permitindo que você tenha múltiplos botões SUBMIT numa espécie de versão
simplificada de um RADIOBUTTONS.
<FORM METHOD="POST" ACTION="/cgi-bin/donothing">
Qual o seu primeiro nome? <INPUT TYPE="text"><BR>

Aperte este botão: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpa campos">
<INPUT TYPE="submit">
</FORM>
Obs.:
• Normalmente, o script decodificador retorna um hiperdocumento após ele processar a

informação do formulário.
• Nem todos os clientes suportam múltiplos botões SUBMIT. É melhor utilizar apenas um único
botão SUBMIT para transmitir a informação digitada no formulário.
14
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip janeiro 1996
Parte IV - Hypertext Markup Language (HTML) -

FRAMES

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Telefone: (061)226.4699 Fax: (061) 226.9328
Documentos com múltiplas Janelas - Frames
Este tutorial é uma tradução e adaptação do documento Frames Syntax:

http://home.mcom.com/assist/net_sites/frame_syntax.html
ÍNDICE
I. Sobre este Tutorial 3
II . Estrutura Básica - Frame document 4
III. Sintaxe 5
a. frameset 5
b. frame 8
c. noframes 9
IV. Intercalando Frameset - exemplos 11
V. Links entre frames 12

VI. Cartela de Comandos 13
2
I. Sobre este Tutorial
Neste tutorial, vamos ver uma facilidade ainda não "sacramentada" para os HTMLeiros , mas que promete vir
por aí. É a possibilidade de se dividir um hipertexto em múltiplas janelas (frames).
Agora, atenção por que até esse exato momento, janeiro 1996 só conheço um browser que lê essa
facilidade. É o Netscape, a partir da versao 2.0. Então, muito cuidado, é recomendável que você crie sempre
uma opção de navegação para quem estiver usando um browser que não enxerga frames. Vamos ver como
fazê-lo.
Uma última observação antes de partirmos para a festa. Aqui é importante que você já conheça HTML -
Hypertext Markup Language. Se não conhece, sem problema também, dá uma lida cuidadosa nos nossos
outros tutoriais sobre HTML, disponíveis em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/ .
Este tutorial faz parte de um conjunto de módulos destinados a quem deseja publicar/prover informação na
Internet, através de serviço do tipo WWW (World Wide Web).
Atualmente - janeiro de 1996 - este conjunto compreende 7 módulos:
1. Introdução Geral a Internet

2. HTML Básico
3. Tabelas em HTML
4. Formulários em HTML
5. Múltiplas Janelas - Frames
6. Manipulação de Imagens
7. Guia de Estilo
Informações adicionais podem ser solicitadas a webmaster@cr-df.rnp.br
3
II. Estrutura Básica - Frame Document
O "Frame Document" é um arquivo onde se define a estrutura das janelas para seu hiperdocumento
em HTML. Quantas serão e qual sua distribuição em tela. Neste documento as marcações <body> e
seu par </body> são substituídas por <frameset> e </frameset>. Tal arquivo pode ser, por exemplo, o
arquivo index.html de qualquer nível na estrutura do seu serviço de informações baseado em WWW.
Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset. Ou seja, as
características de cada janela e seus "conteúdos" - URL incial. Cada janela/frame é antecedido da
marcação <frame>, como numa lista cada item é antecedido por <li>. Usualmente, uma URL virá
associada a cada frame.
A estrutura mínima do frame document será então:
<html> • Atenção: Note que com apenas essas

marcações o documento da estrutura -
<head> Frame Document - não funciona. É
<title></title> necessário que esteja definido algum
</head> atributo para as áreas de frameset, assim
como associadas urls a cada frame, como
<frameset ...> veremos mais adiante.
<frame src="URL"> • Atenção II: Você poderá ter - e

<frame src="URL"> provavelmente terá - vários <frameset>
intercalados. Da mesma foma como é
</frameset> possível intercalar listas, ou tabelas em
HTML.
</html>
Cada uma destas marcações - <frameset> e <frame> - aceita extensões, valores e atributos, como
veremos a seguir.
4
III. Sintaxe
a. Frameset
b. Frame
c. Noframes
a. Frameset
Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais(como linhas em uma
tabela) e verticais (como colunas) entre janelas na tela. Internamente a marcações FRAMESET
só poderão aparecer outras FRAMESET, FRAME ou NOFRAMES.
Importante: Não podem ser utilizadas as marcações válidas entre marcações <BODY></BODY>
nem internamente a marcações FRAMESET, nem antes dela, senão FRAMESET será ignorada.
ATRIBUTOS
1. ROWS (<frameset rows=“valor, valor, valor...”>)

Define divisões 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 vírgulas.
Este valor poderá ser:

• Numérico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou
janela) deve ocupar. A desvantagem desta notação é que não é possível ter controle do
valor total de pixels que o cliente do usuário compreende.
• Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre
somando um valor de 100%.
É o método mais simples.
• Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o
primeiro frame vai ocupar dois terços da tela, e o segundo um terço.
Exemplos :
1. Para dividir a tela do browser em três 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">
</frameset>
</html>
5
2.Três janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o frame
central deverá ocupar o restante do espaço:
<html>
<head>
<title></title>
</head>
<frameset rows="30, *, 50">
</frameset>
</html>
2. COLS (<frameset cols=“valor, valor, valor.. “>)

Funciona exatamente como a marcação anterior, no entanto, divide a tela em frames ou janelas
verticais.
Exemplos
Para dividir a tela do browser em três janelas verticais
1.Três 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%">
</frameset>
</html>
6
2.Três janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central
deverá ocupar o restante do espaço:
<html>
<head>
<title></title>
</head>
<frameset cols="200, *, 100">
</frameset>
</html>
Atenção, para intercalar janelas verticais e horizontais, será necessário definir várias
áreas "FRAMESET". Para cada área delimitida como "FRAMESET" você poderá definir
número de linhas OU colunas. Veremos como fazê-lo mais adiante. Não é possível definir
COLS e ROWS para uma mesma área “FRAMESET”.
7
b. Frame
A marcação FRAME define cada janela contida em uma área “frameset”. Esta marcação não
necessita de uma tag de finalização (</frame>) e aceita 6 atributos possíveis:
1. SRC="url"
O atributo SRC define a URL que será exibida em cada frame.
2. NAME="nome_da_janela"
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 várias urls em outras janelas).
Este atributo é opcional. Por padrão, os frames não tem nome.
Importante, o nome_da_janela deve começar por caracter alfanumérico.
3. MARGINWIDTH="valor"
Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distância entre o
conteúdo da página e as margens da janela. O valor associado será um valor absoluto em pixels.
O menor valor aceito será 1.
Este atributo é opcional, caso não venha definido, o browser usará o seu padrão para definir as
margens no frame/janela.
4. MARGINHEIGHT="valor"
Também é um atributo opcional. Funciona exatamente como o anterior, só que determina as
margens superior/inferior em cada frame.
5. SCROLLING="yes/no/auto"
Novamente, é um atributo opcional, que define se uma janela deve possuir barra de rolagem ou
não. Caso seja definido como YES, a janela sempre possuirá uma barra de rolagem visível. Caso
seja definido como NO, nunca haverá barra de rolagem. E, finalmente, se vier como AUTO, o
browser aplicará a barra quando necessário.
O padrão é AUTO, portanto, se o atributo scrolling não vier definido, o browser aplicará a barra de
rolagem, sempre que necessário.
6. NORESIZE
Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá alterar o
tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é que todas as
janelas possam ter seu tamanho alterado. NORESIZE é opcional
Um frame, com todos os atributos definidos seria escrito assim, por exemplo:
<frame src=“http://www.cr-df.rnp.br” name=“home” marginwidth=“5” marginheight=“5”

scrolling=“auto” noresize>
8
c. Noframes
Esta marcação possibilita que se crie uma opção de navegação na página para quem não possui
um browser que entende frames.
Esta marcação aparece no documento de estrutura "Frame document", e sempre é usada em

pares (<noframes>.. conteúdo... </noframes>).
Quando o acesso for feito através de um browser que entenda frames, o que estiver entre as
marcações "noframes" será simplesmente ignorado.
Internamente a uma área "noframes" deverá ser usada a estrutura padrão 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 página de teste.<p>
Para acessá-la, você deve utilizar a versão 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" NORESIZE>
<FRAME NAME="2" SRC="teste2.htm" NORESIZE>
</FRAMESET>
<FRAMESET COLS="30%, 70%">
<FRAME NAME="3" MARGINWIDTH="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 MOSAIC (não lê frame) e com o NETSCAPE (lê frame).
9
MOSAIC - não lê frame NETSCAPE - lê frame
10
IV. Intercalando Frameset - exemplos
Para tornar mais claro como se constrõem múltiplas e intercaladas janelas - divisões horizontais e
verticais - utilizando das marcações de frames, seguem abaixo dois exemplos de construção de
documentos com múltiplas janelas.
Exemplo 1
<html>
<head>
<title>Título</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>
Exemplo 2:
<html>
<head>
<title></title>
</head>
<frame src="teste5.htm">
<frameset cols="25%, 75%">


</frameset>
</frameset>
</frameset>
</html>
11
V. Links entre frames
A marcação TARGET, permite que se controle em qual janela um link específico será exibido
quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espécie
de indíce do serviço de informação e outra janela em que a navegação propriamente dita vai
ocorrer. Desta forma, o índice está permanentemente disponível 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 marcação target="valor"" à âncora, da seguinte forma:
<a href="URL" target="valor">
Onde este valor é idêntico àquele associado à marcação name no frame document.
Exemplo:
O frame document deverá ser escrito assim: o documento que contém o índice de
navegação (barra.htm), será assim:
<html> <html>
<head> <head><title>Título</title>
<title>Título</title></head> </head>
<body>
<frameset rows="80%, 20%"> <a href="http://www.cr-df.rnp.br/" target="navega">
[link para o cr-df]</a>
<frame name="navega"" src="teste3.htm"> <a href="http://www.cr-df.rnp.br/" target="navega">
<frame src="barra.htm"> [link para o cr-sp]</a>
<a href="http://www.cr-df.rnp.br/" target="navega">
</frameset> [link para o cr-pe]</a>
</html> </body>
</html>
12
VI. Cartela de Comandos
Marcação Função / características

• Estrutura Básica
<html> e </html> Delimita o "frame document", como em qualquer arquivo
html normal.
<head></head> Define cabeça do documento, novamente, como em
qualquer arquivo html.
<frameset></frameset> delimita as janelas a serem usadas no documento. Podem

haver vários frameset intercalados. Controla o
comportamente das janelas através de seus atributos.
<frame src="URL"> Define cada janela/frame. Normalmente possui uma URL
associada. Aceita atributos e valores.
• Sintaxe
Para Frameset
<frameset rows="valor, valor, define quantas linhas - janelas horizontais - e sua ocupação
valor"> na tela, para cada área frameset. Aparecerão tantos
valores quantas forem as janelas. Os valores relativos a
cada janela deverão ser separados por vírgulas
.
Cada valor associado poderá ser:
1. Numérico - em pixels = <frameset rows="30, 50">

2. Percentual = <frameset rows="25%, 25%, 50%">
Relativo = <"2*,*">;
<frameset cols="valor, valor, define quantas colunas - janelas verticais - e sua ocupação
valor"> da tela. Funciona exatamente como a marcação interior
(associação de valores, com as mesmas opções).
Para Frame
<frame SRC="URL"> associa uma url a uma janela
<frame NAME="valor"> associa um nome a uma janela
<frame MARGINWIDTH="valor"> determina margem direita/esquerda em cada frame
<frame MARGINHEIGHT="valor"> determina margem superior/inferior em cada frame
<frame define presença, ausência, ou atribuição automática (pelo
SCROLLING="yes/no/auto"> browser) de barras de rolagem
<frame NORESIZE > mantém fixo o tamanho de cada janela/frame
Para Noframes
<noframe></noframe> delimita área para navegação opcional, destinada a quem
usa browser que não entenda 'frame'.Internamente, recebe
a marcação <body></body> delimitando o documento, e
todas as demais marcações HTML.
Target
<a href="URL" target="name"> Define a janela em que será exibido um link ao ser ativado.
O name associado deverá ser idêntico ao name atribuído a
janela de destino no “frame document”.
13
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia.zip novembro 1996
Parte V - Hypertext Markup Language (HTML) -

MANIPULAÇÃO DE IMAGENS

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Telefone: (061)226.4699 Fax: (061) 226.9328
Índice:
I. Sobre esse Tutorial

II. Interlaced Gif
III. Imagens Transparentes
IV.Mapas sensíveis
I. Sobre esee Tutorial
Neste tutorial, vamos ver alguns recursos de manipulação de imagens bastante utilizados por sites WWW.
Para a obtenção desses recursos, veremos algumas boas dicas sobre dois programas especificamente: o
Lview e o Mapedit.
É importante que você já conheça HTML - Hypertext Markup Language. Se não conhece, sem problema
também, dá uma lida cuidadosa nos nossos outros tutoriais sobre HTML, disponíveis em http://www.cr-
df.rnp.br/hipertextos/cr-df/cursos/ .
Este tutorial faz parte de um conjunto de módulos destinados a quem deseja publicar/prover informação na
Internet, através de serviço do tipo WWW (World Wide Web).
Atualmente - janeiro de 1996 - este conjunto compreende 7 módulos:
1. Introdução Geral a Internet

2. HTML Básico
3. Tabelas em HTML
4. Formulários em HTML
5. Múltiplas Janelas - Frames
6. Manipulação de Imagens
7. Guia de Estilo
Informações adicionais podem ser solicitadas a webmaster@cr-df.rnp.br
II. Interlaced GIF
Definição
Imagens gif definidas como "interlaced" tornam a transmissão de uma página mais confortável ao usuário,
uma vez que, ao invés de trazer a imagem em bloco, o browser exibe a imagem aumentando sua resolução
gradativamente.
Dependendo da resolução da imagem, haverá diferença de nível de resolução final em um arquivo interlaced
no padrão gif89a ou gif87a. De um modo geral, o formato gif87a oferece melhor resolução para arquivos
"interlaced".
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo "gif" como interlaced, selecione o menu OPTIONS e ative a opção SAVE GIF's
INTERLACED. Caso você observe perda de resolução na imagem, salve-a no padrão gif87a.
2
III. Imagens Transparentes
Definição
O formato gif89a permite que se defina que uma cor em um arquivo fique transparente.
Exemplo:
Transparente Fundo normal
Criando Imagens Transparentes com LVIEW PRO
1. Selecione o menu Retouch

2. Neste menu, escolha a opção Color Depth
3. Defina como Palette Image e clique em OK
4. Selecione o menu Options
5. Escolha Background Color
6. Clique no botão Dropper
7. O curso vai ficar com a aparência de um conta gotas
8. Clique com o cursor sobre a cor que você deseja que fique transparente
9. Salve a imagem como gif89a (file => Save as)
Atenção, você só irá visualizar a transparência da imagem ao exibí-la com o browser. Na tela do Lview a
aparência do arquivo não é alterada.
IV. Imagens Sensíveis
Definição
Imagens sensíveis ou mapas clicáveis são imagens que contém vários links associados a elas. Uma
aplicação comum para este recurso é a utilização de mapas geográficos em que, ao se clicar em cada
região/área/cidade, será obtido um arquivo diferente.
Passo a Passo
Para criar uma imagem sensível é preciso:
1. Mapear as coordenadas do arquivo imagem, gerando um arquivo do tipo .map

2. Copiar o arquivo .map para o seu servidor
3. Atualizar na área do servidor www a existência do novo .map (normalmente, no arquivo imagemap.com,
que se encontra no diretório /usr/local/etc/httpd/conf)
4. Inserir o arquivo em uma página, incluindo a extensão ismap junto a imagem, da seguinte forma: <img
src="nome_do_arquivo.gif" ismap>
5. Fazer uma âncora da imagem para o programa que interpreta mapas no servidor - imagemap -, com a
identificação do mapa a ser associado a esta imagem. Exemplo: <a href="/cgi-
bin/imagemap/mapa1"><img src="arquivo.gif"></a>
Gerando o Arquivo .MAP com MAPEDIT FOR WINDOWS
3
1. Selecione no menu file a opção open/create
2. Defina o tipo de servidor como (NCSA, Apache, ...)
3. Na janela GIF Filename localize o arquivo imagem que você quer mapear (use o botão de browse para
chegar até ele, se estiver no PC)
4. Digite na janela Map Filename o nome que você deseja dar ao arquivo .map
5. Clique ok. O Mapedit vai informar que o arquivo .map não existe e pedir confirmação para sua criação.
6. Em seguida, o arquivo imagem que foi especificado será exibido na tela do Mapedit
7. No menu tools, selecione o formato da primeira área que você quer mapear (polígono, círculo ou
retângulo)
8. Mantendo o botão esquerdo do mouse pressionado, delimite a área que você quer mapear e clique no
botão direito do mouse.
9. Surgirá uma janela de diálogo em que você deve inserir a URL que deseja associar àquela área e,
opcionalmente, comentários.
10. Repita operação semelhante até concluir o mapeamento completo da imagem.
11. Escolha no menu file a opção Save As
12. Confirme o correto formato do arquivo .map e o nome do arquivo.
Copiando .MAP para o Servidor
O arquivo .map referente a esta imagem deverá estar armazenado juntamente com as suas páginas e
imagens a serem tornadas disponíveis no WWW.
É interessante criar um subdiretório no servidor exclusivamente para armazenar os arquivos .map a serem
utilizados.
Atualizando o .MAP no IMAGEMAP.CONF
Uma vez copiado o arquivo .map para o servidor, para que ele funcione é necessário inserir sua localização
em um arquivo chamado imagemap.conf é este o arquivo consultado no servidor para interpretar qualquer
imagem sensível.
O imagemap.conf é um arquivo texto que se encontra na área de configuração do servidor. Por isso,
normalmente só o administrador da máquina terá acessso a ele . Basta então solicitar ao administrador que
atualize o imagemap.conf toda vez que um novo .map for criado
O imagemap.conf está localizado no diretório /usr/local/etc/httpd/conf e tem a seguinte aparência:
#
# Mapeamento de imagens
#
# ex do rio
#backbone: /data/httpd/htdocs/rnp/backbone.map
#wood : /home/servicos/httpd/htdocs/tutorial/imagem-clicavel/wood.map
Brasil : /is/www/SVI/Brasil.map
BRnorte : /is/www/SVI/BRnorte.map
BRnordeste : /is/www/SVI/BRnordeste.map
BRsudeste : /is/www/SVI/BRsudeste.map
BRcentro : /is/www/SVI/BRcentro.map
BRsul : /is/www/SVI/BRsul.map
#clique : /home/servicos/httpd/htdocs/ct/hdoc/clique/mapa1.map
wood3 : /is/www/mercosul/wood2.map
mercosul : /is/www/mercosul/mercosul.map
4
Inserindo a Imagem Mapeada na Página
Para inserir uma imagem mapeada em uma página, abra uma âncora apontando para o imagemap na área
de cgi-bin do seu servidor, especifique o nome com que o mapa referente está referenciado no
imagemap.conf e insira a imagem no interior da âncora, associando o atributo ISMAP, da seguinte forma:
<a href="/cgi-bin/imagemap/mapa1"><img src="brasil.gif" ismap></a>
Onde mapa1 é o nome utitilizado no arquivo imagemap.conf para referenciar o arquivo .map criado para o
arquivo brasil.gif, no exemplo.

Gui A HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Gui A HTML

Uploaded by

Copyright:

Available Formats

RNP REDE NACIONAL DE PESQUISA

Centro Regional de Brasília CR/DF

Tutorial - Autoria em World Wide Web

Parte I - Hypertext Markup Language (HTML) - Básico

© Copyright 1995 Rede Nacional de Pesquisa - RNP

É PERMITIDA A REPRODUÇÃO DO PRESENTE MATERIAL, DESDE

I . Características Gerais do HTML 3

II. Criando Documentos em HTML 4

d. Interligando sessões em uma página 10

j. Controle de Cores e gráficos de fundo 22

Importante: HTML não faz diferença entre maiúsculas e minúsculas (não é

Como são as Marcações HTML?

De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O

• A notação: <TITLE> (e a correspondente </TITLE>), especificam o título de um

Esta página vai aparecer assim:

A marcação utilizada para títulos é <title> e seu par </title>.

Escrito desta forma:

"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página.

HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior

ATENÇÃO: ao definir o tamanho de um cabeçalho, você não está definindo o tamanho da

As notações relativas a cabeçalhos são:

<Hy>Texto do cabeçalho </Hy >

onde y é um número entre 1 e 6 especificando o nível do cabeçalho.

O conjunto de notações possíveis é o que segue:

Veja a diferença no uso das duas notações:

O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e

1. Inicie a âncora com <A . ( Há um espaço depois de A.)

Um exemplo de referência a um hipertexto:

A palavra “Praias'' é definida como o marcador do link para se chegar ao documento

2. Interligando Documentos em Outros Diretórios

É possível interligar documentos em outro diretório especificando-se o caminho relativo a

Por exemplo, um link para o arquivo Sergipe.html localizado no

Se escreve de acordo com o esquema abaixo:

Onde protocolo é uma das seguintes definições

file um arquivo no seu sistema local, ou servidor de ftp

<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/

Para mais informações sobre URLs, veja em

4. Ligando sessões específicas em outro documento

Este é o meu <a href="index20.htm#volta">link</a> para o último item do índice deste

1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo item1-,

Veja o início da <a href="#item1">segunda sessão</a>.

Esta <a name="intem1">segunda sessão</a> trata de..

1. Listas Não Numeradas

1. Listas Não Numeradas

Para criar uma lista não numerada:

1. Comece com a marcação de início de lista: <UL>.

Abaixo o exemplo de uma lista com dois itens:

Vai aparecer assim:

Cada marcação <LI> pode conter vários parágrafos.

Uma lista criada assim:

Resulta neste formato:

Exemplo de uma lista de definição:

As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados

Exemplo de lista intercalada:

A marcação <PRE>(derivada de ”preformatted”) delimita uma área de texto em que espaços,

Este recurso é utilizado por exemplo para listas de programas.Vejamos um exemplo:

HTML permite que se apliquem estilos específicos a palavras ou sentenças.

Vamos ver algumas opções:

<B></B> texto em negrito

E o efeito de cada uma delas:

Para representar os caracteres das tags, utilize a seguintes notações:

&lt; para representar <

Atenção: Ao contrário do resto do HTML, as notações especiais diferenciam letras

< para representar <