Apostila HTML01

PG Redes de Computadores
I. Caractersticas Gerais do HTML
Documentos HTML so arquivos escritos em ASCII - 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). Basta abr-lo com o comando Open Local
File disponvel na opo File do menu.
HTML utiliza marcaes especficas e distintas para dizer ao Web browser como exibir o
documento.
Importante: HTML no faz diferena entre maisculas e minsculas (no
"case sensitive"). Ento a notao <title> equivalente a <TITLE> ou <TiTlE>.
Como so as Marcaes 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 de Marcaes
A notao: <TITLE> (e a correspondente </TITLE>), 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.
II. Criando Documentos HTML

a. HTML "Mnimo"
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>
<TITLE>Exemplo de HTML simples</TITLE>
</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:
b. Marcaes Bsicas
1.
2.
3.
4.
Ttulos
Cabealhos
Pargrafos
Quebras de linha
1. Ttulos
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:
2. Cabealhos
"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>.
ATENO: 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>
3. Pargrafos
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>, <lLI>,<Hy> e outras, esta ser ignorada.
4. Quebras de linha
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:
c. Interligando Documentos
1. Para comear
2. Documentos em Outros Diretrios
3. Ligando URLs
4. Ligando sesses especficas em outro documento
1. Para comear
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 <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 espao depois de A.)
2. Especifique o documento a ser interligado, inserindo parmetro HREF="filename"
seguido do sinal: >
3. Insira o texto que vai funcionar como link no documento corrente
4. Anote a marcao de final da ncora: </A>.
Um exemplo de referncia 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 diretrio 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 Diretrios

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 Sergipe.html localizado no
subdiretrio Estados seria assim:
<A HREF="Estados/Sergipe.html">Sergipe</A>
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 UNIX.
Importante: se voc quiser referenciar um diretrio a partir do raiz do seu servidor www,
inicie a notao com /. Isto , se voc tiver uma notao desta forma
<A HREF=/imagens/incon1.gif>, significa que o arquivo incon1.gif dever ser buscado
no diretrio imagens que est imediatamente acima do diretrio raiz do seu servidor WWW.
3. Ligando URLs
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a
localizao de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e,
gopher, WAIS), 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
http
gopher
WAIS
news
telnet
um arquivo no seu sistema local, ou servidor de ftp

um arquivo em um servidor World Wide Web
um arquivo em um servidor Gopher
um arquivo em um servidor WAIS
um Usenet newsgroup
uma conexo Telnet
Por exemplo, para incluir um link para o HTML Beginners 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 sentena NCSA's Beginner's Guide to HTML'' um link para tal
documento.
Para mais informaes sobre URLs, veja em
WWW Names and Addresses, URIs, URLs, URNs, escrito por pessoas do CERN,
disponvel 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 disponvel
em http://www.ncsa.uiuc.edu/demoweb/url-primer.html
4. Ligando sesses especficas em outro documento

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 # 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 notao que reconhea a
palavra/identificador informado no ponto de partida.
Pode ser: <a name="volta"><li>Formulrios Eletrnicos</a>.
d. Interligando 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 #,da seguinte forma:
Veja o incio da <a href="#item1">segunda sesso</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 sesso</a> trata de..
e. Listas
1.
2.
3.
4.
Listas No Numeradas
Listas Numeradas
Listas de Definies
Listas Intercaladas
1. Listas No Numeradas
Para criar uma lista no numerada:
1. Comece com a marcao de incio de lista: <UL>.
2. Insira a marcao <LI> antes de cada item da lista item. (No necessrio fechar
a marcao com </LI> )
3. Encerre com a marcao de fim de lista: </UL>.
Abaixo o exemplo de uma lista com dois itens:
<UL>
<LI> mas
<LI> bananas
</UL>
Vai aparecer assim:
Cada marcao <LI> pode conter vrios pargrafos.
2. Listas Numeradas
Uma lista numerada - ou ordenada - semelhante a uma lista no numerada, exceto porque
utiliza marcao <OL> ao invs de <UL>. Os itens so identificados utilizando-se a
mesma notao <LI> .
Uma lista criada assim:
<OL>
<LI> laranjas
<LI> peras
<LI> uvas
</OL>
Resulta neste formato:
3. Listas de Definies
Uma lista de definies normalmente consiste em alternar um termo (abreviado como DT) e
uma definio (abreviado como DD). 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 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>
10
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).
4. Listas Intercaladas
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>
<LI> Estados da regio sul do Brasil:
<UL>
<LI> Rio Grande do Sul
<LI> Santa Catarina
</UL>
<LI> Um estado da regio nordeste:
<UL>
<LI> Pernambuco
</UL>
</UL>
11
exibida com este formato:
12
f. Texto Pr-formatado
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:
<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 marcaes em reas <PRE>. Isto porque caracteres como <, >, and &
possuem um significado especfico no HTML.
O ideal utilizar as sequncias especiais, (<, >, and &, respectivamente) sempre
que precisar representar esses caracteres. Veremos mais sobre no prximo item.
13
g. Caracteres Especiais
HTML permite que se apliquem estilos especficos a palavras ou sentenas.
Vamos ver algumas opes:
<B></B> texto em negrito
<I></I> texto em itlico
E o efeito de cada uma delas:
Para representar os caracteres das tags, utilize a seguintes notaes:

< para representar <
> para representar >
& para representar &
"para representar "
Uma lista completa dessas notaes especiais pode ser obtida no CERN, em:
http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html
Caso o editor que voc esteja utilizando no acentue, possvel tambm utilizar
notaes especiais para acentuao. H uma lista delas ao final deste documento.
Ateno: Ao contrrio do resto do HTML, as notaes especiais diferenciam letras
maisculas de minsculas. No possvel usar &LT; no lugar de <.
14
h. Endereos
A marcao <ADDRESS></ADDRESS> 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 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 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 "mailto:"
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:
15
E ao se clicar em pessoal de apoio, se abrir uma janela para envio de mensagem

eletrnica, como abaixo:
16
I. Inserir imagens
As imagens dentro de uma pgina 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 no
comum a todos os programas.
Utiliza-se a seguinte notao para incluir uma imagem:
<img src="diretrio/arquivo">
No exemplo:
17
Alinhamento das imagens

Toda imagem includa pode ser posicionada (align=...) na tela das seguintes
formas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT.
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:
18
Ateno: 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.
<a href="./index.htm"><img src="../images/stop.gif></a>
19
j. Controle de Cores e Grficos de Fundo

1. Cores e elementos grficos de fundo
2. Cores de letras e links
1. Cores e elementos grficos de fundo
O Atributo Background
O atributo Background deve ser aplicado marcao <body>. 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:
<body background="images/fundo.gif"> .. toda a pgina .. </body>
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.
O Atributo BGColor
Este atributo tambm deve acompanhar a marcao <body>. 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 :
<body bgcolor="#rrggbb">Aqui fica a pgina</body>
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 INFINET, em:
http://www.infi.net/wwwimages/colorindex.html . Uma verso desta tabela encontra-se no
final deste documento.
20
2. Cores de letras e links

O atributo TEXT
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
<BODY>, escrevendo-se da seguinte forma:
<body text="#rrggbb">Aqui entra o documento</body>
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 INFINET citada anteriormente.
Os atributos LINK, VLINK e ALINK
Este atributo controla a cor de textos que funcionem como link na pgina.
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 notao absolutamente igual anterior, seguindo os mesmos padres para definir as
cores. Uma definio completa incluiria ento:
<body text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">
Aqui entra o documento
</body>
21
k. Barras horizontais
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:
22
ainda possvel determinar o quanto da largura da pgina a linha horizontal vai ocupar. Para
isso utiliza-se a extenso width= .
Observe
Ateno: a extenso width no determina o comprimento da linha (em cm ou mm),

mas o quanto da largura da pgina ela deve ocupar.
23
III. Tabela de Comandos

Marcao
Funo
Caractersticas
<HTML></HTML>
Delimita o documento
(incio e fim)
<HEAD></HEAD>
Cabealho
<TITLE></TITLE>
Ttulo do documento
<! >
Comentrio
<BODY></BODY>
Corpo do documento
Esta marcao deve ser inserida

imediatamente no incio e no final de todo
arquivo HTML
O cabealho de um arquivo html uma rea
para insero de informaes que no sero
visveis na pgina HTML, tais como title e
comentrios
Nome a ser atribudo ao documento HTML,
mas que no ser visualizado na pgina.
Deve sempre aparecer na rea definida como
head do documento
Indicao 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.
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>
Insere uma imagem como fundo da pgina
<BODY
Imagem de fundo
BACKGROUND=
</BODY>
J >
J = arquivo imagem ou
url de arquivo imagem
<BODY
Cor padro de fundo
</BODY>
#rrggbb = cdigo de cores

rgb (ver tabela de cores
neste documento)
Cores do texto do
documento
BGCOLOR=#rrggbb>
<BODY
TEXT=#rrggbb
LINK=#rrggbb
VLINK=#rrggbb
ALINK=#rrggbb>
</BODY>
<Hy></Hy>
#rrggbb = cdigo de cores

rgb (ver tabela de cores
neste documento)
Ttulos ou cabealhos na
(mais ou menos como uma marca dgua).

O arquivo deve estar em formato .gif . Este
arquivo pode estar na mesma mquina
(anotar sua path/nome), ou em outra mquina
(indicar por URL)
Define uma cor de fundo padro para a
pgina.
Esta cor pode variar de monitor para monitor.
Define a cor para:
text = texto normal da pgina
link = links da pgina
vlink = links consultados na pgina
alink = links ativados na pgina
Existem seis nveis de cabealho na pgina
24
pgina
y = nmero de 1 a 6
<P>
Pargrafo
<BR>
Quebra de linha
ncora para hiperlink
referencial
<A HREF=0 >

texto</a>
0 = URL ou nome de
<A HREF=# >

texto</a>
arquivo
ncora interna ou para
seo especfica em outro
documento
# = cdigo ou palavra
chave
<A NAME=
>
<A HREF=MAILTO:
xyz@algumlugar.br>
ncora de nome
= cdigo ou palavra
(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)
Insere uma linha em branco entre dois
pargrafos
Faz uma quebra de linha.
Define um link.
O link vai aparecer em destaque na pgina
(normalmente outra cor e sublinhado)
Abre uma ncora para um outro trecho dentro

de uma mesma pgina, ou para um trecho
especfico em outro documento.
1. Trecho 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).
2. Link para trecho especfico 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.
Este o ponto de chegada de uma ncora
interna a um documento ou para trecho
especfico em outro documento.
chave
O cdigo ou palavra chave deve ser idntico

quele do ponto de partida.
Envio de email para

endereo especificado
No altera a visualizao do texto.

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 MAILTO:
25
Deve ser escrita ao incio e ao final da lista.

Casa item da lista antecedido da marcao
<LI>
Casa item da lista antecedido da marcao
<LI>
--o00o--
<UL></UL>
Delimita lista no numerada
<OL></OL>
Delimita lista numerada
<LI>
Cada item de uma lista

numerada ou no
Uma lista no numerada:

<UL>
<LI> item 1
<LI> item 2
<LI> item 3
</UL>
Uma lista numerada

<OL>
<LI> item 1
<LI> item 2
<LI> item 3
</OL>
Delimita lista de definies
Cada item da lista antecedido da marcao
<DT> ou <DD>, conforme explicado a seguir.
Entrada de ttulo em lista de Insere um ttulo em uma lista de definio. A
entrada de ttulo vai aparecer alinhada
definies
esquerda da pgina.
Normalmente vem seguido de um item do tipo
<DD>
Insere uma definio (antecedido ou no por
Entrada de definio em
<DT>). Este item vai aparecer numa margem
lista de definies
mais interna pgina (como se tivesse uma
tabulao antes).
<DL></DL>
<DT>
<DD>
Fora de listas de definio pode ser utilizado

para produzir este mesmo efeito (Uma
tabulao)
Uma lista de definies:
<DL>
<DT> Ttulo 1
<DD> definio a
<DD> definio b
<DT> Ttulo 2
<DD> definio a
</DL>
<PRE></PRE>
<B></B>
Texto pr-formatado
Negrito
<I></I>
Itlico
<ADRESS>
</ADRESS>
Endereo
Mantm a exata formatao do texto digitado.

--o00o---o00o-Quanto a visualizao, normalmente, apenas
coloca o trecho em itlico.
26
.>
<IMG SRC=
Insero de imagem
. = nome ou URL de
arquivo imagem.
<IMG ALING=
SRC=
.>
Alinhamento de imagem
<HR>
insere linha horizontal
<HR SIZE=n>
Largura da linha horizontal
<HR WIDTH=n%>
n= nmero
Ocupao da tela da linha
horizontal
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)
Opcional.
Define o alinhamento de uma imagem na
pgina. 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.
--o00o-Opcional
Extenso opcional que define a largura da
linha
Opcional
Define o quanto da tela uma linha vai ocupar.
n= nmero
27
IV.Tabela de Acentuao/ Caracteres Especiais

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 & (e comercial) e encerram-se com ; (ponto e vrgula).
Notao
<
>
&
"
®
&copy
descrio
Maior que
Menor que
E comercial
aspas duplas
marca registrada
copyrights
aparncia
>
<
&
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- ISO Latin-1 alphabet -, semelhante ao
utilizado para exibir caracteres das marcaes, e que poder ser visualizado pela
grande maioria das mquinas.
Caracter
Acento agudo
Acento grave
Acento circunflexo
Letra com til
Letra com trema
Letras unidas
Letra com argola
Cedilha
N com til
O cortado
THORN maisculo
thorn minsculo
eth minsculo
eth maisculo
Caracter alemo
Notao
&xacute; onde x uma letra qualquer, maiscula ou minscula
&xgrave; onde x uma letra qualquer, maiscula ou minscula
&xcirc; onde x uma letra qualquer, maiscula ou minscula
&xtilde; onde x uma letra qualquer, maiscula ou minscula
&xuml; onde x uma letra qualquer, maiscula ou minscula
&Aelig; = e æ =
Å = e &aring =
Ç = e &ccedil=
Ñ = e ñ =
Ø = e ø =
&THORN = (Icelandic)
&thorn= (Icelandic)
&eth (Icelandic)
Ð= (Icelandic)
&szlig =
28
V. Tabela de Cores
Tabela original em: http://www.infi.net/wwwimages/colorindex.html
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
29
PG Redes de Computadores
I.Tabelas em HTML
a. Principais Marcaes
b. Atributos de Tabelas
c. Outros Elementos de Controle
a.Principais Marcaes
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.
<TABLE></TABLE>
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.
<TR></TR>
Cada linha de uma tabela deve sempre aparecer entre as marcaes <tr> e </tr>. (TR = Table
Row)
<TD></TD>
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.
<TH></TH>
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>Itens/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>
Vai aparecer dessa forma:
31
b. Atributos
As marcaes das tabelas, podem apresentar resultados diferentes, se acompanhadas de alguns
atributos. Vamos ver os principais:
<BORDER>
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 <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 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>
Aparece assim:
32
<VALIGN>
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 top, middle e bottom
<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>MIDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>
Aparece assim:
<NOWRAP>
Este atributo evita que haja uma quebra de linha dentro de uma clula. Cautela ao utiliz-lo, para
no produzir clulas muito largas.
<COLSPAN>
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.
33
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 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.
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>
34
Apresenta-se dessa forma:
35
c. Mais elementos de controle

Vamos ver agora mais um conjunto de extenses que permitem maior controle sobre tabelas.
Estas so especialmente teis na criao de mltiplas tabelas intercaladas.
BORDER=<value>
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>
</tr>
</table>
CELLSPACING=<value>
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>
</tr>
<tr>
</tr>
</table>
CELLPADDING=<value>
36
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>
</tr>
<tr>
</tr>
</table>
A tabela mais compacta possvel 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 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ça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>
37
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>
38
II. Tabela de Comandos

Marcaes:
<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´tica so clulas onde o texto aparece em
destaque (negrito). Podem aparecer em qualquer posio na tabela.
Atributos
<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 a direita
center = centraliza
Como nos exemplos:

<tr align=center>
<td align=left>
<th align=right>
<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
Como nos exemplos:
<tr align=top>
<td align=middle>
<th align=bottom>
<rowspan> = Aparece associado a clulas (TD ou TH) e determina quantas linhas uma clula
abrange.
Ex: <rowspan=2> , <rowspan=3> ...
<colspan> = Aparece associado a clulas (TD ou TH) e determina quantas colunas uma clula
abrange.
Ex: <colspan=2> , <colspan=3> ...
Atribuio de Valores
BORDER=<value> = define a largura da borda
CELLSPACING=<value> = define espaamento entre clulas
CELLPADDING=<value> = define distncia entre o texto e a borda das clulas
WIDTH=<value or percent> = determina o quanto da tela uma tabela deve ocupar
39
I. Sobre este Tutorial

Neste tutorial, 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 utilizlos 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 nosso tutorial sobre HTML
bsico disponvel em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/html1/
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:
<TITLE>Ttulo do Documento</TITLE>
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>
<LI>Primeiro item da lista
<LI>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.
40
II. Codificao bsica

Como vimos, um formulrio comea com a marcao <FORM> e termina com </FORM>. Outros
itens devem ser especificados:
Primeiro, o formulrio precisa saber como enviar a informao para o servidor. Existem dois
mtodos, GET e POST.
METHOD="GET"
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.
METHOD="POST"
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.
Segundo, o formulrio precisa saber para onde enviar a informao. Esta a URL sendo
ativada a partir do formulrio, e ela referenciada atravs da marcao 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 formulrio, voc no 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
Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte estrutura:
<FORM METHOD="POST" ACTION="/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 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
formulrio, mas certifique-se de que cada um possui um nome diferente.
41
III. Texto
a. Entrada de texto comum - TEXT
b. Entrada de texto protegido, senha - PASSWORD
c. Entrada oculta - HIDDEN
d. Entrada de vrias linhas de texto - TEXTAREA
a. Entrada de texto comum - TEXT
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.
Opes:
VALUE="" OPCIONAL
Utilizando a marcao VALUE voc especifica que texto aparecer no campo quando o formulrio
for exibido.
SIZE="" OPCIONAL
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.
MAXLENGTH="" OPCIONAL
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.
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 espaos em branco. Inserir
espaos em branco nestes nomes pode causar problemas no servidor na decodificao dos
valores informados.
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 SUBMIT.
42
b. Entrada de texto protegido, senha - PASSWORD

Marcaes de entrada do tipo password so idnticas aos campos do tipo text, exceto pelo
fato de todos os caracteres serem exibidos como asteriscos ( *).
Opes:
VALUE="" OPCIONAL
A marcao 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 nmero de caracteres que o usurio 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 nmero de caracteres informados, tenha
certeza de especificar um SIZE 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 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 usurio pode
visualizar o seu valor atravs da recuperao do fonte do hiperdocumento em HTML (uma
opo comum na maioria dos clientes WWW).
43
c. Entrada oculta - HIDDEN

Alm da marcao PASSWORD com um valor VALUE default, possvel "esconder" informao
passada dentro de blocos FORM com uma marcao HIDDEN. Esta informao recebida pelo
script de decodificao no servidor, mas no diretamente exibida ao usurio no formulrio.
Opes:
VALUE="" OBRIGATRIO
Atravs da marcao VALUE, voc deve especificar o texto oculto a ser enviado ao script
processador do formulrio.
Voc no pode visualizar nada aqui embaixo.
<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">
</FORM>
Obs.:
Mesmo que o valor especificado em HIDDEN 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.
44
d. Entrada de vrias linhas de texto - TEXTAREA

A marcao TEXTAREA no utiliza o formato convencional INPUT TYPE="text" dos exemplos
anteriores. Ao contrrio, uma marcao <TEXTAREA> delimita o seu incio e a marcao
</TEXTAREA> o seu fim.
Opes:
ROWS="" OBRIGATRIO
Especifica o nmero de linhas da entrada textual.
COLS="" OBRIGATRIO
Especifica o nmero de colunas da entrada textual.
Texto default OPCIONAL
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.
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>
Obs.:
O usurio dispe de Scrollbars para digitar alm do nmero de linhas e colunas definidas em
ROWS e COLS.
45
IV. Menus
a. Menus com opes - SELECT
b. Listas paginvies - SELECT com SIZE
a. Menus com opes - SELECT
Menu de opo nica
A marcao SELECT segue a mesma convenco de TEXTAREA. Ou seja, as opes de menu
ficam entre a marcao de incio <SELECT> e a de fim </SELECT>.
Opes:
OPTION OBRIGATRIO
Especifica uma opo presente no menu.
VALUE="" OPCIONAL
Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da opo enviado
ao servidor.
SELECTED OPCIONAL
Por default, a primeira OPTION exibida no menu. Esta marcao estabelece uma opo de
menu a ser exibida inicialmente, quando no se deseja que seja a primeira OPTION.
Onde voc pretende fazer turismo nas frias?
<SELECT NAME="lugares_para_ver">
<OPTION>Fortaleza
<OPTION VALUE="sul">Florianpolis ou Porto Alegre
<OPTION>Rio de Janeiro
<OPTION SELECTED>Braslia
<OPTION VALUE="amazonia">Manaus
</SELECT>
</FORM>
Obs.:
46
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
RADIOBUTTONS, que veremos a seguir.
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.
b. Listas paginveis - SELECT com SIZE

A nica diferena entre este elemento de entrada e o anterior SELECT a introduo da opo
SIZE. Ela especifica quantas linhas com opes de menu sero exibidas na janela.
Opes:
MULTIPLE OPCIONAL
Especifica que mltiplas opes podem ser selecionadas, em oposio ao exemplo anterior do
SELECT, onde apenas uma opo pode ser selecionada no menu.
SIZE="" OBRIGATRIO
Nmero de linhas (opes de menu) exibidas na janela.
OPTION OBRIGATRIO
Especifica uma opo da lista.
VALUE="" OPCIONAL
Especifica o valor da opo retornada ao servidor.
Se no for definido, o nome da opo enviado ao servidor.
SELECTED OPCIONAL
Esta opo determina uma OPTION default para ser selecionada.

Que facilidades de acomodao voc deseja?<BR>
<SELECT NAME="opcional" MULTIPLE SIZE="5">
<OPTION>Televiso
<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>
47
Obs.:
Este elemento de entrada bom para listas com muitas opes, porque possvel controlar
quantas sero exibidas por vez.
Em alguns clientes WWW, necessrio teclar simultaneamente as teclas CONTROL ou
SHIFT para selecionar mltiplos itens.
48
V. Botes
a. Botes sim ou no - CHECKBOX
b. Botes com opes - RADIO
c. Botes de submisso e limpeza
a. Botes sim ou no - CHECKBOX
Retornando ao formato de INPUT TYPE="", a marcao CHECKBOXES perfeita para escolher
entre duas opes.
Opes:
VALUE="" OPCIONAL
Especifica o valor da opo enviado ao servidor. Se no for definido, o valor "on" enviado ao
script decodificador.
CHECKED OPCIONAL
Esta marcao define a opo selecionada por default.
<INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o boletim de
notcias.
<P>
<INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informaes tursticas.
</DL>
</FORM>
Obs.:
Este elemento funciona melhor para respostas do tipo "sim/no" ou "on/off".
Voc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo
NAME, mas diferentes VALUES
49
b. Botes com opes - RADIO

RADIOBUTTONS utilizam uma notao similar a de CHECKBOXES, contudo, apenas uma opo
pode ser escolhida.
Opes:
VALUE="" OBRIGATRIO
Especifica o valor da opo a ser enviado para o servidor.
Se no for definido, um valor "on" enviado ao script decodificador.
CHECKED RECOMENDADO
Esta marcao especifica qual boto estar selecionado por default.
Uma vez que uma seleo precisa ser feita, melhor prover uma opo pre-selecionada.
Suas preferncias na viagem:
<DL>
<DD>Classe do Bilhete:
<INPUT TYPE="radio" NAME="classe" VALUE="eco">econmica
<INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva
<INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira
<DD>Localizao:
<INPUT TYPE="radio" NAME="local" VALUE="frente">rea fumante
<INPUT TYPE="radio" NAME="local" VALUE="tras">rea no fumante
</DL>
</FORM>
Obs.:
Como j foi mencionado, RADIOBUTTONS no so boa escolha para listas com muitos itens,
porque o cliente tem problemas para exibir muitos botes. melhor utilizar o menu SELECT.
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.
Se voc utiliza vrios RADIOBUTTONS 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.
50
c. Botes de submisso e limpeza - RESET E SUBMIT

Em vez do usurio corrigir cada INPUT, um boto RESET 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
SUBMIT transfere toda a informao para a URL especificada no elemento ACTION.
Opes:
VALUE="" OPCIONAL
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 SUBMIT, respectivamente.
NAME="" OPCIONAL
Se NAME for definido em um boto SUBMIT, o formulrio ir transmitir o valor do contedo do
elemento VALUE, permitindo que voc tenha mltiplos botes SUBMIT numa espcie de verso
simplificada de um RADIOBUTTONS.
<FORM METHOD="POST" ACTION="/cgi-bin/donothing">
Qual o seu primeiro nome? <INPUT TYPE="text"><BR>
Aperte este boto: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpa campos">
<INPUT TYPE="submit">
</FORM>
Obs.:
Normalmente, o script decodificador retorna um hiperdocumento aps ele processar a
informao do formulrio.
Nem todos os clientes suportam mltiplos botes SUBMIT. melhor utilizar apenas um nico
boto SUBMIT para transmitir a informao digitada no formulrio.
51
Extenses do Netscape
Este documento uma traduo e adaptao do documento disponvel em
(http://home.mcom.com/assist/net_sites/html_extensions.html)
A Netscape Communications desenvolveu uma srie de extenses especficas, seguem algumas
abaixo.Um documento completo sobre estas extenses est disponvel na Netscape.Com, em:
(http://home.mcom.com/assist/net_sites/html_extensions.html)
<HR>
A netscape desenvolveu 5 novas tags para serem aplicadas junto marcao HR (horizontal rule)
<HR SIZE=nmero>
A tag SIZE define a largura da linha horizontal.
<HR WIDTH=percentual>
A linha padro ocupa toda a extenso da tela. Com esta Tag possvel determinar o
percentual de ocupao da tela de um linha.
<HR ALIGN=left|right|center>
Assim possvel alinhar linhas horizontais que no ocupem toda a tela, seja direita,
esquerda, ou centralizadas.
<HR NOSHADE>
Produz uma linha realmente slida, sem nenhum tipo de sombra.
<UL>
Utilizando-se as extenses TYPE=disc, TYPE=circle, or TYPE=square possivel definir o
formato do indicador de uma lista no numerada (UL)
<OL>
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=I) 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.
<LI>
marcao LI 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.
<IMG>
<IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>
A marcao ALIGN=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. ALIGN=right se comporta de modo semelhante, mas na borda direita
da tela.
52
As novas extenses para HTML do NETSCAPE possibilitam ainda: ALIGN=top,

ALIGN=texttop, ALIGN=middle, ALIGN=absmiddle, ALIGN=baseline, ALIGN=bottom e
ALIGN=absbottom, permitindo refinamentos no controle de alinhamento.
<IMG WIDTH=valor HEIGHT=valor>
As marcaes WIDTH e HEIGHT 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.
<IMG BORDER=value>
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.
<IMG VSPACE=valor HSPACE=valor>
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.
Novos
Elementos
<NOBR>
NOBR define que uma linha no pode ser quebrada em sua exibio. utilizado em par =
<NOBR>e</NOBR>.
<WBR>
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.
<FONT SIZE=valor> </FONT>
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.
<BASEFONT SIZE=value>
Altera o tamanho da BASEFONT relativo a todas as marcaes FONT. O padro 3.
<CENTER>
Utilizado aos pares para centralizar elementos do seu texto em html.
Novas
Entidades
Alm dos caracteres especiais j em uso, foram criados:
® -> Marca Registrada ->
© -> Copyright ->
ndice:
53
I. Sobre esse Tutorial

II. Interlaced Gif
III. Imagens Transparentes
IV.Mapas sensveis
I. Sobre esee Tutorial
Neste tutorial, vamos ver alguns recursos de manipulao de imagens bastante utilizados por sites
WWW.
Para a obteno desses recursos, veremos algumas boas dicas sobre dois programas
especificamente: o Lview e o Mapedit.
importante que voc j conhea HTML - Hypertext Markup Language. Se no conhece, sem
problema tambm, d uma lida cuidadosa nos nossos outros tutoriais sobre HTML, disponveis em
http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/ .
Este tutorial faz parte de um conjunto de mdulos destinados a quem deseja publicar/prover
informao na Internet, atravs de servio do tipo WWW (World Wide Web).
Atualmente - janeiro de 1996 - este conjunto compreende 7 mdulos:
1.
2.
3.
4.
5.
6.
7.
Introduo Geral a Internet

HTML Bsico
Tabelas em HTML
Formulrios em HTML
Mltiplas Janelas - Frames
Manipulao de Imagens
Guia de Estilo
Informaes adicionais podem ser solicitadas a webmaster@cr-df.rnp.br
II. Interlaced GIF

Definio
Imagens gif definidas como "interlaced" tornam a transmisso de uma pgina mais confortvel ao
usurio, uma vez que, ao invs de trazer a imagem em bloco, o browser exibe a imagem
aumentando sua resoluo gradativamente.
Dependendo da resoluo da imagem, haver diferena de nvel de resoluo final em um arquivo
interlaced no padro gif89a ou gif87a. De um modo geral, o formato gif87a oferece melhor
resoluo para arquivos "interlaced".
Criando um Arquivo Interlaced com LVIEW PRO
Para definir um arquivo "gif" como interlaced, selecione o menu OPTIONS e ative a opo SAVE
GIF's INTERLACED. Caso voc observe perda de resoluo na imagem, salve-a no padro gif87a.
III. Imagens Transparentes

54
Definio
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.
2.
3.
4.
5.
6.
7.
8.
9.
Selecione o menu Retouch

Neste menu, escolha a opo Color Depth
Defina como Palette Image e clique em OK
Selecione o menu Options
Escolha Background Color
Clique no boto Dropper
O curso vai ficar com a aparncia de um conta gotas
Clique com o cursor sobre a cor que voc deseja que fique transparente
Salve a imagem como gif89a (file => Save as)
Ateno, voc s ir visualizar a transparncia da imagem ao exib-la com o browser. Na tela do

Lview a aparncia do arquivo no alterada.
IV. Imagens Sensveis

Definio
Imagens sensveis ou mapas clicveis so imagens que contm vrios links associados a elas.
Uma aplicao comum para este recurso a utilizao de mapas geogrficos em que, ao se clicar
em cada regio/rea/cidade, ser obtido um arquivo diferente.
Passo a Passo
Para criar uma imagem sensvel 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 existncia do novo .map (normalmente, no arquivo
imagemap.com, que se encontra no diretrio /usr/local/etc/httpd/conf)
4. Inserir o arquivo em uma pgina, incluindo a extenso 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 identificao do mapa a ser associado a esta imagem. Exemplo: <a href="/cgibin/imagemap/mapa1"><img src="arquivo.gif"></a>
Gerando o Arquivo .MAP com MAPEDIT FOR WINDOWS
55
1. Selecione no menu file a opo 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 boto 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 no existe e pedir confirmao para sua
criao.
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 (polgono, crculo
ou retngulo)
8. Mantendo o boto esquerdo do mouse pressionado, delimite a rea que voc quer mapear e
clique no boto direito do mouse.
9. Surgir uma janela de dilogo em que voc deve inserir a URL que deseja associar quela rea
e, opcionalmente, comentrios.
10.Repita operao semelhante at concluir o mapeamento completo da imagem.
11.Escolha no menu file a opo 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
pginas e imagens a serem tornadas disponveis no WWW.
interessante criar um subdiretrio 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 necessrio inserir sua
localizao em um arquivo chamado imagemap.conf este o arquivo consultado no servidor para
interpretar qualquer imagem sensvel.
O imagemap.conf um arquivo texto que se encontra na rea de configurao do servidor. Por
isso, normalmente s o administrador da mquina ter acessso a ele . Basta ento solicitar ao
administrador que atualize o imagemap.conf toda vez que um novo .map for criado
O imagemap.conf est localizado no diretrio /usr/local/etc/httpd/conf e tem a seguinte aparncia:
#
# 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
56
Inserindo a Imagem Mapeada na Pgina

Para inserir uma imagem mapeada em uma pgina, 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.
57

Apostila HTML01

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Apostila HTML01

Загружено:

Авторское право:

Доступные форматы

PG Redes de Computadores

I. Caractersticas Gerais do HTML

Documentos HTML so arquivos escritos em ASCII - texto.

II. Criando Documentos HTML

Veja a diferena no uso das duas notaes:

2. Interligando Documentos em Outros Diretrios

um arquivo no seu sistema local, ou servidor de ftp

4. Ligando sesses especficas em outro documento

d. Interligando sesses em uma pgina

Cada marcao <LI> pode conter vrios pargrafos.

Ser vista desta forma:

exibida com este formato:

Para representar os caracteres das tags, utilize a seguintes notaes:

E ao se clicar em pessoal de apoio, se abrir uma janela para envio de mensagem

Alinhamento das imagens

As duas ltimas definem a posio da imagem na pgina, a direita ou esquerda:

Ateno: De um modo geral no necessrio incluir essa anotao para alinhar a

j. Controle de Cores e Grficos de Fundo

2. Cores de letras e links

Ateno: a extenso width no determina o comprimento da linha (em cm ou mm),

III. Tabela de Comandos

Esta marcao deve ser inserida

Exemplo de como devem aparecer distribudas no arquivo as marcaes acima citadas:

Cor padro de fundo

#rrggbb = cdigo de cores

#rrggbb = cdigo de cores

(mais ou menos como uma marca dgua).

Existem seis nveis de cabealho na pgina

<A HREF=0 >

<A HREF=# >

(no confudir com cabealho do documento =

Abre uma ncora para um outro trecho dentro

O cdigo ou palavra chave deve ser idntico

Envio de email para

No altera a visualizao do texto.

Deve ser escrita ao incio e ao final da lista.

Delimita lista no numerada

Delimita lista numerada

Cada item de uma lista

Uma lista no numerada:

Uma lista numerada

Fora de listas de definio pode ser utilizado

Mantm a exata formatao do texto digitado.

insere linha horizontal

Largura da linha horizontal

Marcao para inserir uma imagem na

Define o quanto da tela uma linha vai ocupar.

IV.Tabela de Acentuao/ Caracteres Especiais

possvel utilizar facilidades de acentuao (padro do Windows por exemplo)

Que fica assim:

Apresenta-se dessa forma:

c. Mais elementos de controle

Segundo exemplo - aplicando width a uma clula:

II. Tabela de Comandos

right = alinha a direita

Como nos exemplos:

I. Sobre este Tutorial

campos de entrada de texto

II. Codificao bsica

b. Entrada de texto protegido, senha - PASSWORD

c. Entrada oculta - HIDDEN

d. Entrada de vrias linhas de texto - TEXTAREA

b. Listas paginveis - SELECT com SIZE