HTML – Prof.

Leonardo

INTRODUÇÃO
Uma das características mais interessantes da Internet é a oportunidade que todos os usuários têm de
disseminar informações. Tanto um vencedor do prêmio Nobel, quanto um estudante do primeiro ano de
faculdade contam com os mesmos canais de distribuição para expressar suas idéias. Com o surgimento da
World Wide Web, esse meio só foi enriquecido. O conteúdo da rede ficou mais atraente com a possibilidade
de incorporar imagens e sons. Um novo sistema de localização de arquivos criou um ambiente em que
cada informação tem um endereço único e pode ser encontrada por qualquer usuário da rede.

Isso significa que na prática não existe nenhuma diferença entre as páginas de uma grande empresa na
Web e as páginas que o leitor irá produzir. Ambas podem ser acessadas com a mesma facilidade. A
diferença é uma só: a criatividade. Este texto tem o objetivo de fornecer as ferramentas básicas para
exercitar a criatividade na Web. Será preciso aprender um pouco de HTML (HyperText Markup Language),
a linguagem utilizada para criar as páginas. Você também encontrará uma porção de dicas, truques e
exemplos.

O que é a Internet?
Existem muitos termos que tentam definir a Internet. Super-estrada da informação, preferem os políticos.
Rede de redes, insistem os cientistas. O certo é que cada um desses grupos prefere ver a rede segundo
seus próprios interesses. Para os políticos, uma nova fronteira de construção e investimentos coletivos é
um desafio. Já os cientistas, rigorosos em suas definições, enxergam a virtude da Internet em conectar
computadores de qualquer tipo em todo o globo.

As visões distintas da rede não param por aí. Há quem veja na Internet uma perigosa fonte de pornografia.
As indústrias sonham com o dia em que poderão vender diretamente aos consumidores, sem nenhum
intermediário. Empresas de comunicação esperam o meio que vai reunir rádio, TV e televisão em um
mesmo sistema de produção. 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 história da Internet foram os usuários que inventaram novos recursos e novas
aplicações. é um terreno fértil para boas idéias.

Isso tudo porque a Internet é uma invenção muito simples. Nada mais é do que uma forma fácil e barata de
fazer com que computadores distantes possam se comunicar. A partir daí, a revolução está nas mãos das
pessoas.

Cada usuário recebe uma identificação única, conhecida como endereço. Com esse endereço, ele pode se
comunicar, enviando mensagens para outras pessoas. é o que se chama de correio eletrônico. Graças ao
esforço de instituições 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) ; é possível conseguir programas de graça e consultar bancos de dados públicos.

Hoje, com o sucesso da Internet, toda empresa se vê na obrigação de colocar a cara na rede. Os serviços
se multiplicam. Os bancos planejam oferecer todas as suas operações pelo computador. Notícias são
distribuídas imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de discos vendem seus produtos.

No entanto, boa parte do material da rede é produzido por indivíduos querendo expressar ao mundo suas
preferências. Um usuário reúne tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro, com
objetivos mais práticos, escreve um currículo e espera que seus talentos sejam descobertos. Todo mundo
que um dia sentiu vontade de compartilhar suas façanhas agora pode fazer isso. O tal terreno fértil 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 usuários para ver as páginas, enquanto os servidores ficam responsáveis por
armazenar e permitir o acesso ao conteúdo da rede. Neste texto chamamos o programa cliente de
navegador (em inglês, browser). O que o navegador faz é requisitar um arquivo para um servidor. Se a
informação pedida realmente estiver armazenada naquele servidor, o pedido será enviado de volta e
mostrado na tela do navegador.

A informação na Web é organizada na forma de páginas, que podem conter texto, imagens, sons e, mais
recentemente, pequenos programas. Além disso, as páginas da Web podem ser ligadas umas com as
outras, formando o que se chama de um conjunto de hipertextos. Assim é possível, por exemplo, que um
trabalho de faculdade faça referência 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 também esteja disponível na rede. A possibilidade de criar uma
“malha” de informação 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 usuários circulam por essa teia com um programa chamado navegador. Esse
programa envia pedidos de páginas pela rede e as apresenta na tela do usuário. Existem vários
navegadores para todos os tipos de computadores. Os mais conhecidos são o Netscape Navigator, o
Microsoft Internet Explorer e o NCSA Mosaic.

Os servidores
Os pedidos dos navegadores são atendidos por uma combinação de computadores e programas que
formam os servidores. Esses computadores e programas armazenam as páginas e podem exercer algum
tipo de controle sobre quais usuários podem acessá-las. São máquinas potentes instaladas em
universidades, empresas e órgãos do governo conectadas permanentemente à Internet. Também é
possível 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 usuários possam requisitar as páginas a qualquer
momento. A melhor solução para montar um conjunto de páginas é procurar uma empresa que aluga
espaço em um servidor Web.

O que é uma URL?

A Web permitiu que cada documento na rede tenha um endereço único, que indica o nome do arquivo,
diretório, nome do servidor e o método pelo qual ele deve ser requisitado. Esse endereço foi chamado de
URL (Uniform Resource Locator, numa tradução literal, localizador uniforme de recursos). Uma URL tem a
seguinte estrutura:

[Link]

Onde:

http:// é o método pelo qual ocorrerá a transação entre cliente e servidor. HTTP (HyperText Transfer
Protocol, ou protocolo de transferência de arquivos de hipertexto) é o método utilizado para transportar
páginas de Web pela rede. Outros métodos comuns são: ftp:// (para transferir arquivos), news:// (grupos de
discussão) e [Link] (para enviar correio eletrônico).

[Link] é 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 [Link].

/~milkylin/ é o diretório onde está o arquivo. às vezes uma URL indica apenas o diretório (ou o servidor).
Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado.

[Link] é o nome do arquivo. A extensão .html indica que se trata de uma página Web. Uma URL
pode indicar outras extensões. Quando o navegador recebe um arquivo com a extensão .txt, o arquivo é
tratado como um texto comum. Em outros casos, como nas extensões .zip (arquivo comprimido) e .exe (um
programa), o navegador abre uma janela perguntando ao usuário o que fazer com o arquivo.
Esse endereço único de um documento pode ser utilizado pelo usuário para localizar um arquivo com o
navegador. Nesse caso, o usuário deve preencher com o endereço 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 usuário. Caso o arquivo não esteja disponível no servidor, o usuário receberá uma
mensagem de erro.

As URLs também são colocadas dentro de páginas de WWW para fazer referência a outras informações
disponíveis na Internet. Nesse caso, determinados itens (trechos de texto ou imagens) da página,
conhecidos como links, podem ser utilizados pelos usuários para saltar de um lugar a outro na rede. Os
links podem conter ligação com qualquer tipo de arquivo. Essa ligação entre os documentos é o que se
chama de hipertexto.

MONTANDO UMA PÁGINA WEB SIMPLES

Apesar dessa aparente sofisticação, as páginas Web não passam de documentos de texto simples. Podem
ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferença é que as páginas
Web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns
elementos são marcados como títulos, outros como parágrafos. As marcações são usadas também para
indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão
especificadas dentro da linguagem utilizada para criar as páginas Web, HTML.

O mínimo que você precisa saber sobre HTML

O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que HTML não foi criada para
controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de
página. Como dissemos há pouco, os tags de HTML apenas informam ao navegador o que são os
elementos que estão na página. Eles dizem, por exemplo, que um determinado trecho é o título principal do
documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada
navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação
visual na Web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu
navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser.

Em compensação é muito simples criar uma página básica para colocar na Internet com HTML. Neste
capítulo, apresentamos um exemplo enxuto, que aos poucos ficará mais sofisticado.

Software necessário para esta seção

Como a página 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 confecção das páginas.

é importante notar que os exemplos descritos aqui devem ser gravados no formato texto e com a extensão
.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 não vai entender um arquivo
gravado nos formatos específicos dos processadores de texto (.doc, por exemplo).

Será necessário também um programa de desenho para criar as imagens, como o Paintbrush do Windows
ou um mais sofisticado, como o Photoshop. Também é 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á necessário um outro programa para fazer a conversão, como o Lview. Veja a
lista dos programas recomendados para edição em HTML no capítulo Programas. Além disso, será
necessário um navegador de Web para visualizar as páginas.

Acentuação
Não é recomendável que os documentos Web contenham acentos. Ainda que todos os navegadores
existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML
pode ficar truncado. Por exemplo, quando alguém copia uma página Web e a envia para outra pessoa
através de correio eletrônico. Para contornar este problema, existe uma tabela de códigos que substituem
os acentos. Os navegadores transformam estes códigos em caracteres acentuados e o documento poderá
ser transmitido por qualquer meio. Sugestão: 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
códigos HTML. O Apêndice A mostra a tabela de acentos ISO 8859 Latin-1. Para facilitar a leitura, os
exemplos deste texto contêm os acentos normais de um editor de texto ao invés dos códigos.

Primeiro Exemplo
A melhor maneira de aprender a escrever páginas de Web é fazendo. Vamos ao primeiro exemplo:

<HTML>

<HEAD>

<TITLE>Primeiro exemplo</TITLE>

</HEAD>

<BODY>

<H1>Título principal</H1>

Este é o texto do primeiro exemplo.

Para dividir os parágrafos, usa-se o tag &lt;P&gt;.<P>

Este é o segundo parágrafo. Para colocar um novo título depois

de um parágrafo não é necessário colocar o tag &lt;P&gt;.

<H2>Título secundário</H2>

Para abrir uma linha, usa-se o tag &lt;br&gt;,<br>

certo?

<H3>Uma lista</H3>

<UL>

<LI>Item 1

<LI>Item 2

<LI>Item 3

</UL>

</BODY>

</HTML>

Observação: a representação dos tags <P> e <BR> foi escrita na forma de código (&lt;P&gt; e &lt;BR&gt;,
respectivamente). Do contrário, essa representação não seria mostrada na página, mas interpretada com
os efeitos reais de cada um dos tags.

Visualizando o exemplo no navegador

Assim que o exemplo for salvo no editor de texto com a extensão .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 botão Open na barra de botões. .

Exemplo 1: uma página simples

Como funcionam os tags

O primeiro exemplo mostra vários trechos de texto marcados por códigos colocados entre os caracteres < e
>. Esses códigos, chamados de tags, são responsáveis pela marcação do texto em função de seu papel
dentro do documento. O título principal é marcado com os tags <H1> e </H1>, enquanto os parágrafos são
separados pelo tag <P>. Existem dois tipos de tags. Alguns são formados aos pares, indicando o início e o
fim do trecho afetado, como o par <H1> e </H1>. Outros podem ser colocados inidividualmente, como o
<P>, que simplesmente insere um espaço para dividir parágrafos. Mais adiante, mostraremos que os tags
também podem receber atributos.

Tags básicos
Existem quatro pares de tags que devem ser sempre colocados na página. O par de tags <HTML> e
</HTML> deve englobar todo o conteúdo da página (estar presente no início 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 cabeçalho 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 cabeçalho, não aparecendo na página. O elemento principal
do cabeçalho é o título do documento, que deve ser colocado entre o par <TITLE> e </TITLE>. Os
navegadores mostram o título na barra de título do programa e na área em aparecem as páginas 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ítulos
No corpo do texto podem ser colocados até seis níveis de títulos. A hierarquia começa em <H1>, como o
maior título, e termina em <H6>, como o menor. Os títulos <H5> e <H6> aparecem tão pequenos no
navegador que provavelmente nunca serão usados.

Parágrafos
Os parágrafos são digitados normalmente. O tag <P> serve para indicar o início de um novo parágrafo. Se
o tag <P> for colocado antes de um título (<H2>, por exemplo), a marca de parágrafo é ignorada. Nesse
caso, o próprio título se encarrega de colocar o espaço necessário.

Linhas
Assim como as marcas de parágrafo, as quebras de linha são indicadas por um tag simples. Para abrir uma
nova linha, usa-se o tag <BR>.

Listas
O início de uma lista pode ser indicado com <UL> e o final com </UL>. Esse tag descreve listas não-
ordenadas (unordered lists, em inglês) e simplesmente coloca um elemento gráfico (um círculo, um
quadrado etc.) no começo de cada item da lista. Existem outros tipos de listas. A relação completa pode ser
encontrada no Apêndice B. O início de cada item é indicado com o tag <LI>.

MELHORANDO A APARÊNCIA
Com os tags básicos do primeiro exemplo já é possível criar páginas Web para colocar à disposição dos
usuários. O exemplo mostrado há pouco é completo e, se colocado em um servidor Web, pode ser
identificado com sua própria URL e acessado de qualquer lugar do mundo. Porém, o primeiro exemplo
deixa muito a desejar em apelo visual. Vamos melhorar a aparência deste documento.

Alinhamento
A primeira providência para melhorar a aparência da página é modificar o alinhamento do texto. O
alinhamento padrão (com o qual vêm configurados os navegadores) é à esquerda. Para mudar o
alinhamento padrão deve-se adicionar o atributo ALIGN dentro dos tags que marcam os títulos e os
parágrafos.

<H1 ALIGN=CENTER>Título</H1>

<P ALIGN=CENTER>Este é um parágrafo centralizado.</P>

Exemplo 2: alinhamento centralizado

Desta vez, o tag <P> ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar um tag de
fechamento (</P>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente.
Margem
Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de
margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente
em cada navegador). às vezes, será necessário aumentar essa margem e fazer com que o texto comece
mais para dentro da página. O par de tags <BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a
margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:

<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda</BLOCKQUOTE></BLOCKQUOTE>

Exemplo 3: colocando margem adicional

Texto pré-formatado
Existe ainda uma terceira forma de modificar o alinhamento. é a utilização do par de tags <PRE> e </PRE>.
Usando esses tags, todos os espaços e entradas de parágrafo (o resultado da tecla enter) são respeitados.
Em um texto normal, qualquer espaço a mais entre duas palavras é ignorado pelo navegador. Com a pré-
formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em praticamente
qualquer lugar da página.

Apesar da vantagem dessa forma de alinhamento arbitrário, o tag <PRE> muda o tipo de caractere para
uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o
mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o “i” ocupa menos espaço do que o
“a”, por exemplo.

<PRE>

Este texto está pré-formatado. A fonte é

monoespaçada e as entradas de parágrafo,

assim como os espaços adicionais, são

respeitadas.

Neste caso, a margem esquerda

foi aumentada em cinco caracteres.</PRE>

O texto normal recebe fonte proporcional e ignora a presença de espaços a mais no meio do texto.
Entradas de parágrafo adicionais também são ignoradas.

Exemplo 4: controle do alinhamento com pré-formatação

No Netscape, é possível colocar tags de título dentro do par <PRE> e </PRE>, permitindo a manutenção da
fonte proporcional (Times New Roman, por exemplo). Na maioria dos navegadores, porém, os tags de título
são ignorados e se sobrepõem aos tags de pré-formatação, eliminando o seu efeito.

Mudando os caracteres
Para dar ênfase em determinados trechos de texto, pode-se usar negrito, itálico ou mesmo a fonte
monoespaçada citada há pouco.

<B>Texto em negrito</B><P>

<I>Texto em itálico</I><P>

<TT>Texto monoespaçado</TT><P>

Exemplo 5: modificando os estilos de texto

Ao contrário de <PRE>, o tag <TT> ignora espaços em branco adicionais e entradas de parágrafo no meio
do texto. Em relação ao espaçamento, 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 itálico</I></B><P>

<B><TT>Texto monoespaçado em negrito</TT></B><P>

<I><TT>Texto monoespaçado em itálico</TT></I><P>

<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>

Exemplo 6: os estilos podem ser combinados

Tamanhos de caracteres
Alguns navegadores aceitam a modificação do tamanho do texto através do atributo SIZE do tag <FONT>.

<FONT SIZE=7>Texto</FONT>

O tag <FONT> pode ser atribuído a qualquer parte do texto, com exceção dos títulos (<H1>, <H2> etc.). Os
valores do atributo SIZE variam de 1 a 7, O tamanho normal do texto nos navegadores é equivalente a
SIZE=3. Não existe nenhuma relação entre os valores no atributo SIZE e o número 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=6>Texto com FONT SIZE=6</FONT><P>

<FONT SIZE=5>Texto com FONT SIZE=5</FONT><P>

<FONT SIZE=4>Texto com FONT SIZE=4</FONT><P>

<FONT SIZE=3>Texto com FONT SIZE=3</FONT><P>

<FONT SIZE=2>Texto com FONT SIZE=2</FONT><P>

<FONT SIZE=1>Texto com FONT SIZE=1</FONT>

Exemplo 7: mudando o tamanho dos caracteres

O tag <FONT> também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia
é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo.

<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>

Também é possível modificar o tamanho de todo o texto de uma vez só colocando o tag <BASEFONT> no
topo do texto.

<BASEFONT SIZE=5>

Cores diferentes
Alguns navegadores também aceitam modificar a cor padrão do texto e do fundo da janela do documento.
Essa definição é feita em atributos do tag <BODY>. Os atributos são BGCOLOR e TEXT.

<BODY BGCOLOR=FFFFFF TEXT=000000>

ou

<BODY BGCOLOR=WHITE TEXT=BLACK>

O exemplo acima produz uma página com fundo branco e texto na cor preta. Os valores dos atributos são
definidos em uma tabela de cores no padrão 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, é possível ter texto de várias cores na mesma página.

<FONT COLOR=WHITE>Texto em branco</FONT>, <FONT COLOR=BLUE>azul</FONT>, <FONT

COLOR=GREEN>verde</FONT> e <FONT COLOR=RED>vermelho</FONT>

Mudando o tipo de caractere

O Internet Explorer, navegador da Microsoft lançado no segundo semestre de 1995, trouxe a novidade de
permitir a mudança do tipo de caractere do texto. O autor de uma página Web pode definir qual será o tipo
de determinada parte do texto, mas o usuário 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><H1>Título principal</H1>

Este é o texto do primeiro exemplo. Para dividir os parágrafos, usa-se o tag &lt;P&gt;.<P>

Este é o segundo parágrafo. Para colocar um novo título depois de um parágrafo não é necessário
(tampouco funciona) colocar o tag &lt;P&gt;.<p>

<H2>Título secundário</H2>

Para abrir uma linha, usa-se o tag &lt;br&gt;,<br>

certo?</FONT>

<H3>Uma lista</H3>

<UL>

<LI>Item 1

<LI>Item 2

<LI>Item 3

</UL>

Exemplo 8: mudando o tipo do caractere para Arial

HYPERLINKS
Até agora produzimos apenas um documento bastante simples, que poderia ser composto com recursos
muito mais sofisticados em qualquer processador de texto. Mas neste texto estamos falando de
documentos de hipertexto, que podem fazer ligações com outros textos.

Os pontos que ligam esses hipertextos são chamados de hyperlinks, links ou âncoras de hipertexto. O tag
que indica a região a ser tratada como um hyperlink é o par <A> e </A>. Dentro desse tag, na forma de
atributo, é colocada a referência ao arquivo ligado. A referência indica a URL do documento. Quando o
usuário clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo ligado será requisitado ao
servidor e mostrado na janela do navegador.

<P ALIGN=CENTER>

Uma ligação de hipertexto:</P>

<P ALIGN=CENTER>

<A HREF=[Link]
[Link]>HTML Easy! Pro home page</A>

</P>

Exemplo 9: uma âncora de hipertexto

Neste exemplo, o texto HTML Easy! Pro home page aparece no navegador realçado de alguma forma,
normalmente em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mãozinha
quando colocado sobre o texto realçado. Ao clicar no link, o arquivo [Link], do diretório /~milkylin/
do servidor [Link] será transmitido pela rede e mostrado na tela.

Colocando uma URL no atributo HREF do tag <A>, pode-se ligar uma página com qualquer outro
documento
disponível na Internet. Pode-se fazer uma página com uma lista de páginas preferidas da rede com suas
devidas ligações de hipertexto.

<H1>Lista de recursos sobre HTML</H1>

<UL>

<LI><A HREF = "[Link]

[Link]">Composing Good HTML</A>

<LI><A HREF = "[Link]

[Link]">CERN's style guide for online hypertext</A>

<LI><A HREF = "[Link]

[Link]">How to Write HTML Files</A>

<LI><A HREF = "[Link]

about_html.html">Introduction to HTML</A>

<LI><A HREF = "[Link]

lynx_help/HTML_quick.html">The HTML Quick Reference Guide</A>

<LI><A HREF = "[Link]

MarkUp/[Link]">The official HTML specification</A>

</UL>

Exemplo 10: uma lista de âncoras de hipertexto

este exemplo, as URLs estão entre aspas. Isso significa que o servidor vai considerar a diferença entre
maiúsculas e minúsculas (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
não será localizado e o usuário receberá uma mensagem de erro.

Nem sempre é necessário colocar uma URL completa em uma âncora de hipertexto. é possível indicar
apenas o nome do servidor.

<UL>

<LI><A HREF=[Link]>Apple Computer</A>

<LI><A HREF=[Link]>The Spot</A>

</UL>

Neste exemplo, os servidores da Apple e do The Spot se encarregarão de indicar qual é a página que deve
ser
carregada. Essa página principal é chamada normalmente de home page.

Quando a âncora apontar para uma página armazenada no mesmo servidor, não é necessário colocar o
endereço
da máquina. Se o documento estiver no mesmo diretório, basta indicar o nome do arquivo.

<A HREF=[Link]>Exemplo 1</A>

O link acima chama o arquivo [Link], que deve estar no mesmo diretório da página. Se o
documento estiver em um subdiretório de onde está o arquivo que contém a âncora, é preciso indicá-lo.

<A HREF=exemplos/[Link]>Exemplo1</A>

Digamos que agora seja necessário traçar o caminho de volta, colocando uma âncora no arquivo
[Link] para a página anterior.

<A HREF=../[Link]>Volta para exemplo de âncora</A>

A referência cruzada entre arquivos armazenados no mesmo computador mas em diretórios diferentes
merece bastante atenção. Digamos que existam dois diretórios colocados no mesmo nível. Um chamado
musica e outro, comida. Um arquivo chamado [Link], do diretório musica deve fazer uma referência ao
arquivo [Link], do diretório comida. A âncora de hipertexto do documento [Link] deve ficar assim:

<A HREF=../comida/[Link]>Tudo sobre feijoada</A>

Também pode-se fazer uma referência 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>Capítulo 1</A>

Enquanto o alvo do link fica desta forma:

<A NAME=cap1>Capítulo 1</A>

Neste exemplo, quando o usuário clicar sobre o link <A HREF=#cap1>Capítulo 1</A>, ele será remetido ao
ponto onde está a referência <A NAME=cap1>Capítulo 1</A>. A parte do texto que é referenciada (o alvo
de um link) não fica realçada como os hyperlinks. Além de ser invisível, não é obrigatório que exista um link
apontando para ela.

Pode-se colocar referências do tipo <A NAME> em um documento longo apenas para que outras pessoas
produzindo páginas Web possam fazer ligações para determinadas partes do texto.

Para citar uma determinada parte de um outro texto, a referência é:

<A HREF=[Link]#capitulo1>Capítulo 1 do Exemplo</A>

Sendo que [Link] é o nome do arquivo referenciado e capítulo1 é a referência a uma parte daquele
texto.

Cores dos hyperlinks

Da mesma forma que é possível 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 condição: visitados, nunca visitados
e ativos. Os navegadores sabem quais foram os hyperlinks já visitados pelo usuário em um determinado
período de tempo. Por isso, a cor dos links já visitados deve ser diferente da cor das referências nunca
visitadas. Além disso, o link pisca em uma cor ainda diferente dessas duas logo depois que é clicado pelo
usuário. A cor dos links é definida no tag <BODY>.
<BODY LINK=RED ALINK=BLUE VLINK=GREEN>

Onde:

LINK determina a cor dos links não 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 não confundir os usuários, a cor dos links já visitados deve ser uma versão mais
clara da cor das ligações ainda não visitadas.

IMAGENS
Agora que já explicamos como fazer um documento hipertexto, podemos finalmente incluir imagens nessa
página Web. Para inserir uma imagem basta indicar o nome do arquivo dentro do tag <IMG>.

Aqui você vê uma imagem:<P>

<IMG SRC=[Link]>

Note que a imagem...<P>

Exemplo 11: incluindo uma imagem

Neste exemplo, a imagem [Link] aparece alinhada entre as frases “Aqui você vê uma imagem:” e
“Note que a imagem...”.

Se a imagem estiver em um diretório diferente do arquivo de texto, é preciso especificá-lo na referência.

Recomenda-se que as imagens sejam colocadas em um diretório separado para facilitar a manutenção dos
arquivos. Exemplo:

Aqui você vê uma imagem:<P>

<IMG SRC=imagens/[Link]>

Note que a imagem...<P>

Alinhamento da imagem
No exemplo anterior, a imagem ficou alinhada à esquerda da tela e o texto imediatamente posterior a ela
alinhou-se com o canto inferior direito da imagem. Esse é o alinhamento padrão de textos com imagens. é
possível mudar o alinhamento utilizando o atributo ALIGN= dentro do tag <IMG>.

Aqui você vê uma imagem:<P>

<IMG SRC=imagens/[Link] ALIGN=TOP>

Note que a imagem...<P>

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:
Aqui você vê uma imagem:<P>

<IMG SRC=[Link] align=top>

Note que a imagem está alinhada à esquerda. O texto imediatamente posterior à imagem fica alinhado no
canto superior direito. Mas apenas uma linha acompanha a imagem. O restante do texto é jogado para a
linha seguinte.<P>

Exemplo 12: quebra de linha depois da imagem

Este problema pode ser contornado utilizando outros atributos de alinhamento que fazem a imagem
“flutuar” ao lado do texto. Exemplo:

Aqui você vê uma imagem:<P>

<IMG SRC=[Link] 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 Apêndice 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 necessário interromper o fluxo de texto ao lado da
imagem, pode-se usar o tag <BR> com o atributo CLEAR=ALL.

Aqui você vê uma imagem:<P>

<IMG SRC=[Link] 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 próxima margem livre em qualquer um dos
lados da janela.<P>

Exemplo 14: interrupção de um texto em torno da imagem

Borda
É possível colocar uma borda em volta da imagem. O atributo é BORDER. O valor da borda é expresso em
pixels.

Aqui você vê uma imagem:<P>

<IMG SRC=imagens/[Link] BORDER=2>

Note que a imagem...<P>

Exemplo 15: a borda de uma imagem

Texto alternativo
De nada vai adiantar caprichar na produção de uma imagem, se a pessoa que está vendo as páginas utiliza
um navegador incapaz de mostrar imagens (sim, eles existem e são bastante utilizados, principalmente o
lynx).

Outros usuários também ajustam o navegador para não carregar imediatamente as imagens. Por causa de
conexões 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 função do texto alternativo. Pode-se colocar o título
ou a melhor descrição possível de uma imagem utilizando o atributo alt:

<IMG SRC=[Link] ALT=nome_da_imagem>

Exemplo 16: o texto alternativo de uma imagem

No exemplo acima, o navegador foi ajustado para não carregar a imagem imediatamente ao carregar a
página. O texto alternativo aparece junto com o ícone de imagem.

Margens
Pode-se controlar o espaço em volta da imagem colocando o valor em pixels da margem desejada. é
possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e embaixo da
imagem, o atributo é VSPACE. Se o problema for espaço dos lados da imagem, usa-se o atributo HSPACE
para definir as margens horizontais.

<IMG SRC=[Link]” VSPACE=10 HSPACE=20>

Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da imagem (em cima e
em baixo e à direita e à esquerda). Não há como definir uma margem maior apenas à esquerda ou somente
na parte inferior.

Formatos e interlaceamento
Os formatos de imagem mais aceitos pelos navegadores são GIF e JPG. A vantagem do formato GIF é que
se pode gravar na opção GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito
conhecido como interlaceamento. Com o carregamento progressivo, o usuário tem a impressão da imagem
estar sendo carregada mais rápido.

O formato JPG oferece um fator de compressão maior do que o GIF. As imagens ocupam menos espaço
em bytes. Mas o processo de compressão do JPG pode causar alguma perda de qualidade à imagem.
Como regra geral, o formato JPG deve ser usado em imagens fotográficas e o GIF em imagens criadas em
computador ou desenhadas. A compressão do formato GIF se dá ainda melhor com imagens com poucas
cores e trechos contínuos de uma cor só.

Dimensões
Se as dimensões da imagem forem colocadas na referência, o usuário terá a impressão de que a página foi
carregada mais rápido.

Fornecendo as dimensões, o navegador reserva o espaço para a imagem e vai carregando o texto para
que o usuário possa começar a ler. Depois de carregado o texto, as imagens começam a ser mostradas.
Deve-se escrever a referência de imagem neste formato:

<IMG SRC=“[Link]” width=310 height=220>

TABELAS
Como ainda não 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 página de maneira mais criativa.

Uma tabela simples

As tabelas são compostas de linhas, dentro das quais são colocadas células com o conteúdo. Dentro das
células pode-se colocar texto, imagens ou até mesmo outras tabelas. Uma linha pode conter várias células,
formando-se então uma tabela com várias colunas.
Os tags para construir uma tabela são:

<TABLE> e </TABLE>: para indicar o início e o fim de uma tabela

<TR> e </TR>: para indicar o início e o fim de uma linha

<TH> e </TH>: para indicar o início e o fim de uma célula-título

<TD> e </TD>: para indicar o início e o fim de uma célula

A única diferença entre o tag <TH> e <TD> é que o primeiro marca o texto da célula com ênfase. Os
navegadores interpretam essa ênfase como negrito. Nos exemplos deste texto, não utilizamos o tag <TH>,
já que a ênfase pode ser conseguida com tags como <B> e <I>.

Não é obrigatório colocar os tags de fechamento dos elementos da tabela (</TR>, </TH> e </TD>), mas
estes tags são úteis para entender melhor a estrutura de linhas e células. Nos exemplos seguintes
adicionamos uma borda à tabela. O atributo da borda é colocado dentro do tag <TABLE>.

<TABLE BORDER>

<TR>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

</TABLE>

Exemplo 17: uma tabela simples

O exemplo acima mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo
número de células presentes nas linhas. é possível expandir as células para que elas ocupem o espaço de
mais de uma coluna ou linha.

<TABLE BORDER=2>

<TR>

<TD COLSPAN=2>Célula expandida</TD>

</TR>

<TR>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

</TABLE>
Exemplo 18: expansão da célula em colunas

ou

<TABLE BORDER=3>

<TR>

<TD ROWSPAN=2>Célula expandida</TD>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

</TABLE>

Exemplo 19: expansão de uma célula em linhas

A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores.
No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das células 1 e 2.
No segundo exemplo, para deixar a célula expandida da altura de duas linhas foi preciso colocá-la na
mesma linha das células 1 e 2.

Dimensões da tabela
Além de controlar a largura da borda (com o atributo BORDER), é possível definir as dimensões (em pixels)
de toda a tabela, espaço entre células e as margens dentro das células. Todos esses controles são feitos
através de atributos dentro do tag <TABLE>. Os atributos são:

WIDTH: para definir a largura da tabela

HEIGHT: para definir a altura da tabela

CELLPADDING: para definir a margem dentro das células

CELLSPACING: para definir o espaço entre as células

<TABLE BORDER=1 WIDTH=400 HEIGHT=200 CELLPADDING=20 CELLSPACING=20>

<TR>

<TD ROWSPAN=2>Célula expandida</TD>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

</TABLE>
Exemplo 20: controlando dimensões e espaçamento da tabela
Os atributos width e height também podem ser utilizados para definir o tamanho de células específicas.
Neste caso, devem ser colocado dentro do tag <TD> (ou <TH>).

Alinhamento
Os elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Se
nenhum alinhamento for definido, o conteúdo das células é 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> (além de <TH>, se for o caso). Os alinhamentos possíveis
são:

Alinhamento horizontal

ALIGN=LEFT: alinha o conteúdo à esquerda

ALIGN=RIGHT: alinha o conteúdo à direita

ALIGN=CENTER: alinha o conteúdo ao centro

Alinhamento vertical

VALIGN=BASELINE: mantém 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 conteúdo no topo

VALIGN=MIDDLE: alinha o conteúdo ao centro

VALIGN=BOTTOM: alinha o conteúdo na base da célula

Vamos utilizar um texto mais longo na segunda célula da segunda coluna para demonstrar o alinhamento
padrão.

<TABLE BORDER>

<TR>

<TH>Título 1</TH><TH>Título 2</TH>

</TR>

<TR>

<TD>Célula 1</TD>

<TD><B>Célula 2</B><P>

Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a
apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.</TD>

</TR>

</TABLE>
Exemplo 21: um texto longo dentro de uma célula

A largura da coluna da direita foi ampliada para que o texto da célula 2 aproveitasse até o final da margem
do navegador. Se a largura da janela do navegador for diminuída, também diminui a largura da segunda
coluna. Vamos melhorar a aparência da tabela ajustando a largura da célula 2 em 300 pixels. Assim, a
largura de toda a segunda coluna será ajustada. Aproveitamos este exemplo para alinhar o texto da célula
1 no topo e mudar a largura da borda da tabela.

<TABLE BORDER=3>

<TR>
<TH>Título 1</TH><TH>Título 2</TH>

</TR>

<TR>

<TD valign=top>Célula 1</TD>

<TD width=300><B>Célula 2</B><P>

A largura de cada célula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</TD>

</TR>

</TABLE>
Exemplo 22: controlando a largura das células

Cor de fundo das células

O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cada célula.
Basta acrescentar o atributo BGCOLOR com a cor desejada aos tags de célula. Em algumas combinações
de cores será necessário também modificar a cor das letras. Isso é feito com o atributo COLOR dentro do
tag <FONT>.

<TABLE BORDER>

<TR>

<TH BGCOLOR=000000><FONT COLOR=FFFFFF>Comida</FONT></TH>

<TH BGCOLOR=000000><FONT COLOR=FFFFFF>Bebida</FONT></TH>

</TR>

<TR>

<TD BGCOLOR=white>Arroz</TD>

<TD BGCOLOR=black><FONT COLOR=WHITE>Vinho</FONT></TD>

</TR>

</TABLE>

DICAS E TRUQUES EM HTML

Truques com imagens e Texturas no background
Da mesma forma que é possível definir uma cor de fundo diferente para as páginas, 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 legível. No exemplo que mostramos aqui, no entanto, escolhemos um padrão quadriculado
para mostrar como o arquivo de imagem é repetido na tela para compor o background.

Exemplo 23: o arquivo de imagem para ser usado como fundo

<BODY BACKGROUND=[Link]>
Exemplo 24: colocando uma textura no fundo da página
Neste exemplo, o arquivo [Link] é utilizado como padrão de fundo da página. Várias cópias da imagem
são colocadas lado a lado até ocupar toda a área do documento.

Imagem de um pixel
Deve-se ter outros cuidados ao escolher as imagens para o fundo. O principal problema é o tamanho em
bytes destes arquivos. As dimensões da imagem influem no tamanho do arquivo. Para criar um arquivo o
mais econômico possível pode-se fazer uma imagem de apenas um pixel quadrado. Esse pixel, que estará
ocupando um tamanho mínimo em bytes, será reproduzido em todo o fundo da página, dando a impressão
de ser um arquivo único.

Baixa resolução
Outra forma de melhorar a performance da página Web é enviar primeiro uma versão em baixa resolução
das imagens. Esse truque é mais útil quando a imagem é de grandes proporções. Digamos que a imagem
seja bastante complexa, ocupando acima de 30 Kbytes. Cria-se uma versão simplificada da mesma
imagem (em preto e branco, por exemplo) e informa-se ao navegador para carregá-la antes. Assim, o
usuário pode ter uma idéia da ilustração antes de ter que esperar pela imagem em alta resolução. Criado
para o Netscape, esse truque é chamado de low/high resolution flip trick. A inclusão da imagem de baixa
resolução é conseguida com a colocação do atributo LOWSRC, que indica o arquivo que será carregado
primeiro.

<IMG SRC=[Link] LOWSRC=[Link]>

No exemplo acima, o arquivo [Link] é a imagem definitiva, de alta resolução. O arquivo [Link] é a
imagem de baixa resolução, que será carregada antes.

A principal utilidade desse truque é nos imagemaps. Sem ter que esperar pela imagem de alta resolução, o
usuário pode escolher uma área da versão menos definida e seguir a sua navegação. Alguns lugares da
rede aproveitam o recurso para criar uma pequena animação.

Fundo transparente
Os programas de desenho, independente do formato da figura, gravam uma imagem no formato retangular.
Mesmo que a imagem seja um círculo, quando a ilustração for colocada na página Web, ela irá ocupar um
espaço retangular. Se esse círculo tiver sido desenhado sobre um fundo branco, esse fundo acompanhará
a imagem.

é possível fazer uma imagem ficar com o fundo transparente. Digamos que o fundo da página tenha uma
textura e é preciso colocar uma imagem que deixe ver o fundo em volta dela. Pode-se definir que
determinada área da imagem não tenha cor nenhuma e dar a impressão 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 não
será mostrada, dando o efeito de transparência. Por isso é preciso que a área que se pretende deixar
transparente seja de uma cor só. Essa cor não pode se repetir em qualquer outra parte da imagem. Do
contrário essa parte também ficará transparente.

No exemplo a seguir, a imagem foi criada sobre um fundo cinza. A intenção é 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 confirmação de
gravação no formato GIF89. Clica-se em OK. Ao carregar a imagem no navegador, a área que estava na
cor cinza ficou transparente e por baixo da imagem apareceu a textura.

Exemplo 25: imagem preparada para ficar com fundo transparente

Exemplo 26: página com imagem com fundo transparente

Anti-alias
O efeito anti-alias, disponível 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 gradação de tons de cinza. Assim, o
contorno da imagem fica com maior resolução.

Exemplo 27: imagem sem anti-alias

Exemplo 28 imagem com anti-alias

Dependendo do tamanho, é difícil notar as diferenças entre imagens com ou sem-anti-alias. Mas se
olharmos mais de perto, veremos como é construído o anti-alias.

Exemplo 29: imagem sem anti-alias vista mais de perto

Exemplo 30: imagem com anti-alias vista mais de perto

No exemplo acima, a primeira imagem, sem anti-alias, tem contorno cheio de “degraus”. A segunda
imagem, com o efeito, mistura os pixels da borda com os do fundo, gerando alguns pontos acinzentados
para fazer a transição de forma mais suave.

Uma desvantagem do anti-alias é que a área de transição entre o contorno e o fundo aumenta a
complexidade da imagem e, conseqüentemente, gera arquivos com mais bytes. Quando possível, deve-se
evitar o efeito para que os arquivos de imagem fiquem com um tamanho menor.

Combinação com o background

As imagens com anti-alias também dificultam o uso do fundo transparente. Na verdade, os dois truques são
praticamente incompatíveis. Como é preciso escolher apenas uma cor para fazer uma imagem com fundo
transparente, os tons da transição no contorno aparecem como se fossem um borrão. Quando o uso do
anti-alias é indispensável, recomenda-se que a imagem seja produzida já sobre o fundo definitivo. Por
exemplo, se o fundo da página for preto, a imagem deve ser criada no programa de desenho sobre um
fundo da mesma cor. Se as cores forem idênticas, nem é preciso converter a imagem para fundo
transparente. Mas, se for necessário fazer a transparência, os tons da borda combinarão com a cor de
fundo da página.

Outra situação em que se deve coordenar o fundo da página e o da imagem que está sendo produzida é
quando se utiliza uma textura como background. Nem sempre uma imagem com fundo transparente
funciona sobre uma textura. A dica de novo é criar a imagem já sobre a textura que será utilizada. é preciso
que a textura escolhida seja uniforme para que não haja problemas de “encaixe” quando a imagem for
colocada na página.

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 série 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 exibição do texto em movimento, que será apresentado da direita para a esquerda
(DIRECTION=LEFT). A velocidade é expressa também em pixels pelo atributo SCROLLAMOUNT. Quanto
mais pixels, mais rápido correrá o texto na tela.
Trechos de vídeo
No Microsoft Internet Explorer é possível incluir um trecho de vídeo numa página. A Microsoft inventou um
atributo chamado DYNSRC (de dynamic source, fonte dinâmica) para ser incluído dentro do tag <IMG>. O
formato de arquivo de vídeo suportado é o AVI (Audio Video Interleave). Para que os demais navegadores,
incapazes de entender o atributo DYNSRC, possam também receber a imagem, ainda que estática, inclui-
se no mesmo tag o atributo SRC com o arquivo de imagem comum correspondente.

<IMG DYNSRC=[Link] SRC=[Link] WIDTH=50 HEIGHT=50 START=MOUSEOVER

LOOP=INFINITE>

O exemplo acima implementa numa página lida com o Internet Explorer 2.0 o arquivo de vídeo [Link].
Outros navegadores (como o Netscape) irão mostrar apenas a imagem [Link]. O atributo
START=MOUSEOVER indica que o trecho de vídeo começará a ser executado quando o usuário passar o
mouse sobre ele. O atributo LOOP=INFINITE declara que o vídeo será exibido continuamente até que o
usuário mude de página.

Outros atributos são:

START=FILEOPEN: o vídeo começa a ser exibido assim que a página é carregada

CONTROLS: adiciona um conjunto de botões para controlar a execução do vídeo

LOOP=n: Executa o trecho de vídeo “n” vezes. Se for colocado LOOP=5, o vídeo será exibido cinco vezes.

LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o trecho de vídeo será

executado quando colocado em loop.

Trilha sonora
O Internet Explorer também aceita colocar uma trilha sonora em uma página Web. Como no tag que
implementa a execução de vídeo, é possível utilizar um dispositivo de looping, que pode manter o arquivo
tocando constantemente ou por um número 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=[Link] LOOP=INFINITE>

Neste exemplo, o arquivo de áudio [Link] será executado constantemente até que o usuário troque de
página. Só depois que a página é carregada que o som começa a tocar. é possível também fazer com que
o som seja tocado por um número determinado de vezes. Exemplo:

<BGSOUND SRC=[Link] LOOP=5>

No exemplo acima, o arquivo [Link] será executado cinco vezes.

Marca d'água

No Internet Explorer pode-se controlar o comportamento da imagem de fundo, o background. A empresa

criou um atributo para o tag <BODY> chamado BGPROPERTIES. Com a opção BGPROPERTIES=FIXED,
a imagem de fundo fica fixa quando o usuário rola o texto para cima. O recurso dá a impressão da página
ter uma marca d'água e de que o texto flutua sobre o fundo.

<BODY BACKGROUND=[Link] BGPROPERTIES=FIXED>

MAPAS CLICÁVEIS
O mapa clicável é uma imagem que contém várias ligações de hipertexto. Numa mesma figura, pode-se
oferecer ao usuário a opção de clicar em regiões diferentes para escolher onde ele quer ir.
A primeira tarefa para criar um mapa clicável é produzir a imagem. Depois, é preciso utilizar um programa
de edição de mapas. O Mapedit, para Windows 3.1 e 3.11, e o MapThis!, para Windows 95, são os mais
conhecidos.

Deve-se carregar o arquivo de imagem no editor de mapas e utilizar as ferramentas disponíveis para
marcar as áreas da imagem que poderão ser clicadas pelo usuários. Os editores de mapas têm
ferramentas para desenhar áreas na forma de círculos, retângulos, polígonos (forma livre) ou pontos.

Exemplo 33: criando as regiões sensíveis na imagem

O próximo passo é definir qual arquivo cada uma dessas regiões irá chamar. Clicando com o botão direito
do mouse sobre as áreas, obtém-se uma janela onde pode ser escrito o nome do arquivo.

.
Exemplo 34: associando um arquivo a uma região sensível da imagem

Se o arquivo estiver em um diretório diferente, é preciso incluí-lo no nome do arquivo. Além disso, é
necessário indicar o nome do arquivo default, que o navegador deve carregar quando o usuário clicar em
uma área da imagem fora das áreas com links. O arquivo default pode ser uma página Web com uma
mensagem do tipo “você clicou em uma área sem ligação de hipertexto. Por favor, tente de novo”. No
Mapedit, a definição do arquivo default é feita em uma opção do menu File. No MapThis!, o arquivo default
é indicado toda vez que se marca uma região sensível.

Depois de marcar todas as regiões sensíveis, basta salvar o arquivo do mapa com a extensão .map.

Com o arquivo do mapa pronto, é hora de colocar a imagem na página e fazer a referência ao mapa.

Exemplo 35: um mapa clicável

<A HREF=HTTP://[Link]/CGI-BIN/
IMAGEMAP/[Link]>

<IMG SRC=[Link] ISMAP></A>

Onde:

HTTP://[Link] é o endereço do servidor onde estão as páginas. é preciso confirmar com o

administrador do servidor a necessidade deste endereço. Alguns servidores mais recentes, como os da
Netscape, exigem apenas a colocação do nome do arquivo.

/CGI-BIN/IMAGEMAP é a localização do programa imagemap, que irá processar as informações do mapa.

Essa localização deve ser confirmada com o administrador do servidor. Alguns servidores mais recentes,
como os da Netscape, exigem apenas a colocação do nome do arquivo.

/[Link] é o nome do arquivo de mapa. Neste caso, o arquivo deve estar no diretório principal das
páginas Web. Se estiver em um diretório diferente, deve-se acrescentar a informação. Exemplo:
/mapas/[Link].

IMG SRC=[Link] é a referência à imagem

ISMAP indica que esta imagem é um mapa clicável

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 diretórios referenciados. O principal é a
localização do programa imagemap, que normalmente está no diretório /cgi-bin. Deve-se checar também
com o administrador se é necessário que ele modifique o arquivo [Link] para incluir a localização
dos mapas novos. Esse arquivo informa ao programa imagemap onde estão os mapas. Alguns servidores
mais recentes, como os da Netscape, exigem apenas a colocação do nome do arquivo.

Mapas processados no cliente

Em 1995 (com o Internet Explorer e o Netscape 2.0), tornou-se possível criar mapas que não 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
usuário clica na imagem.

O truque inventado para processar os mapas clicáveis no navegador foi colocar as informações sobre as
áreas “quentes” da imagem na própria página Web. O processo de produção do mapa continua o mesmo:
criar a imagem, carregá-la no editor de mapas, marcar as áreas com ligação de hipertexto e salvar o
arquivo .map. Para colocar as informações do mapa na página, deve-se copiar o conteúdo do arquivo .map
para a página Web dentro de um novo tag chamado <MAP>.

O conteúdo do mapa criado pelo Mapedit no exemplo anterior é o seguinte:

circle [Link] 74,76,96,121

rect [Link] 270,123,179,32

poly [Link] 375,27,428,124,321,124,375,27

Onde:

circle, rect e poly são os formatos das regiões sensíveis.

[Link], [Link] e [Link] são os arquivos associados a essas regiões.

e os números são as coordenadas das regiões sensíveis.

Apenas duas coordenadas definem a região circular do mapa. A primeira coordenada marca o centro e a
segunda aponta o raio da circunferência (74,76,96,121). O quadrado também só precisa de duas
coordenadas, uma indicando o canto superior esquerdo e outra localizando o canto inferior direito do
retângulo (270,123,179,32). Já o polígono 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 são iguais.

é preciso reordenar as informações contidas no arquivo gerado pelo editor de mapas para criar um mapa
processado no cliente. As informações sobre as áreas sensíveis são 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=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32

HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

Onde:

<MAP> e </MAP> indicam o início e o fim de uma descrição de mapa processado no cliente.

NAME=MAPA indica o nome do mapa.

SHAPE indica o formato da região.

COORDS indica as coordenadas que formam a região.

HREF indica o arquivo associado à região

O mapa processado no cliente também recebe um nome, definido no atributo NAME do tag <MAP>. Esse
nome é utilizado no tag <IMG>, que agora informa também, através do atributo USEMAP, qual mapa deve
ser utilizado para o processamento.

<IMG SRC=[Link] 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), poderão utilizar a
imagem clicável. Para fazer mapas que todos os navegadores possam entender, deve-se mesclar as duas
técnicas, utilizando os atributos ISMAP e USEMAP, simultaneamente no tag <IMG>. Não 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 diretório onde ficarão armazenadas as páginas e verificar se é
necessário referenciá-lo no arquivo de configuração [Link] do servidor.

O exemplo completo de um mapa processado no cliente é o seguinte:

<MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32

HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<A HREF=/cgi-bin/imagemap/[Link]>

<IMG SRC=[Link] USEMAP=#mapa ISMAP></A>

é importante que a descrição do mapa apareça na página antes que a referência da imagem.

ERROS MAIS COMUNS

Esquecer de fechar as aspas
Às vezes defeitos estranhíssimos aparecem no documento HTML. Por exemplo, simplesmente uma parte
do texto desaparece. é preciso conferir se não foi esquecido de fechar as aspas utilizadas em um nome de
arquivo dentro de uma referência.

Colocar os nomes dos arquivos em maiúsculas

Os servidores que utilizam o sistema operacional Unix ;a maioria dos servidores Internet; fazem diferença
quando o nome de um arquivo é escrito em maiúsculas ou minúsculas (caixa alta e caixa baixa). Para o
servidor, os arquivos [Link] e [Link] são diferentes. é o que se chama de “sensitivo à caixa” (case
sensitive, em inglês). A sensitividade à caixa também é mantida quando o nome do arquivo é colocado
entre aspas na referência. Se o arquivo foi nomeado como [Link] e dentro do documento HTML a
referência é para [Link], o servidor não irá achá-lo. Por isso, deve-se escolher um padrão para os
nomes dos arquivos (sempre em maiúsculas ou sempre em minúsculas).

Esquecer de citar o diretório em uma referência

Clica-se no link e aparece uma mensagem dizendo que o
documento não foi encontrado. Basta checar os links para descobrir se não faltou colocar o diretório onde
está o arquivo. Em mapas clicáveis, o cuidado deve ser ainda maior. Deve-se checar as referências das
áreas com ligação de hipertexto (no editor de mapas), a localização do arquivo imagemap (normalmente
/cgi-bin/imagemap) e o nome do mapa.

Fechar uma célula em um parágrafo diferente

É ridículo, mas o Netscape insiste em incluir espaços em branco entre as células se o tag de fim de célula
</TD> ficar separado por uma marca de parágrafo do conteúdo da célula. O tag </TD> deve ser colocado
imediatamente depois do conteúdo da célula. Exemplo:

Errado

<TD>
<IMG SRC=[Link]>

</TD>

Certo

<TD>

<IMG SRC=[Link]></TD>

Fechar uma referência em um parágrafo diferente

Uma variação desse erro acontece com os links de imagem. é preciso encerrar a âncora de hipertexto no
mesmo parágrafo do conteúdo da referência. Do contrário, o navegador adiciona um traço da cor do link. A
solução é a mesma do exemplo anterior: colocar o tag </A> imediatamente depois do conteúdo do link.

EXEMPLOS DE PÁGINAS WEB

Neste capítulo mostramos páginas que utilizam algumas das dicas apresentadas neste texto e contornam
de forma criativa as limitações de HTML.

c|net
Um dos sites mais acessados, o c|net combina gráficos simples para aumentar a velocidade de
carregamento com uma formatação discreta, permitindo que um grande número de navegadores sejam
capazes de visualizar a página da mesma forma.

Exemplo 37: c|net: gráficos simples garantem

carregamento rápido

Imagens
As imagens utilizados no c|net têm sempre poucas cores e formato é simples, normalmente retangular ou
redondo, sem sombreados nas letras. Cada página recebe apenas uma imagem sofisticada, como vemos
acima. O fundo também recebeu uma imagem para dar o tom de amarelo característico do site.

Texto monoespaçado
Como alternativa à fonte padrão dos navegadores, a c|net usa bastante o texto monoespaçado, inclusive
nos links de títulos de reportagens.

Alinhamento
O alinhamento centralizado, além de fugir do padrão (à esquerda) garante um bom balanceamento à
página indepentemente da largura da janela do navegador.

Um trecho do documento HTML da c|net

<html>

<head>

<title>c|net online front door</title></head>

<body background="/Images/Backgrounds/[Link]" 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="/Images/Cv/[Link]" width=240 height=165
alt="the future of the Net"></a>

Minc
Um bom exemplo de como combinar imagens com o fundo da página.

Exemplo 38: a combinação de imagem com fundo do Minc

A imagem da camiseta com um trator desta página foi produzida com o fundo transparente. Criada no
programa de desenho sobre um fundo de uma cor que não aparece em nenhuma parte do desenho, a
imagem passou por um programa como o LView Pro para determinar a cor de fundo. O arquivo de imagem,
na verdade, é assim:

Exemplo 39: o arquivo original de imagem do Minc

Southern Utah
Esta página mostra uma combinação simples de uma tabela com imagens dentro das células.

Exemplo 40: imagens dentro de células

A tabela tem quatro linhas, cada uma com três células. Dentro de cada célula existe uma imagem. As
imagens contém referências. Ao clicar em uma imagem, o usuário é levado para outra página.

Como as imagens são links para outras páginas, as bordas das imagens foram eliminadas com o atributo
BORDER=0 para que não 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 página. As imagens
também receberam os atributos VSPACE e HSPACE para adicionar espaço entre elas.

<html>

<Title>Southern Utah</Title>

<BODY Background="/soutah/[Link]" rgb="#000000" text="#000000" link="#0000ff"

vlink="#ff0000">

<center><FONT SIZE=+4>Southern Utah</FONT></CENTER>

<CENTER>

<TABLE>

<TR>

<TD><A HREF="/soutah/region/[Link]">

<IMG ALT=Region hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/yellow/[Link]">

<IMG ALT=Yellow Pages hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/art/[Link]">

<IMG ALT=Art hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD></TR> <TR><TD><A

HREF="/medical/[Link]">

<IMG ALT=Medical hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/recreation/[Link]">

<IMG ALT=Recreation hspace=1 vspace=1 border=0

SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/education/[Link]">

<IMG ALT=Education hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD></TR>

<TR><TD><A HREF="/soutah/sports/[Link]">

<IMG ALT=Sports hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/travel/[Link]">

<IMG ALT=Travel/Tourism hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/realnet/[Link]">

0<IMG ALT=Real Estate hspace=1 vspace=1 border=0

SRC="[Link]"></A></TD></TR>

<TR><TD><A HREF="/soutah/entertainment/[Link]">

<IMG ALT=Entertainment hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/business/[Link]">

<IMG ALT=Business hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

<TD><A HREF="/soutah/nationalparks/[Link]">

<IMG ALT=National Parks hspace=1 vspace=1 border=0 SRC="[Link]"></A></TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

@art Gallery
A galeria @art é um bom exemplo de como utilizar texto pré-formatado. Com o texto pré-formatado pode-se
controlar o alinhamento da porção de texto e das imagens.

Exemplo 41: alinhamento utilizando pré-formatação

O texto foi alinhado à direita da página utilizando o tag <PRE> e uma seqüência de tabulações idênticas
para cada linha. A imagem está alinhada à esquerda porque não recebeu nenhuma tabulação.

<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="[Link]">

This gallery has been implemented

by the faculty members Kathleen

PROGRAMAS
W3e
Editor de HTML produzido pelo Núcleo de Computação Eletrônica da Universidade do Rio de Janeiro. Tem
versões em inglês e português e permite a edição facilitada de mapas clicáveis, fontes coloridas, trilha
sonora, tabelas e letreiros, entre outros recursos.

O W3e pode ser copiado no endereço:

[Link]

HTMLed
Editor de HTML que permite personalização de botões de comandos. Você pode criar um botão com as
suas marcações de HTML mais comuns. Tem conversor de acentos. Na versão para Windows 95, pode-se
abrir os arquivos arrastando-os para a janela do programa. O HTMLed pode ser copiado em:

[Link] (Windows 3.x)

[Link] (Windows 95)

TextPad
O TextPad é um editor de texto para Windows95 que tem excelentes funções para editar e gerenciar
páginas de WWW. A principal delas é a possibilidade de fazer busca e troca em um conjunto de arquivos
ao mesmo tempo. Digamos que seja preciso trocar o tag <H1> para <H2> em uma coleção de 50 páginas.
O programa permite abrir múltiplos arquivos com apenas uma operação na janela Open do menu File,
diferente da maioria dos processadores de texto, nos quais é preciso fazer o precedimento de abertura de
arquivo para cada documento. Assim fica fácil e rápido executar o pedido de busca e troca em todos os
arquivos abertos com a opção Replace do menu Edit.

Outro recurso poderoso do Textpad é a janela Manage Files, no menu File. Alí é possível realizar tarefas
como copiar ou mover vários arquivos simultaneamente. Mas a principal aplicação deste gerenciador de
arquivos é possibilidade de renomear vários arquivos ao mesmo tempo, função extremamente útil quando
se precisa trocar a extensão de muitos arquivos de .htm para .html, por exemplo.

O TextPad pode ser copiado no endereço:

[Link] (Windows 95)

JASC Media Center

O JASC Media Center é um gerenciador de arquivos de imagem essencial para quem trabalha com uma
grande quantidade de ilustrações nas páginas Web. Além de permitir a visualização de um conjunto de
arquivos na forma de miniaturas (conhecidas como thumbnails), o JASC Media Center pode executar uma
série de modificações simultâneas sobre as imagens. é possível pedir que uma coleção completa de
arquivos seja transformada de praticamente qualquer formato para GIF89.

O JASC Media Center pode ser copiado no endereço:

[Link] (Windows 3.x)

 LView Pro
O LView Pro serve para visualizar e fazer edições simples em arquivos de imagem. Diferente do JASC
Media Center, o LView Pro só consegue editar um arquivo de cada vez. A função de Background Color do
menu Options serve para marcar uma cor de fundo como transparente. Também permite a gravação no
formato GIF89.

O LView Pro pode ser copiado nos endereços:

[Link] (Windows 3.x)

[Link] (Windows 95)

MapThis!
Editor de mapas para Windows 95. Além da interface avançada, o programa permite abrir mais de um
arquivo ao mesmo tempo. Também é possível dar nomes com mais de oito letras aos arquivos.

O MapThis! pode ser copiado no endereço:

[Link]

Mapedit
Editor de mapas para Windows 3.x. é o programa mais simples de edição de mapas disponível. Não tem
barra de ferramentas. Os comandos são acessados nos menus.

Para copiar o Mapedit, acesse:

[Link]

TABELA DE ACENTOS
Os caracteres especiais da tabela ISO 8859 Latin-1
&Aelig; Æ
&Aacute; á
&Acirc; Â
&Agrave; à
&Aring; Å
&Atilde; ã
&Auml; Ä
&Ccedil; ç
&ETH; Ð
&Eacute; é
&Ecirc; ê
&Egrave; È
&Iacute; í
&Icirc; Î
&Igrave; Ì
&Iuml; Ï
&Ntilde; Ñ
&Oacute; ó
&Ocirc; ô
&Ograve; Ò
&Oslash; Ø
&Otilde; õ
&Ouml; Ö
&THORN; Þ
&Uacute; ú
&Ucirc; Û
&Ugrave; Ù
&Uuml; Ü
&Yacute; Ý
&aacute; á
&acirc; â
&aelig; æ
&agrave; à
&aring; å
&atilde; ã
&auml; ä
&ccedil; ç
&eacute; é
&ecirc; ê
&egrave; è
&eth; ð
&euml; ë
&iacute; í
&icirc; î
&igrave; ì
&iuml; ï
&ntilde; ñ
&oacute; ó
&ocirc; ô
&ograve; ò
&oslash; ø
&otilde; õ
&ouml; ö
&szlig; ß
&thorn; þ
&uacute; ú
&ucirc; û
&ugrave; ù
&uuml; ü
&yacute; ý
&#161; ¡
&#162; ¢
&#163; £
&#165; ¥
&#166; ¦
&#167; §
&#168; ¨
&#169; © &copy; (Netscape)
&#170; ª
&#171; «
&#173; -
&#174; ® &reg; (Netscape)
&#175; ¯
&#176; º
&#177; ±
&#178; ²
&#179; ³
&#180; ’
&#181; µ
&#182; ¶
&#183; ·
&#184; ¸
&#185; ¹
&#186; º
&#187; »
&#188; ¼
&#189; ½
&#190; ¾
&#191; ¿
&#215; ×
&#222; Þ
&#247; ÷
&amp; &
&lt; <
&gt; >
&quot; "

LISTA DE TAGS E ATRIBUTOS

Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as
extensões introduzidas por empresas como Netscape e Microsoft. Observações em itálico indicam quais
navegadores (e a partir de qual versão) aceitam determinado tag, atributo ou opção. Quando nenhuma
observação estiver presente, significa que aquele elemento é aceito por todos os navegadores.

A tabela mostra os tags com a descrição de suas funções, atributos e as respectivas opções. Os atributos e
as opções devem ser colocados dentro do tag, como no exemplo abaixo.

<BR CLEAR=ALL>

Onde BR é o tag, seguido do atributo CLEAR e sua opção, ALL.

Pode-se colocar mais de um atributo dentro do mesmo tag.

<FONT SIZE=4 COLOR=BLUE>

<HTML> e <HTML>

Marca o início e o fim de um documento HTML.

Exemplo: <HTML>

<HEAD><TITLE>T&iacute;tulo da p&aacute;gina</TITLE></HEAD>

<BODY>

Conte&uacute;do da p&aacute;gina<P>

</BODY>

</HTML>

Aceito por: todos os navegadores

<HEAD> e </HEAD>
Marca o início e o fim do cabeçalho.

Exemplo: <HTML>

<HEAD><TITLE>T&iacute;tulo da p&aacute;gina</TITLE></HEAD>

<BODY>

Conte&uacute;do da p&aacute;gina<P>

</BODY>

</HTML>

Aceito por: todos os navegadores

<TITLE> e </TITLE>

Marca o início e o fim do título do documento.

Exemplo: <HTML>

<HEAD><TITLE>T&iacute;tulo da p&aacute;gina</TITLE></HEAD>

<BODY>

Conte&uacute;do da p&aacute;gina<P>

</BODY>

</HTML>

Aceito por: todos os navegadores

<BODY> e </BODY>

Marca o início e o fim do conteúdo do documento.

Exemplo: <HTML>

<HEAD><TITLE>T&iacute;tulo da p&aacute;gina</TITLE></HEAD>

<BODY>

Conte&uacute;do da p&aacute;gina<P>

</BODY>

</HTML>

Aceito por: todos os navegadores

Atributos

BGCOLOR=#nnnnnn: modifica a cor do fundo da página (o Apêndice C mostra os valores possíveis de n).
Exemplo: <BODY BGCOLOR=#FFFFFF> ou <BODY BGCOLOR=#WHITE>O fundo desta p&aacute;gina
&eacute; branco</body>

Aceito por: Netscape 1.1 e Internet Explorer

BACKGROUND=[Link]: coloca uma imagem como fundo da página.

Exemplo: <BODY BACKGROUND=[Link]>Esta p&aacute;gina tem uma imagem no fundo.</BODY>

Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0

BGPROPERTIES=FIXED: Mantém fixa a imagem de fundo quando a página é rolada, criando um efeito de
marca d'água.

Exemplo: <BODY BACKGROUND=[Link] BGPROPERTIES=FIXED>A imagem desta p&aacute;gina

n&atilde;o rola junto com o texto.</BODY>

Aceito por: Internet Explorer 2.0

LEFTMARGIN=n: define a largura da margem esquerda da página (sendo que n é o valor em pixels da
margem).

Exemplo: <BODY LEFTMARGIN=10>A margem esquerda desta página &eacute; de 10 pixels.</BODY>

Aceito por: Internet Explorer

TOPMARGIN=n: define a altura da margem superior (sendo que n é o valor em pixels da margem).

Exemplo: <BODY TOPMARGIN=10>A margem superior desta página &eacute; de 10 pixels.</BODY>

Aceito por: Internet Explorer

TEXT=#nnnnnn: modifica a cor do texto (o Apêndice C mostra os valores possíveis de n).

Exemplo: <BODY TEXT=#FF0000>O texto desta p&aacute;gina est&aacute; em vermelho.</BODY>

Aceito por: Netscape 1.1 e Internet Explorer

LINK=#nnnnnn: modifica a cor dos links não visitados (o Apêndice C mostra os valores possíveis de n).

Exemplo: <BODY LINK=#FF0000>Os links n&atilde;o visitados desta página aparecem em

vermelho.</BODY>

Aceito por: Netscape 1.1 e Internet Explorer

ALINK=#nnnnnn: modifica a cor dos links já visitados (o Apêndice C mostra os valores possíveis de n).

Exemplo: <BODY ALINK=#FF0000>Os links ativos desta página aparecem em vermelho.</BODY>

Aceito por: Netscape 1.1 e Internet Explorer

VLINK=#nnnnnn: modifica a cor dos links já visitados (o Apêndice C mostra os valores possíveis de n).

Exemplo: <BODY VLINK=#FF0000>Os links visitados desta página aparecem em vermelho.</BODY>

<A> e </A>

Marca o início e o fim de um link.

Atributos
HREF=URL: indica para onde o link levará (sendo URL o endereço para onde o link está apontando).

Exemplo: <A HREF=[Link] da XYZ</A> (leva para uma página em outro computador,
<HREF=[Link]>Texto</A> (leva para uma outra página no mesmo computador), <A
HREF=#capitulo1>Cap&iacute;tulo 1</A> (leva para uma outra parte do mesmo documento) ou <A
HREF=[Link]#capitulo1>Cap&iacute;tulo 1 do texto</A> (leva para uma parte determinada de outro
documento)

Aceito por: todos os navegadores

NAME=nome: 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&iacute;tulo 1</A>...<A NAME=capitulo1>Cap&iacute;tulo 1</A>

Aceito por: todos os navegadores

TARGET=WINDOW: abre uma nova janela do navegador com o resultado de um link.

Exemplo: <A HREF=[Link] target=window>Site da XYZ</A> (O página principal do site da

XYZ é aberta em uma segunda janela do navegador).

Aceito por: Netscape 2.0

<BASEFONT>

Modifica a formatação padrão do texto.

Atributos

SIZE=n: modifica o tamanho padrão do texto. Sendo que n pode valer de 1 a 7. O tamanho padrão do texto
é 3.

Exemplo: <BASEFONT SIZE=5>Texto (coloca o texto de toda a página em um tamanho maior).

Aceito por: Netscape 1.1 e Internet Explorer

<FONT> e </FONT>

Modifica a formatação de determinada parte do texto.

Atributos

SIZE=n: modifica o tamanho de determinada parte do texto. Sendo que n é um valor de 1 a 7. O valor pode
ser de -7 a +7 para aumentar o texto em relação 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)

Aceito por: Netscape 1.1 e Internet Explorer

COLOR=#nnnnnn: modifica a cor de um trecho de texto. O Apêndice C mostra os valores possíveis de n.

Exemplo: <FONT COLOR=#nnnnnn>Texto</A> ou <FONT COLOR=white>Texto</A> (coloca o texto na

cor branca)

Aceito por: Netscape 2.0 e Internet Explorer

FACE=fonte: modifica o tipo do texto. Sendo que fonte é o nome da fonte. A fonte definida precisa estar
instalada no computador do usuário.

Exemplo: <FONT FACE=ARIAL>Texto</FONT> (coloca o texto na fonte Arial.

Aceito por: Internet Explorer

<B> e </B>

Coloca o texto em negrito.

Exemplo: <B>Texto</B>

Aceito por: todos os navegadores

<I> e </I>

Coloca o texto em itálico.

Exemplo: <I>Texto</I>

Aceito por: todos os navegadores

<TT> e </TT>

Coloca o texto em uma fonte monoespaçada (Courier, por exemplo).

Exemplo: <TT>Texto</TT>

Aceito por: todos os navegadores

<P> e </P>

Marca um parágrafo e acrescenta uma linha em branco depois de cada um. é utilizado aos pares (<P> e
</P>) se for necessária a colocação de atributo.

Exemplo: <P>Par&aacute;grafo</P> ou Par&aacute;grafo<P>

Aceito por: todos os navegadores

Atributo

ALIGN=CENTER, LEFT ou RIGHT: alinha o parágrafo ao centro (ALIGN=CENTER), à esquerda

(ALIGN=LEFT) ou à direita (ALIGN=RIGHT).

Exemplo: <P ALIGN=CENTER>Par&aacute;grafo</P>

Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic 2.0.0

<CENTER> e </CENTER>

Alinha o trecho (texto, imagem ou tabela) ao centro.

Exemplo: <CENTER>Texto</CENTER>

Aceito por: Netscape e Internet Explorer

<BR>

Insere uma quebra de linha.

Exemplo: Linha 1<BR>Linha2

Atributo

CLEAR=ALL: joga o texto para a próxima margem livre após a imagem.

Exemplo: <IMG SRC=[Link]>Texto<BR CLEAR=ALL>Texto

Aceito por: Netscape e Internet Explorer

<PRE> e </PRE>

Marca um trecho formatado com fonte monoespaçada. A formatação com espaços e entradas de
parágrafos passa a ser respeitada.

Exemplo: <PRE>T e x t o</PRE>

Aceito por: Netscape, NCSA Mosaic e Internet Explorer (a versão Macintosh do Internet Explorer não
respeita formatação com espaços e entradas de parágrafos.

<BLOCKQUOTE> e </BLOCKQUOTE>

Adiciona uma margem de cerca de um centímetro.

Exemplo: <BLOCKQUOTE>Texto</BLOCKQUOTE>

<Hn> e </Hn>

Marca um título. Sendo que n pode ser um valor de 1 a 6.

Exemplo: <H1>T&iacute;tulo</H1>

Aceito por: todos os navegadores

Atributo

ALIGN=CENTER, RIGHT ou LEFT: modifica o alinhamento do título. ALIGN=CENTER alinha o título ao

centro. ALIGN=RIGHT, alinha o título ao à direita. ALIGN=LEFT alinha o título à esquerda.

Exemplo: <H1 ALIGN=CENTER>T&iacute;tulo centralizado</H1>

Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0

<HR>

Inclui uma linha horizontal.

Exemplo: Texto<hr>Texto

Aceito por: todos os navegadores

Atributos

SIZE=n: define a altura da linha. Sendo que n pode ser um valor de 1 a 100.

Exemplo: <HR SIZE=10>

Aceito por: Netscape e Internet Explorer

WIDTH=n: define a largura da linha horizontal. Sendo que n pode ser um número qualquer ou um
percentual da largura da página.

Exemplo: <HR WIDTH=200> ou <HR WIDTH=50%>

Aceito por: Netscape e Internet Explorer

NOSHADE: desenha a linha horizontal sem a sombra para dar o efeito de três dimensões.

Exemplo: <HR NOSHADE>

Aceito por: Netscape e Internet Explorer

ALIGN=LEFT, RIGHT ou CENTER: modifica o alinhamento da linha horizontal.

Exemplo <HR ALIGN=CENTER>

Aceito por: Netscape e Internet Explorer

<DL> e </DL>

Marcam o início e o fim de uma lista de definição. Devem ser usados com os tags <DT> e <DD>.

Exemplo: <DL>

<DT>Título</DT>

<DD>Texto</DD>

<DT>Título</DT>

<DD>Texto</DD>

</DL>

Aceito por: todos os navegadores

<DT> e </DT>

Marcam os títulos de uma lista de definição. Devem ser usados junto com os tags <DL> e <DD>.
Exemplo: <DL>

<DT>Título</DT>

<DD>Texto</DD>

<DT>Título</DT>

<DD>Texto</DD>

</DL>

Aceito por: todos os navegadores

<DD> e </DD>

Marcam o início e o fim do texto de uma lista de definição. Devem ser usados junto com os tags <DL> e
<DT>.

Exemplo: <DL>

<DT>Título</DT>

<DD>Texto</DD>

<DT>Título</DT>

<DD>Texto</DD>

</DL>

Aceito por: todos os navegadores

<UL> e </UL>

Marcam o início e o fim de uma lista não ordenada. Deve ser usado junto com o tag <LI>. Os itens da lista
recebem marcas gráficas na primeira linha conhecidas como bullets.

Exemplo: <UL>
<LI>Item 1

<LI>Item 2

</UL>

Aceito por: todos os navegadores

<OL> e </OL>

Marcam o início e o fim de uma lista ordenada. Os itens da lista são colocados em ordem e recebem na
primeira linha um número ou letra. Devem ser usados junto com o tag <LI>.

Exemplo: <OL>
<LI>Item 1
<LI>Iem 2

</OL>

Aceito por: todos os navegadores

Atributo

START=n: especifica o número a partir do qual os itens da lista começam a ser contados. Sendo que n
pode ser um número ou uma letra. Também podem ser utilizados números romanos.

Exemplo: <OL START=3>

<LI>Item 1

<LI>Item 2

</OL>

Aceito por: Internet Explorer e Netscape

<DIR> e </DIR>

Marcam o início e o fim de uma lista. Devem ser usados junto com o tag <LI>.

Exemplo:<DIR>

<LI>Item 1

<LI>Item 2

</DIR>

Aceito por: todos os navegadores

<MENU> e </MENU>

Marcam o início e o fim de uma lista. Devem ser usados junto com o tag <LI>.

Exemplo: <MENU>

<LI>Item 1

<LI>Item 2

</MENU>

Aceito por: todos os navegadores

<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>

Aceito por: todos os navegadores

Atributos

TYPE=n: modifica o tipo de marca que será colocada antes de cada item da lista. Quando utilizado em uma
lista ordenada (<OL>), pode modificar o tipo de marca para um círculo ou um quadrado. TYPE=CIRCLE
coloca um círculo vazio (uma falha no Netscape 2.0 para Windows faz com que a mesma opção produza
um quadrado vazio). TYPE=DISC coloca um círculo cheio. TYPE=SQUARE coloca um quadrado cheio.
Quando utilizado em uma lista não ordenada, modifica o tipo de caractere que é utilizado para a contagem.
TYPE=A ou TYPE=a coloca marcas em ordem alfabética (A, B, C ou a, b, c). TYPE=1 marca os itens em
ordem numérica. TYPE=I ou TYPE=i marca os itens com números 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>

Aceito por: Netscape 1.1 e Internet Explorer

<IMG>

Insere uma imagem.

Atributos

SRC=[Link]: indica o arquivo de imagem a ser carregado. Sendo que [Link] é o nome do arquivo
de imagem a ser usado.

Exemplo: <IMG SRC=[Link]>

Aceito por: todos os navegadores

DYNSRC=[Link]: indica o arquivo de vídeo a ser carregado.

Exemplo: <IMG SRC=[Link] DYNSRC=[Link]> (o atributo SRC=[Link] deve ser colocado para
que os navegadores que não aceitam o atributo DYNSRC possam mostrar uma imagem)

Aceito por: Internet Explorer

CONTROLS: inclui um conjunto de botões para controlar a execução do arquivo de vídeo. Deve ser
utilizado junto com o atributo DYNSRC.

Exemplo: <IMG SRC=[Link] DYNSRC=[Link] CONTROLS>

Aceito por: Internet Explorer

LOOP=n ou INFINITE: define quantas vezes o arquivo de vídeo será executado. Sendo que n é o número
de vezes que o arquivo será executado. LOOP=INFINITE executa o arquivo indefinidamente, até que o
usuário mude de página. Deve ser utilizado junto com o atributo DYNSRC.

Exemplo: <IMG SRC=[Link] DYNSRC=[Link] LOOP=5>

Aceito por: Internet Explorer

START=FILEOPEN e/ou MOUSEOVER: define quando o arquivo de vídeo começará 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=[Link] DYNSRC=[Link] LOOP=5 START=MOUSEOVER>

Aceito por: Internet Explorer

ALIGN=n:modifica o alinhamento da imagem em relação ao texto. Sendo que n é uma das opções 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=[Link] 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=[Link] ALIGN=BASELINE>Texto

Aceito por: Netscape 1.1

VSPACE=n: insere espaço acima e abaixo da imagem. Sendo que n éacute; o valor em pixels do espaço a
ser adicionado.

Exemplo: <IMG SRC=[Link] VSPACE=10>

Aceito por: Netscape 1.1 e Internet Explorer

HSPACE=n: insere espaço à esquerda e à direita da imagem. Sendo que n é um valor em pixels do espaço
a ser adicionado.

Exemplo: <IMG SRC=[Link] HSPACE=10>

Aceito por: Netscape 1.1 e Internet Explorer

ALT=n: indica o texto para ser colocado quando o navegador não mostra a imagem. Sendo que n é um
título que identifique a imagem.

Exemplo: <IMG SRC=[Link] ALT=Imagem>

Aceito por: todos os navegadores

WIDTH=n: determina a largura da imagem e reserva o espaço 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=[Link] WIDTH=344 HEIGHT=233>

Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic

HEIGHT=n: determina a altura da imagem e reserva o espaço 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=[Link] WIDTH=344 HEIGHT=233>

Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic

BORDER=n: insere uma borda em torno da imagem. Sendo que n é um valor em pixels da espessura da
borda.

Exemplo: <IMG SRC=[Link] BORDER=1>

Aceito por: Netscape 1.1 e Internet Explorer

ISMAP: indica que a imagem é um mapa clicável processado no servidor. Deve ser usado junto com uma
referência a um arquivo que contenha as informações do mapa.

Exemplo: <A HREF=[Link]><IMG SRC=[Link] ISMAP></A>

Aceito por: todos os navegadores.

USEMAP=MAPA: indica que a imagem é um mapa clicável 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 regiões sensíveis da imagem dentro da página Web. Pode ser usado junto com o atributo
ISMAP e a referência a um mapa processado no servidor.

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

ou

<MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<A HREF=/cgi-bin/imagemap/[Link]>

<IMG SRC=[Link] USEMAP=#mapa ISMAP></A>

Aceito por: Netscape 2.0 e Internet Explorer

<MAP> e </MAP>
Indicam a marcação de um mapa processado no cliente. Deve ser usado junto com o tag <AREA> e o
atributo de imagem USEMAP=#n.

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

Atributos

NAME=MAPA: sendo que MAPA é o nome do mapa processado no cliente.

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

<AREA>

Define uma área sensível do mapa clicável processado no cliente. Deve ser usado junto com o tag <MAP>
e o atributo de imagem USEMAP=#mapa.

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

Atributos

SHAPE=formato: define o formato da região sensível do mapa processado no cliente. Sendo que formato é
uma das opções a seguir. SHAPE=RECT indica que a região é um retângulo. SHAPE=CIRCLE indica que a
região é um círculo. SHAPE=POLY indica que a região é um polígono.
Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

COORDS=x,y: define as coordenadas da região sensível. Sendo que x e y são 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 sensível é formada por várias coordenadas. Quando o formato da área for
SHAPE=RECT (retângulo), há dois pares de x e y. O primeiro indica o canto superior esquerdo do retângulo
e o segundo, o canto inferior direito. Quando o formato for SHAPE=CIRC, há a coordenada do centro do
círculo 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.

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

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

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

ou

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]

</MAP>
<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

NOREF: indica que a área determinada não chama arquivo nenhum. Serve para definir que qualquer área
que não esteja dentro das ligadas a uma URL com HREF=URL não seja clicável. 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 dimensão da imagem é de 428 pixels de largura e 124 pixels de altura.

Exemplo: <MAP NAME=MAPA>

<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=[Link]>

<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=[Link]>

<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=[Link]>

<AREA SHAPE=RECT COORDS=0,0,428,124 NOHREF>

</MAP>

<IMG SRC=[Link] USEMAP=#mapa>

Aceito por: Netscape 2.0 e Internet Explorer

<MARQUEE> e </MARQUEE>

Permite fazer um trecho de texto correr de um lado a outro da tela.

Exemplo: <MARQUEE>Texto</MARQUEE>

Aceito por: Internet Explorer

Atributos

ALIGN=TOP, MIDDLE ou BOTTOM: modifica o alinhamento do texto em volta do marquee. ALIGN=TOP

alinha o texto com o topo do marquee. ALIGN=MIDDLE alinha o texto com o centro do marquee.
ALIGN=BOTTOM alinha o texto com a base do marquee.

Exemplo: <MARQUEE ALIGN=TOP>Texto</MARQUEE>

Aceito por: Internet Explorer

BEHAVIOR=SCROLL, SLIDE ou ALTERNATE: controla o comportamento do texto dentro do marquee.

BEHAVIOR=SCROLL faz com que o texto entre por um dos cantos do marquee e sai por outro. Com
BEHAVIOR=SLIDE, o texto entra por um cantos do marquee e pára ao chegar no canto oposto. Com
BEHAVIOR=ALTERNATE, o texto fica passando de um canto a outro, sempre dentro do marquee.

Exemplo: <MARQUEE BEHAVIOR=SLIDE>Texto</MARQUEE>

Aceito por: Internet Explorer

BGCOLOR=#nnnnnn: muda a cor do fundo do marquee. O Apêndice C mostra os valores possíveis de n.

Exemplo: <MARQUEE BGCOLOR=#FF0000>Texto</MARQUEE>

Aceito por: Internet Explorer

DIRECTION=LEFT ou RIGHT: define a direção 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>

Aceito por: Internet Explorer

HEIGHT=n ou n%: define a altura do marquee. Sendo que n é um valor em pixels ou um percentual da
altura da janela.

Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE>

Aceito por: Internet Explorer

WIDTH=n ou n%: define a largura do marquee. Sendo que n é um valor em pixels ou um percentual da
largura da janela.

Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE>

Aceito por: Internet Explorer

HSPACE=n: define margens à esquerda e à direita do marquee. Sendo que n é um valor em pixels.

Exemplo: <MARQUEE HSPACE=10>Texto</MARQUEE>

Aceito por: Internet Explorer

VSPACE=n: define margens acima e abaixo do marquee. Sendo que n é um valor em pixels.

Exemplo: <MARQUEE VSPACE=10>Texto</MARQUEE>

Aceito por: Internet Explorer

LOOP=n: define quantas vezes o texto irá cruzar o marquee. Sendo que n é o número de vezes que o texto
irá cruzar o marquee. Se n for igual a 1 ou a INFINITE, o texto irá se movimentar infinitamente.

Exemplo: <MARQUEE LOOP=2>Texto</MARQUEE>

Aceito por: Internet Explorer

SCROLLAMOUNT=n: controla a velocidade do texto, definindo o número 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
rápido será o movimento texto.

Exemplo: <MARQUEE SCROLLAMOUNT=20>Texto</MARQUEE>

Aceito por: Internet Explorer

SCROLLDELAY=n: controla a velocidade do marquee ao definir os intervalos de redesenho do texto.

Sendo que n é o valor em milisegundos do intervalo de redesenho do texto. Quanto menor for n, mais
rápido será o texto.

Exemplo: <MARQUEE SCROLLDELAY=10>Texto</MARQUEE>

Aceito por: Internet Explorer

<BGSOUND>

Carrega um arquivo de áudio como trilha sonora da página.

Exemplo: <BGSOUND SRC=[Link]>

Aceito por: Internet Explorer

Atributos

SRC=[Link]: define o nome do arquivo de áudio a ser carregado Sendo que [Link] é o nome do
arquivo a ser carregado. Aceita os formatos .WAV, .AU e .MID.

Exemplo: <BGSOUND SRC=[Link]>

Aceito por: Internet Explorer

LOOP=n: define quantas vezes o arquivo de áudio será executado. Sendo que n é o número 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=[Link] LOOP=INFINITE>

Aceito por: Internet Explorer

<TABLE> e </TABLE>

Marca o início e o fim de uma tabela.

Exemplo: <TABLE>

<TR>

<TD>Texto</TD>

<TD>Texto</TD>

</TR>

</TABLE>

Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0

Atributos

BORDER=n: define a borda da tabela. Sendo que n é o valor em pixels da borda.

Exemplo: <TABLE BORDER=1>

<TR>

<TD>Texto</TD>

<TD>Texto</TD>

</TR>

</TABLE>

Aceito por: Internet Explorer 2.0, Netscape 1.1 e NCSA Mosaic

BORDERCOLOR=#nnnnnn: define a cor principal da borda. O Apêndice C mostra os valores de cores

possíveis de n.

Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000>

<TR>
 <TD>Texto</TD>

<TD>Texto</TD>

</TR>

</TABLE>

Aceito por: Internet Explorer

BORDERCOLORLIGHT=#nnnnnn: define a cor da sombra mais clara da borda. O Apêndice C mostra os

valores de cores possíveis de n.

Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000 BORDERCOLORLIGHT=#FFFFFF>

<TR>

<TD>Texto</TD>

<TD>Texto</TD>

</TR>

</TABLE>

Aceito por: Internet Explorer

BORDERCOLORDARK=#nnnnnn: define a cor da sombra mais escura da borda. O Apêndice C mostra

os valores de cores possíveis de n.

Exemplo: <TABLE BORDER=1 BORDERCOLOR=#FF0000 BORDERCOLORLIGHT=#FFFFFF

BORDERCOLORDARK=#000000>

<TR>

<TD>Texto</TD>

<TD>Texto</TD>

</TR>

</TABLE>

TABELA DE CORES
A tabela abaixo apresenta os códigos de cores que podem ser utilizados em documentos HTML. Somente
os nomes de cores acompanhados de asterisco podem ser utilizados no lugar dos códigos. Olive, fuchsia,
purple e teal não têm correspondentes em código.

Nome da cor Código da cor Aparência

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