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 UL
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 como cs.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 teclar Enter. 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 !gina Web sim!"es
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 m#nimo que voc$ !recisa 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.
%o&t'are necessrio !ara 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:
(etsca!e (avigator )*+
(http://home.netscape.com/comprod/mirror/
client_download.html)
Microso&t Internet ,-!"orer )*+ (http://www.microsoft.com/ie/download/default.htm)
(C%. Mosaic )*+*+
(http://www.ncsa.uiuc.edu /SDG/Software/Mosaic/)
.centuao
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.
/rimeiro ,-em!"o
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.
0isua"i1ando o e-em!"o 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 &uncionam 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 tags tambm
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.
T#tu"os
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.
/argra&os
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.
Lin2as
Assim como as marcas de pargrafo, as quebras de linha so indicadas por um tag simples. Para abrir uma
nova linha, usa-se o tag <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
.!$ndice 3. O incio de cada item indicado com o tag <LI>.
Me"2orando a a!ar$ncia
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.
."in2amento
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 dos tags 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
Te-to !r4&ormatado
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 adicionais tambm so ignoradas.
Exemplo 4: controle do alinhamento com pr-formata!o
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 tags de ttulo so
ignorados e se sobrepem aos tags de pr-formatao, eliminando o seu efeito.
Mudando os caracteres ,sti"os 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 ": 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 #: os estilos podem ser com$inados
Taman2os 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 SIZE variam 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 %: 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 di&erentes
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 ti!o 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 &: mudando o tipo do caractere para 'rial
H5!er"in6s
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 (: 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 1): 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 25!er"in6s
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>
."in2amento 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: +ue$ra 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: interrup!o de um texto em torno da imagem
3orda
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 1": a $orda de uma imagem
Te-to a"ternativo
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 1#: o texto alternati,o 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 inter"aceamento
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.
7imens8es
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>
Tabe"as
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 tabe"a sim!"es
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 1%: uma ta$ela 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 1&: expans!o da clula em colunas
ou
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Clula expandida</TD>
</TR>
<TR>
</TR>

</TABLE>
Exemplo 1(: expans!o 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.
7imens8es da tabe"a
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 2): controlando dimens-es e espaamento da ta$ela
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>).
."in2amento
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 &undo das c"u"as
O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cada clula.
Basta acrescentar o atributo BGCOLOR 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>
7icas e Truques
Truques com imagens Te-turas no bac6ground
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 atributo BACKGROUND 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 $ackground.
Exemplo 23: o ar+ui,o 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 !i-e"
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.

3ai-a reso"uo
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 lo./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 trans!arente
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 2": imagem preparada para ficar com fundo transparente
Exemplo 2#: pgina com imagem com fundo transparente
.nti4a"ias
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 2%: imagem sem anti-alias
Exemplo 2& 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 2(: imagem sem anti-alias ,ista mais de perto
Exemplo 3): imagem com anti-alias ,ista 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 bac6ground
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 do anti-
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 so$re o fundo definiti,o
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 $ackground. 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 o tag <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 em pixels pelo atributo SCROLLAMOUNT. Quanto mais
pixels, mais rpido correr o texto na tela.
Trec2os de v#deo
No Microsoft Internet Explorer 2.0 possvel incluir um trecho de vdeo numa pgina. A Microsoft inventou um
atributo chamado DYNSRC (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 SRC com 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 atributo
START=MOUSEOVER indica que o trecho de vdeo comear a ser executado quando o usurio passar o mouse
sobre ele. O atributo LOOP=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 colocado LOOP=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.
Tri"2a 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 tag BGSOUND. 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 d9gua
No Internet Explorer pode-se controlar o comportamento da imagem de fundo, o $ackground. A empresa criou
um atributo para o tag <BODY> chamado BGPROPERTIES. Com a opo BGPROPERTIES=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>
Ma!as c"icveis
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 regi-es sens0,eis 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 ar+ui,o a uma regi!o sens0,el da imagem
Se o arquivo estiver em um diretrio diferente, preciso inclu-lo no nome do arquivo. Alm disso, necessrio
indicar o nome do arquivo default, que o navegador deve carregar quando o usurio clicar em uma rea da
imagem fora das reas com links. O arquivo default pode 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 3": um mapa clic,el
<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
/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 arquivo imagemap.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
Ma!as !rocessados no c"iente
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 tag chamado <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 de tags <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 configurao imagemap.conf do servidor.
O exemplo completo de um mapa processado no cliente o seguinte:
<MAP NAME=MAPA>
<AREA SHAPE=RECT COORDS=270,123,179,32
HREF=QUADRADO.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.
,rros mais comuns:
,squecer de &ec2ar as as!as
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.
Co"ocar os nomes dos arquivos em mai;scu"as
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).
,squecer de citar o diret<rio em uma re&er$ncia
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.
Fec2ar uma c"u"a em um !argra&o di&erente
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:
,rrado
<TD>
<IMG SRC=imagem.gif>
</TD>
Certo
<TD>
<IMG SRC=imagem.gif></TD>
Fec2ar uma re&er$ncia em um !argra&o di&erente
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.
,-em!"os de !ginas 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 3%: c1net: 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.
Te-to monoes!aado
Como alternativa fonte padro dos navegadores, a c|net usa bastante o texto monoespaado, inclusive nos
links de ttulos de reportagens.
."in2amento
O alinhamento centralizado, alm de fugir do padro ( esquerda) garante um bom balanceamento pgina
indepentemente da largura da janela do navegador.
Um trec2o 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 3&: a com$ina!o de imagem com fundo do 2inc
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 3(: o ar+ui,o original de imagem do 2inc
%out2ern Uta2
Esta pgina mostra uma combinao simples de uma tabela com imagens dentro das clulas.
Exemplo 4): 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 ?a""er5
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-formata!o
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
,-em!"os de !ginas 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 3%: c1net: 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.
Te-to monoes!aado
Como alternativa fonte padro dos navegadores, a c|net usa bastante o texto monoespaado, inclusive nos
links de ttulos de reportagens.
."in2amento
O alinhamento centralizado, alm de fugir do padro ( esquerda) garante um bom balanceamento pgina
indepentemente da largura da janela do navegador.
Um trec2o 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 3&: a com$ina!o de imagem com fundo do 2inc
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 3(: o ar+ui,o original de imagem do 2inc
%out2ern Uta2
Esta pgina mostra uma combinao simples de uma tabela com imagens dentro das clulas.
Exemplo 4): 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 ?a""er5
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-formata!o
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
Tabe"a de acentos
(Os caracteres especiais da tabela ISO 8859 Latin-1)
&Aelig;
Á
Â
À
Å
Ã
Ä
Ç
Ð
É
Ê
È
´
&circ;
&grave;
¨
Ñ
Ó
Ô
Ò
Ø
Õ
Ö
Þ
Ú
Û
Ù
Ü
Ý
á
â
æ
à
å
ã
ä
ç
é
ê
è
ð
ë
í
î
ì
ï
ñ
ó
ô
ò
ø
õ
ö
ß
þ
ú
û
ù
ü
ý
¡
¢
£
¥
¦
§
¨
© © (Netscape)
ª
«

® ® (Netscape)
¯
°
±
²
³
´ '
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
Þ
÷
& &

&uot;
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 @HTMLA e @HTMLA
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
@H,.7A e @BH,.7A
Marca o incio e o fim do cabealho.
Exemplo: <HTML>
<BODY>
</BODY>
</HTML>
@TITL,A e @BTITL,A
Marca o incio e o fim do ttulo do documento.
Exemplo: <HTML>
<BODY>
</BODY>
</HTML>
@3O7CA e @B3O7CA
Marca o incio e o fim do contedo do documento.
Exemplo: <HTML>
<BODY>
</BODY>
</HTML>
.tributos
3?COLODEnnnnnn: 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
3.CF?OU(7Dimagem*gi&: 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
3?/O/,TI,%DFIG,7: 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
L,FTM.?I(Dn: 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
TO/M.?I(Dn: 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>
T,GTDEnnnnnn: 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>
LI(FDEnnnnnn: 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>
.LI(FDEnnnnnn: modifica a cor dos links j visitados (o Apndice C mostra os valores possveis de n).
Exemplo: <BODY ALINK=#FF0000>Os links ativos desta pgina aparecem em vermelho.</BODY>
0LI(FDEnnnnnn: modifica a cor dos links j visitados (o Apndice C mostra os valores possveis de n).
Exemplo: <BODY VLINK=#FF0000>Os links visitados desta pgina aparecem em vermelho.</BODY>
Lin6s
@.A e @B.A
Marca o incio e o fim de um link.
.tributos
H,FDUL: 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)
(.M,Dnome: identifica o alvo de um link no meio de um documento (sendo que nome o nome dado ao alvo
de um link).
Exemplo: <A HREF=#capitulo1>Capítulo 1</A>...<A NAME=capitulo1>Capítulo 1</A>
T.?,TDWI(7OW: 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
Te-to e a"in2amento
@3.%,FO(TA
Modifica a formatao padro do texto.
.tributos
%IH,Dn: modifica o tamanho padro do texto. Sendo que n pode 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).
@FO(TA e @BFO(TA
Modifica a formatao de determinada parte do texto.
.tributos
%IH,Dn: 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)
COLODEnnnnnn: 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)
F.C,D&onte: 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.
@3A e @B3A
Coloca o texto em negrito.
Exemplo: <B>Texto</B>
@IA e @BIA
Coloca o texto em itlico.
Exemplo: <I>Texto</I>
@TTA e @BTTA
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>
.tributo
.LI?(DC,(T,I L,FT ou I?HT: 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
@C,(T,A e @BC,(T,A
Alinha o trecho (texto, imagem ou tabela) ao centro.
Exemplo: <CENTER>Texto</CENTER>
Aceito por: Netscape e Internet Explorer
@3A
Insere uma quebra de linha.
Exemplo: Linha 1<BR>Linha2
.tributo
CL,.D.LL: joga o texto para a prxima margem livre aps a imagem.
Exemplo: <IMG SRC=imagem.gif>Texto<BR CLEAR=ALL>Texto
@/,A e @B/,A
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.
@3LOCFJUOT,A e @B3LOCFJUOT,A
Adiciona uma margem de cerca de um centmetro.
Exemplo: <BLOCKQUOTE>Texto</BLOCKQUOTE>
@HnA e @BHnA
Marca um ttulo. Sendo que n pode ser um valor de 1 a 6.
Exemplo: <b>Título</b>
.tributo
.LI?(DC,(T,I I?HT ou L,FT: 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
Lin2as
@HA
Inclui uma linha horizontal.
Exemplo: Texto<hr>Texto
.tributos
%IH,Dn: define a altura da linha. Sendo que n pode ser um valor de 1 a 100.
Exemplo: <HR SIZE=10>
WI7THDn: 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%>
(O%H.7,: desenha a linha horizontal sem a sombra para dar o efeito de trs dimenses.
Exemplo: <HR NOSHADE>
.LI?(DL,FTI I?HT ou C,(T,: modifica o alinhamento da linha horizontal.
Exemplo <HR ALIGN=CENTER>
Listas
@7LA e @B7LA
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>
@7TA e @B7TA
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>
@77A e @B77A
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>
@ULA e @BULA
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 $ullets.
Exemplo: <UL>
<LI>Item 1
<LI>Item 2
</UL>
@OLA e @BOLA
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
%T.TDn: 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
@7IA e @B7IA
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>
@M,(UA e @BM,(UA
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>
.tributos
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=a
coloca marcas em ordem alfabtica (A, B, C ou a, b, c). TYPE=1 marca 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
@IM?A
Insere uma imagem.
.tributos
%CDimagem*gi&: 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>
7C(%CDvideo*gi&: 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)
CO(TOL%: 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>
LOO/Dn ou I(FI(IT,: 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>
%T.TDFIL,O/,( e/ou MOU%,O0,: 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,MOUSEOVER executa 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>
.LI?(Dn: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
0%/.C,Dn: 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>
H%/.C,Dn: 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>
.LTDn: 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>
WI7THDn: 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>
H,I?HTDn: 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>
3O7,Dn: 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>
I%M./: 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.
U%,M./DM./.: 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>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
ou
<MAP NAME=MAPA>
</MAP>
<A HREF=/cgi-bin/imagemap/mapa.map>
<IMG SRC=mapa.gif USEMAP=#mapa ISMAP></A>
@M./A e @BM./A
Indicam a marcao de um mapa processado no cliente. Deve ser usado junto com o tag <AREA> e o atributo
de imagem USEMAP=#n.
</MAP>
.tributos
(.M,DM./.: sendo que MAPA o nome do mapa processado no cliente.
</MAP>
@.,.A
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.
</MAP>
.tributos
%H./,D&ormato: 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.
</MAP>
COO7%D-I5: 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 for SHAPE=CIRC, h a coordenada do centro do crculo e a do raio. Quando o
formato for SHAPE=POLY, existem pares de x e y para cada um dos pontos que formam a rea.
</MAP>
H,FDUL: 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.
</MAP>
ou
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=http://www.xyz.com/abc/abc.html>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=http://www.xyz.com/abc/>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=http://www.xyz.com>
</MAP>
(O,F: 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.
<AREA SHAPE=RECT COORDS=0,0,428,124 NOHREF>
</MAP>
Marquee
@M.JU,,A e @BM.JU,,A
Permite fazer um trecho de texto correr de um lado a outro da tela.
Exemplo: <MARQUEE>Texto</MARQUEE>
.tributos
.LI?(DTO/, MI77L, ou 3OTTOM: modifica o alinhamento do texto em volta do mar+uee3 ALIGN=TOP
alinha o texto com o topo do mar+uee. ALIGN=MIDDLE alinha o texto com o centro do mar+uee.
ALIGN=BOTTOM alinha o texto com a base do mar+uee.
Exemplo: <MARQUEE ALIGN=TOP>Texto</MARQUEE>
3,H.0IOD%COLL, %LI7, ou .LT,(.T,: controla o comportamento do texto dentro do mar+uee.
3,H.0IOD%COLL faz com que o texto entre por um dos cantos do mar+uee e sai por outro. Com
3,H.0IOD%LI7,, o texto entra por um cantos do mar+uee e pra ao chegar no canto oposto. Com
3,H.0IOD.LT,(.T,, o texto fica passando de um canto a outro, sempre dentro do mar+uee3
Exemplo: <MARQUEE BEHAVIOR=SLIDE>Texto</MARQUEE>
3?COLODEnnnnnn: muda a cor do fundo do mar+uee. O Apndice C mostra os valores possveis de n.
Exemplo: <MARQUEE BGCOLOR=#FF0000>Texto</MARQUEE>
7I,CTIO(DL,FT ou I?HT: 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>
H,I?HTDn ou nK: define a altura do mar+uee. Sendo que n um valor em pixels ou um percentual da altura
da janela.
Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE>
WI7THDn ou nK: define a largura do mar+uee. Sendo que n um valor em pixels ou um percentual da
largura da janela.
Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE>
H%/.C,Dn: define margens esquerda e direita do mar+uee. Sendo que n um valor em pixels.
Exemplo: <MARQUEE HSPACE=10>Texto</MARQUEE>
0%/.C,Dn: define margens acima e abaixo do mar+uee. Sendo que n um valor em pixels.
Exemplo: <MARQUEE VSPACE=10>Texto</MARQUEE>
LOO/Dn: define quantas vezes o texto ir cruzar o mar+uee. Sendo que n o nmero de vezes que o texto ir
cruzar o mar+uee. Se n for igual a 1 ou a INFINITE, o texto ir se movimentar infinitamente.
Exemplo: <MARQUEE LOOP=2>Texto</MARQUEE>
%COLL.MOU(TDn: 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>
%COLL7,L.CDn: controla a velocidade do mar+uee 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>
%om
@3?%OU(7A
Carrega um arquivo de udio como trilha sonora da pgina.
Exemplo: <BGSOUND SRC=som.wav>
.tributos
%CDsom*'av: 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>
LOO/Dn: 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>
Tabe"as
@T.3L,A e @BT.3L,A
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
.tributos
3O7,Dn: 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
3O7,COLODEnnnnnn: define a cor principal da borda. O .!$ndice C mostra os valores de cores
possveis de n.
Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000>
<TR>
<TD>Texto</TD>
<TD>Texto</TD>
</TR>
</TABLE>
3O7,COLOLI?HTDEnnnnnn: define a cor da sombra mais clara da borda. O .!$ndice 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>
3O7,COLO7.FDEnnnnnn: define a cor da sombra mais escura da borda. O .!$ndice 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>
Tabe"a 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.
Nome da cor
Cdigo da
cor
Aparncia
*White #FFFFFF
*Red #FF0000
*Green #00FF00
*Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
*Yellow #FFFF00
*Black #000000
*Aqua #70B!"
Baker#$ Chocolate #%C""&7
Blue 'iolet #!F%F!F
Bra$$ #B%A()*
Bright Gold #!!&!
Brown #A(*A*A
Bron+e #,C7,%"
Bron+e -- #A(7"
Cadet Blue #%F!F!F
Cool Co..er #!,7&!
Co..er #B,7"""
Coral #FF7F00
Corn Flower Blue #)*)*(F
ark Brown #%C)0""
ark Green #*F)F*F
ark Green
Co..er
#)A7((/
ark 0li1e Green #)F)F*F
ark 0rchid #!!"*C
ark 2ur.le #,7&F7,
ark 3late Blue #(B*",/
ark 3late Grey #*F)F)F
ark 4an #!7(!)F
ark 4urquoi$e #70!"B
ark Wood #,%%/)*
i5 Grey #%)%)%)
u$ty Ro$e #,%("("
Feld$.ar #&!*7%
Fire6rick #,/*"*"
Fore$t Green #*",/*"
*Fuch$ia
Gold #C7F"*
Goldenrod #BB70
*Gray #C0C0C0
Green Co..er #%*7F7(
Green Yellow #!"B70
7unter Green #*&%/*&
-ndian Red #)/*F*F
8haki #!F!F%F
9ight Blue #C0!!
9ight Grey #A,A,A,
9ight 3teel Blue #,F,FB
9ight Wood #/!C*A(
*9i5e #"*C"*
Mandarian 0range #/)7,""
*Maroon #,/*"(B
Mediu5
Aqua5arine
#"*C!!
Mediu5 Blue #"*"*C
Mediu5 Fore$t
Green
#(B,/*"
Mediu5
Goldenrod
#/A/AA/
Mediu5 0rchid #!"70B
Mediu5 3ea Green #)*(F)*
Mediu5 3late Blue #7F00FF
Mediu5 3.ring
Green
#7FFF00
Mediu5 4urquoi$e #70BB
Mediu5 'iolet
Red
#B70!"
Mediu5 Wood #A(,0()
Midnight Blue #*F*F)F
*:a1y #*"*",/
:eon Blue #))FF
:eon 2ink #FF(/C7
:ew Midnight
Blue
#0000!C
:ew 4an #/BC7!/
0ld Gold #CFB%"B
*0li1e
0range #FF7F00
0range Red #FF*)00
0rchid #B70B
2ale Green #,FBC,F
2ink #BC,F,F
2lu5 #/AA/A
*2ur.le
;uart+ #!!F"
Rich Blue #%!%!AB
3al5on #(F)*)*
3carlet #,C&7&7
3ea Green #*",/(,
3e5i<3weet
Chocolate
#(B)**(
3ienna #,/(B*"
*3il1er #/(/,FA
3ky Blue #"*!!CC
3late Blue #007FFF
3.icy 2ink #FF&CA/
3.ring Green #00FF7F
3teel Blue #*"(B,/
3u55er 3ky #",B0/
4an #B!"70
*4eal
4hi$tle #,BF,
4urquoi$e #A/A/A
'ery ark Brown #%C)0""
'ery 9ight Grey #CCC
'iolet #)F*F)F
'iolet Red #CC"*!!
Wheat #,,BF
Yellow Green #!!CC"*

Curso Básico de HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso Básico de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Curso bsico de HTML

Você também pode gostar