Curso Básico de HTML

CURSO BSICO DE HTML
Caque Severo
Introduo
Uma das caractersticas mais interessantes da Internet a

oportunidade que todos os usurios tm de disseminar informaes.
Tanto um vencedor do prmio Nobel, quanto um estudante do
primeiro ano de faculdade contam com os mesmos canais de
distribuio para expressar suas idias. Com o surgimento da World
Wide Web, esse meio s foi enriquecido. O contedo da rede ficou
mais atraente com a possibilidade de incorporar imagens e sons. Um
novo sistema de localizao de arquivos criou um ambiente em que
cada informao tem um endereo nico e pode ser encontrada por
qualquer usurio da rede.
Isso significa que na prtica no existe nenhuma diferena entre as

pginas de uma grande empresa na Web e as pginas que o leitor ir
produzir. Ambas podem ser acessadas com a mesma facilidade. A
diferena uma s: a criatividade. Este livro tem o objetivo de
fornecer as ferramentas bsicas para exercitar a criatividade na Web.
Ser preciso aprender um pouco de HTML (HyperText Markup
Language), a linguagem utilizada para criar as pginas. O leitor
tambm vai encontrar uma poro de dicas, truques e exemplos,
alm de um guia com as empresas que alugam espao na Web.
O que a Internet
Existem muitos termos que tentam definir a Internet. Super-estrada

da informao, preferem os polticos. Rede de redes, insistem os
cientistas. O certo que cada um desses grupos prefere ver a rede
segundo seus prprios interesses. Para os polticos, uma nova
fronteira de construo e investimentos coletivos um desafio. J os
cientistas, rigorosos em suas definies, enxergam a virtude da
Internet em conectar computadores de qualquer tipo em todo o
globo.
As vises distintas da rede no param por a. H quem veja na

Internet uma perigosa fonte de pornografia. As indstrias sonham
com o dia em que podero vender diretamente aos consumidores,
sem nenhum intermedirio. Empresas de comunicao esperam o
meio que vai reunir rdio, TV e televiso em um mesmo sistema de
produo. Pais de estudantes no exterior matam as saudades pelo
monitor. E paqueras virtuais acontecem a toda hora em cada canto da
rede.
A Internet tudo isso ao mesmo tempo. E com certeza muito mais. A

rede o que cada pessoa quiser que ela seja. Em toda a histria da
Internet foram os usurios que inventaram novos recursos e novas
aplicaes. um terreno frtil para boas idias.
Isso tudo porque a Internet uma inveno muito simples. Nada mais
do que uma forma fcil e barata de fazer com que computadores
distantes possam se comunicar. A partir da, a revoluo est nas
mos das pessoas.
Cada usurio recebe uma identificao nica, conhecida como

endereo. Com esse endereo, ele pode se comunicar, enviando
mensagens para outras pessoas. o que se chama de correio
eletrnico. Graas ao esforo de instituies como Universidades e
empresas ligadas pesquisa, dispostas a investir dinheiro e pessoal
para criar e manter os pontos principais da rede os servidores
(computadores de alto desempenho) possvel conseguir
programas de graa e consultar bancos de dados pblicos.
Hoje, com o sucesso da Internet, toda empresa se v na obrigao de

colocar a cara na rede. Os servios se multiplicam. Os bancos
oferecem todas as suas operaes pelo computador. Notcias so
distribudas imediatamente. Pizzarias aceitam pedidos. Livrarias e
lojas de discos vendem seus produtos.
No entanto, boa parte do material da rede produzido por indivduos

querendo expressar ao mundo suas preferncias. Um usurio rene
tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro,
com objetivos mais prticos, escreve um currculo e espera que seus
talentos sejam descobertos. Todo mundo que um dia sentiu vontade
de compartilhar suas faanhas agora pode fazer isso. O tal terreno
frtil da Internet tem um nome. Se chama World Wide Web, ou
apenas Web.
Como Funciona a Web
A Web funciona basicamente com dois tipos de programas: os clientes

e os servidores. O cliente o programa utilizado pelos usurios para
ver as pginas, enquanto os servidores ficam responsveis por
armazenar e permitir o acesso ao contedo da rede. Neste livro
chamamos o programa cliente de navegador (em ingls, browser). O
que o navegador faz requisitar um arquivo para um servidor. Se a
informao pedida realmente estiver armazenada naquele servidor, o
pedido ser enviado de volta e mostrado na tela do navegador.
A informao na Web organizada na forma de pginas, que podem

conter texto, imagens, sons e, mais recentemente, pequenos
programas. Alm disso, as pginas da Web podem ser ligadas umas
com as outras, formando o que se chama de um conjunto de
hipertextos. Assim possvel, por exemplo, que um trabalho de
faculdade faa referncia direta a um texto que serviu de base para o
estudo. O leitor interessado na fonte de pesquisa pode saltar
imediatamente para o texto original. Dessa forma, qualquer
documento pode levar a um outro texto que tambm esteja
disponvel na rede. A possibilidade de criar uma malha de
informao em torno do planeta deu origem ao nome World Wide
Web, que significa teia de alcance mundial.
O navegador
Como foi dito h pouco, os usurios circulam por essa teia com um
programa chamado navegador. Esse programa envia pedidos de
pginas pela rede e as apresenta na tela do usurio. Existem vrios
navegadores para todos os tipos de computadores. Os mais
conhecidos so o Netscape Navigator, o Microsoft Internet Explorer e
o NCSA Mosaic.
Os servidores
Os pedidos dos navegadores so atendidos por uma combinao de

computador e programas que formam os servidores. Esses
computadores e programas armazenam as pginas e podem exercer
algum tipo de controle sobre quais usurios podem acess-las. So
mquinas potentes instaladas em universidades, empresas e rgos
do governo conectadas permanentemente Internet. Tambm
possvel montar um servidor de Web em casa, com um computador
pessoal. Existe programas de servidores de Web tanto para Mac como
para PC.
Apesar de poderem ser instalados em praticamente todos os tipos de

computadores, os servidores devem estar conectados 24 horas por
dia na rede para que os usurios possam requisitar as pginas a
qualquer momento. A melhor soluo para montar um conjunto de
pginas procurar uma empresa que aluga espao em um servidor
Web, como o Terra.
O que uma URL
A Web permitiu que cada documento na rede tenha um endereo

nico, que indica o nome do arquivo, diretrio, nome do servidor e o
mtodo pelo qual ele deve ser requisitado. Esse endereo foi
chamado de URL (Uniform Resource Locator, numa traduo literal,
localizador uniforme de recursos). Uma URL tem a seguinte estrutura:
http://www.seed.net.tw/~milkylin/htmleasy.html
Onde:
http:// o mtodo pelo qual ocorrer a transao entre cliente e

servidor. HTTP (HyperText Transfer Protocol, ou protocolo de
transferncia de arquivos de hipertexto) o mtodo utilizado para
transportar pginas de Web pela rede. Outros mtodos comuns
so: ftp:// (para transferir arquivos), news:// (grupos de discusso)
e mailto:// (para enviar correio eletrnico).
www.seed.net.tw o nome do servidor onde est armazenado o

arquivo. Nem sempre o nome de um servidor de Web inicia por www.
Existem servidores de Web com nomes comocs.dal.ca.
/~milkylin/ o diretrio onde est o arquivo. s vezes uma URL indica

apenas o diretrio (ou o servidor). Nesse caso, o servidor se
encarrega de procurar e enviar o arquivo adequado.
htmleasy.html o nome do arquivo. A extenso .html indica que se

trata de uma pgina Web. Uma URL pode indicar outras extenses.
Quando o navegador recebe um arquivo com a extenso .txt, o
arquivo tratado como um texto comum. Em outros casos, como nas
extenses .zip (arquivo comprimido) e.exe (um programa), o
navegador abre uma janela perguntando ao usurio o que fazer com
o arquivo.
Esse endereo nico de um documento pode ser utilizado pelo

usurio para localizar um arquivo com o navegador. Nesse caso, o
usurio deve preencher com o endereo uma janela do navegador
conhecida como Location, Open ou Address e teclarEnter. A URL ser
enviada at o servidor, que tentar localizar o arquivo e envi-lo para
o usurio. Caso o arquivo no esteja disponvel no servidor, o usurio
receber uma mensagem de erro.
As URLs tambm so colocadas dentro de pginas de WWW para

fazer referncia a outras informaes disponveis na Internet. Nesse
caso, determinados itens (trechos de texto ou imagens) da pgina,
conhecidos como links, podem ser utilizados pelos usurios para
saltar de um lugar a outro na rede. Os links podem conter ligao
com qualquer tipo de arquivo. Essa ligao entre os documentos o
que se chama de hipertexto.
Uma pgina Web simples
Apesar dessa aparente sofisticao, as pginas Web no passam de

documentos de texto simples. Podem ser produzidas com qualquer
editor de texto, como o Notepad do Windows. A diferena que as
pginas Web contm algumas marcas especiais para determinar o
papel de cada elemento dentro do texto. Alguns elementos so
marcados como ttulos, outros como pargrafos. As marcaes so
usadas tambm para indicar os links que levam a outros documentos
na rede. Essas marcas so chamadas de tags e esto especificadas
dentro da linguagem utilizada para criar as pginas Web, HTML.
O mnimo que voc precisa saber sobre HTML

O primeiro conceito que deve-se ter em mente ao projetar pginas
Web que HTML no foi criada para controlar a aparncia dos
documentos, ao contrrio dos processadores de texto e programas
de layout de pgina. Como dissemos h pouco, os tags de HTML
apenas informam ao navegador o que so os elementos que esto na
pgina. Eles dizem, por exemplo, que um determinado trecho o
ttulo principal do documento e outro um item de lista. A formatao
do trecho deixada para o navegador. Cada navegador mostra a
pgina de uma forma um pouco diferente, o que dificulta o trabalho
de programao visual na Web. Para complicar ainda mais, cada
usurio pode modificar a configurao padro de seu navegador para
que o seu programa mostre o texto na fonte (tipo de caractere) que
quiser.
Em compensao muito simples criar uma pgina bsica para

colocar na Internet com HTML. Neste captulo, apresentamos um
exemplo enxuto, que aos poucos ficar mais sofisticado.
Software necessrio para esta seo
Como a pgina Web um documento de texto comum, pode-se

utilizar um editor de texto simples, como o Notepad do Windows.
Existem editores de HTML que podem facilitar a confeco das
pginas.
importante notar que os exemplos descritos aqui devem ser

gravados no formato texto e com a extenso .htm ou .html. Portanto,
se for utilizado um processador de texto, como o Word, WordPerfect
ou WordStar, o arquivo deve ser salvo no formato somente texto. O
navegador de Web no vai entender um arquivo gravado nos
formatos especficos dos processadores de texto (.doc, por exemplo).
Ser necessrio tambm um programa de desenho para criar as

imagens, como o Paintbrush do Windows ou um mais sofisticado,
como o Photoshop. Tambm preciso cuidado na hora de gravar as
imagens. O formato mais aceito pelos navegadores o GIF. O
Paintbrush do Windows grava arquivos apenas nos formatos BMP ou
PCX. Ser necessrio um outro programa para fazer a converso,
como o Lview. Alm disso, ser necessrio um navegador de Web
para visualizar as pginas. Nos links abaixo, voc pode copiar no s
as verses nas quais foram testados os exemplos deste livro, como
pegar verses mais recentes.
Os exemplos foram testados em:
Netscape Navigator 2.0

(http://home.netscape.com/comprod/mirror/
client_download.html)
Microsoft Internet Explorer
2.0(http://www.microsoft.com/ie/download/default.htm)
NCSA Mosaic 2.0.0

(http://www.ncsa.uiuc.edu /SDG/Software/Mosaic/)
Acentuao
No recomendvel que os documentos Web contenham acentos.

Ainda que todos os navegadores existentes entendam a presena de
um caractere acentuado, existem ocasies em que o texto em HTML
pode ficar truncado. Por exemplo, quando algum copia uma pgina
Web e a envia para outra pessoa atravs de correio eletrnico. Para
contornar este problema, existe uma tabela de cdigos que
substituem os acentos. Os navegadores transformam estes cdigos
em caracteres acentuados e o documento poder ser transmitido por
qualquer meio. Sugesto: o documento pode ser escrito com os
acentos e, antes de ir para o servidor de Web, ser submetido a uma
macro de processador de texto para substitu-los pelos cdigos HTML.
Veja o captulo sobre acentos com a tabela de acentos ISO 8859 Latin-
1. Para facilitar a leitura, os exemplos deste livro contm os acentos
normais de um editor de texto ao invs dos cdigos.
Primeiro Exemplo
A melhor maneira de aprender a escrever pginas de Web fazendo.

Vamos ao primeiro exemplo:
<HTML>
<HEAD>
<TITLE>Primeiro exemplo</TITLE>
</HEAD>
<BODY>
<b>Ttulo principal</b>
Este o texto do primeiro exemplo.

Para dividir os pargrafos, usa-se o tag <P>.<P>
Este o segundo pargrafo. Para colocar um novo ttulo depois

de um pargrafo no necessrio colocar o tag <P>.
<b>Ttulo secundrio</b>
Para abrir uma linha, usa-se o tag <br>,<br>
certo?
<b>Uma lista</b>
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
</BODY>
</HTML>
Observao: a representao dos tags <P> e <BR> foi escrita na

forma de cdigo (<P> e <BR>, respectivamente). Do contrrio, essa
representao no seria mostrada na pgina, mas interpretada com
os efeitos reais de cada um dos tags.
Visualizando o exemplo no navegador
Assim que o exemplo for salvo no editor de texto com a

extenso.htm ou .html, pode-se visualiz-lo em um navegador. Para
abrir o arquivo, deve-se escolher Open, Open File ou Open Local File
no menu File do navegador. Alguns navegadores tem um boto Open
na barra de botes.
Exemplo 1: uma pgina simples
Como funcionam os tags
O primeiro exemplo mostra vrios trechos de texto marcados por

cdigos colocados entre os caracteres < e >. Esses cdigos,
chamados de tags, so responsveis pela marcao do texto em
funo de seu papel dentro do documento. O ttulo principal
marcado com os tags <b> e </b>, enquanto os pargrafos so
separados pelo tag <P>. Existem dois tipos de tags. Alguns so
formados aos pares, indicando o incio e o fim do trecho afetado,
como o par <b> e </b>. Outros podem ser colocados
inidividualmente, como o <P>, que simplesmente insere um espao
para dividir pargrafos. Mais adiante, mostraremos que
os tagstambm podem receber atributos.
Tags bsicos
Existem quatro pares de tags que devem ser sempre colocados na

pgina. O par de tags <HTML> e </HTML> deve englobar todo o
contedo da pgina (estar presente no incio e no fim do texto) para
indicar ao navegador que se trata de um documento HTML. O
documento, por sua vez, est dividido em duas partes: o cabealho e
o corpo do texto, cada um indicado por um par de tags diferente.
Tudo que estiver entre o par <HEAD> e </HEAD> ir compor o
cabealho, no aparecendo na pgina. O elemento principal do
cabealho o ttulo do documento, que deve ser colocado entre o
par<TITLE> e </TITLE>. Os navegadores mostram o ttulo na barra
de ttulo do programa e na rea em aparecem as pginas j visitadas.
Por fim, existe o par <BODY> e </BODY>, que serve para indicar o
corpo do texto, ou seja, a parte mostrada na janela do navegador.
Ttulos
No corpo do texto podem ser colocados at seis nveis de ttulos. A

hierarquia comea em <b>, como o maior ttulo, e termina em<H6>,
como o menor. Os ttulos <H5> e <H6> aparecem to pequenos no
navegador que provavelmente nunca sero usados.
Pargrafos
Os pargrafos so digitados normalmente. O tag <P> serve para

indicar o incio de um novo pargrafo. Se o tag <P> for colocado
antes de um ttulo (<b>, por exemplo), a marca de pargrafo
ignorada. Nesse caso, o prprio ttulo se encarrega de colocar o
espao necessrio.
Linhas
Assim como as marcas de pargrafo, as quebras de linha so

indicadas por um tag simples. Para abrir uma nova linha, usa-se
otag <BR>.
Listas
O incio de uma lista pode ser indicado com <UL> e o final

com</UL>. Esse tag descreve listas no-ordenadas (unordered lists,
em ingls) e simplesmente coloca um elemento grfico (um crculo,
um quadrado etc.) no comeo de cada item da lista. Existem outros
tipos de listas. A relao completa pode ser encontrada no Apndice
B. O incio de cada item indicado com o tag <LI>.
Melhorando a aparncia
Com os tags bsicos do primeiro exemplo j possvel criar pginas

Web para colocar disposio dos usurios. O exemplo mostrado h
pouco completo e, se colocado em um servidor Web, pode ser
identificado com sua prpria URL e acessado de qualquer lugar do
mundo. Porm, o primeiro exemplo deixa muito a desejar em apelo
visual. Vamos melhorar a aparncia deste documento.
Alinhamento
A primeira providncia para melhorar a aparncia da pgina

modificar o alinhamento do texto. O alinhamento padro (com o qual
vm configurados os navegadores) esquerda. Para mudar o
alinhamento padro deve-se adicionar o atributo ALIGN dentro
dostags que marcam os ttulos e os pargrafos.
<b ALIGN=CENTER>Ttulo</b>
<P ALIGN=CENTER>Este um pargrafo centralizado.</P>

Exemplo 2: alinhamento centralizado
Desta vez, o tag <P> ganhou uma opo (ALIGN=CENTER). Por isso,
preciso utilizar um tag de fechamento (</P>) para indicar que
apenas aquele pargrafo receber um alinhamento diferente.
Margem
Outro controle sobre o alinhamento dos elementos da pgina pode

ser conseguido atravs da mudana de margem. O texto sempre
comea a uma determinada distncia da janela do navegador (um
pouco diferente em cada navegador). s vezes, ser necessrio
aumentar essa margem e fazer com que o texto comece mais para
dentro da pgina. O par
de tags <BLOCKQUOTE> e </BLOCKQUOTE>serve para aumentar a
margem. O efeito desse tag pode ser acumulado para conseguir
margens maiores. Veja os exemplos:
<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem

ainda</BLOCKQUOTE></BLOCKQUOTE>
Exemplo 3: colocando margem adicional
Texto pr-formatado
Existe ainda uma terceira forma de modificar o alinhamento. a

utilizao do par de tags <PRE> e </PRE>. Usando esses tags, todos
os espaos e entradas de pargrafo (o resultado da tecla enter) so
respeitados. Em um texto normal, qualquer espao a mais entre duas
palavras ignorado pelo navegador. Com a pr-formatao, pode-se
controlar o espaamento com a barra de espao e colocar o texto em
praticamente qualquer lugar da pgina.
Apesar da vantagem dessa forma de alinhamento arbitrrio,

o tag<PRE> muda o tipo de caractere para uma fonte
monoespaada. Uma fonte monoespaada aquela na qual todos os
caracteres ocupam o mesmo espao horizontal, ao contrrio da fonte
proporcional, na qual o i ocupa menos espao do que o a, por
exemplo.
<PRE>
Este texto est pr-formatado. A fonte

monoespaada e as entradas de pargrafo,
assim como os espaos adicionais, so

respeitadas.
Neste caso, a margem esquerda

foi aumentada em cinco caracteres.</PRE>
O texto normal recebe fonte proporcional e ignora a presena de

espaos a mais no meio do texto. Entradas de pargrafo
adicionaistambm so ignoradas.
Exemplo 4: controle do alinhamento com pr-formatao
No Netscape, possvel colocar tags de ttulo dentro do

par <PRE> e</PRE>, permitindo a manuteno da fonte proporcional
(Times New Roman, por exemplo). Na maioria dos navegadores,
porm, os tagsde ttulo so ignorados e se sobrepem aos tags de
pr-formatao, eliminando o seu efeito.
Mudando os caracteres Estilos de caracteres
Para dar nfase em determinados trechos de texto, pode-se usar

negrito, itlico ou mesmo a fonte monoespaada citada h pouco.
<B>Texto em negrito</B><P>
<I>Texto em itlico</I><P>
<TT>Texto monoespaado</TT><P>
Exemplo 5: modificando os estilos de texto
Ao contrrio de <PRE>, o tag <TT> ignora espaos em branco

adicionais e entradas de pargrafo no meio do texto. Em relao ao
espaamento, o tag <TT> funciona exatamente como texto normal.
Os tags de estilo podem ser usados uns sobre os outros, acumulando

seus efeitos.
<B><I>Texto em negrito e itlico</I></B><P>
<B><TT>Texto monoespaado em negrito</TT></B><P>
<I><TT>Texto monoespaado em itlico</TT></I><P>
<B><TT><I>Texto monoespaado em negrito e

itlico</I></TT></B>
Exemplo 6: os estilos podem ser combinados
Tamanhos de caracteres
Alguns navegadores aceitam a modificao do tamanho do texto

atravs do atributo SIZE do tag <FONT>.
<FONT SIZE=7>Texto</FONT>
O tag <FONT> pode ser atribudo a qualquer parte do texto, com

exceo dos ttulos (<b>, <b> etc.). Os valores do
atributo SIZEvariam de 1 a 7, O tamanho normal do texto nos
navegadores equivalente a SIZE=3. No existe nenhuma relao
entre os valores no atributo SIZE e o nmero de pontos (a unidade
utilizada para medir os caracteres). Portanto o melhor experimentar
todos os tamanhos e avaliar o resultado.
<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P>
<FONT SIZE=1>Texto com FONT SIZE=1</FONT>
Exemplo 7: mudando o tamanho dos caracteres

O tag <FONT> tambm pode ser utilizado com um atributo diferente
para cada letra. A aplicao mais bvia a colocao de uma
capitular, aquela letra em tamanho maior no incio de um pargrafo.
<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>
Tambm possvel modificar o tamanho de todo o texto de uma vez

s colocando o tag <BASEFONT> no topo do texto.
<BASEFONT SIZE=5>
Cores diferentes
Alguns navegadores tambm aceitam modificar a cor padro do texto

e do fundo da janela do documento. Essa definio feita em
atributos do tag <BODY>. Os atributos so BGCOLOR e TEXT.
<BODY BGCOLOR=FFFFFF TEXT=000000>
ou
<BODY BGCOLOR=WHITE TEXT=BLACK>
O exemplo acima produz uma pgina com fundo branco e texto na

cor preta. Os valores dos atributos so definidos em uma tabela de
cores no padro RGB ou pelo nome da cor.
Pode-se definir ainda a cor de determinados trechos de texto, com o

atributo color no tag <FONT>.
<FONT COLOR=FFFFFF>Texto na cor branca</FONT>
ou
<FONT COLOR=WHITE>Texto na cor branca</FONT>
Dessa forma, possvel ter texto de vrias cores na mesma pgina.
<FONT COLOR=WHITE>Texto em branco</FONT>, <FONT

COLOR=BLUE>azul</FONT>, <FONT COLOR=GREEN>verde</FONT>
e <FONT COLOR=RED>vermelho</FONT>
Mudando o tipo de caractere
O Internet Explorer, navegador da Microsoft lanado no segundo

semestre de 1995, trouxe a novidade de permitir a mudana do tipo
de caractere do texto. O autor de uma pgina Web pode definir qual
ser o tipo de determinada parte do texto, mas o usurio precisa ter
aquela fonte instalada no computador. Sugere-se a escolha de tipos
comuns, como o Arial, que vem junto com o Windows.
<FONT FACE=ARIAL><b>Ttulo principal</b>
Este o texto do primeiro exemplo. Para dividir os pargrafos, usa-se

o tag <P>.<P>
Este o segundo pargrafo. Para colocar um novo ttulo depois de um

pargrafo no necessrio (tampouco funciona) colocar o tag
<P>.<p>
<b>Ttulo secundrio</b>
Para abrir uma linha, usa-se o tag <br>,<br>
certo?</FONT>
<b>Uma lista</b>
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
Exemplo 8: mudando o tipo do caractere para Arial
Hyperlinks
At agora produzimos apenas um documento bastante simples, que
poderia ser composto com recursos muito mais sofisticados em
qualquer processador de texto. Mas neste livro estamos falando de
documentos de hipertexto, que podem fazer ligaes com outros
textos.
Os pontos que ligam esses hipertextos so chamados de hyperlinks,

links ou ncoras de hipertexto. O tag que indica a regio a ser tratada
como um hyperlink o par <A> e </A>. Dentro desse tag, na forma
de atributo, colocada a referncia ao arquivo ligado. A referncia
indica a URL do documento. Quando o usurio clicar sobre o trecho
realado pela ncora de hipertexto, o arquivo ligado ser requisitado
ao servidor e mostrado na janela do navegador.
<P ALIGN=CENTER>
Uma ligao de hipertexto:</P>
<P ALIGN=CENTER>
<A HREF=http://www.seed.net.tw/~milkylin/
htmleasy.html>HTML Easy! Pro home page</A>
</P>
Exemplo 9: link simples
Neste exemplo, o texto HTML Easy! Pro home page aparece no

navegador realado de alguma forma, normalmente em uma cor
diferente e sublinhado. O cursor do mouse se transforma em uma
mozinha quando colocado sobre o texto realado. Ao clicar no link, o
arquivo htmleasy.html, do diretrio /~milkylin/ do servidor
www.seed.net.tw ser transmitido pela rede e mostrado na tela.
Colocando uma URL no atributo HREF do tag <A>, pode-se ligar uma
pgina com qualquer outro documento
disponvel na Internet. Pode-se fazer uma pgina com uma lista de
pginas preferidas da rede com suas devidas ligaes de hipertexto.
<b>Lista de recursos sobre HTML</b>
<UL>
<LI><A HREF = "http://www.willamette.edu/html-composition/

strict-html.html">Composing Good HTML</A>
<LI><A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/

Introduction.html">CERN's style guide for online hypertext</A>
<LI><A HREF = "http://www.ucc.ie/info/net/
htmldoc.html">How to Write HTML Files</A>
<LI><A HREF = "http://melmac.corp.harris.com/

about_html.html">Introduction to HTML</A>
<LI><A HREF = "http://kuhttp.cc.ukans.edu/

lynx_help/HTML_quick.html">The HTML Quick Reference Guide</A>
<LI><A HREF = "http://www.w3.org/hypertext/WWW/

MarkUp/MarkUp.html">The official HTML specification</A>
</UL>
Exemplo 10: uma lista de ncoras de hipertexto
Neste exemplo, as URLs esto entre aspas. Isso significa que o

servidor vai considerar a diferena entre maisculas e minsculas (o
que se chama de sensitivo caixa) na hora de localizar o arquivo. Se
no exemplo acima o arquivo HTML_quick.html estiver gravado no
servidor como html_quick.html, o documento no ser localizado e o
usurio receber uma mensagem de erro.
Nem sempre necessrio colocar uma URL completa em uma ncora

de hipertexto. possvel indicar apenas o nome do servidor.
<UL>
<LI><A HREF=www.apple.com>Apple Computer</A>
<LI><A HREF=www.thespot.com>The Spot</A>
</UL>
Neste exemplo, os servidores da Apple e do The Spot se encarregaro

de indicar qual a pgina que deve ser
carregada. Essa pgina principal chamada normalmente de home
page.
Quando a ncora apontar para uma pgina armazenada no mesmo

servidor, no necessrio colocar o endereo
da mquina. Se o documento estiver no mesmo diretrio, basta
indicar o nome do arquivo.
<A HREF=exemplo1.htm>Exemplo 1</A>
O link acima chama o arquivo exemplo1.htm, que deve estar no

mesmo diretrio da pgina. Se o documento estiver em um
subdiretrio de onde est o arquivo que contm a ncora, preciso
indic-lo.
<A HREF=exemplos/exemplo1.htm>Exemplo1</A>
Digamos que agora seja necessrio traar o caminho de volta,

colocando uma ncora no arquivo exemplo1.htm para a pgina
anterior.
<A HREF=../ancora.htm>Volta para exemplo de ncora</A>
A referncia cruzada entre arquivos armazenados no mesmo

computador mas em diretrios diferentes merece bastante ateno.
Digamos que existam dois diretrios colocados no mesmo nvel. Um
chamado musica e outro, comida. Um arquivo chamado rock.htm, do
diretrio musica deve fazer uma referncia ao arquivo feijoada.htm,
do diretrio comida. A ncora de hipertexto do documento rock.htm
deve ficar assim:
<A HREF=../comida/feijoada.htm>Tudo sobre feijoada</A>
Tambm pode-se fazer uma referncia a uma outra parte do mesmo

documento. Isso particularmente til quando se est fazendo um
ndice de um texto. A ncora para um texto no mesmo documento
fica assim:
<A HREF=#cap1>Captulo 1</A>
Enquanto o alvo do link fica desta forma:
<A NAME=cap1>Captulo 1</A>
Neste exemplo, quando o usurio clicar sobre o link <A

HREF=#cap1>Captulo 1</A>, ele ser remetido ao ponto onde est
a referncia <A NAME=cap1>Captulo 1</A>. A parte do texto que
referenciada (o alvo de um link) no fica realada como os hyperlinks.
Alm de ser invisvel, no obrigatrio que exista um link apontando
para ela.
Pode-se colocar referncias do tipo <A NAME> em um documento

longo apenas para que outras pessoas produzindo pginas Web
possam fazer ligaes para determinadas partes do texto.
Para citar uma determinada parte de um outro texto, a referncia :
<A HREF=exemplo.htm#capitulo1>Captulo 1 do Exemplo</A>
Sendo que exemplo.htm o nome do arquivo referenciado e captulo1

a referncia a uma parte daquele texto.
Cores dos hyperlinks
Da mesma forma que possvel definir cores diferentes para o fundo

e o texto, pode-se mudar a cor dos links. As cores das ncoras de
hipertexto variam de acordo com a sua condio: visitados, nunca
visitados e ativos. Os navegadores sabem quais foram os hyperlinks
j visitados pelo usurio em um determinado perodo de tempo. Por
isso, a cor dos links j visitados deve ser diferente da cor das
referncias nunca visitadas. Alm disso, o link pisca em uma cor
ainda diferente dessas duas logo depois que clicado pelo usurio. A
cor dos links definida no tag <BODY>.
<BODY LINK=RED ALINK=BLUE VLINK=GREEN>
Onde:
LINK determina a cor dos links no visitados
ALINK determina a cor que os links devem piscar quando clicados
VLINK determina a cor dos links j visitados
Neste exemplo, os links nunca visitados ficam em vermelho, os ativos

(quando clicados) em azul, e os visitados em verde. Para no
confundir os usurios, a cor dos links j visitados deve ser uma verso
mais clara da cor das ligaes ainda no visitadas.
Imagens
Agora que j explicamos como fazer um documento hipertexto,

podemos finalmente incluir imagens nessa pgina Web. Para inserir
uma imagem basta indicar o nome do arquivo dentro do tag <IMG>.
Aqui voc v uma imagem:<P>
<IMG SRC=imagem.gif>
Note que a imagem...<P>

Exemplo 11: incluindo uma imagem
Neste exemplo, a imagem imagem.gif aparece alinhada entre as

frases Aqui voc v uma imagem: e Note que a imagem....
Se a imagem estiver em um diretrio diferente do arquivo de texto,

preciso especific-lo na referncia. Recomenda-se que as imagens
sejam colocadas em um diretrio separado para facilitar a
manuteno dos arquivos. Exemplo:
<IMG SRC=imagens/imagem.gif>
Alinhamento da imagem
No exemplo anterior, a imagem ficou alinhada esquerda da tela e o

texto imediatamente posterior a ela alinhou-se com o canto inferior
direito da imagem. Esse o alinhamento padro de textos com
imagens. possvel mudar o alinhamento utilizando o atributo
ALIGN= dentro do tag <IMG>.
<IMG SRC=imagens/imagem.gif ALIGN=TOP>

Agora a imagem ficou alinhada esquerda e com o topo do texto
Note que a imagem.... Para alinhar a imagem esquerda, mas com
o texto no centro, usa-se ALIGN=MIDDLE.
O texto utilizado imediatamente depois da imagem nos exemplos

anteriores curto. Se for usado um texto mais longo, apenas uma
linha ficar alinhada com a imagem. O restante ser jogado para a
linha seguinte. Exemplo:
<IMG SRC=imagem.gif align=top>
Note que a imagem est alinhada esquerda. O texto imediatamente

posterior imagem fica alinhado no canto superior direito. Mas
apenas uma linha acompanha a imagem. O restante do texto
jogado para a linha seguinte.<P>
Exemplo 12: quebra de linha depois da imagem
Este problema pode ser contornado utilizando outros atributos de

alinhamento que fazem a imagem flutuar ao lado do texto.
Exemplo:
<IMG SRC=imagem.gif ALIGN=LEFT>
Note que a imagem est alinhada esquerda. Alguns navegadores,

como o Netscape, permitem colocar o texto em torno da imagem,
independente de seu comprimento. como se a imagem estivesse
flutuando no meio do texto.<P>
Exemplo 13: texto contornando a imagem
Neste exemplo, a imagem ficou alinhada esquerda e permitiu que

todo o texto imediatamente posterior ficasse alinhado direita. Para
alinhar a imagem direita, usa-se o atributo ALIGN=RIGHT. A lista
completa das formas de se alinhar uma imagem est no Apndice B.
No entanto, quando usa-se os atributos ALIGN=LEFT ou

ALIGN=RIGHT, todo o texto imediatamente posterior puxado para o
lado da imagem. Se for necessrio interromper o fluxo de texto ao
lado da imagem, pode-se usar o tag <BR> com o atributo
CLEAR=ALL.
<IMG SRC=imagem.gif ALIGN=LEFT>
Note que a imagem est alinhada direita. O texto est contornando

a imagem, mas somente at este ponto. <BR CLEAR=ALL>A partir
daqui o texto jogado para a prxima margem livre em qualquer um
dos lados da janela.<P>
Exemplo 14: interrupo de um texto em torno da imagem
Borda
possvel colocar uma borda em volta da imagem. O atributo

BORDER. O valor da borda expresso em pixels.
<IMG SRC=imagens/imagem.gif BORDER=2>
Exemplo 15: a borda de uma imagem
Texto alternativo
De nada vai adiantar caprichar na produo de uma imagem, se a
pessoa que est vendo as pginas utiliza um navegador incapaz de
mostrar imagens (sim, eles existem e so bastante utilizados,
principalmente o lynx).
Outros usurios tambm ajustam o navegador para no carregar

imediatamente as imagens. Por causa de conexes lentas, algumas
pessoas preferem receber o texto e depois pedir as imagens. Mas
para isso elas precisam saber do que se tratam as imagens. Essa a
funo do texto alternativo. Pode-se colocar o ttulo ou a melhor
descrio possvel de uma imagem utilizando o atributo alt:
<IMG SRC=imagem.gif ALT=nome_da_imagem>
Exemplo 16: o texto alternativo de uma imagem
No exemplo acima, o navegador foi ajustado para no carregar a

imagem imediatamente ao carregar a pgina. O texto alternativo
aparece junto com o cone de imagem.
Margens
Pode-se controlar o espao em volta da imagem colocando o valor em

pixels da margem desejada. possvel definir as margens
separadamente ou em conjunto. Para mais espao em cima e
embaixo da imagem, o atributo VSPACE. Se o problema for espao
dos lados da imagem, usa-se o atributo HSPACE para definir as
margens horizontais.
<IMG SRC=imagem.gif VSPACE=10 HSPACE=20>

Cada um desses atributos (HSPACE e VSPACE) adiciona espao nas
duas faces da imagem (em cima e em baixo e direita e esquerda).
No h como definir uma margem maior apenas esquerda ou
somente na parte inferior.
Formatos e interlaceamento
Os formatos de imagem mais aceitos pelos navegadores so GIF e

JPG. A vantagem do formato GIF que se pode gravar na opo GIF89
para conseguir que a imagem seja carregada progressivamente, um
efeito conhecido como interlaceamento. Com o carregamento
progressivo, o usurio tem a impresso da imagem estar sendo
carregada mais rpido.
O formato JPG oferece um fator de compresso maior do que o GIF. As

imagens ocupam menos espao em bytes. Mas o processo de
compresso do JPG pode causar alguma perda de qualidade
imagem. Como regra geral, o formato JPG deve ser usado em
imagens fotogrficas e o GIF em imagens criadas em computador
ou desenhadas. A compresso do formato GIF se d ainda melhor
com imagens com poucas cores e trechos contnuos de uma cor s.
Dimenses
Se as dimenses da imagem forem colocadas na referncia, o usurio

ter a impresso de que a pgina foi carregada mais rpido.
Fornecendo as dimenses, o navegador reserva o espao para a

imagem e vai carregando o texto para que o usurio possa comear a
ler. Depois de carregado o texto, as imagens comeam a ser
mostradas. Deve-se escrever a referncia de imagem neste formato:
<IMG SRC=imagem.gif width=310 height=220>
Tabelas
Como ainda no existem formas mais sofisticadas de controlar o

posicionamento de imagens e texto, o uso de tabelas tornou-se um
recurso essencial para dispor os elementos da pgina de maneira
mais criativa.
Uma tabela simples
As tabelas so compostas de linhas, dentro das quais so colocadas

clulas com o contedo. Dentro das clulas pode-se colocar texto,
imagens ou at mesmo outras tabelas. Uma linha pode conter vrias
clulas, formando-se ento uma tabela com vrias colunas.
Os tags para construir uma tabela so:
<TABLE> e </TABLE>: para indicar o incio e o fim de uma tabela
<TR> e </TR>: para indicar o incio e o fim de uma linha
<TH> e </TH>: para indicar o incio e o fim de uma clula-ttulo
<TD> e </TD>: para indicar o incio e o fim de uma clula
A nica diferena entre o tag <TH> e <TD> que o primeiro marca o

texto da clula com nfase. Os navegadores interpretam essa nfase
como negrito. Nos exemplos deste livro, no utilizamos o tag<TH>, j
que a nfase pode ser conseguida com tags como <B> e<I>.
No obrigatrio colocar os tags de fechamento dos elementos da

tabela (</TR>, </TH> e </TD>), mas estes tags so teis para
entender melhor a estrutura de linhas e clulas. Nos exemplos
seguintes adicionamos uma borda tabela. O atributo da borda
colocado dentro do tag <TABLE>.
<TABLE BORDER>
<TR>
<TD>Clula 1</TD><TD>Clula 2</TD>
</TR>
<TR>
</TR>
</TABLE>
Exemplo 17: uma tabela simples
O exemplo acima mostra uma tabela com duas linhas e duas colunas.
O nmero de colunas definido pelo nmero de clulas presentes nas
linhas. possvel expandir as clulas para que elas ocupem o espao
de mais de uma coluna ou linha.
<TABLE BORDER=2>
<TR>
<TD COLSPAN=2>Clula expandida</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Exemplo 18: expanso da clula em colunas
ou
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Clula expandida</TD>
</TR>
<TR>
</TR>
</TABLE>
Exemplo 19: expanso de uma clula em linhas
A soluo necessria para fazer uma clula expandida diferente em

cada um dos exemplos anteriores. No caso da clula expandida na
largura de duas colunas, ela ficou em uma linha diferente das clulas
1 e 2. No segundo exemplo, para deixar a clula expandida da altura
de duas linhas foi preciso coloc-la na mesma linha das clulas 1 e 2.
Dimenses da tabela
Alm de controlar a largura da borda (com o atributo BORDER),

possvel definir as dimenses (em pixels) de toda a tabela, espao
entre clulas e as margens dentro das clulas. Todos esses controles
so feitos atravs de atributos dentro do tag <TABLE>. Os atributos
so:
WIDTH: para definir a largura da tabela
HEIGHT: para definir a altura da tabela
CELLPADDING: para definir a margem dentro das clulas
CELLSPACING: para definir o espao entre as clulas
<TABLE BORDER=1 WIDTH=400 HEIGHT=200 CELLPADDING=20

CELLSPACING=20>
<TR>
<TD ROWSPAN=2>Clula expandida</TD>
</TR>
<TR>
</TR>
</TABLE>
Exemplo 20: controlando dimenses e espaamento da tabela
Os atributos width e height tambm podem ser utilizados para definir

o tamanho de clulas especficas. Neste caso, devem ser colocado
dentro do tag <TD> (ou <TH>).
Alinhamento
Os elementos dentro da tabela podem ser alinhados da mesma forma

que um pargrafo comum. Se nenhum alinhamento for definido, o
contedo das clulas alinhado horizontalmente esquerda e
verticalmente ao centro. Os atributos ALIGN (alinhamento horizontal)
e VALIGN (alinhamento vertical) devem ser usados dentro
dos tags<TR> e <TD> (alm de <TH>, se for o caso). Os
alinhamentos possveis so:
Alinhamento horizontal
ALIGN=LEFT: alinha o contedo esquerda
ALIGN=RIGHT: alinha o contedo direita
ALIGN=CENTER: alinha o contedo ao centro
Alinhamento vertical
VALIGN=BASELINE: mantm as linhas de texto com o mesmo
alinhamento (para ser usado dentro de <TR> ou no primeiro <TD>de
uma linha)
VALIGN=TOP: alinha o contedo no topo
VALIGN=MIDDLE: alinha o contedo ao centro
VALIGN=BOTTOM: alinha o contedo na base da clula
Vamos utilizar um texto mais longo na segunda clula da segunda

coluna para demonstrar o alinhamento padro.
<TABLE BORDER>
<TR>
<TH>Ttulo 1</TH><TH>Ttulo 2</TH>
</TR>
<TR>
<TD>Clula 1</TD>
<TD><B>Clula 2</B><P>
Quando existe um texto longo, a clula expandida at margem da

janela do navegador. Para controlar a apresentao de texto dentro
da tabela, pode-se modificar as dimenses da clula.</TD>
</TR>
</TABLE>
Exemplo 21: um texto longo dentro de uma clula
A largura da coluna da direita foi ampliada para que o texto da clula

2 aproveitasse at o final da margem do navegador. Se a largura da
janela do navegador for diminuda, tambm diminui a largura da
segunda coluna. Vamos melhorar a aparncia da tabela ajustando a
largura da clula 2 em 300 pixels. Assim, a largura de toda a segunda
coluna ser ajustada. Aproveitamos este exemplo para alinhar o texto
da clula 1 no topo e mudar a largura da borda da tabela.
<TABLE BORDER=3>
<TR>
<TH>Ttulo 1</TH><TH>Ttulo 2</TH>
</TR>
<TR>
<TD valign=top>Clula 1</TD>
<TD width=300><B>Clula 2</B><P>
A largura de cada clula pode ser controlada individualmente

utilizando-se o atributo <tt>width</tt>.</TD>
</TR>
</TABLE>
Exemplo 22: controlando a largura das clulas
Cor de fundo das clulas
O Internet Explorer, navegador da Microsoft, permite atribuir cores

diferentes para o fundo de cada clula. Basta acrescentar o
atributoBGCOLOR com a cor desejada aos tags de clula. Em algumas
combinaes de cores ser necessrio tambm modificar a cor das
letras. Isso feito com o atributo COLOR dentro do tag <FONT>.
<TABLE BORDER>
<TR>
<TH BGCOLOR=000000><FONT
COLOR=FFFFFF>Comida</FONT></TH>
<TH BGCOLOR=000000><FONT
COLOR=FFFFFF>Bebida</FONT></TH>
</TR>
<TR>
<TD BGCOLOR=white>Arroz</TD>
<TD BGCOLOR=black><FONT COLOR=WHITE>Vinho</FONT></TD>
</TR>
</TABLE>
Dicas e Truques
Truques com imagens Texturas no background
Da mesma forma que possvel definir uma cor de fundo diferente

para as pginas, pode-se colocar uma imagem como papel de parede.
Primeiro cria-se um arquivo .GIF e depois inclui-se o
atributoBACKGROUND no tag <BODY>.
A imagem que ser colocada no fundo deve ser suave o suficiente

para permitir que o texto a ser colocado por cima fique legvel. No
exemplo que mostramos aqui, no entanto, escolhemos um padro
quadriculado para mostrar como o arquivo de imagem repetido na
tela para compor o background.
Exemplo 23: o arquivo de imagem para ser usado como fundo
<BODY BACKGROUND=textura.gif>
Exemplo 24: colocando uma textura no fundo da pgina
Neste exemplo, o arquivo textura.gif utilizado como padro de

fundo da pgina. Vrias cpias da imagem so colocadas lado a lado
at ocupar toda a rea do documento.
Imagem de um pixel
Deve-se ter outros cuidados ao escolher as imagens para o fundo. O
principal problema o tamanho em bytes destes arquivos. As
dimenses da imagem influem no tamanho do arquivo. Para criar um
arquivo o mais econmico possvel pode-se fazer uma imagem de
apenas um pixel quadrado. Esse pixel, que estar ocupando um
tamanho mnimo em bytes, ser reproduzido em todo o fundo da
pgina, dando a impresso de ser um arquivo nico.
Baixa resoluo
Outra forma de melhorar a performance da pgina Web enviar

primeiro uma verso em baixa resoluo das imagens. Esse truque
mais til quando a imagem de grandes propores. Digamos que a
imagem seja bastante complexa, ocupando acima de 30 Kbytes. Cria-
se uma verso simplificada da mesma imagem (em preto e branco,
por exemplo) e informa-se ao navegador para carreg-la antes.
Assim, o usurio pode ter uma idia da ilustrao antes de ter que
esperar pela imagem em alta resoluo. Criado para o Netscape, esse
truque chamado de low/high resolution flip trick. A incluso da
imagem de baixa resoluo conseguida com a colocao do
atributo LOWSRC, que indica o arquivo que ser carregado primeiro.
<IMG SRC=altareso.gif LOWSRC=baixares.gif>
No exemplo acima, o arquivo altareso.gif a imagem definitiva, de

alta resoluo. O arquivo baixares.gif a imagem de baixa resoluo,
que ser carregada antes.
A principal utilidade desse truque nos imagemaps. Sem ter que

esperar pela imagem de alta resoluo, o usurio pode escolher uma
rea da verso menos definida e seguir a sua navegao. Alguns
lugares da rede aproveitam o recurso para criar uma pequena
animao.
Fundo transparente
Os programas de desenho, independente do formato da figura,

gravam uma imagem no formato retangular. Mesmo que a imagem
seja um crculo, quando a ilustrao for colocada na pgina Web, ela
ir ocupar um espao retangular. Se esse crculo tiver sido desenhado
sobre um fundo branco, esse fundo acompanhar a imagem.
possvel fazer uma imagem ficar com o fundo transparente.

Digamos que o fundo da pgina tenha uma textura e preciso colocar
uma imagem que deixe ver o fundo em volta dela. Pode-se definir que
determinada rea da imagem no tenha cor nenhuma e dar a
impresso de vazado.
Para fazer uma imagem com fundo transparente preciso utilizar um
programa como o LViewPro, que seleciona uma determinada cor como
a cor de fundo. Ao carregar a imagem no navegador, essa cor no
ser mostrada, dando o efeito de transparncia. Por isso preciso
que a rea que se pretende deixar transparente seja de uma cor s.
Essa cor no pode se repetir em qualquer outra parte da imagem. Do
contrrio essa parte tambm ficar transparente.
No exemplo a seguir, a imagem foi criada sobre um fundo cinza. A

inteno colocar a figura sobre uma textura. Abre-se o arquivo no
LViewPro e escolhe-se Background Color no menu Options. O
programa mostra uma tela com todas as cores presentes na imagem.
Seleciona-se a cor que ficar transparente (neste caso, o cinza) e
clica-se em OK. Ao salvar o arquivo, o programa pede uma
confirmao de gravao no formato GIF89. Clica-se em OK. Ao
carregar a imagem no navegador, a rea que estava na cor cinza
ficou transparente e por baixo da imagem apareceu a textura.
Exemplo 25: imagem preparada para ficar com fundo transparente
Exemplo 26: pgina com imagem com fundo transparente
Anti-alias
O efeito anti-alias, disponvel em alguns programas de desenho, como
o Photoshop, suaviza as bordas de uma imagem. O efeito mistura os
pixels da borda com os pixels do fundo. Por exemplo, se a borda est
na cor preta e o fundo na cor branca, o anti-alias coloca na borda uma
gradao de tons de cinza. Assim, o contorno da imagem fica com
maior resoluo.
Exemplo 27: imagem sem anti-alias
Exemplo 28 imagem com anti-alias
Dependendo do tamanho, difcil notar as diferenas entre imagens

com ou sem-anti-alias. Mas se olharmos mais de perto, veremos como
construdo o anti-alias.
Exemplo 29: imagem sem anti-alias vista mais de perto
Exemplo 30: imagem com anti-alias vista mais de perto
No exemplo acima, a primeira imagem, sem anti-alias, tem contorno

cheio de degraus. A segunda imagem, com o efeito, mistura os
pixels da borda com os do fundo, gerando alguns pontos acinzentados
para fazer a transio de forma mais suave.
Uma desvantagem do anti-alias que a rea de transio entre o

contorno e o fundo aumenta a complexidade da imagem e,
conseqentemente, gera arquivos com mais bytes. Quando possvel,
deve-se evitar o efeito para que os arquivos de imagem fiquem com
um tamanho menor.
Combinao com o background
As imagens com anti-alias tambm dificultam o uso do fundo

transparente. Na verdade, os dois truques so praticamente
incompatveis. Como preciso escolher apenas uma cor para fazer
uma imagem com fundo transparente, os tons da transio no
contorno aparecem como se fossem um borro. Quando o uso doanti-
alias indispensvel, recomenda-se que a imagem seja produzida j
sobre o fundo definitivo. Por exemplo, se o fundo da pgina for preto,
a imagem deve ser criada no programa de desenho sobre um fundo
da mesma cor. Se as cores forem idnticas, nem preciso converter a
imagem para fundo transparente. Mas, se for necessrio fazer a
transparncia, os tons da borda combinaro com a cor de fundo da
pgina.
Exemplo 31: imagem preparada sobre o fundo definitivo
Exemplo 32: pgina com imagem com anti-alias e fundo
Outra situao em que se deve coordenar o fundo da pgina e o da

imagem que est sendo produzida quando se utiliza uma textura
como background. Nem sempre uma imagem com fundo transparente
funciona sobre uma textura. A dica de novo criar a imagem j sobre
a textura que ser utilizada. preciso que a textura escolhida seja
uniforme para que no haja problemas de encaixe quando a
imagem for colocada na pgina.
Letreiro
O Internet Explorer implementa uma forma muito simples de dar

movimento ao texto. O recurso funciona como um letreiro luminoso
de bolsa de valores, no qual o texto corre da direita para a esquerda.
No caso do letreiro produzido para o Internet Explorer, utiliza-se
otag <MARQUEE> para marcar o trecho de texto que ser animado.
Uma srie de atributos permitem controlar o tipo de rolagem do texto
(da esquerda para a direita ou vice-versa), a velocidade e o tamanho
do letreiro, entre outras coisas.
Um letreiro simples seria:
<MARQUEE HEIGHT=30 WIDTH=300 DIRECTION=LEFT

SCROLLAMOUNT=50>Este texto rola pela tela da direita para a
esquerda.</MARQUEE>
No exemplo acima, uma rea de 30 pixels de altura (HEIGHT=30) por

300 pixels de largura (WIDTH=300) ser criada para a exibio do
texto em movimento, que ser apresentado da direita para a
esquerda (DIRECTION=LEFT). A velocidade expressa tambm
empixels pelo atributo SCROLLAMOUNT. Quanto mais pixels, mais
rpido correr o texto na tela.
Trechos de vdeo
No Microsoft Internet Explorer 2.0 possvel incluir um trecho de

vdeo numa pgina. A Microsoft inventou um atributo
chamadoDYNSRC (de dynamic source, fonte dinmica) para ser
includo dentro do tag <IMG>. O formato de arquivo de vdeo
suportado o AVI (Audio Video Interleave). Para que os demais
navegadores, incapazes de entender o atributo DYNSRC, possam
tambm receber a imagem, ainda que esttica, inclui-se no
mesmo tag o atributo SRCcom o arquivo de imagem comum
correspondente.
<IMG DYNSRC=video.avi SRC=imagem.gif WIDTH=50 HEIGHT=50

START=MOUSEOVER LOOP=INFINITE>
O exemplo acima implementa numa pgina lida com o Internet

Explorer 2.0 o arquivo de vdeo video.avi. Outros navegadores (como
o Netscape) iro mostrar apenas a imagem imagem.gif. O
atributoSTART=MOUSEOVER indica que o trecho de vdeo comear a
ser executado quando o usurio passar o mouse sobre ele. O
atributoLOOP=INFINITE declara que o vdeo ser exibido
continuamente at que o usurio mude de pgina.
Outros atributos so:
START=FILEOPEN: o vdeo comea a ser exibido assim que a pgina

carregada
CONTROLS: adiciona um conjunto de botes para controlar a

execuo do vdeo
LOOP=n: Executa o trecho de vdeo n vezes. Se for

colocadoLOOP=5, o vdeo ser exibido cinco vezes.
LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto

tempo o trecho de vdeo ser executado quando colocado em loop.
Trilha sonora
O Internet Explorer 2.0 tambm aceita colocar uma trilha sonora em

uma pgina Web. Como no tag que implementa a execuo de vdeo,
possvel utilizar um dispositivo de looping, que pode manter o
arquivo tocando constantemente ou por um nmero definido de
vezes. Para colocar uma trilha sonora, a Microsoft criou o
tagBGSOUND. Pode-se incluir trechos de udio nos formatos WAV, AU
ou MIDI.
<BGSOUND SRC=som.wav LOOP=INFINITE>
Neste exemplo, o arquivo de udio som.wav ser executado

constantemente at que o usurio troque de pgina. S depois que a
pgina carregada que o som comea a tocar. possvel tambm
fazer com que o som seja tocado por um nmero determinado de
vezes. Exemplo:
<BGSOUND SRC=som.wav LOOP=5>
No exemplo acima, o arquivo som.wav ser executado cinco vezes.
Marca d'gua
No Internet Explorer pode-se controlar o comportamento da imagem

de fundo, o background. A empresa criou um atributo para
o tag<BODY> chamado BGPROPERTIES. Com a
opoBGPROPERTIES=FIXED, a imagem de fundo fica fixa quando o
usurio rola o texto para cima. O recurso d a impresso da pgina
ter uma marca d'gua e de que o texto flutua sobre o fundo.
<BODY BACKGROUND=fundo.gif BGPROPERTIES=FIXED>

Mapas clicveis
O mapa clicvel uma imagem que contm vrias ligaes de

hipertexto. Numa mesma figura, pode-se oferecer ao usurio a opo
de clicar em regies diferentes para escolher onde ele quer ir.
A primeira tarefa para criar um mapa clicvel produzir a imagem.

Depois, preciso utilizar um programa de edio de mapas. O
Mapedit, para Windows 3.1 e 3.11, e o MapThis!, para Windows 95,
so os mais conhecidos.
Deve-se carregar o arquivo de imagem no editor de mapas e utilizar

as ferramentas disponveis para marcar as reas da imagem que
podero ser clicadas pelo usurios. Os editores de mapas tm
ferramentas para desenhar reas na forma de crculos, retngulos,
polgonos (forma livre) ou pontos.
Exemplo 33: criando as regies sensveis na imagem
O prximo passo definir qual arquivo cada uma dessas regies ir

chamar. Clicando com o boto direito do mouse sobre as reas,
obtm-se uma janela onde pode ser escrito o nome do arquivo.
Exemplo 34: associando um arquivo a uma regio sensvel da

imagem
Se o arquivo estiver em um diretrio diferente, preciso inclu-lo no
nome do arquivo. Alm disso, necessrio indicar o nome do
arquivodefault, que o navegador deve carregar quando o usurio
clicar em uma rea da imagem fora das reas com links. O
arquivo defaultpode ser uma pgina Web com uma mensagem do tipo
voc clicou em uma rea sem ligao de hipertexto. Por favor, tente
de novo. No Mapedit, a definio do arquivo default feita em uma
opo do menu File. No MapThis!, o arquivo default indicado toda
vez que se marca uma regio sensvel.
Depois de marcar todas as regies sensveis, basta salvar o arquivo

do mapa com a extenso .map.
Com o arquivo do mapa pronto, hora de colocar a imagem na

pgina e fazer a referncia ao mapa.
Exemplo 35: um mapa clicvel
<A HREF=HTTP://ALGUM.SITE.COM.BR/CGI-BIN/
IMAGEMAP/mapa.map>
<IMG SRC=mapa.gif ISMAP></A>
Onde:
HTTP://ALGUM.SITE.COM.BR o endereo do servidor onde esto as

pginas. preciso confirmar com o administrador do servidor a
necessidade deste endereo. Alguns servidores mais recentes, como
os da Netscape, exigem apenas a colocao do nome do arquivo.
/CGI-BIN/IMAGEMAP a localizao do programa imagemap, que ir

processar as informaes do mapa. Essa localizao deve ser
confirmada com o administrador do servidor. Alguns servidores mais
recentes, como os da Netscape, exigem apenas a colocao do nome
do arquivo.
/mapa.map o nome do arquivo de mapa. Neste caso, o arquivo deve

estar no diretrio principal das pginas Web. Se estiver em um
diretrio diferente, deve-se acrescentar a informao.
Exemplo:/mapas/mapa.map.
IMG SRC=mapa.gif a referncia imagem
ISMAP indica que esta imagem um mapa clicvel
Para testar o mapa, preciso que todos os arquivos sejam

transferidos para o servidor. um bom momento para checar com o
administrador do servidor todos os diretrios referenciados. O
principal a localizao do programa imagemap, que normalmente
est no diretrio /cgi-bin. Deve-se checar tambm com o
administrador se necessrio que ele modifique o
arquivoimagemap.conf para incluir a localizao dos mapas novos.
Esse arquivo informa ao programa imagemap onde esto os mapas.
Alguns servidores mais recentes, como os da Netscape, exigem
apenas a colocao do nome do arquivo.
Mapas processados no cliente
Em 1995 (com o Internet Explorer e o Netscape 2.0), tornou-se

possvel criar mapas que no precisam de programas instalados no
servidor para funcionar. o que se chama de mapas processados no
cliente. Assim pode-se testar os mapas antes de envi-los ao servidor
e diminuir o tempo de resposta quando o usurio clica na imagem.
O truque inventado para processar os mapas clicveis no navegador

foi colocar as informaes sobre as reas quentes da imagem na
prpria pgina Web. O processo de produo do mapa continua o
mesmo: criar a imagem, carreg-la no editor de mapas, marcar as
reas com ligao de hipertexto e salvar o arquivo .map. Para colocar
as informaes do mapa na pgina, deve-se copiar o contedo do
arquivo .map para a pgina Web dentro de um
novo tagchamado <MAP>.
O contedo do mapa criado pelo Mapedit no exemplo anterior o

seguinte:
circle circulo.htm 74,76,96,121
rect quadrado.htm 270,123,179,32
poly triangul.htm 375,27,428,124,321,124,375,27
Onde:
circle, rect e poly so os formatos das regies sensveis.
circulo.htm, quadrado.htm e triangul.htm so os arquivos associados

a essas regies.
e os nmeros so as coordenadas das regies sensveis.
Apenas duas coordenadas definem a regio circular do mapa. A

primeira coordenada marca o centro e a segunda aponta o raio da
circunferncia (74,76,96,121). O quadrado tambm s precisa de
duas coordenadas, uma indicando o canto superior esquerdo e outra
localizando o canto inferior direito do retngulo (270,123,179,32). J o
polgono precisa de uma coordenada para cada um pontos que ligam
as retas que o formam (375,27,428,124,321,124,375,27). Por isso,
primeiro e o ltimo ponto so iguais.
preciso reordenar as informaes contidas no arquivo gerado pelo

editor de mapas para criar um mapa processado no cliente. As
informaes sobre as reas sensveis so colocadas como atributos
do tag <AREA>, que por sua vez deve ser colocado entre o par
detags <MAP> e </MAP>.
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32

HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27

HREF=TRIANGUL.HTM>
</MAP>
Onde:
<MAP> e </MAP> indicam o incio e o fim de uma descrio de mapa

processado no cliente.
NAME=MAPA indica o nome do mapa.
SHAPE indica o formato da regio.
COORDS indica as coordenadas que formam a regio.
HREF indica o arquivo associado regio
O mapa processado no cliente tambm recebe um nome, definido no

atributo NAME do tag <MAP>. Esse nome utilizado no tag <IMG>,
que agora informa tambm, atravs do atributo USEMAP, qual mapa
deve ser utilizado para o processamento.
<IMG SRC=mapa.gif USEMAP=#MAPA>
O atributo USEMAP, seguido do caractere #, indica o nome do mapa.

No exemplo acima, somente os navegadores capazes de processar
mapas no cliente (Internet Explorer e Netscape 2.0), podero utilizar a
imagem clicvel. Para fazer mapas que todos os navegadores possam
entender, deve-se mesclar as duas tcnicas, utilizando os
atributos ISMAP e USEMAP, simultaneamente no tag <IMG>. No
deve-se esquecer, no entanto, de executar os procedimentos normais
de um mapa processado no servidor, ou seja, enviar o arquivo do
mapa (.map) para o diretrio onde ficaro armazenadas as pginas e
verificar se necessrio referenci-lo no arquivo de
configuraoimagemap.conf do servidor.
O exemplo completo de um mapa processado no cliente o seguinte:
<MAP NAME=MAPA>

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
<A HREF=/cgi-bin/imagemap/mapa.map>
<IMG SRC=mapa.gif USEMAP=#mapa ISMAP></A>
importante que a descrio do mapa aparea na pgina antes que a

referncia da imagem.
Erros mais comuns:
Esquecer de fechar as aspas
s vezes defeitos estranhssimos aparecem no documento HTML. Por

exemplo, simplesmente uma parte do texto desaparece. preciso
conferir se no foi esquecido de fechar as aspas utilizadas em um
nome de arquivo dentro de uma referncia.
Colocar os nomes dos arquivos em maisculas

Os servidores que utilizam o sistema operacional Unix a maioria dos
servidores Internet fazem diferena quando o nome de um arquivo
escrito em maisculas ou minsculas (caixa alta e caixa baixa). Para
o servidor, os arquivos TEXTO.TXT e texto.txt so diferentes. o que
se chama de sensitivo caixa (case sensitive, em ingls). A
sensitividade caixa tambm mantida quando o nome do arquivo
colocado entre aspas na referncia. Se o arquivo foi nomeado como
imagem.gif e dentro do documento HTML a referncia para
imagem.Gif, o servidor no ir ach-lo. Por isso, deve-se escolher um
padro para os nomes dos arquivos (sempre em maisculas ou
sempre em minsculas).
Esquecer de citar o diretrio em uma referncia
Clica-se no link e aparece uma mensagem dizendo que o

documento no foi encontrado. Basta checar os links para descobrir
se no faltou colocar o diretrio onde est o arquivo. Em mapas
clicveis, o cuidado deve ser ainda maior. Deve-se checar as
referncias das reas com ligao de hipertexto (no editor de mapas),
a localizao do arquivo imagemap (normalmente /cgi-bin/imagemap)
e o nome do mapa.
Fechar uma clula em um pargrafo diferente
ridculo, mas o Netscape insiste em incluir espaos em branco entre

as clulas se o tag de fim de clula </TD> ficar separado por uma
marca de pargrafo do contedo da clula. O tag </TD> deve ser
colocado imediatamente depois do contedo da clula. Exemplo:
Errado
<TD>
<IMG SRC=imagem.gif>
</TD>
Certo
<TD>
<IMG SRC=imagem.gif></TD>
Fechar uma referncia em um pargrafo diferente

Uma variao desse erro acontece com os links de imagem. preciso
encerrar a ncora de hipertexto no mesmo pargrafo do contedo da
referncia. Do contrrio, o navegador adiciona um trao da cor do
link. A soluo a mesma do exemplo anterior: colocar o tag </A>
imediatamente depois do contedo do link.
Exemplos de pginas Web
Neste captulo mostramos pginas que utilizam algumas das dicas

apresentadas neste livro e contornam de forma criativa as limitaes
de HTML.
c|net
Lanado em 1995, um dos sites mais acessados da rede. J teve

trs grandes mudanas de design. Na sua primeira verso, o c|net
combinava grficos simples para aumentar a velocidade de
carregamento com uma formatao discreta, permitindo que um
grande nmero de navegadores sejam capazes de visualizar a pgina
da mesma forma.
Exemplo 37: c|net: grficos simples garantem

carregamento rpido
Imagens
As imagens utilizados no c|net tm sempre poucas cores e formato

simples, normalmente retangular ou redondo, sem sombreados nas
letras. Cada pgina recebe apenas uma imagem sofisticada, como
vemos acima. O fundo tambm recebeu uma imagem para dar o tom
de amarelo caracterstico do site.
Texto monoespaado
Como alternativa fonte padro dos navegadores, a c|net usa

bastante o texto monoespaado, inclusive nos links de ttulos de
reportagens.
Alinhamento
O alinhamento centralizado, alm de fugir do padro ( esquerda)

garante um bom balanceamento pgina indepentemente da largura
da janela do navegador.
Um trecho do documento HTML da c|net
<html>
<head>
<title>c|net online front door</title></head>
<body background="../../../fotos/Backgrounds/bkg.yell.gif"
vlink="#006633">
<p align=center>
<font size = 5>
<tt>
<strong>
292,297 registered members and growing<p align=center>
<a href="/Central/Features/Future/"><img border=0

src="../../../fotos/Cv/cv.future1.gif" width=240 height=165 alt="the
future of the Net"></a>
Minc
Um bom exemplo de como combinar imagens com o fundo da pgina.

Exemplo 38: a combinao de imagem com fundo do Minc
A imagem da camiseta com um trator desta pgina foi produzida com

o fundo transparente. Criada no programa de desenho sobre um
fundo de uma cor que no aparece em nenhuma parte do desenho, a
imagem passou por um programa como o LView Pro para determinar
a cor de fundo. O arquivo de imagem, na verdade, assim:
Exemplo 39: o arquivo original de imagem do Minc
Southern Utah
Esta pgina mostra uma combinao simples de uma tabela com

imagens dentro das clulas.
Exemplo 40: imagens dentro de clulas
A tabela tem quatro linhas, cada uma com trs clulas. Dentro de
cada clula existe uma imagem. As imagens contm referncias. Ao
clicar em uma imagem, o usurio levado para outra pgina.
Como as imagens so links para outras pginas, as bordas das

imagens foram eliminadas com o atributo BORDER=0 para que no
recebessem uma borda da cor dos links. O atributo ALT foi utilizado
para permitir que mesmo navegadores sem capacidade de mostrar
imagens pudessem aproveitar a pgina. As imagens tambm
receberam os atributos VSPACE e HSPACE para adicionar espao entre
elas.
<html>
<Title>Southern Utah</Title>
<BODY Background="/soutah/stone.gif" rgb="#000000"

text="#000000" link="#0000ff"
vlink="#ff0000">
<center><FONT SIZE=+4>Southern Utah</FONT></CENTER>
<CENTER>
<TABLE>
<TR>
<TD><A HREF="/soutah/region/index.html">
<IMG ALT=Region hspace=1 vspace=1 border=0
SRC="dixiebutton.gif"></A></TD>
<TD><A HREF="/soutah/yellow/index.html">
<IMG ALT=Yellow Pages hspace=1 vspace=1 border=0

SRC="redwhitebutton.gif"></A></TD>
<TD><A HREF="/soutah/art/index.html">
<IMG ALT=Art hspace=1 vspace=1 border=0

SRC="redrockbutton.gif"></A></TD></TR> <TR><TD><A
HREF="/medical/index.html">
<IMG ALT=Medical hspace=1 vspace=1 border=0

SRC="zionbutton.gif"></A></TD>
<TD><A HREF="/soutah/recreation/index.html">
<IMG ALT=Recreation hspace=1 vspace=1 border=0

SRC="sandsnowbutton.gif"></A></TD>
<TD><A HREF="/soutah/education/index.html">
<IMG ALT=Education hspace=1 vspace=1 border=0

SRC="brycebutton.gif"></A></TD></TR> <TR><TD><A
HREF="/soutah/sports/index.html">
<IMG ALT=Sports hspace=1 vspace=1 border=0

SRC="sandarchbutton.gif"></A></TD>
<TD><A HREF="/soutah/travel/index.html">
<IMG ALT=Travel/Tourism hspace=1 vspace=1 border=0

SRC="sunsetbutton.gif"></A></TD>
<TD><A HREF="/realnet/index.html">
0<IMG ALT=Real Estate hspace=1 vspace=1 border=0

SRC="delarchbutton.gif"></A></TD></TR>
<TR><TD><A HREF="/soutah/entertainment/index.html">
<IMG ALT=Entertainment hspace=1 vspace=1 border=0

SRC="mtnbutton.gif"></A></TD>
<TD><A HREF="/soutah/business/index.html">
<IMG ALT=Business hspace=1 vspace=1 border=0

SRC="reflectbutton.gif"></A></TD>
<TD><A HREF="/soutah/nationalparks/index.html">
<IMG ALT=National Parks hspace=1 vspace=1 border=0

SRC="sunsetlakebutton.gif"></A></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
@art Gallery
A galeria @art um bom exemplo de como utilizar texto pr-

formatado. Com o texto pr-formatado pode-se controlar o
alinhamento da poro de texto e das imagens.
Exemplo 41: alinhamento utilizando pr-formatao
O texto foi alinhado direita da pgina utilizando o tag <PRE> e uma

seqncia de tabulaes idnticas para cada linha. A imagem est
alinhada esquerda porque no recebeu nenhuma tabulao.
<TITLE>@art gallery</TITLE>
<body bgcolor=#FFFFFF>
<PRE>
Welcome to @art, an electronic art
gallery affiliated with the School
of Art and Design, the University
of Illinois at Urbana-Champaign.
<IMG ALIGN=bottom SRC="smboxlogo2.gif">
This gallery has been implemented
by the faculty members Kathleen
Tabela de acentos
(Os caracteres especiais da tabela ISO 8859 Latin-1)
&Aelig;
Á
Â
À
Å
Ã
Ä
Ç
Ð
É
Ê
È
Í
Î
Ì
Ï
Ñ
Ó
Ô
Ò
Ø
Õ
Ö
Þ
Ú
Û
Ù
Ü
Ý
á
â
æ
à
å
ã
ä
ç
é
ê
è
ð
ë
í
î
ì
ï
ñ
ó
ô
ò
ø
õ
ö
ß
þ
ú
û
ù
ü
ý
¡
¢
£
¥
¦
§
¨
© © (Netscape)
ª
«

® ® (Netscape)
¯
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
Þ
÷
& &
< <
> >
" "
Lista de tags e atributos
Os tags apresentados aqui formam uma compilao das definies

oficiais da linguagem mais as extenses introduzidas por empresas
como Netscape e Microsoft. Observaes em itlico indicam quais
navegadores (e a partir de qual verso) aceitam determinado tag,
atributo ou opo. Quando nenhuma observao estiver presente,
significa que aquele elemento aceito por todos os navegadores.
A tabela mostra os tags com a descrio de suas funes, atributos e

as respectivas opes. Os atributos e as opes devem ser colocados
dentro do tag, como no exemplo abaixo.
<BR CLEAR=ALL>
Onde BR o tag, seguido do atributo CLEAR e sua opo, ALL.
Pode-se colocar mais de um atributo dentro do mesmo tag.

<FONT SIZE=4 COLOR=BLUE>
Tags bsicos <HTML> e <HTML>
Marca o incio e o fim de um documento HTML.
Exemplo: <HTML>
<HEAD><TITLE>Título da página</TITLE></HEAD>
<BODY>
Conteúdo da página<P>
</BODY>
</HTML>
Aceito por: todos os navegadores
<HEAD> e </HEAD>
Marca o incio e o fim do cabealho.
Exemplo: <HTML>
<BODY>
</BODY>
</HTML>
<TITLE> e </TITLE>
Marca o incio e o fim do ttulo do documento.
Exemplo: <HTML>
<BODY>
</BODY>
</HTML>
<BODY> e </BODY>
Marca o incio e o fim do contedo do documento.
Exemplo: <HTML>
<BODY>
</BODY>
</HTML>
Atributos
BGCOLOR=#nnnnnn: modifica a cor do fundo da pgina (o Apndice

C mostra os valores possveis de n).
Exemplo: <BODY BGCOLOR=#FFFFFF> ou <BODY

BGCOLOR=#WHITE>O fundo desta página é
branco</body>
Aceito por: Netscape 1.1 e Internet Explorer
BACKGROUND=imagem.gif: coloca uma imagem como fundo da

pgina.
Exemplo: <BODY BACKGROUND=imagem.gif>Esta página

tem uma imagem no fundo.</BODY>
Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0
BGPROPERTIES=FIXED: Mantm fixa a imagem de fundo quando a

pgina rolada, criando um efeito de marca d'gua.
Exemplo: <BODY BACKGROUND=imagem.gif

BGPROPERTIES=FIXED>A imagem desta página não
rola junto com o texto.</BODY>
Aceito por: Internet Explorer 2.0
LEFTMARGIN=n: define a largura da margem esquerda da pgina

(sendo que n o valor em pixels da margem).
Exemplo: <BODY LEFTMARGIN=10>A margem esquerda desta pgina

é de 10 pixels.</BODY>
Aceito por: Internet Explorer
TOPMARGIN=n: define a altura da margem superior (sendo que n

o valor em pixels da margem).
Exemplo: <BODY TOPMARGIN=10>A margem superior desta pgina

é de 10 pixels.</BODY>
TEXT=#nnnnnn: modifica a cor do texto (o Apndice C mostra os

valores possveis de n).
Exemplo: <BODY TEXT=#FF0000>O texto desta página

está em vermelho.</BODY>
LINK=#nnnnnn: modifica a cor dos links no visitados (o Apndice C

mostra os valores possveis de n).
Exemplo: <BODY LINK=#FF0000>Os links não visitados desta

pgina aparecem em vermelho.</BODY>
ALINK=#nnnnnn: modifica a cor dos links j visitados (o Apndice C

Exemplo: <BODY ALINK=#FF0000>Os links ativos desta pgina

aparecem em vermelho.</BODY>
VLINK=#nnnnnn: modifica a cor dos links j visitados (o Apndice C

Exemplo: <BODY VLINK=#FF0000>Os links visitados desta pgina

aparecem em vermelho.</BODY>
Links
<A> e </A>
Marca o incio e o fim de um link.
Atributos
HREF=URL: indica para onde o link levar (sendo URL o endereo

para onde o link est apontando).
Exemplo: <A HREF=http://www.xyz.com>Site da XYZ</A>(leva para

uma pgina em outro
computador,<HREF=texto.htm>Texto</A> (leva para uma outra
pgina no mesmo computador), <A
HREF=#capitulo1>Capítulo 1</A> (leva para uma outra parte
do mesmo documento) ou<A
HREF=texto.htm#capitulo1>Capítulo 1 do texto</A>(leva
para uma parte determinada de outro documento)
NAME=nome: identifica o alvo de um link no meio de um documento

(sendo que nome o nome dado ao alvo de umlink).
Exemplo: <A HREF=#capitulo1>Capítulo 1</A>...<A

NAME=capitulo1>Capítulo 1</A>
TARGET=WINDOW: abre uma nova janela do navegador com o

resultado de um link.
Exemplo: <A HREF=http://www.xyz.com target=window>Site da

XYZ</A> (O pgina principal do site da XYZ aberta em uma
segunda janela do navegador).
Aceito por: Netscape 2.0
Texto e alinhamento
<BASEFONT>
Modifica a formatao padro do texto.
Atributos
SIZE=n: modifica o tamanho padro do texto. Sendo que npode valer

de 1 a 7. O tamanho padro do texto 3.
Exemplo: <BASEFONT SIZE=5>Texto (coloca o texto de toda a pgina
em um tamanho maior).
<FONT> e </FONT>
Modifica a formatao de determinada parte do texto.
Atributos
SIZE=n: modifica o tamanho de determinada parte do texto. Sendo

que n um valor de 1 a 7. O valor pode ser de -7 a +7 para aumentar
o texto em relao ao tamanho definido no tag<BASEFONT SIZE=n>.
Exemplo: <A FONT SIZE=5>Texto</FONT> (define o texto no

tamanho 5), <BASEFONT SIZE=5><FONT
SIZE=+1>Texto</FONT> (define o texto no tamanho equivalente ao
6)
COLOR=#nnnnnn: modifica a cor de um trecho de texto. O Apndice

C mostra os valores possveis de n.
Exemplo: <FONT COLOR=#nnnnnn>Texto</A> ou <FONT

COLOR=white>Texto</A> (coloca o texto na cor branca)
FACE=fonte: modifica o tipo do texto. Sendo que fonte o nome da

fonte. A fonte definida precisa estar instalada no computador do
usurio.
Exemplo: <FONT FACE=ARIAL>Texto</FONT> (coloca o texto na

fonte Arial.
<B> e </B>
Coloca o texto em negrito.
Exemplo: <B>Texto</B>
<I> e </I>
Coloca o texto em itlico.

Exemplo: <I>Texto</I>
<TT> e </TT>
Coloca o texto em uma fonte monoespaada (Courier, por exemplo).
Exemplo: <TT>Texto</TT>
<P> e </P>
Marca um pargrafo e acrescenta uma linha em branco depois de

cada um. utilizado aos pares (<P> e </P>) se for necessria a
colocao de atributo.
Exemplo: <P>Parágrafo</P> ou Parágrafo<P>
Atributo
ALIGN=CENTER, LEFT ou RIGHT: alinha o pargrafo ao centro

(ALIGN=CENTER), esquerda (ALIGN=LEFT) ou direita
(ALIGN=RIGHT).
Exemplo: <P ALIGN=CENTER>Parágrafo</P>
Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic 2.0.0
<CENTER> e </CENTER>
Alinha o trecho (texto, imagem ou tabela) ao centro.
Exemplo: <CENTER>Texto</CENTER>
Aceito por: Netscape e Internet Explorer
<BR>
Insere uma quebra de linha.
Exemplo: Linha 1<BR>Linha2
Atributo
CLEAR=ALL: joga o texto para a prxima margem livre aps a

imagem.
Exemplo: <IMG SRC=imagem.gif>Texto<BR CLEAR=ALL>Texto
<PRE> e </PRE>
Marca um trecho formatado com fonte monoespaada. A formatao

com espaos e entradas de pargrafos passa a ser respeitada.
Exemplo: <PRE>T e x t o</PRE>
Aceito por: Netscape, NCSA Mosaic e Internet Explorer (a verso

Macintosh do Internet Explorer no respeita formatao com espaos
e entradas de pargrafos.
<BLOCKQUOTE> e </BLOCKQUOTE>
Adiciona uma margem de cerca de um centmetro.
Exemplo: <BLOCKQUOTE>Texto</BLOCKQUOTE>
<Hn> e </Hn>
Marca um ttulo. Sendo que n pode ser um valor de 1 a 6.
Exemplo: <b>Título</b>
Atributo
ALIGN=CENTER, RIGHT ou LEFT: modifica o alinhamento do

ttulo. ALIGN=CENTER alinha o ttulo ao centro. ALIGN=RIGHT, alinha
o ttulo ao direita. ALIGN=LEFT alinha o ttulo esquerda.
Exemplo: <b ALIGN=CENTER>Título centralizado</b>
Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0
Linhas
<HR>
Inclui uma linha horizontal.
Exemplo: Texto<hr>Texto
Atributos
SIZE=n: define a altura da linha. Sendo que n pode ser um valor de 1
a 100.
Exemplo: <HR SIZE=10>
WIDTH=n: define a largura da linha horizontal. Sendo que n pode ser

um nmero qualquer ou um percentual da largura da pgina.
Exemplo: <HR WIDTH=200> ou <HR WIDTH=50%>
NOSHADE: desenha a linha horizontal sem a sombra para dar o

efeito de trs dimenses.
Exemplo: <HR NOSHADE>
ALIGN=LEFT, RIGHT ou CENTER: modifica o alinhamento da linha

horizontal.
Exemplo <HR ALIGN=CENTER>
Listas
<DL> e </DL>
Marcam o incio e o fim de uma lista de definio. Devem ser usados

com os tags <DT> e <DD>.
Exemplo: <DL>
<DT>Ttulo</DT>
<DD>Texto</DD>
<DT>Ttulo</DT>
<DD>Texto</DD>
</DL>
<DT> e </DT>
Marcam os ttulos de uma lista de definio. Devem ser usados junto
com os tags <DL> e <DD>.
Exemplo: <DL>
<DT>Ttulo</DT>
<DD>Texto</DD>
<DT>Ttulo</DT>
<DD>Texto</DD>
</DL>
<DD> e </DD>
Marcam o incio e o fim do texto de uma lista de definio. Devem ser

usados junto com os tags <DL> e <DT>.
Exemplo: <DL>
<DT>Ttulo</DT>
<DD>Texto</DD>
<DT>Ttulo</DT>
<DD>Texto</DD>
</DL>
<UL> e </UL>
Marcam o incio e o fim de uma lista no ordenada. Deve ser usado

junto com o tag <LI>. Os itens da lista recebem marcas grficas na
primeira linha conhecidas como bullets.
Exemplo: <UL>
<LI>Item 1
<LI>Item 2
</UL>

<OL> e </OL>
Marcam o incio e o fim de uma lista ordenada. Os itens da lista so

colocados em ordem e recebem na primeira linha um nmero ou
letra. Devem ser usados junto com o tag <LI>.
Exemplo: <OL>
<LI>Item 1
<LI>Iem 2
</OL>
Atributo
START=n: especifica o nmero a partir do qual os itens da lista

comeam a ser contados. Sendo que n pode ser um nmero ou uma
letra. Tambm podem ser utilizados nmeros romanos.
Exemplo: <OL START=3>
<LI>Item 1
<LI>Item 2
</OL>
Aceito por: Internet Explorer e Netscape 1.1
<DIR> e </DIR>
Marcam o incio e o fim de uma lista. Devem ser usados junto com
o tag <LI>.
Exemplo:<DIR>
<LI>Item 1
<LI>Item 2
</DIR>
<MENU> e </MENU>
Marcam o incio e o fim de uma lista. Devem ser usados junto com
o tag <LI>.
Exemplo: <MENU>
<LI>Item 1
<LI>Item 2
</MENU>
<LI>
Marca um item de lista. Pode ser usado com

os tags <DL>,<UL>, <OL>, <DIR> e <MENU>.
Exemplo: <UL>
<LI>Item 1
<LI>Item 2
</UL>
Atributos
TYPE=n: modifica o tipo de marca que ser colocada antes de cada

item da lista. Quando utilizado em uma lista ordenada (<OL>), pode
modificar o tipo de marca para um crculo ou um
quadrado. TYPE=CIRCLE coloca um crculo vazio (uma falha no
Netscape 2.0 para Windows faz com que a mesma opo produza um
quadrado vazio). TYPE=DISC coloca um crculo
cheio. TYPE=SQUARE coloca um quadrado cheio. Quando utilizado em
uma lista no ordenada, modifica o tipo de caractere que utilizado
para a contagem. TYPE=A ou TYPE=acoloca marcas em ordem
alfabtica (A, B, C ou a, b, c). TYPE=1marca os itens em ordem
numrica. TYPE=I ou TYPE=i marca os itens com nmeros romanos (I,
II, III ou i, ii, iii).
Exemplo: <UL>
<LI TYPE=square>Item 1
<LI>
</UL>
ou
<OL>
<LI TYPE=a>Item 1
<LI>Item 2
</OL>
Imagens
<IMG>
Insere uma imagem.
Atributos
SRC=imagem.gif: indica o arquivo de imagem a ser carregado.

Sendo que imagem.gif o nome do arquivo de imagem a ser usado.
Exemplo: <IMG SRC=imagem.gif>
DYNSRC=video.gif: indica o arquivo de vdeo a ser carregado.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif> (o

atributo SRC=imagem.gif deve ser colocado para que os navegadores
que no aceitam o atributo DYNSRC possam mostrar uma imagem)
CONTROLS: inclui um conjunto de botes para controlar a execuo

do arquivo de vdeo. Deve ser utilizado junto com o atributo DYNSRC.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif CONTROLS>
LOOP=n ou INFINITE: define quantas vezes o arquivo de vdeo ser

executado. Sendo que n o nmero de vezes que o arquivo ser
executado. LOOP=INFINITE executa o arquivo indefinidamente, at
que o usurio mude de pgina. Deve ser utilizado junto com o
atributo DYNSRC.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif LOOP=5>
START=FILEOPEN e/ou MOUSEOVER: define quando o arquivo de

vdeo comear a ser executado. START=FILEOPEN executa o arquivo
quando assim que for carregado.START=MOUSEOVER executa o
arquivo quando o mouse for colocado sobre a
imagem. START=FILEOPEN,MOUSEOVERexecuta o arquivo quando for
carregado e nas demais vezes em que o mouse for colocado sobre a
imagem. Deve ser usado com o atributo DYNSRC.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif LOOP=5

START=MOUSEOVER>
ALIGN=n:modifica o alinhamento da imagem em relao ao texto.

Sendo que n uma das opes a seguir. ALIGN=LEFT faz a imagem
flutuar esquerda, enquanto o texto circunda a imagem pela
direita. ALIGN=RIGHT faz a imagem flutuar direita, enquanto o
texto circunda a imagem pela esquerda.ALIGN=TOP alinha o topo da
imagem com o topo do elemento mais alto da linha, que pode ser
uma outra imagem.ALIGN=MIDDLE alinha a base do texto com o
centro da imagem.ALIGN=BOTTOM alinha a imagem com a base dos
outros elementos da linha.
Exemplo: <IMG SRC=imagem.gif ALIGN=LEFT>Texto
Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic
ALIGN=TEXTTOP alinha o topo da imagem com o topo do

texto,ALIGN=ABSMIDDLE alinha o centro do texto com o centro da
imagem. ALIGN=BASELINE e ALIGN=ABSBOTTOM alinham a imagem
com a base dos outros elementos da linha Netscape 1.1.
Exemplo: <IMG SRC=imagem.gif ALIGN=BASELINE>Texto
Aceito por: Netscape 1.1
VSPACE=n: insere espao acima e abaixo da imagem. Sendo que n

o valor em pixels do espao a ser adicionado.
Exemplo: <IMG SRC=imagem.gif VSPACE=10>
HSPACE=n: insere espao esquerda e direita da imagem. Sendo

que n um valor em pixels do espao a ser adicionado.
Exemplo: <IMG SRC=imagem.gif HSPACE=10>
ALT=n: indica o texto para ser colocado quando o navegador no

mostra a imagem. Sendo que n um ttulo que identifique a imagem.
Exemplo: <IMG SRC=imagem.gif ALT=Imagem>
WIDTH=n: determina a largura da imagem e reserva o espao no

navegador. Sendo que e n o valor em pixels da largura da imagem.
Deve ser usado junto com o atributo HEIGHT=n.
Exemplo: <IMG SRC=imagem.gif WIDTH=344 HEIGHT=233>
HEIGHT=n: determina a altura da imagem e reserva o espao no

navegador. Sendo que n o valor em pixels da altura da imagem.
Deve ser usado junto com o atributo WIDTH=n.
Exemplo: <IMG SRC=imagem.gif WIDTH=344 HEIGHT=233>
BORDER=n: insere uma borda em torno da imagem. Sendo que n

um valor em pixels da espessura da borda.
Exemplo: <IMG SRC=imagem.gif BORDER=1>
ISMAP: indica que a imagem um mapa clicvel processado no

servidor. Deve ser usado junto com uma referncia a um arquivo que
contenha as informaes do mapa.
Exemplo: <A HREF=arquivo.map><IMG SRC=imagem.gif

ISMAP></A>
Aceito por: todos os navegadores.
USEMAP=MAPA: indica que a imagem um mapa clicvel

processado no cliente. Sendo que MAPA o nome dado ao mapa
processado no cliente. Deve ser usado junto com
os tags<MAP> e <AREA>, que definem as regies sensveis da
imagem dentro da pgina Web. Pode ser usado junto com o
atributo ISMAP e a referncia a um mapa processado no servidor.
Exemplo: <MAP NAME=MAPA>

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
ou
<MAP NAME=MAPA>

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
<A HREF=/cgi-bin/imagemap/mapa.map>
<IMG SRC=mapa.gif USEMAP=#mapa ISMAP></A>
<MAP> e </MAP>
Indicam a marcao de um mapa processado no cliente. Deve ser

usado junto com o tag <AREA> e o atributo de imagemUSEMAP=#n.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
Atributos
NAME=MAPA: sendo que MAPA o nome do mapa processado no

cliente.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
<AREA>
Define uma rea sensvel do mapa clicvel processado no cliente.

Deve ser usado junto com o tag <MAP> e o atributo de
imagem USEMAP=#mapa.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
Atributos
SHAPE=formato: define o formato da regio sensvel do mapa
processado no cliente. Sendo que formato uma das opes a
seguir. SHAPE=RECT indica que a regio um
retngulo. SHAPE=CIRCLE indica que a regio um
crculo.SHAPE=POLY indica que a regio um polgono.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
COORDS=x,y: define as coordenadas da regio sensvel. Sendo

que x e y so valores em pixels que marcam a coordenada de um
ponto na imagem. E x ponto do eixo horizontal, enquanto y o
ponto do eixo vertical. Uma rea sensvel formada por vrias
coordenadas. Quando o formato da rea for SHAPE=RECT (retngulo),
h dois pares de x e y. O primeiro indica o canto superior esquerdo do
retngulo e o segundo, o canto inferior direito. Quando o formato
forSHAPE=CIRC, h a coordenada do centro do crculo e a do raio.
Quando o formato for SHAPE=POLY, existem pares de x e ypara cada
um dos pontos que formam a rea.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>

HREF=URL: indica a URL deve ser carregada quando a rea
determinada da imagem for clicada. Sendo URL o endereo que deve
ser carregado quando a rea determinada da imagem for clicada. A
URL pode ser um endereo completo ou apenas o nome de um
arquivo que est armazenado no mesmo computador.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
</MAP>
ou
<AREA SHAPE=CIRC COORDS=74,76,96,121

HREF=http://www.xyz.com/abc/abc.html>

HREF=http://www.xyz.com/abc/>

HREF=http://www.xyz.com>
</MAP>
NOREF: indica que a rea determinada no chama arquivo nenhum.

Serve para definir que qualquer rea que no esteja dentro das
ligadas a uma URL com HREF=URL no seja clicvel. Deve ser usado
dentro do tag <AREA> no lugar de HREF=URL. O valor
de COORDS=x,y deve conter a rea total da imagem. No exemplo a
seguir, a dimenso da imagem de 428 pixels de largura e
124 pixels de altura.

HREF=QUADRADO.HTM>

HREF=TRIANGUL.HTM>
<AREA SHAPE=RECT COORDS=0,0,428,124 NOHREF>
</MAP>
Marquee
<MARQUEE> e </MARQUEE>
Permite fazer um trecho de texto correr de um lado a outro da tela.
Exemplo: <MARQUEE>Texto</MARQUEE>
Atributos
ALIGN=TOP, MIDDLE ou BOTTOM: modifica o alinhamento do texto

em volta do marquee. ALIGN=TOP alinha o texto com o topo
do marquee. ALIGN=MIDDLE alinha o texto com o centro
do marquee. ALIGN=BOTTOM alinha o texto com a base domarquee.
Exemplo: <MARQUEE ALIGN=TOP>Texto</MARQUEE>
BEHAVIOR=SCROLL, SLIDE ou ALTERNATE: controla o

comportamento do texto dentro
do marquee.BEHAVIOR=SCROLL faz com que o texto entre por um
dos cantos do marquee e sai por outro. Com BEHAVIOR=SLIDE, o
texto entra por um cantos do marquee e pra ao chegar no canto
oposto. Com BEHAVIOR=ALTERNATE, o texto fica passando de um
canto a outro, sempre dentro do marquee.
Exemplo: <MARQUEE BEHAVIOR=SLIDE>Texto</MARQUEE>
BGCOLOR=#nnnnnn: muda a cor do fundo do marquee. O Apndice

C mostra os valores possveis de n.
Exemplo: <MARQUEE BGCOLOR=#FF0000>Texto</MARQUEE>
DIRECTION=LEFT ou RIGHT: define a direo na qual o texto se

move. DIRECTION=LEFT faz o texto correr para a
esquerda.DIRECTION=RIGHT faz o texto correr para a direita.
Exemplo: <MARQUEE DIRECTION=RIGHT>Texto</MARQUEE>
HEIGHT=n ou n%: define a altura do marquee. Sendo que n um

valor em pixels ou um percentual da altura da janela.
Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE>
WIDTH=n ou n%: define a largura do marquee. Sendo que n um

valor em pixels ou um percentual da largura da janela.
Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE>
HSPACE=n: define margens esquerda e direita domarquee.

Sendo que n um valor em pixels.
Exemplo: <MARQUEE HSPACE=10>Texto</MARQUEE>
VSPACE=n: define margens acima e abaixo do marquee. Sendo

que n um valor em pixels.
Exemplo: <MARQUEE VSPACE=10>Texto</MARQUEE>
LOOP=n: define quantas vezes o texto ir cruzar o marquee. Sendo

que n o nmero de vezes que o texto ir cruzar omarquee. Se n for
igual a 1 ou a INFINITE, o texto ir se movimentar infinitamente.
Exemplo: <MARQUEE LOOP=2>Texto</MARQUEE>
SCROLLAMOUNT=n: controla a velocidade do texto, definindo o

nmero de pixels entre cada redesenho do texto. Sendo que n o
valor em pixels que separa cada redesenho do texto. Quanto maior
for n, mais rpido ser o movimento texto.
Exemplo: <MARQUEE SCROLLAMOUNT=20>Texto</MARQUEE>
SCROLLDELAY=n: controla a velocidade do marquee ao definir os

intervalos de redesenho do texto. Sendo que n o valor em
milisegundos do intervalo de redesenho do texto. Quanto menor for n,
mais rpido ser o texto.
Exemplo: <MARQUEE SCROLLDELAY=10>Texto</MARQUEE>
Som
<BGSOUND>
Carrega um arquivo de udio como trilha sonora da pgina.
Exemplo: <BGSOUND SRC=som.wav>
Atributos
SRC=som.wav: define o nome do arquivo de udio a ser carregado

Sendo que som.wav o nome do arquivo a ser carregado. Aceita os
formatos .WAV, .AU e .MID.
Exemplo: <BGSOUND SRC=som.wav>
LOOP=n: define quantas vezes o arquivo de udio ser executado.

Sendo que n o nmero de vezes que o arquivo de udio ser
executado. Se n for igual a 1 ou a INFINITE, o arquivo ser executado
infinitamente.
Exemplo: <BGSOUND SRC=som.wav LOOP=INFINITE>
Tabelas
<TABLE> e </TABLE>
Marca o incio e o fim de uma tabela.

Exemplo: <TABLE>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0
Atributos
BORDER=n: define a borda da tabela. Sendo que n o valor

em pixels da borda.
Exemplo: <TABLE BORDER=1>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
Aceito por: Internet Explorer 2.0, Netscape 1.1 e NCSA Mosaic
BORDERCOLOR=#nnnnnn: define a cor principal da borda.

OApndice C mostra os valores de cores possveis de n.
Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>

BORDERCOLORLIGHT=#nnnnnn: define a cor da sombra mais
clara da borda. O Apndice C mostra os valores de cores possveis
de n.
Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000

BORDERCOLORLIGHT=#FFFFFF>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
BORDERCOLORDARK=#nnnnnn: define a cor da sombra mais

escura da borda. O Apndice C mostra os valores de cores possveis
de n.
Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000

BORDERCOLORLIGHT=#FFFFFF BORDERCOLORDARK=#000000>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
Tabela de cores
A tabela abaixo apresenta os cdigos de cores que podem ser

utilizados em documentos HTML. Somente os nomes de cores
acompanhados de asterisco podem ser utilizados no lugar dos
cdigos. Olive, fuchsia, purple e teal no tm correspondentes em
cdigo.
Cdigo Aparnci
Nome da cor
da cor a
*White #FFFFFF
*Red #FF0000
*Green #00FF00
*Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
*Yellow #FFFF00
*Black #000000
*Aqua #70DB93
Baker's
#5C3317
Chocolate
Blue Violet #9F5F9F
Brass #B5A642
Bright Gold #D9D919
Brown #A62A2A
Bronze #8C7853
Bronze II #A67D3D
Cadet Blue #5F9F9F
Cool Copper #D98719
Copper #B87333
Coral #FF7F00
Corn Flower
#42426F
Blue
Dark Brown #5C4033
Dark Green #2F4F2F
Dark Green
#4A766E
Copper
Dark Olive
#4F4F2F
Green
Dark Orchid #9932CD
Dark Purple #871F78
Dark Slate
#6B238E
Blue
Dark Slate
#2F4F4F
Grey
Dark Tan #97694F
Dark
#7093DB
Turquoise
Dark Wood #855E42
Dim Grey #545454
Dusty Rose #856363
Feldspar #D19275
Firebrick #8E2323
Forest Green #238E23
*Fuchsia
Gold #CD7F32
Goldenrod #DBDB70
*Gray #C0C0C0
Green Copper #527F76
Green Yellow #93DB70
Hunter Green #215E21
Indian Red #4E2F2F
Khaki #9F9F5F
Light Blue #C0D9D9
Light Grey #A8A8A8
Light Steel
#8F8FBD
Blue
Light Wood #E9C2A6
*Lime #32CD32
Mandarian
#E47833
Orange
*Maroon #8E236B
Medium
#32CD99
Aquamarine
Medium Blue #3232CD
Medium
#6B8E23
Forest Green
Medium
#EAEAAE
Goldenrod
Medium
#9370DB
Orchid
Medium Sea
#426F42
Green
Medium Slate
#7F00FF
Blue
Medium
#7FFF00
Spring Green
Medium
#70DBDB
Turquoise
Medium Violet
#DB7093
Red
Medium Wood #A68064
Midnight Blue #2F2F4F
*Navy #23238E
Neon Blue #4D4DFF
Neon Pink #FF6EC7
New Midnight
#00009C
Blue
New Tan #EBC79E
Old Gold #CFB53B
*Olive
Orange #FF7F00
Orange Red #FF2400
Orchid #DB70DB
Pale Green #8FBC8F
Pink #BC8F8F
Plum #EAADEA
*Purple
Quartz #D9D9F3
Rich Blue #5959AB
Salmon #6F4242
Scarlet #8C1717
Sea Green #238E68
Semi-Sweet
#6B4226
Chocolate
Sienna #8E6B23
*Silver #E6E8FA
Sky Blue #3299CC
Slate Blue #007FFF
Spicy Pink #FF1CAE
Spring Green #00FF7F
Steel Blue #236B8E
Summer Sky #38B0DE
Tan #DB9370
*Teal
Thistle #D8BFD8
Turquoise #ADEAEA
Very Dark
#5C4033
Brown
Very Light
#CDCDCD
Grey
Violet #4F2F4F
Violet Red #CC3299
Wheat #D8D8BF
Yellow Green #99CC32

Curso Básico de HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso Básico de HTML

Hochgeladen von

Copyright:

Verfügbare Formate

CURSO BSICO DE HTML

Uma das caractersticas mais interessantes da Internet a

Isso significa que na prtica no existe nenhuma diferena entre as

Existem muitos termos que tentam definir a Internet. Super-estrada

As vises distintas da rede no param por a. H quem veja na

A Internet tudo isso ao mesmo tempo. E com certeza muito mais. A

Cada usurio recebe uma identificao nica, conhecida como

Hoje, com o sucesso da Internet, toda empresa se v na obrigao de

No entanto, boa parte do material da rede produzido por indivduos

Como Funciona a Web

A Web funciona basicamente com dois tipos de programas: os clientes

A informao na Web organizada na forma de pginas, que podem

Os pedidos dos navegadores so atendidos por uma combinao de

Apesar de poderem ser instalados em praticamente todos os tipos de

O que uma URL

A Web permitiu que cada documento na rede tenha um endereo

http:// o mtodo pelo qual ocorrer a transao entre cliente e

www.seed.net.tw o nome do servidor onde est armazenado o

/~milkylin/ o diretrio onde est o arquivo. s vezes uma URL indica

htmleasy.html o nome do arquivo. A extenso .html indica que se

Esse endereo nico de um documento pode ser utilizado pelo

As URLs tambm so colocadas dentro de pginas de WWW para

Uma pgina Web simples

Apesar dessa aparente sofisticao, as pginas Web no passam de

O mnimo que voc precisa saber sobre HTML

Em compensao muito simples criar uma pgina bsica para

Software necessrio para esta seo

Como a pgina Web um documento de texto comum, pode-se

importante notar que os exemplos descritos aqui devem ser

Ser necessrio tambm um programa de desenho para criar as

Os exemplos foram testados em:

Netscape Navigator 2.0

NCSA Mosaic 2.0.0

No recomendvel que os documentos Web contenham acentos.

A melhor maneira de aprender a escrever pginas de Web fazendo.

Este o texto do primeiro exemplo.

Este o segundo pargrafo. Para colocar um novo ttulo depois

Observao: a representao dos tags <P> e <BR> foi escrita na

Visualizando o exemplo no navegador

Assim que o exemplo for salvo no editor de texto com a

Como funcionam os tags

O primeiro exemplo mostra vrios trechos de texto marcados por

Existem quatro pares de tags que devem ser sempre colocados na

No corpo do texto podem ser colocados at seis nveis de ttulos. A

Os pargrafos so digitados normalmente. O tag <P> serve para

Assim como as marcas de pargrafo, as quebras de linha so

O incio de uma lista pode ser indicado com <UL> e o final

Com os tags bsicos do primeiro exemplo j possvel criar pginas

A primeira providncia para melhorar a aparncia da pgina

<P ALIGN=CENTER>Este um pargrafo centralizado.</P>

Outro controle sobre o alinhamento dos elementos da pgina pode

<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem

Existe ainda uma terceira forma de modificar o alinhamento. a

Apesar da vantagem dessa forma de alinhamento arbitrrio,

Este texto est pr-formatado. A fonte

assim como os espaos adicionais, so

Neste caso, a margem esquerda

O texto normal recebe fonte proporcional e ignora a presena de

No Netscape, possvel colocar tags de ttulo dentro do

Mudando os caracteres Estilos de caracteres

Para dar nfase em determinados trechos de texto, pode-se usar

Ao contrrio de <PRE>, o tag <TT> ignora espaos em branco

Os tags de estilo podem ser usados uns sobre os outros, acumulando