Hyper Text Markup Language

Dynamic Hyper Text Markup Language
Cascading Style Sheets

FUNDAMENTOS
O arquivo HTML bsico
Cdigo Fonte
O nome dos arquivos
A lgica LIFO
O arquivo Index.htm
LISTAS
Ordenada
No ordenada
Itens da linha
Figuras como marcadores
TEXTOS
Acrnimo
Cabealhos
Pargrafo HTML
Pargrafo CSS
Quebra de linha
Espessura da linha
Espaamento forado
Espaamento entre letras
Espaamento entre palavras
Endenao
Centralizao
Pr-formatao
Escrita em colunas
Escrita vertical
Margens esquerda/direita
Margem de topo
LIGAES
Links Relativo & Absoluto
Links Interno & Externo
Link sem sublinhado
Link que muda o cursor
Link que muda o cursor
Link automtico
Link piscante
Link oculto
Link em tabela com imagem
Link com mensagens
Links coloridos
Criando ncoras
Enviando E-mail via HTML
Links para download
Links para Excel ou Word
Site na pgina de abertura
Seu link em favoritos
MULTIMDIA
Arquivos de vdeos
Arquivos de sons
OBJETOS EM MOVIMENTO
ELEMENTOS ESTRUTURAIS
HTML, head & body
Descritor
Comentrios
Meta Tags
Barra de Status
Bloqueando o cdigo-fonte
CURSOR
Formato do cursor
Alterando o cursor
Anexando objetos ao cursor
FORMULRIOS
Botes
Botes coloridos
Botes linkados
Botes texturizados
Botes: Tamanho/Formato
Botes com imagens
Alinhando os campos
Com molduras
FONTES
Tamanho, Cor & Tipo
Elementos Lgicos
Elementos Fsicos
Multicoloridas
Com cor de fundo
Com background
Tridimensional
Efeito 3D
Efeitos com filtros
FILTROS
Efeito Alpha
Efeito Blur
Efeito Chroma
Efeito DropShadow
Efeitos FlipH e FlipV
Efeito Glow
Efeito Gray
Efeito Invert
Efeito Mask
Efeito Motion Blur
Efeito Shadow
Efeito Wave
Efeito Xray
Filtros Combinados
BACKGROUND
Com gifs animados
Disposicionamento
Em pargrafos
Em tabelas
ELEMENTOS GRFICOS
Linhas horizontais
Linhas verticais
Linhas tracejadas
Figuras como separadores
Barra personalizada
TABELAS
Introduo
Formatando as linhas
Formatando as clulas
Criando colunas de textos
Imagens, cores & texturas
Ttulos & Legenda
Cabealho, corpo e rodap
Bordas com FRAME & RULES
TABELAS COMPLEXAS
Grficos de barras
Banner do Tutorial
Efeito Collapse
Imagens linkadas
FOLHAS DE ESTILO
Principais Propriedades
Mtodo Linking
Mtodo Embedding
Mtodo Importing
Mtodo Inline
Bordas
Classe de Estilo
Herana de Estilo
Filtros
Unidades & Valores
POSICIONAMENTO DE OBJETOS
Fundamentos
Posio Absoluta
Posio Relativa
Posio Esttica
Objeto flutuante
Alinhamento Vertical
CARACTERES
Seqncias de Escape
Smbolos

IMAGENS
Inserindo arquivos gif/jpg
Background
Imagem anexa ao E-mail
Criando bordas
Rolamento horizontal
Rolamento vertical
Rolamento alternado
Rolamento combinado
Rolamento com imagens
CORES
Sintaxe HTML/CSS
Tabela RGB
16 cores universais
Tabela da ICMC-USP
Tabela StarMedia
Processo Tiling
Manipulando a cor de fundo

FRAMES
Verticais
Horizontais
Combinados
Janelas
Browsers antigo
Diretrios com frames

Centralizao
Alinhamento lado a lado
Imagens reduzidas
Mapeamento de imagens
Editores de rea mapeada
Imagem de baixa resoluo
Definindo suas dimenses
TROTES & BRINCADEIRAS
Fulano de tal foi preso...
HP invadida por hackers!!...
Uma HP no espelho

HISTRIA
A Internet nasceu em 1969, nos Estados Unidos. Interligava originalmente laboratrios de
pesquisa e se chamava ARPAnet (ARPA: Advanced Research Projects Agency). Era uma rede do
Departamento de Defesa norte-americano. Era o auge da Guerra Fria, e os cientistas queriam uma rede
que continuasse de p em caso de um bombardeio. Surgiu ento o conceito central da Internet: Uma rede em que
todos os pontos se equivalem e no h um comando central. Assim, se B deixa de funcionar, A e C continuam a poder
se comunicar.
O nome Internet propriamente dito surgiu bem mais tarde, quando a tecnologia da ARPAnet passou a ser usada para
conectar universidades e laboratrios, primeiro nos EUA e depois em outros pases. Por isso que no h um nico lugar
que "governa" a Internet. Hoje ela um conjunto de milhares de redes no mundo inteiro. O que essas redes tm em
comum o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol), que permite que elas se comuniquem
umas com as outras. Esse protocolo a lngua comum dos computadores que integram a Internet.
Ento, a Internet pode ser definida como:
* Uma rede de redes baseadas no protocolo TCP/IP
* Uma comunidade de pessoas que usam e desenvolvem essas redes
* Uma coleo de recursos que podem ser alcanados atravs destas redes
Durante cerca de duas dcadas a Internet ficou restrita ao ambiente acadmico e cientfico. Em 87 pela primeira vez foi
liberado seu uso comercial nos EUA.
A "antiga" Internet, antes da Web, exigia do usurio disposio para aprender comandos em Unix (linguagem de
computador usada na Internet) bastante complicados e enfrentar um ambiente pouco amigvel, unicamente em texto.
A Web fez pela Internet o que o Windows fez pelo computador pessoal.
O poder da WWW reside em sua capacidade em associar uma determinada parte de um documento eletrnico outro
computador a milhares de quilmetros afastado. Esta conexo entre documentos possvel graas utilizao do
protocolo de comunicao chamado HTTP ("HyperText Transfer Protocol") e da linguagem HTML ("HyperText Markup
Language").
O HTML nasceu em 1991 no CERN (European Council for Nuclear Research), na sua. Seu criador, o ingls Tim
Berners-Lee, 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar computadores
do laboratrio e outras instituies de pesquisa e exibir documentos cientficos de forma simples e fcil de acessar.
Um desenvolvimento fundamental aconteceu em Julho de 1992 com a liberao da biblioteca de desenvolvimento para
WWW - World Wide Web (Rede de Alcance Mundial). Foi essa biblioteca que deu origem construo de vrios
browsers WWW e servidores que tornaram a WEB vivel. Um desses foi o Mosaic, o primeiro browser
multiplataforma que explorava completamente a capacidade de hipermdia da WEB. Desenvolvido por Marc
Andreeson, ento do NCSA, o MOSAIC foi que iniciou o crescimento explosivo da WEB. No outono 1993 tornou-se
disponvel a milhes de usurios, com a liberao das verses para Mac e Windows. Se por um lado novos browsers
tm superado os recursos do MOSAIC, por outro foi esse programa que tornou-se sinnimo da WEB.
Muitas pessoas concordam que os documentos HTML deveriam trabalhar bem atravs de diferentes browsers e
sistemas operativos. Alcanando interoperabilidade baixa os custos para as pessoas que desenvolvem pginas porque
assim apenas se desenvolve uma verso do documento. Se um esforo no for efetuado, existe um enorme risco que a
web se desenvolva para um sem nmero de formatos incompatveis, reduzindo, sem quaisquer duvidas, todo o
potencial comercial da web para todos os participantes.
Cada verso de HTML tem tentado refletir todo o consenso entre a indstria de software para que o investimento feito
pelos autores de pginas no seja desperdiado e que os seus documentos no deixem de se poder ler num curto
perodo de tempo. O HTML tem sido desenvolvido com a viso que todos os equipamentos fossem capazes de usar a
informao da Web, computadores com monitores de diversas resolues e vrios nmeros de cores, equipamentos
para input e output de voz, computadores com alta e baixa largura de freqncia e muito mais.
O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor
suporte para texto com direo varivel (esquerda, direita, e ambos), tabelas mais visualizveis, melhorias nos forms,
melhor acessibilidade para pessoas com incapacidades. Nessa imensa biblioteca h de tudo. So mais de 1 bilho de
pginas sobre os assuntos mais variados. Tudo o que a imaginao humana pudesse conceber foi parar na rede, que se
tornou uma grande arena de conhecimento e diverso. Pode apostar: depois da Internet, o mundo nunca mais vai ser o
mesmo.
EVOLUO DO HTML
1992 - Primeira apario do HTML.
1993 - HTML+ Algumas definies da aparncia, tabelas, formulrios.
1994 - HTML v2.0 Padronizao para os caractersticas principais.
1994 - HTML v3.0 Uma extenso do HTML+ entendido como um rascunho de padro.
1995 - HTML v3.2 Netscape e Internet Explorer definem seus prprios padres baseados nas implementaes
correntes.
1995 - JavaScript criada por Brendan Eich da Netscape como uma extenso do HTML para o browser Navigator
v2.0. JavaScript uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados atravs de
eventos dinmicos que faltavam ao HTML
1996 - CSS1 Em dezembro deste ano apresentada pela primeira vez a Folha de Estilo, criada para complementar
a linguagem HTML. Possua uma formatao simples e cerca de 60 propriedades.
1997 - HTML v4.0 So lanados os browsers Netscape v4.0 (agosto) e Internet Explorer v4.0 (outubro) que
apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos
recursos tornando o HTML dinmico. Surge ento o DHTML.
1998 - CSS2 Em maio lanado a segunda verso da Folha de Estilo que, alm de incluir todas as propriedades do
CSS1 ainda apresenta por volta de 70 novas propriedades.
1999 - HTML v4.01 Alguma modificaes da verso anterior.
2000 - XHTML v1.0 criado e consiste de uma verso XML do HTML v4.01.
World Wide Web
GLOSSRIO
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Se voc quiser uma boa instruo, ter que pagar um bom professor!
Ter que estudar muitas horas. Isso no rpido nem fcil.

A
Active-X - Arquitetura de componentes desenvolvida pela Microsoft que amplia a interatividade das pginas
Web, de forma semelhante ao que ocorre com applets Java.
ncora - Em HTML, uma ncora qualquer um dos lados de uma ligao de hipermdia (hiperlink). Uma das
ncoras contm a referncia de hipertexto para o nome de um recurso. A outra ncora um recurso qualquer da
rede ou um marcador de posio identificado atravs de um nome.
ANSI - Conjunto de normas para a transmisso de caracteres de controle para um terminal, e vice-versa,
permitindo o tratamento de cores e outros atributos, como movimento do cursor, sons, etc.
ASCII - American Standard Code for Information Interchange. Cdigo de caracteres utilizado para transferir
informaes usando 7 bits.
ARPAnet - Acrnimo de Advanced Research Projects Agency Network. Rede de longa distncia criada em
1969 pela Advanced Research Projects Agency (ARPA, atualmente Defense Advanced Projects Research Agency,
ou DARPA) em consrcio com as principais universidades e centros de pesquisa dos EUA, com o objetivo
especfico de investigar a utilidade da comunicao de dados em alta velocidade para fins militares. conhecida
como a rede-me da Internet de hoje e foi colocada fora de operao em 1990, posto que estruturas alternativas de
redes j cumpriam seu papel nos EUA.
Applet - Pequeno programa (geralmente escrito em Java) que transferido atravs da Web e roda em um browser
(na mquina do cliente).
Attachment - Arquivo a ser enviado em anexo com a mensagem de correio eletrnico.

B
Back - (Voltar). Na Internet um boto de auxlio que faz voltar uma pgina durante sua navegao.
Background - Segundo plano ou fundo - Consiste na figura, textura ou cor que ocupa o fundo de seu monitor.
No caso de figura/textura so usados geralmente arquivos jpg ou gifs, j as cores so definidas atravs do cdigo
RGB. As figuras, texturas, bem como, as cores so configuradas com o comando Img.
Backup - copiar arquivos para um segundo dispositivo (um outro driver ou disquete) como medida de
precauo no caso de haver algum problema com o dispositivo original onde os arquivos se encontram. Uma das
mais importantes regras no uso de computadores "faa o backup de seus arquivos regularmente".
Bauds - o nmero de mudanas de fase do sinal transmitido por um modem. So confundidos freqentemente
com "bps", mas podem ter valores aproximados um ao outro.
BBS - Bulletin Board System um sistema que tipicamente oferece servios de correio eletrnico, repositrio de
arquivos (de programas, dados ou imagens) e outros servios tais como conversao on-line. Seus assinantes
tipicamente tem acesso atravs de linhas telefnicas (isto , de voz) utilizadas via computador pessoal e modem.
BITNET - Because It's Time Network uma rede educacional internacional que liga computadores em
aproximadamente 2500 universidades e institutos de pesquisa nos EUA, Europa e Japo. A BITNET no usa
protocolo da famlia TCP/IP, mas pode trocar mensagens eletrnicas com a Internet. O protocolo empregado o
RSCS (Remote Spooling Communication System).
BPS - Bits Per Second (bytes por segundo) - Medida da taxa de transferncia real de dados de uma linha de
comunicao. Variantes ou derivativos importantes incluem KBps (= 1000 Bps) e MBps (= 1000 000 Bps).
Browser - Programa que realiza a comunicao com um servidor HTTP e recebe recursos atravs da Web,
interpretando e exibindo documentos HTML.
Bookmarks (marcadores de pginas favoritas). Lista de URLs importantes, marcadas pelo usurio para uma
provvel referncia futura.
Buttons So botes ou selos ilustrativos que fazem parte da programao visual do website.
Byte - Bytes so grupos de 8 dgitos binrios (bits). Um bit a menor unidade de informao matemtica que um
computador pode manipular. As palavras bits e bytes so sempre empregadas quando se fala sobre computadores.
Referem-se ao modo pelo qual os computadores armagenam e usam os nmeros. Normalmente representamos os
nmeros com dez smbolos diferentes (0, 1, 2, 3, 4, 5, 6, 7, 8 e 9), o que chamamos sistema de base 10 ou sistema
decimal. J os computadores, para toda a sua prestidigitao matemtica, precisam de apenas dois smbolos (0 e 1),
o que chamamos de sistema binrio. com um bit que o computador representa esses dois smbolos, ou dgitos.
Computadores so instrumentos eletrnicos; tudo o que realizam feito com sinais ou impulsos eltricos. Um
nico impulso pode ter duas opes: estar "presente" (on) ou "ausente" (off). Este o princpio que permite
representar nmeros com impulsos. Hoje em dia ouvimos muito falar de HDs com 40GBytes, memria RAM de
32MBytes e etc. Mas em termos de tamanho o que elas representam? Aqui segue uma tabela com suas respectivas
unidades & valores.

UNIDADES &
VALORES UNIDADE
CORRESPONDE A
1 byte 8 bits
1 kilobyte (KByte) 1024 bytes
1 megabyte (MByte) 1024 kilobytes
1 gigabyte (GByte) 1024 megabytes
1 terabyte (TByte) 1024 gigabytes
1 petabyte (PByte) 1024 terabytes
1 exabyte (EByte) 1024 petabytes
1 zettabyte (ZByte) 1024 exabytes
1 yottabyte (YByte)
1024 zettabyte

C
Cavalo de tria - Conhecido tambm como back orifice, um arquivo que quando executado abre uma
determinada porta de sua mquina fazendo com que terceiros possam ter acesso total e completo alm de fornecer
as senhas de seu computador, da net, etc,...
CERN - Laboratrio Europeu de fsica de partculas com sede em Genebra, Sua. O primeiro prottipo do
WWW foi desenvolvido no CERN por Tim Berners-Lee.
CERT - (Computer Emergency Response Team). Organismo criado em 1988 pela Darpa, visando tratar questes
de segurana em redes, em particular na Internet.
CCITT - Acrnimo de Comit Consultatif Internationale de Telegraphie et Telephonie, um rgo da
International Telecommunications Union (ITU) das Naes Unidas que define padres de telecomunicaes. Em
1993, foi extinto e suas atribuies passaram para o ITU-TSS, Telecommunications Standards Section da ITU.)
CGI - Interface de programao que permite que um servidor HTTP tenha permisso para rodar programas na
mquina servidora, de acordo com instrues dadas pelo cliente.
Cliente - Um dos lados de uma arquitetura cliente-servidor. o lado que l, solicita e recebe informaes
utilizando um protocolo de comunicaes. O cliente Web (protocolo HTTP) o browser.
Compactao / Compresso - Compactar os dados para ocupar menos espao de armazenamento ou menos
tempo para o envio/recepo do arquivo.
Contador - Programa CGI que conta o nmero de acessos a uma determinada pgina.
Cookies - So arquivos contendo informaes como nome e preferncias dos visitantes de um website. Esta
informao fornecida por cada internauta em sua primeira visita ao site. O servidor do site visitado regista a
informao num arquivo e armazena este arquivo no disco rgido do internauta. Quando o internauta retorna ao
site, o servidor procura e acha o cookie e se auto-configura de acordo com a preferncias indicadas por cada
internauta.
Correio Eletrnico (E-mail) - Sistema de transmisso de documentos e mensagens entre pessoas atravs do
uso de computadores.
Criptografar - Converter arquivos num cdigo particular, impossibilitando que outras pessoas tenham acesso a
informao.
CSS - Cascading Style Sheets ou Folhas de Estilo Encadeadas, o nome de uma tecnologia criada para
complementar a linguagem HTML e facilitar a criao e manuteno de sites na Web. Sua primeira verso ou
CSS1 foi lanada em Dezembro de 1996 e um modelo simples de formatao, na maior parte para apresentaes
screen-based. O CSS1 tem aproximadamente 60 propriedades. A verso CSS2, lanada em Maio de 1998, foi
desenvolvida sobre o CSS1 e, alm de incluir todas as propriedades do CSS1, possui por volta de 70 propriedades
novas. Ambos os padres CSS1 & CSS2 so reconhecidos pelo W3C (World Wide Web Consortium), entidade
que cuida do desenvolvimento e padronizao das tecnologias ligadas Web.

D
Default - Condio assumida. Consiste nos parmetros padro de um aplicativo quando os mesmos no so
configurados pelo webmaster.
Descritor - Um rtulo usado para marcar textos com elementos HTML. Um descritor consiste de um elemento
HTML e zero ou mais atributos entre < e >. Quando usados para marcar texto, possuem um descritor inicial, com
os possveis atributos e um final, com o elemento de mesmo nome precedido de "/". Exemplos:
<IMG src="figura.gif"><a href="http://www.w3.org"> W3C </a>
Dial - (Discar). Quando voc faz a conexo com o seu provedor, o seu modem precisar "discar" para ele, para que
possa ter acesso s informaes ali contidas ou prpria Internet.
Dial-In - Designao de um tipo de ligao ou do ato de ligao Internet, neste caso pelo estabelecimento de
uma chamada telefnica - dial - para um outro computador atravs de um modem.
Dial-Up - (Discador). Programa que efetua a discagem via modem para algum nmero que possua outro modem
para receber a chamada.
DHTML - O DHTML (Dynamic Hyper Text Markup Language) no uma linguagem mas sim um conjunto de
tecnologias que juntas disponibilizam as ferramentas necessrias para tornar o HTML mais dinmico. Essas
tecnologias so:
HTML (Hyper Text Markup Language): A conhecida linguagem baseada em tags para a construo de
pginas web estticas.
CSS (Cascading Style Sheets): Conhecida como folhas de estilo, essa tecnologia permite controlar a
formatao dos diversos elementos que compem uma pgina web.
CSS Positioning: Permite a alterao do posicionamento de um elemento da pgina como textos e imagens
dinamicamente, atravs de uma linguagem client scripting.
Client scripting: Trata-se de um pequeno programa, que ser interpretado pelo browser do cliente e no no
servidor. Algumas linguagens de scripting que podem ser utilizadas so JavaScript e VBScript.
DOM (Document Object Model): Trata-se do modelo de objetos (com suas propriedades e mtodos) que so
expostos ao programador DHTML. Atravs do envio de mensagens a estes objetos, o programador pode explorar a
interatividade com o usurio.
Porm o DHTML no apresenta boa compatibilidade entre os browsers. Na verdade no existe um padro para o
DOM, que o centro dessa tecnologia. Tanto a Microsoft como a Netscape j suportam esse padro a partir das
verses 4.0 de seus browsers, mas cada uma com seu modelo de objetos. Logo, o cdigo client scripting deve ser
escrito de acordo com o browser destino, a menos que se faa uso das propriedades protegidas, que so um
subconjunto das funcionalidades comuns a ambos os browsers.
Domnio - uma parte da hierarquia de nomes de grupos ou hosts da Internet, que permite identificar as
instituies ou conjunto de instituies na rede. Sintaticamente, um nome de domnio da Internet consiste de uma
seqncia de nomes separados por ponto, por exemplo, colibri.hq.rnp.br. Neste caso, dentro do domnio hq.rnp,
o administrador do sistema pode criar diferentes grupos como info.hq.rnp ou staff.hq.rnp, conforme ele desejar.
Domnio pblico - Programa disponvel publicamente, segundo condies estabelecidas pelos autores, sem
custo de licenciamento para uso. Em geral, o software utilizvel sem custos para fins estritamente educacionais, e
no tem garantia de manuteno ou atualizao. Um dos grandes trunfos da Internet a quantidade praticamente
inesgotvel de software de domnio pblico, com excelente qualidade, que circula pela rede.
Downtime - a quantidade de minutos e horas por ms nos quais o provedor fica fora do ar para manuteno
tcnica preventiva e corretiva.
DNS - O Domain Name System, um servio e protocolo da famlia TCP/IP para o armazenamento e consulta a
informaes sobre recursos da rede. A implementao distribuda entre diferentes servidores e trata
principalmente da converso de nomes Internet em seus nmeros correspondentes.
Download - Consiste no processo de se transferir uma cpia de um arquivo em um computador remoto para outro
computador atravs da rede; o arquivo recebido gravado em disco no computador local. O computador de onde os
dados so copiados subentendido como "maior" ou "superior" segundo algum critrio hierrquico, enquanto o
computador para o qual os dados so copiados subentendido "menor" ou "inferior" na hierarquia. O sentido literal
, portanto "puxar para baixo".

E
E-mail - Correio eletrnico; Endereo de correio eletrnico.
Emoticon - Ver smiley.
Elemento HTML - Um identificador utilizado em descritores para marcar um texto com HTML. Exemplos: A,
IMG, H1, P, APPLET. Veja Descritor.
Endereo IP Endereo usado para localizar uma mquina na Internet. O endereo em forma de nome
(www.localidade.com, por exemplo) traduzido para seu endereo IP (151.191.14.2, por exemplo) antes que possa
ser acessado. Se o servidor que faz a traduo (servidor DNS) estiver fora de operao, no ser possvel encontrar
a localidade pelo nome.
Ethernet - Um padro muito usado para a conexo fsica de redes locais, originalmente desenvolvido pelo Palo
Alto Research Center (PARC) da Xerox nos EUA. Descreve protocolo, cabeamento, topologia e mecanismos de
transmisso.

F
FAQ - Acrnimo de Frequently Asked Questions, documento com perguntas e respostas sobre determinado
assunto, em geral voltado para leigos. Contrape-se a RFC's.
FDDI - Acrnimo de Fiber Distributed Data Interface, um padro para o uso de cabos de fibras ticas em redes
locais (LANs) e metropolitanas (MANs). A FDDI fornece especificaes para a velocidade de transmisso de
dados (alta, 100 Mbps), em redes em anel, podendo, por exemplo, conectar 1000 estaes de trabalho a distncias
de at 200 Km.
Finger - Servio Internet que permite obter informaes sobre usurios de uma mquina.
Firewall - (Parede de Fogo) Sistema de segurana de rede, cujo principal objetivo filtrar o acesso a uma rede.
Follow-Up - Resposta a um artigo de news com outro artigo de news, mantendo o mesmo tema de discusso.
FQND - (Fully Qualified Domain Name). Nome de domnio completo, tudo aquilo que est direita do smbolo
de @ num endereo eletrnico, sem que se omita qualquer parte (inclui geralmente a designao do pas, da
instituio e de um computador, pelo menos).
Frame veja Quadro.
Freenet - Uma mquina na Internet que dedicada a acesso pela comunidade sem cobrana de nenhuma taxa. O
acesso fornecido atravs de bibliotecas pblicas ou acesso dial-up. Oferece servios de BBSs, correio eletrnico e
acesso (restrito, em geral) a Internet.
Freeware - Programa disponvel publicamente, segundo condies estabelecidas pelos autores, sem custo de
licenciamento para uso. Em geral, o software utilizvel sem custos para fins estritamente educacionais, e no tem
garantia de manuteno ou atualizao. Um dos grandes trunfos da Internet a quantidade praticamente
inesgotvel de software de domnio pblico, com excelente qualidade, que circula pela rede.
FTP - File Transfer Protocol. Protocolo utilizado para transferir arquivos em uma rede TCP/IP.
Folha de Estilos - Documento ou conjunto de propriedades que alteram a apresentao grfica (fontes, layout,
cores, margens, espaamento) de uma pgina.
Full-Duplex - Quando a informao circula em ambas as direes pela linha de dados. Por exemplo: ao conversar
na Internet, se tivermos uma placa de som full-duplex poderemos falar e ouvir nosso interlocutor ao mesmo tempo.
FYI - Acrnimo de For Your Information (FYI), um sub conjunto das RFCs com contedo consideravelmente
menos tcnico.
G
GIF - abreviao de Graphics Interchange Format, desenvolvido pela CompuServe para transmisso de
imagens por linhas discadas. Este formato usa codificao LZW (Lempel-Ziv and Welsh) para comprimir imagens
e assim reduzir tempos de transmisso. Imagens que seguem este formato so armazenadas em arquivos de
extenso .gif. Os formatos GIF mais recentes so os GIF87a e GIF89a.
Gif transparente - o arquivo gif que mimetiza sua cor de fundo com a cor de fundo do site.
Gigabyte - (GB), Equivalente a 1000 Megabytes.
GNU - (GNU's Not Unix). Associao filantrpica que pretende promover o desenvolvimento de softwares de
todos os tipos, desde Sistemas Operacionais a compiladores, comparveis ao Unix, s que gratuitos.
Gopher - Protocolo utilizado para comunicao com bancos de informaes organizadas atravs de listas de
tpicos encadeadas (servidores Gopher).
Gov - Sufixo dos endereos eletrnicos utilizados por organizaes governamentais de todo o mundo. Exemplo:
fazenda.gov.br.
Gritar - Quando voc se comunica na Internet usando letras maisculas (principalmente no bate-papo), seu
interlocutor entender que voc est "gritando".

H
Hiperlink - Ligao hipertexto. Voc clica e remetido para outro local, outra parte do mesmo documento ou de
outro documento. So as palavras que aparecem sublinhadas e/ou em outras cores nos textos dentro da Web.
Indicam que podem ser clicadas e levaro a algum link.
Hipermdia - Utilizao do conceito de hipertexto para criar vnculos com recursos multimdia. a mdia que
inclui grficos, sons e vdeos.
Hipertexto - Formato de arquivo no qual o texto possui vrios links. O texto pode ser lido de forma no
seqencial (como se voc fosse lendo e pulando as folhas de um livro para frente e para trs). o formato usado na
Internet.
Hoax - Consiste em qualquer tipo de boato disseminado atravs de e-mail ou aplicativos de mensagens
instantneas com notcias falsas sobre qualquer assunto, como por exemplo, alertas sobre vrus inexistentes,
campanhas para arrecadar fundos para instituies falsas ou mensagens absurdas ou infundadas com o propsito de
assustar o internauta calouro. Uma caracterstica do hoax que no final da mensagem sempre vem aquela frase
"Ajude a divulgar esta notcia" ou "A cada e-mail enviado a instituio sei-l-das-quantas receber tantos
centavos", etc.
Host - Computador da rede que desempenha funes centralizadas, colocando arquivos e programas disposio
das estaes de trabalho. Servidor.
Hot List - Semelhante aos Bookmarks (marcadores de pgina). Organizam uma lista de URLs de locais visitados
relevantes para o usurio que as escolheu.
Home Page - (Pgina na Internet ou Pgina Web). Todo o conjunto das pginas de um site na Internet. Nome
genrico dado a um ou mais arquivos HTML interligados entre si, contendo alguma informao e acessveis na
World Wide Web atravs de um browser.
HotJava browser desenvolvido pela Sun que foi o primeiro a suportar applets Java. Foi o grande responsvel pela
popularizao da linguagem Java. Antes dele, as pginas Web eram estticas e pouco interativas.
HTML - Acrnimo de Hyper Text Markup Language. Linguagem de marcao baseada em SGML utilizada para
publicar informaes na WWW.
HTTP - Acrnimo de Hyper Text Transfer Protocol (Protocolo de transferncia de Hipertexto). O HTTP o
protocolo usado para a transmisso de dados no sistema World Wide Web. Cada vez que voc aciona um link, seu
browser realiza uma comunicao com um servidor da Web atravs deste protocolo.
Hyper Text Markup Language
COMANDOS
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z !
<A> Insere uma ncora para uma ligao de hipertexto.
HREF Referncia de hipertexto.
NAME Determina o ponto de destino do hipertexto.
TARGET Abre uma nova janela com o hipertexto indicado.
TITLE Cria um quadro com descrio do hipertexto.
<ACRONYM> Apresenta um quadro com o texto explicativo sobre o acrnimo.
TITLE Esplanao sobre o acrnimo.
<ADDRESS> Destaca em itlico o autor do documento HTML.
<APPLET> Inclui um programa executvel em Java na pgina.
CODE Informa o nome do arquivo executvel.
CODEBASE Informa o caminho para o arquivo executvel.
NAME
ALIGN
ALT
HSPACE
VSPACE
HEIGHT
WIDTH
<AREA> Define coordenadas para imagens mapeadas.
SHAPE Define a geometria da rea mapeada.
COORDS Estabelece as coordenadas.
HREF Informa a URL que deve ser carregada.
NOHREF
Permite que a rea selecionada no acione nenhum
link.
<B> BOLD FACE - Texto em negrito.
<BASE> Indica a URL absoluta onde est armazenado o documento.
HREF Inclui uma URL absoluta.
TARGET Estabelece um quadro que ser destino.
<BGSOUND> Executa um arquivo de som.
SRC Especifica o endereo do arquivo de som.
LOOP
Determina quantas vezes o arquivo ser
executado.
<BIG> Formata o texto aumentando o tamanho da letra.
<BLINK> Texto pulsante.
<BLOCKQUOTE> Destaca um bloco de texto.
<BODY> Contm o corpo do documento HTML.
ALINK Configura a cor do texto do link j visitado.
BACKGROUND
Especifica um arquivo gif/jpg como papel de
parede.
BGCOLOR Define uma cor de fundo.
BGPROPERTIES Mantm o papel de parede fixo no fundo da tela.
LEFTMARGIN Define um espao entre a borda esquerda e o texto.
LINK Configura a cor do texto do link.
SCROLL
Define se a pgina ter ou no as barras de
rolagens.
TEXT Configura a cor do texto.
TOPMARGIN Define um espao entre a borda de topo e o texto.
VLINK Configura a cor do link ativo.
<BR> Break Line - Quebra de linha.
<CAPTION> Legenda da tabela.
ALIGN Controla a posio da legenda.
<CENTER> Alinha um objeto no centro horizontal da pgina.
<CITE> Citao (Geralmente em itlico).
<CODE> Formata o texto com largura fixa.
<COMMENT> Inclui um comentrio no cdigo fonte.
<DD> Marca a definio do termo numa lista ordenada.
<DEL> Texto riscado.
<DFN> Formata o texto em itlico.
<DL> cria um sub-item numa lista ordenada.
COMPACT Especifica uma formatao compacta.
<DT> Marca o texto como sendo de definio de um glossrio.
<DIV> Aplica um efeito a um objeto.
<EM> Grifo (geralmente em itlico).
<EMBED> Executa um arquivo de vdeo ou de som.
ALIGN Alinha o texto esquerda, direita, topo e base.
BORDER Insere e determina a espessura de uma borda.
FRAMEBORDER Configura uma moldura sem borda.
HEIGHT Determina a altura da janela.
HIDDEN Determina se o plug-in visvel na pgina.
HSPACE Especifica as bordas horizontais.
NAME Especifica o nome do applet.
PALLETE Formata a paleta do plug-in.
PLUINSPACE Especifica o endereo para instalao do plug-in.
VSPACE Especifica as bordas verticais.
TYPE Determina o tipo de MIME da tag Embed.
WIDTH Determina a largura da janela.
<FONT> Formata da fonte.
SIZE Altera o tamanho da fonte.
COLOR Altera a cor da fonte.
FACE Define a tipologia da fonte.
<FORM> Define um ambiente para processamento de formulrio.
ACTION Define a URL do roteiro CGI.
METHOD Determina qual programa processar os dados.
ENCTYPE Define a forma de codificao do formulrio.
<FIELDSET> Cria uma moldura em torno do formulrio.
LEGEND Especifica uma legenda para a moltura.
ACCESSKEY Programa uma tecla para operar com ALT.
<FRAME> Define um quadro dentro de um FRAMESET.
ALIGN Ajusta o alinhamento do frame ou do texto.
FRAMEBORDER Ativa ou desativa a exibio de borda do frame.
SRC Informa a URL do documento que ser exibido.
NAME
Define um nome para o quadro referenciado por
<A>.
MARGINHEIGHT Espao vertical entre a borda e seu contedo.
MARGINWIDTH Espao horizontal entre a borda e seu contedo.
NORESIZE Impede o redimensionamento do quadro.
SCROLLING Determina se haver ou no uma barra de rolamento.
<FRAMESET> Define um conjunto de quadros.
COLS Define a largura ocupada por cada quadro.
ROWS Define a altura ocupada com cada quadro.
FRAMEBORDER Define a largura da borda dos quadros.
<H1> <H2> <H3> <H4> <H5> <H6> Seis nveis de cabealho.
ALIGN Alinhamento do cabealho.
STYLE Insere propriedades de estilo no cabealho.
<HEAD> Cabealho do arquivo HTML.
TITLE Ttulo do arquivo HTML.
ISINDEX
BASE Especifica o endereo base do URL.
LINK Relaciona o documento com outro.
META Adiciona metainformaes ao arquivo.
STYLE
Adiciona formatao de folha de estilo ao
documento.
<HR> Horizontal Rule Linha horizontal.
SIZE Define o tamanho da linha.
WIDTH Define a espessura da linha.
ALIGN Define a margem de alinhamento da linha.
NOSHADE Define uma textura slida a linha.
COLOR Define a cor da linha.
<HTML> Comando de abertura e fechamento do arquivo HTML.
VERSION Informa a verso do HTML usado.
LAN Determina em qual idioma o arquivo est escrito.
DIR Determina a direo do fluxo do texto.
<I> Italit Font - Coloca o texto em itlico.
<IFRAME> Define um frame embutido na pgina.
SRC Endereo do documento que ser exibido.
NAME Nome do frame.
WIDTH Define a largura do frame.
HEIGHT Define a altura do frame.
ALIGN Alinha o frame em relao a pgina.
FRAMEBORDER Insere uma borda no frame.
MARGINWIDTH Define uma largura para a margem.
MARGINHEIGHT Define uma altura para a margem.
SCROLLING Exibe ou no a barra de rolagem.
<IMG> Insere uma imagem no documento.
ALIGN Define o alinhamento da imagem.
ALT Cria um quadro com informaes sobre a imagem.
BORDER Permite criar e formatar a borda da imagem.
HEIGHT Define a altura da imagem.
HSPACE
Cria um espao horizontal entre a imagem e o
texto.
ISMAP Mapeamento da imagem controlado pelo servidor.
ONMOUSEOVER
ONMOUSEOUT
SRC Determina a URL do arquivo de imagem.
USEMAP Mapeamento da imagem controlado pelo usurio.
VSPACE Cria um espao vertical entre a imagem e o texto.
WIDTH Define a largura da imagem.
<KBD> Formata o texto com uma largura fixa.
<LI> List Item - Item de lista.
<LINK> Estabelece ligaes da pgina com outros documentos.
HREF Indica o endereo para o qual o link aponta.
REL Explica a relao desse documento com o outro.
METHODS Indica o mtodo usado para acessar o documento.
TITLE Ttulo do documento ao qual o link faz referncia.
<MARQUEE> Cria efeito de movimento ao objeto.
ALIGN Alinhamento do objeto.
BEHAVIOR O objeto desapare ou no em uma das margens.
BGCOLOR Cor de fundo.
DIRECTION Direo do movimento.
HEIGHT Altura do painel.
HSPACE Largura das margens esquerda/direita.
LOOP Quantas vezes o efeito ir se repetir.
SCROLLAMOUNT Quantidade de pixel utilizada no movimento.
SCROLLDELAY Tempo de deslocamento do objeto.
VSPACE
Determina a margem superior e inferior do
marquee.
WIDTH Especifica a altura do painel.
<MAP> Comando de chamada de rea mapeada.
NAME Rotula o mapa com um nome.
<NOBR> Evita que o texto seja quebrado em mais de uma linha.
<NOFRAMES> Informa ao browser que ele no suporta recursos de frame.
<NOSCRIPT> Executa uma rotina quando o browser no reconhece script.
<OL> Ordered List - Lista ordenada.
TYPE Define o tipo de numerao.
START Indica o valor onde a contagem deve comear.
<OPTION> Cria os itens de uma lista de seleo criado pelo comando SELECT.
SELECTED Marca a opo selecionada.
VALUE Varivel a ser enviada.
<P> Paragraph - Pargrafo.
ALIGN Alinhamento do pargrafo.
STYLE Formatao de CSS.
<PARAM> Fornece parmetros para um applet.
NAME Informa o nome do parmetro.
VALUE Informa o valor do parmetro.
<PRE> Preformatted Text - Texto pr-formatado.
WIDTH Informa a largura em colunas.
<Q> Citaes curtas.
CITE Informa a fonte da citao.
<S> Texto riscado.
<SAMP> Texto monoespaado.
<SELECT> Habilita a entrada de dados atravs da seleo de itens de um menu de opes.
NAME Nome da varivel.
SIZE Determina um tamanho fixo para a lista.
MULTIPLE Permite seleo de mais de uma opo.
<SMALL> Formata a fonte em tamanho reduzido.
<SPAN> nfase definida por folha de estilo.
STYLE Propriedades de Folha de Estilo.
<STRIKE> Texto riscado.
<SCRIPT>
LANGUAGE Define a linguagem utilizada.
SRC Carrega um arquivo externo ao documento
<STRONG> Texto em negrito.
<SUB> Texto sub-escrito.
<SUP> Texto sobre-escrito.
<TABLE> Declara a formatao de uma tabela.
BACKGROUND Imagem de fundo.
BORDER Borda da tabela.
BORDERCOLOR Cor das bordas.
BORDERCOLORDARK Cor de sombra das bordas.
BORDERCOLORLIGHT Cor da luz das bordas.
CELLSPACING Espao entre as clulas.
CELLPADDING Espao entre o texto e as bordas da clula.
FRAME Define tipos de borda da tabela.
HEIGHT Altura da tabela.
RULES Define tipos de bordas para as clulas.
SUMMARY
Cria um comentrio no cdigo fonte da
tabela.
WIDTH Largura da tabela.
<TBODY> Formata o corpo da tabela.
<TEXTAREA> Cria uma rea editvel.
NAME Nome da varivel.
ROWS Nmero de linhas exibidas.
COLS Nmero de colunas exibidas.
<TFOOT> Formata o rodap da tabela.
<TD> Clula da tabela.
ALIGN
Alinhamento horizontal do contedo da
clula.
BACKGROUND Textura de fundo.
COLSPAN Avano em colunas.
NOWRAP Clula de tamanho fixo.
ROWSPAN Avano em linhas.
VALIGN Alinhamento vertical do contedo da clula.
WIDTH Largura da clula.
<TH> Ttulo interno centralizado e em negrito.
<THEAD> Formata o cabealho da tabela.

<TITLE> Exibe o ttulo do documento HTML.
<TR> Table Row - Linha da tabela.
ALIGN
Alinhamento horizontal do contedo da
clula.
CHAR Caracter de alinhamento.
CHAROOF Deslocamento do caracter de alinhamento.
VALIGN Alinhamento vertical do contedo da clula.
<TT> Teletype Text - Texto teletipo.
<U> Underlined Type - Texto sublinhado.
<UL> Unordered List - Lista no ordenada.
TYPE Define o tipo de marcao da lista.
<WBR> Word Break - Quebra de texto.
<VAR> Varivel.
<!DOCTYPE> Informa a verso do HTML usado.
 Insere comentrio no cdigo fonte do arquivo HTML.
Elementos Estruturais

!Doctype
Html
|__ Head
|__ Body (ou Frameset)
Comment
<!doctype html public "-//ietf//dtd html 3.2//en" -->
Este descritor no faz parte do HTML. S deve aparecer uma vez no incio do documento para
informar a verso do HTML usado. A maioria dos browsers no reclamam a falta desse descritor, mas seu uso
recomendado pela especificao pois facilita a validao e o uso por outros browsers no futuro.

<HTML atributos> ... </HTML>
o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser
envolvidos por ele.
Atributos opcionais:
VERSION="verso"
Informa a verso do HTML usado.

LAN="idioma"
Determina qual idioma o arquivo est escrito. A verso 4 do HTML aceita todas as designaes das lnguas
pertencentes ISO-639.
<HTML LANG="en-US">
...o corpo do arquivo...
</HTML>
No exemplo acima estou declarando que o arquivo HTML est no idioma Ingls Americano. Porm os idiomas diferem
de muitas maneiras quanto aparncia impressa, tais como, tipos de caracteres, fluxo direcional e uma infinidade de
peculiaridades principalmente nos idiomas orientais.

DIR="RTL | LTR"
Determina a direo do fluxo do texto: RTL da direita para a esquerda, LTR da esquerda para a direita. Exemplo:
<HTML LANG="HE" DIR="RTL">
...este um arquivo HTML formatado para o idioma Hebraico...
</HTML>
Esta pgina formatada com DIR="RTL" ficaria assim: Observe que at a barra de rolagem vertical inverteu o
sentido passando para o lado esquerdo do monitor.

<HEAD atributos> ... </HEAD>
Contm o cabealho do documento HTML tambm conhecido como Meta Tag que consiste numa
coleo no-ordenada de informaes sobre o documento para fins de classificao e indexao. As informaes
contidas entre <HEAD> e </HEAD> no aparecem na pgina visualizada. Aqui est o cabealho do arquivo
index.htm de minha homepage. Nele contm o ttulo, E-mail, autoria, palavras chaves, descrio e linguagem. Estas
so as informaes necessrias para identificao da pgina atravs dos mecanismos de busca da Rede.
<HEAD>
<TITLE>Tutorial HTML Edaurelio</TITLE>
<LINK REV=made href="mailto:edaurelio@hotmail.com">
<META NAME="author" CONTENT="Eloy Dorival Aurelio">
<META NAME="keywords" CONTENT="HTML, html, edaurelio, glossario,
www, glossrio, tutorial, curso, comandos">
<META NAME="description" CONTENT="Curso de HTML, bsico &
avanado,
guia de comandos, glossrio. Mais de 3MBytes de informao">
<META NAME="language" CONTENT="Portuguese">
<META NAME="ROBOTS" CONTENT="all, follow">

</HEAD>
Outros comandos especificados dentro de <head> so: ISINDEX, BASE, NEXTID, e LINK.

<BODY atributos> ... </BODY>
Contm o corpo do documento HTML, a parte que aparece na rea de visualizao do browser. Os
atributos alteram a cor ou imagem de fundo (papel de parede) e as cores do texto e links.
Atributos:
BACKGROUND="URL"
Contm a URL da imagem que cobrir o fundo da rea de visualizao do documento.
<BODY BACKGROUND="imagens/sol.jpg">
O arquivo de imagem, sol.jpg, que utilizei como fundo vai se repetir tantas vezes quanto for necessrio para cobrir
toda a tela. Este processo recebe o nome de tiling ou "lado a lado".
Exemplo
BGCOLOR="#rrggbb" ou "nome"
Indica um nmero em hexadecimal ou um nome que define a cor de fundo. O nome uma das 16 cores
universalmente conhecidas (padro VGA do Windows):
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow.
Tabela de Cores
TEXT="#rrggbb" ou "nome"
Configura a cor de texto sendo que o padro preto (text="#000000").
LINK="#rrggbb" ou "nome"
Configura a cor de texto do link, sendo que o padro azul (link="#0000FF").
ALINK="#rrggbb" ou "nome"
Configura a cor do link j visitado, o padro o vermelho (alink="#FF0000").
VLINK="#rrggbb" ou "nome"
Configura a cor do link ativo, sendo que a cor padro vermelho prpura (vlink="#800080").
HOVER="#rrggbb" ou "nome"
Configura a cor do link quando o cursor estiver sobre ele. Sua cor opcional.
BGPROPERTIES="fixed".
Mantm o papel de parede fixo no fundo da tela, impedindo que o ele role junto com o contedo da pgina.
LEFTMARGIN="n".
Define o tamanho, em pixels, do espao entre o incio do texto e a borda esquerda da rea de visualizao do browser.
TOPMARGIN="n".
Define o tamanho, em pixels, do espao entre o incio do texto e a borda superior da rea de visualizao do browser.
SCROLL="yes | no | auto".
Este atributo define se a pgina ter as barras de rolagens horizontal e vertical. Onde "yes" SEMPRE apresentar as
barras mesmo que a pgina no precise, "no" NUNCA apresentar as barras mesmo que a pgina precise e "auto"
apresentar as barras automaticamente caso a pgina venha a precisar delas. No exemplo a seguir configurei
SCROLL="no", isso , ele ir apresentar uma pgina sem as barras.
Exemplo
Qualquer dvida sobre o emprego da sintaxe basta olhar o cdigo fonte deste exemplo. NOTA: Este atributo s
funciona no browser Internet Explorer.

BLOQUEANDO O CDIGO FONTE
Uma maneira de dificultar o acesso ao cdigo fonte de seu arquivo HTML desabilitar os comandos de
seleo e menus acionados pelo mouse. Aqui esto os dois atributos utilizados para isso:
oncontextmenu="return false"
Desabilita o menu acionado atravs do boto direito do mouse.
onselectstart="return false"
Desabilita o recurso de seleo feito com o boto esquerdo do mouse pressionado sobre o texto.
Estes dois atributos de eventos devem ser colocados dentro de BODY do arquivo HTML que voc quer proteger.
Agora vamos ao exemplo prtico:
<BODY oncontextmenu="return false" onselectstart="return false">
Agora tente selecionar o texto ou acionar o menu de comandos com o boto direito do mouse. Viu! Aumentei o grau de
dificuldade de acesso ao cdigo fonte, porm... tratando-se de Copyright, nada est seguro na WEB. Para burlar este
artifcio bastaria copiar minha pgina para seu HD e depois abri-la com o WordPad e pronto! Isso assustadoramente
simples!! Pior ainda saber que os browsers Netscape & Opera sequer reconhecem essa proteo.


Um artifcio muito utilizado por programadores o comentrio, ou seja, aquelas notas de pgina,
informaes de copyright que s devem ser vistas por quem for bisbilhotar o cdigo fonte. Tudo o que for escrito entre
o  ser ignorado pelo browser e no ser mostrado na tela. Ele pode ser usado em qualquer lugar do
documento.
Agora vamos retornar aquele exemplo de <HEAD>...</HEAD> (cabealho) e identifique um comentrio da Starmedia
inserido nele. [Ver]. Outro comando com funo similar o <COMMENT> ...</COMMENT>.
ELEMENTOS DO CABEALHO

head
|__ Title
|__ Meta
|__ Link
|__ Isindex
|__ Base
<TITLE> ... </TITLE>
O ttulo <TITLE> o nico elemento obrigatrio do bloco do cabealho. Ele exibe o ttulo do
documento que aparece geralmente, fora da pgina, na barra de ttulo do browser. O ttulo deve conter informaes que
descrevam o documento. No deve ser excessivamente longo nem muito curto a ponto de no conter informao
suficiente. O exemplo a seguir o ttulo usado nesta pgina:
<TITLE>Elementos do cabecalho</TITLE>
Agora observe o seu canto superior esquerdo, esse ttulo est l. Portanto <TITLE> contm informaes que descrevem
o documento.
Pode conter: texto simples. No pode conter outros elementos.

<ISINDEX atributos>
Ativa uma janela que permite a entrada de palavras-chaves para a realizao de pesquisa e localizao,
precedida pela mensagem:
"This is a searcheable index. Enter search keywords:"
Atributo opcional:
PROMPT="mensagem"
Permite usar mensagem alternativa (em vez da mensagem default em ingls). Exemplo:
<ISINDEX PROMPT="Este um ndice de pesquisa. Entre com palavras-chave: ">

<BASE atributos>
Especifica o endereo base do URL onde est armazenado o documento.
Principais Atributos:
HREF="URL".
Entre as aspas deve-se incluir uma URL absoluta. Exemplo:
<BASE HREF="http://www.qualquer.lugar/base/">
TARGET="nome".
Entre as aspas deve-se incluir o nome de um alvo (quadro ou janela) que ser destino de todos os links da pgina.
Exemplo:
<BASE TARGET="frame1">

<LINK atributos>
Usado para relacionar o documento com outro (geralmente com ndices, glossrios, informaes sobre
o autor, etc.). Pode tambm ser usado para mesclar uma folha de estilos com uma pgina.
Atributos:
HREF="URL".
Entre as aspas deve-se incluir um URL absoluta (endereo/nome do arquivo) ou relativa (s o nome de arquivo), caso
ambos os arquivos estejam no mesmo diretrio.
REL="nome".
Explica a relao desse documento com aquele especificado pelo URL.
METHODS="string".
Indica o mtodo empregado para acessar o documento ao qual foi feita a referncia.
TITLE="string".
Ttulo do arquivo ao qual o URL faz referncia (o ttulo identifica o contedo do arquivo).
Nota: String = grupo de caracteres, letras ou nmeros (abcdefgh... 123456...)
Como exemplo de aplicao desse comando observe o barra personalizada desta pgina. Ela foi configurada atravs da
mesclagem de um arquivo de folha de estilo. O parmetro de mesclagem :
<LINK REL="STYLEsheet" HREF="matrix.css" TITLE="Barra personalizada">
Este parmetro inserido dentro do comando <HEAD>...</HEAD> da pgina HTML onde o efeito deve acontecer.
O arquivo matrix.css, que se encontra no mesmo diretrio desta pgina (e por isso usei o URL relativo), onde est
configurado as cores da barra.
Sintase do arquivo matrix.css
BODY { scrollbar-face-color: #C02420;
scrollbar-highlight-color: #ffd700;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #8b4513;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #cd853f;
scrollbar-darkshadow-color: #8b4513; }

ONDE CORRESPONDE A COR
scrollbar-face-color Cor da barra #C02420
scrollbar-highlight-color Cor do sombreamento interno superior #ffd700
scrollbar-shadow-color Cor do sombreamento interno inferior #000000
scrollbar-3dlight-color Cor do sombreamento externo superior #8b4513
scrollbar-arrow-color Cor da seta #000000
scrollbar-track-color Cor da faixa de rolagem #cd853f
scrollbar-darkshadow-color Cor do sombreamento externo inferior #8b4513

Mais outro exemplo bem prtico da aplicao da tag LINK. Quem possui o Internet Explorer v5x tem visualizado um
iconezinho personalizado que aparece na barra de favoritos. Aqui vou explicar como ele criado e inserido em sua
homepage para que aparea na barra de favoritos.
O primeiro passo adquirir um aplicativo criador de cones que so os "arquivos.ico". Eu crio
os meus cones usando o Icodraw, um programinha simples e prtico com 71,9Kbytes de
tamanho.
Ou talvez queira procurar algum outro nos sites de downloads relacionados abaixo.
ICONDRAW
Uma vez criado o seu cone, copie-o no diretrio onde est hospedada a sua homepage. Depois s colocar um
comando de acionamento do cone entre <HEAD>...</HEAD> de sua pgina de abertura (index.htm). Como
exemplo vou mostrar minha prpria pgina. O cone que coloquei foi esse:
Dragao.ico
A sintaxe que est dentro da seo <HEAD> do meu arquivo index.htm essa:
<LINK REL="SHORTCUT ICON" HREF="http://orbita.starmedia.com/~edaurelio/Dragao.ico">
Observe que neste exemplo o URL que est dentro de HREF o absoluto, ou seja, o endereo est completo. Agora
faa um teste, v para HOME de minha pgina e salve-a em favoritos (desde que seu browser seja o Internet Explorer
v5x) e ele aparecer l.
Pronto!

<META atributos>
Os Meta Tags ou Meta-informaes ou Meta-dados consistem em blocos de informaes sobre
a sua pgina que so utilizadas pelo servidor HTTP. Quando voc est fazendo uma pesquisa na Rede e coloca uma
ferramenta de busca para localizar uma palavra (ou grupo de palavras), ele ir fazer uma varredura nas metatags de
todas as pginas online e apresentar uma relao de documentos encontrados baseados na(s) palavra(s) que voc
digitou.
Embora uma pgina funcione perfeitamente bem sem as metatags esse seria um pssimo negcio para quem quer
conquistar seu espao na Rede, pois sua pgina ser relegada ao anonimato absoluto pelos robs de search engines
(ferramentas de busca) no aparecendo na relao de documentos encontrados. Percebeu a importncia delas?
As meta tags devem ser especificadas entre os comandos <HEAD> </HEAD> do arquivo HTML. Elas so
compostas de duas partes: NAME (identificador) e CONTENT (contedo). Aqui esto as metatags mais
importantes com suas respectivas sintaxes e, como exemplos, estarei apresentando as referncias de minha pgina, para
um melhor entendimento.
NAME="...".
Contm o nome da varivel que est sendo criada, e que deve ser atribuda a um contedo da opo CONTENT.
robots
Esta, sem dvida a tag mais importante pois ser atravs dela que a sua homepage ser localizada ou no. Existem
softwares que realizam varreduras na Rede com o propsito de localizar e relacionar determinados termos digitados
pelo internauta, estes softwares so conhecidos como robots ou spiders. Aqui esto as opes que voc deve
configurar em CONTENT. Voc pode escolher, no mximo, duas (desde que elas no possuam funes inversas,
evidentemente, tais como CONTENT="index, noindex").
index - Far com que a pgina SEJA indexada, (default).
noindex - Far com que a pgina NO SEJA indexada.
follow - Far com que os links da pgina SEJAM pesquisados e indexados, (default).
nofollow - Far com que os links da pgina NO SEJAM pesquisados.
all - Far com que a pgina SEJA indexada, bem como todos os seus links.
none - Far com que a pgina NO SEJA indexada, bem como todos os seus links.
Exemplo: <META NAME="robot" CONTENT="index, follow">
revisit-after
Essa metatag determina uma data para que o robot atualize sua indexao em relao a pgina. Assim, quando voc
atualizar a pgina o robot no apresentar o index antigo. Exemplo:
<META NAME="revisit-after" CONTENT="10 days">
keywords
Contm uma lista de palavras-chaves, associadas a homepage que sero lidas pelos mecanismos de busca antes de
apresenta-lo na relao que o internauta procura. Geralmente usada para adicionar sinnimos e alternativas para as
palavras do ttulo. Exemplo:
<META NAME="keywords" CONTENT="HTML, edaurelio, curso, tutorial, comandos, www, glossrio">
description
Apresenta uma descrio do contedo da homepage. usado pelas ferramentas de busca para descrever a sua
homepage. Exemplo:
<META NAME="description" CONTENT="Curso de HTML, bsico & avanado, guia de comandos, glossrio
WWW. Mais de 1,7MBytes de informao">
author
Identifica o autor da homepage. Exemplo:
<META NAME="author" CONTENT="Eloy Dorival Aurlio">
generator
Indica o tipo de editor que criou a sua pgina HTML. Exemplo:
<META NAME="generator" CONTENT="WordPad, Windows 98">
copyright
Apresenta informaes sobre direitos autorais. Exemplo:
<META NAME="copyright" CONTENT="copyright 2001 Edaurelio">
Essas metatags so alinhadas dentro do cabealho em ordem aleatria..
HTTP-EQUIV="...".
Tambm conhecidas como Variveis de Sistema, as Metas Tags com esse parmetro possibilitam criar pginas
dinmicas que enviam instrues ao browser e promove seu auto-recarregamento (tcnica client pull) ou captura de
arquivos de imagens que recarregam automaticamente sem que seja necessrio a interferncia do usurio.
CONTENT="...".
Contm o valor do cabealho. Vrios exemplos de aplicao do parmetro "CONTENT" exibidos nos exemplos
abaixo.
email
Declara o seu E-mail. Exemplo:
<META HTTP-EQUIV="email" CONTENT="edaurelio@hotmail.com">
city
Apresenta o nome de sua cidade. Exemplo:
<META HTTP-EQUIV="city" CONTENT="Sao Paulo">
state
Apresenta o nome de seu estado. Exemplo:
<META HTTP-EQUIV="state" CONTENT="Sao Paulo">
category
Declara a categoria do seu site. Exemplo:
<META HTTP-EQUIV="category" CONTENT="Internet/didtico">
refresh
Recarrega a pgina num perodo de tempo estipulado pelo CONTENT=segundos. Tambm pode abrir uma pgina
diferente. Exemplo:
<META HTTP-EQUIV="refresh" CONTENT="30; URL=imagem2.htm">
Abaixo voc poder ver este recurso funcionando no slide de fotos.
cache-control
A diretiva Cache-Control com o valor "no-cache" faz com que o controle de cache do browser no armazene a pgina
no diretrio de cache. Exemplo:
<META HTTP-EQUIV="control-cache" CONTENT="no-cache">
control-language
Define para o browser qual o idioma utilizado da pgina. O cdigo da lngua est definido na norma ISO 3166.
<META HTTP-EQUIV="control-language" CONTENT="br">
expires
Especifica a data e a hora, aps a qual, a homepage deve ser considerada obsoleta pelos robs de varredura da Web. A
data deve ser informada no formato GMT. Exemplo:
<META HTTP-EQUIV="expires" CONTENT="Mon, 31 Dec 2001 11:59:59 GMT">
URL=endereo
Indica o URL do documento.
Sintaxe do arquivo imagem1.htm:
<HTML>
<HEAD>
<TITLE>Imagens</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="30;
URL=imagem2.htm">
</HEAD>
<BODY BGCOLOR="#ffe4c4">
<CENTER><IMG SRC="../imagens/macaco_prego.jpg"
BORDER="0"></A></CENTER>
<CENTER>Arquivo imagem1.htm</CENTER>
</BODY>
</HTML>
Neste exemplo o comando META carrega (refresh), a cada 30 segundos (CONTENT="30;), o arquivo imagem2.htm
(URL=imagem2.htm...). O imagem2.htm, por sua vez, possui a sintaxe que carrega o imagem3.htm, e assim vai at o
imagem5.htm. Ento o imagem5.htm recarrega o imagem1 criando um looping de imagens. Para abrir a janela onde
aparece as imagens usei o comando IFRAME. Logicamente a sintaxe para carregar os demais arquivos de imagem
est em cada arquivo subsequente. tudo uma questo de enderear corretamente cada arquivo em URL=... para o
que se quer abrir.
FORMATAES

Nesta seo temos a formatao
de ttulos, cabealhos, pargrafos, espaamento do
texto, saltos de linha, endenao, centralizao de
objetos, formatao de diversos tipos de linhas,
algumas dicas e etc.
BODY
|__ H1 ao H6
|__ P
|__ ADDRESS
|__ BLOCKQUOTE
|__ PRE
|__ DIV
|__ CENTER
|__ HR
|__ ACRONYM

<H1, H2, ..., H6 atributos>...</H1, H2, ..., H6>
So disponveis seis nveis de cabealhos formando uma hierarquia descendente em tamanho.
Podem conter: texto; todos os elementos de formatao de caracteres; <A>, <IMG>, <BR>, etc.
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>, <CENTER>, <DIV>
Atributos:
ALIGN="center", "left", "right" ou "justify"
Alinha o cabealho no centro, esquerda (padro), direita ou pelas duas margens, respectivamente.
Exemplos:
CABEALHO COM TAMANHO H1
Os comandos de cabealho incluem uma linha antes e outra depois. Como pode ver no exemplo acima as tags <H1,
H2, H3, H4, H5, H6> apresentam apenas 6 tamanhos de cabealho sendo o <H1> o maior tamanho. Para conseguir
tamanhos maiores utilizamos os recursos da folha de estilo que irei mostrar a seguir:
STYLE="propriedades" Altera a apresentao do cabealho (cor, fonte, tamanho, sublinhado, estilo) de acordo
com uma lista de propriedades de estilo. Por exemplo:
Sintaxe:
<CENTER>
<h3 STYLE="color: navy; font-family: Helvetica, Sans-
serif;
font-SIZE: 50pt">Concluso</h3>
</CENTER>
Concluso
Formatou a palavra "Concluso" em azul marinho, fonte Helvetica ou, na ausncia desta, a fonte Sans-serif, com
50pt de tamanho.

<P atributos> ... </P>
P (Paragraph) - Pargrafo. Usado para separar blocos de texto (geralmente com o espao de uma
linha entre eles). O descritor de fechamento </P> opcional.
Pode conter: texto; todos os elementos de formatao de caracteres; <A>, <IMG>, <BR>
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>, <CENTER>, <LI>, <DD>, <DIV>
Atributos:
O comando <P> inicia um novo pargrafo onde o texto automaticamente alinhado pela margem esquerda da tela.
Atravs do parmetro ALIGN, pode-se mudar o alinhamento.
ALIGN="center", alinhamento pelo centro; "left" - alinhamento pela esquerda, (default),"right" - alinhamento
pela direita ou "justify" (justificado) - alinha o texto pelas duas margens. O modo justificado permite dar ao
pargrafo uma aparncia mais profissional e organizada, j que os textos ficam alinhados de maneira uniforme entre as
margens esquerda e direita. O pargrafo abaixo, em itlico, um exemplo de um texto ajustado com este comando.
<P ALIGN="justify">O nosso sertanejo muito supersticioso...
O nosso sertanejo muito supersticioso, da os arrepios de muitos quando ouviram, esta madrugada, um lobo que
passou uivando bem perto do acampamento. H uma lenda no serto, em que muitos crem: "Quem quiser conquistar
o que quer que seja, basta olhar a coisa desejada atravs do olho do lobo" coisa certa; no h como fugir!

STYLE="propriedades"
Formata o pargrafo (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de propriedades de estilo. Por
exemplo:
<P STYLE="color:006400; font-family: verdana, sans-serif;
font-STYLE: italic; font-SIZE: 11pt">O nosso sertanejo...
O nosso sertanejo muito supersticioso, da os arrepios de muitos quando ouviram, esta madrugada,
um lobo que passou uivando bem perto do acampamento. H uma lenda no serto, em que muitos
crem: "Quem quiser conquistar o que quer que seja, basta olhar a coisa desejada atravs do olho do
lobo" coisa certa; no h como fugir!
Formatou o pargrafo na cor verde escuro 006400, fonte Verdana ou, na ausncia dessa, a fonte Sans-serif em
itlico com tamanho 11pt. Mais detalhes na seo Folhas de Estilo.
No exemplo acima estou formatando apenas um pargrafo, os demais mantero a configurao padro (conforme pode
ver). Mas vamos supor que eu queira tornar essa configurao como formato padro em minha homepage, ento terei
que colocar a sintaxe abaixo entre as tags <HEAD>...</HEAD> da minha pgina HTML.
<STYLE TYPE="text/css">
<!- P { color: #006400; font-family: verdana, sans-serif; font-STYLE: italic; font-SIZE: 11pt; } ->
</STYLE>
Agora todos os pargrafos tero essa formatao.

LINHAS HORIZONTAIS <HR atributos>
Horizontal Rule - Rgua horizontal, usada como divisor de texto.
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>, <PRE>, <CENTER>, <DIV>
Atributos Opcionais:
SIZE="nmero"
Onde nmero indica a espessura da linha em pixels. Exemplos:
<HR SIZE="2">
<HR SIZE="4">
<HR SIZE="7">
<HR SIZE="15">
WIDTH="nmero"
Define a largura da linha: nmero pode ser um valor absoluto em pixels ou uma percentagem em relao a largura da
pgina (seguido de %). Exemplos em %:
<HR WIDTH="20%">
<HR WIDTH="40%">
<HR WIDTH="80%">
Exemplos em pixels:
<HR WIDTH="20">
<HR WIDTH="40">
<HR WIDTH="80">
ALIGN="left", "center" ou "right"
A linha, se tiver largura menor que a pgina (usando WIDTH) pode ser alinhada pela margem esquerda, pelo centro
ou pela margem direita, respectivamente. Exemplos:
<HR WIDTH="30%" ALIGN="left">
<HR WIDTH="50%" ALIGN="right">
NOSHADE
Especifica uma linha horizontal slida, sem sombreamento (o default a sombreada). Exemplos:
<HR NOSHADE SIZE="3">
NOTA: O browser Opera no reconhece o atributo NOSHADE.

COLOR="#rrggbb" ou "nome"
Determina uma cor para a linha. O default o cinza, exemplos:
<HR NOSHADE SIZE="3" color="red">
<HR NOSHADE SIZE="5" color="#00ff00">
<HR NOSHADE SIZE="8" color="#00ccff">
NOTA: Os browsers Netscape & Opera no reconhecem o atributo color.

LINHAS VERTICAIS
Na verdade no existe uma tag que cria uma linha vertical, assim como criamos a linha horizontal, o
que existe so alguns macetes que substitui esse comando. Vou apresentar dois recursos HTML para criar essas linhas:
PRIMEIRO RECURSO:
Se pegarmos o comando <HR> (rgua horizontal) e configurar seus atributos WIDTH para uma largura muito
pequena e SIZE para uma altura muito grande temos uma linha vertical, exemplos:
<HR WIDTH="2" SIZE="50">
Um problema com esse recurso que ele no funciona para linhas verticais maiores que SIZE="100", ou seja, sua
linha ter no mximo um tamanho igual ao exemplo da direita.
SEGUNDO RECURSO:
Agora vou aplicar o mesmo princpio (de afinar largura e alongar altura) em uma tabela, s que aqui os atributos de
configurao sero BORDER, CELLPADDING, CELLSPACING e HEIGHT. As linhas verticais criadas
com <TABLE> no tm limite de tamanho, exemplos:
<TABLE BORDER CELLPADDING="1"
CELLSPACING="0" HEIGHT="200">
<TR><TD></TD></TR></TABLE>
Uma demonstrao prtica da aplicao de linha vertical encontra-se em Colunas de texto e tambm em Grficos em
barras Agora vou acrescentar cor e espessura.
CELLSPACING="0" HEIGHT="200"
BGCOLOR="#006600">
BGCOLOR="#ff2400">
BGCOLOR="#0000c9">
Os exemplos acima criam linhas verticais livres, isso , desvinculada com qualquer objeto, mas podemos utilizar a tag
<TABLE> (tabela) para criar linhas vinculadas a objetos. Nos exemplos a seguir o texto ir determinar o
comprimento da linha.
<TABLE CELLPADDING=0><TR>
<TD WIDTH="1" BGCOLOR="#000000">
</TD><TD WIDTH="100"><CENTER>
Aqui est um exemplo de um texto
com uma linha preta e fina a sua esquerda.
</CENTER></TD> </TR></TABLE>
Aqui est um
exemplo de um
texto com uma
linha preta e
fina a sua
esquerda.
<TD WIDTH="100"><CENTER>
Outro exemplo de um texto com
uma linha verde e grossa a sua direita.
</CENTER></TD>
<TD WIDTH="7" BGCOLOR="#008000">
</TD></TR></TABLE>
Outro exemplo
de um texto
com uma linha
verde e grossa a
sua direita.
<TD WIDTH="3" BGCOLOR="#FF0000">
<TD WIDTH="100"><CENTER>
E finalmente um texto com linhas
vermelhas dos dois lados. </CENTER></TD>
<TD WIDTH="3" BGCOLOR="#FF0000">
</TD></TR></TABLE>
E finalmente
um texto com
linhas
vermelhas dos
dois lados.
Repare que para alterar a posio direita/esquerda da linha basta alterar a posio da "clula-linha" (em negrito) para
antes ou depois do texto. Para alterar cor e espessura das linhas basta configurar os atributos WIDTH e BGCOLOR
da clula. Para aprender mais sobre linhas verticais em tabela v para [Bordas com FRAME & RULES]

OUTROS SEPARADORES DE TEXTO
O comando de insero de imagens tambm pode ser usado como separador de texto, etc... Existem
muitos arquivos gif ou jpeg criados exclusivamente para isso. Para inserir um arquivo de imagem usamos o comando
<IMG SRC="arquivo.ext">.
<CENTER><IMG SRC="imagens/shambar2.gif"></CENTER>

<CENTER><IMG SRC="imagens/linha.gif"></CENTER>

<CENTER><IMG SRC="imagens/vizinhanca.gif"></CENTER>

<CENTER><IMG SRC="imagens/mabelT.gif"></CENTER>

<CENTER><IMG SRC="imagens/wink-bar.gif"></CENTER>
Os parmetros WIDTH=nmero e HEIGHT=nmero que altera a largura e altura da imagem pode causar
alguns efeitos interessantes:
<IMG SRC="imagens/barani09.gif" WIDTH=200>



<IMG SRC="imagens/bowline.gif" WIDTH=700 HEIGHT=20>

TEXTO PR-FORMATADO <PRE atributos> ... </PRE>
PRE (Preformatted Text) - Se voc digitar em uma fonte HTML vrios espaos em branco entre
duas palavras, de nada adiantar, o browser s reconhecer um. Uma das formas de resolver o problema usando os
tags <PRE>...</PRE>. O texto que estiver dentro deste elemento preservar a formatao original (o browser
interpretar os espaos, retornos e tabulaes). O texto pr-formatado exibido em uma fonte de espaamento fixo,
como Courier.
Pode conter: texto, elementos de formatao de caracteres, <A>, <BR>, <HR>
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>, <DD>, <LI>
Atributos:
WIDTH="..."
Opcional. Informa a largura em colunas.
Exemplo: Note que as prximas linhas possuem uma fonte de tamanho fixo:
O Texto Livre
Atravs do Ele possibilita a apresentao
comando PRE
posso posicionar
o texto em qualquer
lugar da tela do texto conforme
est inserido
no cdigo fonte.
NOTA: O browser Opera configura o texto entre <PRE> ... </PRE> para uma caixa maior. No exemplo acima, quem estiver com este browser ver o texto como algo semelhante a
caixa="4".

NON BREAKING SPACE - ESPAAMENTO FORADO
Ainda que o webmaster adicione dez espaos com a tecla [space] em seu cdigo fonte, o browser ir
considerar apenas um espao. Isso muito chato quando descobrimos que o texto teima em no ficar no lugar indicado
de uma coluna. Uma forma de impor espaamentos forados o conjunto de caracteres (non-breaking space).
Repita 3 vezes essa seqncia e voc ter trs espaos seguidos. Esta seria outra maneira de se adicionar espaos entre
as letras de um texto livre (sem a formatao de uma tabela). Exemplos:
SINTAXE RESULTADO
<P>1000,00<BR>
  903,00<BR>
&nbsp   21,00<BR>
&nbsp&nbsp    0,23
1000,00
903,00
21,00
0,23
Tambm posso usar o mesmo artifcio para o salto de linhas usando <p> aumentando o espaamento vertical
entre cada pargrafo. No exemplo abaixo coloquei trs linhas entre a primeira e a segunda frase.
Nada mudou. A noite chuvosa. S mudou o calendrio, que alis nunca tivemos. O serto
dispensa o compromisso com o calendrio, que inibe a criatura, que escraviza, que nos
empurra e nos refreia...

Hoje, domingo, a primeira hasteao da bandeira do novo ano foi feita com uma chuvinha
impertinente. Dissemos aos trabalhadores que o dia de hoje era em homenagem a todos os
povos do mundo. Era o dia de confraternizao dos povos.
A Marcha para o Oeste Orlando Villas Bas
Tabela de Caracteres Especiais

<Q atributo> ... </Q>
Tem a funo similar ao comando BLOCKQUOTE, mas usado para citaes curtas.
Atributo Principal
CITE=URL
Especifica a fonte da citao.
Exemplo: <Q CITE=url> texto...</Q>:

ENDENAO <BLOCKQUOTE> ... </BLOCKQUOTE>
Utilizado para destacar um bloco de texto aumentando a espessura de suas margens.
Pode conter: listas, cabealhos, separadores, blocos, formulrios, tabelas
Utilizado dentro de: <BODY>, <FORM>, <DD>, <LI>, <BLOCKQUOTE>, <PRE>
Observe o deslocamento das margens dir/esq. do segundo pargrafo que foi ajustado com o parmetro:
<BLOCKQUOTE> Realizamos hoje...</BLOCKQUOTE>
Estamos chegando ao fim do veranico. Hoje, 3 de fevereiro, amanheceu nublado. O rdio funcionou. Aproveitamos a
chance para enderear ao Coronel, no Rio, o seguinte rdio:
Realizamos hoje explorao area rio Ferro VG conforme combinado coronel PT Horrio tarde enviaremos notcias
sobre assunto PT Substituio Miguel consultamos possibilidade vinda primeiro conduo trabalhador Jos Valado
motivo diversos servios andamento campo VG serragem VG lavragem madeira PT Temos homem fora servio brao
deslocado PT Os Villas Bas PT
Outro exemplo da aplicao desta tag est em Usando figuras como marcadores.

<ADDRESS> ... </ADDRESS>
Bloco de texto destacado. Utilizado para endereos e para assinar o documento.
Pode conter: texto, elementos de formatao de caracteres, <IMG>, <BR>
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>
Sintaxe:
<ADDRESS>
Eloy Dorival Aurlio
edaurelio@ig.com.br
So Paulo - SP - Brasil
</ADDRESS>
Eloy Dorival Aurlio
edaurelio@ig.com.br
So Paulo - SP - Brasil

<DIV atributos> ... </DIV>
Divide a pgina em blocos que podem ser alterados de acordo com caractersticas comuns.
Pode conter: blocos, texto, <A>, <IMG>, <BR>
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>, <PRE>
Atributos:
ALIGN="center", "left" ou "right"
Alinha todo o bloco de acordo com a posio.
STYLE="propriedades"
Altera a apresentao do contedo do bloco (cor, fonte, tamanho, sublinhado, estilo, espaamento) de acordo com uma
lista de propriedades de estilo. Por exemplo:
sintaxe
<DIV STYLE="color: 005500;
font-family: Comic Sans MS;
font-SIZE: 12pt;
line-HEIGHT: 14pt">
Formata este pargrafo em...
</DIV>
Formata este pargrafo em verde lodo, fonte Comic Sans MS 12pt ou qualquer outra fonte sem serifa,
se Comic Sans no estiver disponvel com espaamentos entre linhas de 14pt.
Outros exemplos de aplicao desta tag esto em:
Bordas.
Filtro DropShadow.
Filtro Glow.
Fonte Tridimencional.
Linhas Tracejadas.
Posicionamento de Objetos.

<CENTER> ... </CENTER>
Alinha um bloco de texto, cabealho, tabela ou imagem no centro da pgina.
Pode conter: blocos
Utilizado dentro de: <BODY>, <FORM>, <BLOCKQUOTE>, <PRE>
Exemplos:
<CENTER><h1>O BRASIL</h1></CENTER>
O BRASIL

<CENTER><IMG SRC="imagens/cacto.gif"></CENTER>

<ACRONYM atributos> ... </ACRONYM>
Esta tag indica que o contedo envolvido por ela um acrnimo (uma abreviao formada pelas letras
(ou grupo de letras) iniciais de uma frase.)
TITLE - Este atributo apresenta a forma DESABREVIADA do acrnimo, tornando desnecessria a utilizao de
textos explicativos sobre a abreviao (geralmente apresentada entre parnteses). Exemplo:
<P>O <ACRONYM TITLE="Dynamic HyperText Markup Language">DHTML</ACRONYM> a principal
linguagem dos webmaster para criar websites.
Agora posicione o ponteiro do mouse sobre o acrnimo DHTML da frase abaixo.
O DHTML a principal linguagem dos webmaster para criar websites.
Apareceu uma janelinha explicando o que DHTML. Mas qual o nmero de caracteres que poderei colocar dentro
dessa janelinha? Fiz um teste com 100, 200 e 400 caracteres e conclui que o nmero deve variar de browser para
browser. O IEv6.0 aceita mais de 400 caracteres, j o Mozilla Firefox v0.9.2 apenas 67 caracteres.
100 caracteres 200 caracteres 400 caracteres
Porm existe um outro detalhe - a janelinha fica aberta apenas por volta de 5 segundos, se o ACRONYM tiver muitos
caracteres far com que o internauta tenha que abri-la diversas vezes para terminar sua leitura e isso no seria muito
prtico...
Listas
UL, OL
|____ LI
DL
|__DT
|__ DD
Outra forma de estruturar um documento HTML a utilizao de listas. Elas funcionam como um
sumrio, um menu ou um resumo do contedo do documento. Existem dois tipos de listas, as No ordenadas, que
contm uma srie de itens sem numerao, e as Ordenadas, que atribuem um nmero ou letra para cada elemento da
lista.

NO ORDENADA <UL atributos> ... </UL>
UL (Unordered List) o comando usado para gerar lista no ordenada. Ele deve envolver o primeiro e
o ltimo item da lista.
Pode conter: <LI>
Utilizado dentro de: <LI>, <DD>, <BODY>, <FORM>, <BLOCKQUOTE>, <TD>, <CENTER>
Atributo opcional:
type=disc, circle ou square.
Estrutura de uma lista tpica:
<UL type=square>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<UL>
<LI> Primeiro sub-item do segundo item
<LI> Segundo sub-item do segundo item
</UL>
<LI> Terceiro item da lista
</UL>
Primeiro item da lista
Segundo item da lista
Primeiro sub-item do segundo item
Segundo sub-item do segundo item
Terceiro item da lista

ORDENADA <OL atributos> ... </OL>
OL (Ordered List) - Consiste no comando para a lista ordenada de itens com nmeros, letras
maiscula ou minscula e algarismos romanos.
Pode conter: <LI>
TYPE=tipo-de-numerao, onde tipo-de-numerao descreve o formato de numerao empregado na lista. Pode ser
de letras:
type=A - Alfabeto maisculas;
type=a - Alfabeto minsculas;
type=I - Algarismos romanos maisculos;
type=i - Algarismos romanos minsculos ou
type=1 - numerao (default).
START=valor, onde valor o nmero no qual se inicia a contagem de numerao. Por exemplo: start=8 iniciaria a
contagem a partir de 8, viii, VIII, H ou h, dependendo do valor do atributo type.
Estrutura de uma lista tpica:
<OL TYPE=I START=8>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<OL type=a>
<LI> Primeiro sub-item do segundo item
<LI> Segundo sub-item do segundo item
</OL>
<LI> Terceiro item da lista
</OL>
VIII. Primeiro item da lista
IX. Segundo item da lista
a. Primeiro sub-item do segundo item
b. Segundo sub-item do segundo item
X. Terceiro item da lista

<LI atributos> ... </LI>
LI (List Item), item de lista. O descritor de fechamento opcional (em geral no utilizado).
Pode conter: outro nvel de listas (<UL>, <OL>, <DL>), texto, elementos de formatao de caracteres, blocos, <A>,
<IMG>, <BR>
Utilizado dentro de: <UL>, <OL>

<DL atributos> ... </DL>
Listas de definies.
Pode conter: <DT>, <DD>
Atributos:
compact; opcional. Especifica uma formatao compacta (que utiliza menos espao vertical)
Estrutura de uma lista de definies:
<DL>
<DT> Termo 1 <DD> Definies 1
<DL compact>
<DT> sub-termo 1 <DD> Definies 2.1
<DT> sub-termo 2 <DD> Definies 2.2
</DL>
</DL>

Termo 1
Definies 1
Termo 2
Definies 2
sub-termo 1
Definies 2.1
sub-termo 2
Definies 2.2
Termo 3
Definies 3

<DT atributos> ... </DT>
Marca o termo a ser definido. O descritor de fechamento opcional e em geral no utilizado.
Pode conter: texto, elementos de formatao de caracteres, <A>, <IMG>, <BR>
Utilizado dentro de: <DL>

<DD atributos> ... </DD>
Marca a definio do termo. O descritor de fechamento opcional e em geral no utilizado.
Pode conter: listas (<UL>, <OL>, <DL>, texto, elementos de formatao de caracteres, blocos, <A>, <IMG>, <BR>
Utilizado dentro de: <DL>

USANDO FIGURAS COMO MARCADORES
A combinao do comando <BLOCKQUOTE> com alguns gifs pode criar efeitos de marcao
elaborados, tambm. Exemplo:
<BLOCKQUOTE>
<IMG SRC="imagens/blue_ball.gif" ALIGN="middle"> - Captulo I<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/green_ball.gif" ALIGN="middle"> - Pargrafo<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/yellow_ball.gif" ALIGN="middle"> - Texto<BR>
</BLOCKQUOTE>
</BLOCKQUOTE>

<IMG SRC="imagens/blue_ball.gif" ALIGN="middle"> - Captulo II<BR>
<BLOCKQUOTE>
<BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>

<IMG SRC="imagens/blue_ball.gif" ALIGN="middle"> - Captulo III<BR>
<BLOCKQUOTE>
<BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
- Captulo I
- Pargrafo
- Texto
- Captulo II
- Pargrafo
- Texto
- Captulo III
- Pargrafo
- Texto
TABELAS I

A tabela surgiu pela primeira no HTML na verso 3.2 e
seu propsito foi melhorar o layout da pgina oferecendo
recursos para posicionar seus textos e imagens semelhante as
pginas dos jornais e revistas.
<TABLE>
|__<TR>
| |__
<TH>
| |__
<TD>
|__
<CAPTION>
|__
<THEAD>
|__
<TBODY>
|__
<TFOOD>
Basicamente uma tabela composta por trs tags:
<TABLE>...</TABLE> - Este o elemento principal que estabelece os limites da tabela. Dentro dele esto todos os
demais elementos da tabela
<TR>...</TR> - Este elemento define a linha da tabela. Para uma tabela, por exemplo, ter 4 linhas este atributo deve
ser escrito 4 vezes.
<TD>...</TD> - Este define a clula da linha. Dentro das clulas podemos inserir o texto, imagens, formulrios e at
mesmo outra tabela.
A seguir est um exemplo de uma tabela simples montada com estas 3 tags. Observe que para criar duas linhas tive que
repetir o conjunto <TR>...</TR> duas vezes. Para criar 3 clulas em cada linha repeti o conjunto <TD>...</TD> 3
vezes em cada linha. E finalmente um conjunto de <TABLE>...</TABLE> envolvendo toda a estrutura. S para
lembrar a barra "/" antes da tag representa o fechamento dela.
Sintaxe
<TABLE BORDER>
<TR>
<TD>L1, C1</TD>
<TD>L1, C2</TD>
<TD>L1, C3</TD>
</TR>
<TR>
<TD>L2, C1</TD>
<TD>L2, C2</TD>
<TD>L2, C3</TD>
</TR>
</TABLE>
Resultado
L1, C1 L1, C2 L1, C3
L2, C1 L2, C2 L2, C3
Agora vamos nos aprofundar um pouquinho mais.
<TABLE atributos> ... </TABLE>
TABLE o elemento principal que estabelece os limites de uma tabela. Ele pode conter os seguintes
atributos:
BORDER="valor"
Define uma borda para a tabela. Se este atributo no estiver presente, a tabela ser exibida sem bordas ou linhas
separando as clulas. Quando especificado BORDER sem nenhum valor, criada uma borda de 1 pixel de
espessura.
Sintaxe:
<TABLE>
<TD>Clula sem borda</TD>
Clula sem borda
</TABLE>
<TABLE BORDER>
<TD>Agora com BORDER = 1</TD>
</TABLE>
Agora com BORDER = 1
<TABLE BORDER="5">
<TD>Agora com BORDER = 5</TD>
</TABLE>
Agora com BORDER = 5

CELLSPACING="valor"
Controla o espaamento entre as clulas de uma tabela ou torna as bordas mais grossas, se elas existirem. Valor
absoluto em pixels.
Sintaxe:
<TABLE BORDER CELLSPACING="3">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER CELLSPACING="10">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE CELLSPACING="30">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

CELLPADDING="valor"
Controla a quantidade de espao entre o contedo da clula e suas bordas, estando elas visveis ou no. Valor absoluto
em pixels.
Sintaxe:
<TABLE BORDER CELLPADDING="10">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER CELLPADDING="30">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE CELLPADDING="50">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

WIDTH="valor" & HEIGHT="valor"
Permite especificar a largura e altura da tabela, seja atravs de um valor absoluto em pixels ou atravs de uma
percentagem da rea da pgina. Para percentagem, utilize o sinal "%" aps o nmero.
Os browsers Netscape v4.51 e Opera v5.02 no reconhecem os valores representados em %.
Sintaxe:
<TABLE BORDER WIDTH="60" HEIGHT="40">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula
1
clula
2
<TABLE BORDER WIDTH="60%" HEIGHT="40%">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
Reduza a janela do browser e observe o efeito que isso causa aos dois exemplos acima. O exemplo 1 mantm o seu
tamanho fixo, enquanto o exemplo 2 ajusta-se a % da janela reduzida.

BGCOLOR="#rrggbb" ou "nome"
Altera a cor de fundo da tabela ou apenas da clula conforme aonde ele for usado. Pode ser atravs do valor RGB ou
atravs de um dos 16 nomes padro VGA do Windows.
Sintaxe:
<TABLE BORDER BGCOLOR="#daa520">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER BGCOLOR="#b0c4de">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

BACKGROUND ="diretrio/nome do arquivo"
Coloca um arquivo de imagem como fundo da tabela ou da clula. Se o arquivo de imagem estiver no mesmo diretrio
do arquivo.htm onde a tabela exibida voc pode omitir o diretrio no endereo do BACKGROUND.
Sintaxe:
<TABLE BORDER BACKGROUND="imagens/textura01.jpe">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

BORDERCOLOR ="#rrggbb" ou "nome"
Altera a cor das bordas da tabela.
Sintaxe:
<TABLE BORDER BORDERCOLOR="#4682b4">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER BORDERCOLOR="red">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

BORDERCOLORDARK ="#rrggbb" ou "nome"
Altera a cor da sombra das bordas de toda a tabela ou de uma clula especfica.
Sintaxe:
<TABLE BORDER BORDERCOLORDARK="#4682b4">
<TR>
<TD BORDERCOLORDARK="#FF6600">clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER BORDERCOLORDARK="red">
<TR>
<TD BORDERCOLORDARK="#000000">clula 1</TD>
<TD BORDERCOLORDARK="#000000">clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

BORDERCOLORLIGHT ="#rrggbb" ou "nome"
Altera a cor da luz das bordas de toda a tabela ou de uma clula especfica.
Sintaxe:
<TABLE BORDER BORDERCOLORLIGHT="#4682b4">
<TR>
<TD BORDERCOLORLIGHT="#CC33CC">clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER BORDERCOLORLIGHT="red">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

TABLE ROW <TR atributos> ... </TR>
Linha de tabela. Todas as clulas so dispostas em linhas. O conjunto <TR>...</TR> deve se repetir
conforme o nmero que linhas que se deseja criar. Table Row pode conter os seguintes atributos:

ALIGN="left, right" ou "center"
Controla o alinhamento horizontal do contedo das clulas na linha. Para habilitar ALIGN configurei o espaamento
horizontal da tabela com o WIDTH="300", para que haja o deslocamento horizontal do texto.
Sintaxe:
<TABLE BORDER WIDTH="300">
<TR ALIGN="center">
<TD>Texto no</TD>
<TD>centro</TD>
<TD>da linha</TD>
</TR>
</TABLE>
Texto no centro da linha
<TR ALIGN="right">
<TD>Texto</TD>
<TD>todo</TD>
<TD> direita</TD>
</TR>
</TABLE>
Texto todo direita

VALIGN="baseline, bottom, top" ou "middle".
Controla o alinhamento vertical do contedo das clulas na linha. Para habilitar VALIGN configurei o espaamento
vertical da tabela com HEIGHT="100", para que haja o deslocamento vertical do texto.
Sintaxe:
<TR VALIGN="bottom">
<TD>Texto na</TD>
<TD>base da</TD>
<TD>linha</TD>
</TR>
</TABLE>
Texto na base da linha
<TR VALIGN="middle">
<TD>Texto no</TD>
<TD>meio da</TD>
<TD>linha</TD>
</TR>
</TABLE>
Texto no meio da linha

BGCOLOR="cor"
Define a cor de fundo da linha envolvendo todas as clulas que estiverem nela.
Sintaxe:
<TABLE BORDER=1 WIDTH=60%>
<TR BGCOLOR="#B0C4DE">
<TD>Cabana</TD>
<TD>Temimina</TD>
</TR>
<TR BGCOLOR="#DAA520">
<TD>Pescaria</TD>
<TD>Iluso</TD>
</TR>
</TABLE>

Cabana Temimina
Pescaria Iluso
NOTA: Cabana, Temimina, Pescaria e Iluso so nomes de grutas situadas no PETAR (Parque Ecolgico e Turstico
do Alto Ribeira), sul do Estado de So Paulo.

BORDERCOLOR="cor"
Define a cor da borda da linha.
BORDERCOLORDARK="cor"
Define a cor da sombra da borda da linha.
BORDERCOLORLIGHT="cor"
Define a cor da luz da borda da linha.
CHAR="caracter"
Define o caracter de alinhamento da clula que pode ser um ponto, uma vrgula ou caracteres tais como "=", "/", ":",
etc. No exemplo abaixo usei um ponto como caracter de alinhamento.
CHAROFF="nmero"
Define o deslocamento do caracter de alinhamento da clula.
<TABLE>
<COLGROUP ALIGN=char CHAR="." CHAROFF="35%">
<TR><TD>880.76</TD></TR>
<TR><TD>7.032</TD></TR>
<TR><TD>13.48</TD></TR>
<TR><TD>542.23</TD></TR>
</COLGROUP>
</TABLE>

880.760
7.032
13.480
542.230
Este seria o efeito de alinhamento de uma tabela formatada com CHAR & CHAROFF se os browsers Internet
Explorer, Opera e Netscape fossem compatveis com estas tags, porm tive que simular o efeito com espaos vazios
para apresentar este exemplo. Ainda no entendi como esses browsers, que j esto em suas respectivas verses 7.0,
no aceitam algumas tags do HTML v4.01 (que foi lanado em 1999...).

TABLE DATA <TD atributos> ... </TD>
Clula de dados da tabela. Pode conter texto, listas, elementos de formatao de caracteres, blocos,
arquivos de imagem e tambm outras tabelas. Seus atributos so:
ROWSPAN=nmero
Especifica o nmero de linhas que a clula pode ocupar. O default 1.
Sintaxe:
<TR>
<TD ROWSPAN=2 ALIGN="center">Cabana</TD>
<TD>Temimina</TD>
</TR>
<TR>
<TD>Pescaria</TD>
</TR>
</TABLE>
Cabana
Temimina
Pescaria
COLSPAN=nmero
Especifica o nmero de colunas que a clula pode ocupar. O default 1.
Sintaxe:
<TR>
<TD COLSPAN=2 ALIGN="center">Cabana</TD></TR>
<TR>
<TD>Temimina</TD>
<TD>Pescaria</TD></TR>
</TABLE>
Cabana
Temimina Pescaria
Agora a combinao entre as duas:
Sintaxe:
<TR>
<TD COLSPAN=2 ALIGN="center">Cachoeira Seca</TD>
<TD>Fraquinha </TD></TR>
<TR>
<TD ROWSPAN=2 ALIGN="center">Cabana</TD>
<TD>Temimina</TD></TR>
<TR>
<TD>Pescaria</TD></TR>
</TABLE>
Cachoeira Seca Fraquinha
Cabana
Temimina
Pescaria

ALIGN=left, right ou center
Controla o alinhamento horizontal do contedo das clulas.
<TR>
<TD ALIGN="right">right</TD>
<TD ALIGN="center">center</TD>
<TD ALIGN="left">left</TD>
</TR>
</TABLE>
right center left

VALIGN=baseline, bottom, top ou middle
Controla o alinhamento vertical do contedo das clulas.
Sintaxe:
<TR>
<TD VALIGN="bottom">bottom</TD>
<TD VALIGN="middle">middle</TD>
<TD VALIGN="top">top</TD>
<TD VALIGN="baseline">baseline</TD>
</TR>
</TABLE>
bottom middle top baseline

NOWRAP
Atributo Booleano evita que haja uma quebra de linha dentro da clula (se includo significa verdadeiro, seno falso).
O termo booleano provm do nome do matemtico ingls George Boole (1815 / 1864), criador da lgebra booleana.
Este atributo, em conjunto com o atributo WIDTH, permite criar clulas com tamanho fixo. Assim quando o browser
redimensionado pelo usurio, as clulas tero sempre o mesmo tamanho ao invs de quebrar seu contedo em vrias
linhas. Abaixo segue duas tabelas comuns. A primeira configurada com NOWRAP e a segunda no. Aparentemente as
duas so iguais, porm minimize a janela do browser e observe como as duas reagem.
Esta uma tabela comum... com uma clula configurada COM o atributo NOWRAP.....
Esta uma tabela comum... com uma clula configurada SEM o atributo NOWRAP.....
Tabela com NOWRAP
<TABLE BORDER>
<TR>
<TD NOWRAP WIDTH="200" ALIGN="center">Esta uma tabela comum...</TD>
<TD NOWRAP WIDTH="200" ALIGN="center">com uma clula configurada</TD>
<TD NOWRAP WIDTH="200" ALIGN="center">COM o atributo NOWRAP.....</TD>
</TR>
</TABLE>
A sintaxe <TD NOWRAP WIDTH="200">...</TD> especifica uma clula de 200 pixels de largura cujo contedo
no pode ter quebra de linha (text wrapping).
O browser Opera v5.02 no suporta o recurso NOWRAP.

WIDTH=valor
Controla a largura da clula, seja atravs de um valor absoluto em pixels, seja atravs de uma percentagem em relao
largura da tabela.
width=10 width=80 width=120
<CENTER>
<TABLE BORDER>
<TR>
<TD WIDTH="10"> </TD>
<TD WIDTH="10">width=10</TD>
</TR>
</TABLE>
</CENTER>
No exemplo repare que embora eu tenha configurado a primeira e a
segunda clula com WIDTH=10, a segunda s diminuiu at o
limite da largura do texto (uma palavra) inserido nela. Se o texto
fosse uma frase ento haveria quebra de linhas (aumentando sua
altura) e a clula se ajustaria pelo tamanho da maior palavra. Este
mesmo critrio vale para HEIGHT, que ajusta a sua altura. Isso
quer dizer que no existem barras de rolagens (horizontal ou
vertical) em clulas de tabelas.
= Espao vazio

BGCOLOR="#RRGGBB"
Define uma cor de fundo para a clula. No exemplo abaixo estou apresentando uma configurao de cores completa
envolvendo TABLE, TR e TD.
Sintaxe:
<TABLE BORDER BGCOLOR="#228b22">
<TR BGCOLOR="#AFA790">
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
<TR>
<TD BGCOLOR="#87ceeb">clula 3</TD>
<TD BGCOLOR="#daa520">>clula 4</TD>
</TR>
</TABLE>
clula 1 clula 2
clula 3 clula 4
UMA DICA: Quando o texto no oferece um contraste muito bom com a cor de fundo basta posicionar o ponteiro
do mouse sobre o texto e clicar 3 vezes. Isso altera o contraste e facilita a leitura. Aproveite e faa um teste no
exemplo acima.

BACKGROUND="diretrio/nome do arquivo"
Define uma textura de fundo na clula.
Sintaxe:
<TABLE BORDER BACKGROUND="imagens/textura23.jpe">
<TR>
<TD BACKGROUND="imagens/textura01.jpe">clula 1</TD>
<TD BACKGROUND="imagens/fundo3.jpe">clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2

BORDERCOLOR
Altera a cor da borda de uma clula especfica dentro da tabela.
Sintaxe:
<TR>
<TD BORDERCOLOR="red">clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
<TABLE BORDER BORDERCOLOR="red">
<TR>
<TD>clula 1</TD>
<TD BORDERCOLOR="black">clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
BORDERCOLORDARK e
BORDERCOLORLIGHT
Tm a mesma funo que estes atributos em <TABLE> porm aqui eles so aplicados apenas em uma
clula. Os exemplos j foram apresentados acima.

Um tabuleiro de xadrez (ou dama) feito com tabelas. Nele configurei no TABLE: BORDER=7,
CELLSPACING="1"; e no TD: BGCOLOR="#ffffff"/"#000000", WIDTH & HEIGHT=30.
Olhe como ficou:

TITLE HEADING <TH atributos> ... </TH>
Este comando especifica um ttulo centralizado e em negrito para cada coluna.
Sintaxe:
<TR>
<TH>Ttulo 1</TH><TH>Ttulo 2</TH>
</TR>
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
Ttulo 1 Ttulo 2
clula 1 clula 2

<CAPTION atributos> ... </CAPTION>
Este elemento usado para especificar uma legenda tabela e sua tag deve seguir
imediatamente aps a TABLE inicial. S deve haver uma tag desse tipo na tabela.
Atributos:
ALIGN=top, (default) ou bottom
Controla a posio da legenda em relao a tabela.
Sintaxe:
<CAPTION ALIGN="top">Legenda no topo
<TR>
<TH>Ttulo 1</TH><TH>Ttulo 2</TH></TR>
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD></TR>
</TABLE>
Legenda no topo Ttulo
1 Ttulo 2
clula 1
clula
Sintaxe:
<CAPTION ALIGN="bottom">Legenda na base
Leg
<TR>
<TH>Ttulo 1</TH><TH>Ttulo 2</TH></TR>
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD></TR>
</TABLE>
end
a na
base
Ttu
lo 1
uCABEALHO, CORPO E RODAP DAS TABELAS

Vamos imaginar a seguinte situao: Quero criar uma tabela que possui muitas
clulas, distribudas em diversas linhas, sendo que algumas clulas tero uma formatao de cor
e texto diferentes que as demais. Eu no posso configurar <TABLE> porque, como falei, a clulas
possuem formataes diferentes e <TR> no aceita formatao para clulas individuais.
Nesse caso o jeito seria entrar em cada clula e inserir os parmetros, clula por clula...
Tudo bem, j fiz isso diversas vezes e com o auxlio do comando COPY fica at mais fcil. Porm
quando a tabela consideravelmente enorme, esse mtodo deixa de ser adequado, pois o excesso
de formatao alm de ser trabalhoso deixaria o arquivo desnecessariamente "pesado". Para
resolver este problema existem trs tags criadas exclusivamente para essa finalidade:
<THEAD>...</THEAD> - Formata o cabealho.
<TBODY>...</TBODY> - Formata o corpo.
<TFOOD>...</TFOOD> - Formata o rodap.
Elas foram criadas exclusivamente para facilitar a formatao dos mdulos da tabela.
Vamos supor que a tabela abaixo uma lista de preos de materiais enorme, com 80 itens!! A
borda (em TABLE) possuir uma formatao diferente que o seu ttulo, cabealho e rodap, que
por sua vez sero diferentes que o seu corpo. Configurar cada tem do ttulo, cabealho e
rodap at que seria simples, porm o corpo da tabela possui 240 clulas!!! Pois em cada item
possuo 3 clulas e como so 80 itens (3 x 80 = 240). Imagine acionar o comando COPY 240 vezes!!
Porm h quem faa, acredite!!...

<TABLE BORDER WIDTH="350" BGCOLOR="#DEB887">
<THEAD BGCOLOR="#4682B4" STYLE="font-weight:bold; color:#FFFFFF">
<TR>
<TD COLSPAN=5 ALIGN="center">LISTA DE MATERIAIS</TD>
</TR>
</THEAD>

<TBODY BGCOLOR="#B0C4DE" STYLE="font-family:verdana; font-size:13px">
<TR>
<TD WIDTH="25">ITEM </TD>
<TD WIDTH="150">DESCRIO</TD>
<TD WIDTH="50">QUANT.</TD>
</TR>
</TBODY>

<TBODY BGCOLOR="#ADD8E6" STYLE="font-family:verdana; font-size:13px">
<TR>
<TD>1)</TD>
<TD>caderno 200 folhas</TD>
<TD>R$12,00</TD>
</TR>

<TR>
<TD>...</TD>
<TD>...</TD>
<TD>...</TD>
</TR>

<TR>
<TD>80)</TD>
<TD>caneta hidrocolor</TD>
<TD>R$15,00</TD>
</TR>
</TBODY>

<TFOOT BGCOLOR="#4682B4" STYLE="font-weight:bold; color:#FFFFFF">
<TR>
<TD COLSPAN=5 ALIGN="center">
PAPELARIA FLORESTINA LTDA.</TD>
</TR>
</TFOOT>
</TABLE>

LISTA DE MATERIAIS
ITEM DESCRIO PREO
1) caderno 200 folhas R$12,00
... ... ...
80) caneta hidrocolor R$15,00
PAPELARIA FLORESTINA LTDA.

Formulrios
FORM
|__ INPUT
|__ SELECT
| |__ OPTION
|__ TEXTAREA
|__ FIELDSET
<FORM atributos> ... </FORM>
Define ambiente para processamento de formulrios. Os formulrios devem ser criados em paralelo
com o programa ou roteiro que o servidor HTTP utilizar para processar as informaes enviadas.
Pode conter: cabealhos, listas, blocos, tabelas, <SELECT>, <INPUT>, <TEXTAREA>
Utilizado dentro de: <BODY>,<DD>, <LI>, <BLOCKQUOTE>, <DIV>, <CENTER>
Atributos::
action="..."
Obrigatrio, a URL do roteiro CGI que processar os dados enviados no formulrio.
method="GET" ou "POST"
Obrigatrio, onde: method="GET" os dados sero enviados para o programa "survey". No method="POST" o programa
de navegao passa os dados para o programa "query".
<FORM ACTION="http://www.dsc.ufpb.br/cgi-bin/survey/" METHOD="POST">
<FORM ACTION="http://www.dsc.ufpb.br/cgi-bin/query/" METHOD="GET">
enctype=tipo
Opcional, define a forma de codificao do formulrio.
Valor default "application/x-www-form-urlencoded"
Aqui est um bom exemplo da aplicao do comando <FORM> com alguns dos seus atributos (que destaquei em
negrito). Estes so os parmetros da Ferramenta de Busca do Cad?, gentilmente cedido a este Tutorial.
Sintaxe:
<FORM METHOD=GET
ACTION="http://busca.cade.com.br/scripts/engine.exe">
<CENTER><HR>
<b>Consulta ao Cad? </b><input SIZE=30 maxlength=30 NAME=p1>
<input type=hidden name=p2 value=1><input type=hidden name=p3 value=1>
<INPUT TYPE=SUBMIT VALUE=Busca>
<HR></CENTER>
</FORM>
Agora vamos fazer um teste: Insira uma palavra e v se ele est funcionando.
Consulta ao Cad?
Busca
Mais exemplos com a aplicao de <FORM> esto em Botes

<INPUT atributos>
Habilita a entrada de dados que o usurio digita atravs de textos, botes de rdio ou listas de opes (checklists).
Utilizado dentro de: <FORM>
Atributos:
type="text" ou "password"
Habilita a entrada de dados atravs de texto. Se o valor de type for password, o texto digitado no aparecer na tela
mas em seu lugar aparecero asteriscos ou marcadores. O "password" aceita dados do tipo caractere.
Outros Atributos:
name="..."
Contm nome da varivel que receber o texto;
size="..."
Tamanho da janela para a entrada de texto em nmero de caracteres (default = 20 caracteres);
maxlength="..."
Comprimento mximo permitido para entrada de texto (se maxlength for maior que size, o texto deve rolar dentro da
janela;
value="..."
Contedo inicial da janela (o que vai aparecer escrito dentro dela).
submit
Este comando cria um boto que, ao ser acionado, envia os dados para o servidor, conforme o endereo especificado no
comando "form".
value="legenda"
Define a legenda do boto.
Exemplo:
<form action="url"method="post">Por favor, digite seu nome
<input type="texto" size=20 name="seunome">
<input type="submit" value="Enviar dados">
</form>
Por favor, digite seu nome
Enviar dados

type="radio"
Este comando cria campos do tipo boto de opo, que so associados a uma nica varivel. A escolha de um campo
desabilita os demais.
Outros Atributos:
name="..."
Nome do conjunto;
value="..."
Nome do elemento do conjunto.
checked
Opcional, marca o boto como previamente selecionado (default o primeiro da lista); O conjunto de botes de rdio
deve ter o mesmo campo name e campo value diferentes.
type="checkbox"
Habilita a entrada de dados atravs de listas de opes (possibilita a escolha de mltiplos itens em um conjunto).
Outros Atributos:
name="..."
Nome do conjunto (ou do elemento, se houver campo value);
value="..."
Nome do elemento.
checked
Marca a opo como previamente selecionada (default nenhuma seleo).
type="reset"
Cria um boto que, ao ser clicado, apaga o contedo de todos os campos.
Exemplo:
<form action="url"method="post">Escolha seu sabor:
<input type="checkbox" name="sabores" value="chocolate" Checked> Chocolate
<input type="checkbox" name="sabores" value="Creme"> Creme
<input type="checkbox" name="sabores" value="Morango"> Morango
<input type="reset">
</form>
Escolha seu sabor: Chocolate Creme Morango
Redef inir

type="hidden"
Define um campo invisvel, cujo contedo enviado junto com os demais. Utilizado para passar informao nos
campos name e value entre documentos sem exibi-los.
Outros Atributos:
name="..."
Nome da varivel.
value="..."
Valor da varivel;
type"image"
Recebe as coordenadas de um ponto selecionado em imagem includa no documento para processamento pelo
formulrio.
Outros Atributos:
name="..."
Nome da varivel (que receber as coordenadas x,y);
src="..."
URL onde se encontra a imagem;
align="..."
Alinhamento da imagem em relao ao texto. align pode assumir os valores top, bottom (default) ou middle da
mesma forma que no elemento <img>.

<SELECT atributos> ... </SELECT>
Habilita a entrada de dados atravs da seleo de itens limitados em um menu de opes.
Pode conter: <option>
Atributos:
name="..."
Nome da varivel;
size="nmero"
Este parmetro permite determinar um tamanho fixo para a lista, independente da quantidade de itens que ela possui.
No exemplo abaixo determinei que a lista exibir 5 campos, embora ela tenha 8.
Exemplo:
<select name="teste" size=5>
<option>campo 1
<option>campo 2
<option>campo 3
<option>campo 4
<option>campo 5
<option>campo 6
<option>campo 7
<option>campo 8
</select>

multiple
Permite seleo de mais de uma opo. Para selecionar vrios itens, mantenha a tecla Ctrl pressionada enquanto clica
sobre os itens desejados.
Exemplo:
<select name="teste" size=5 multiple>
<option>leite
<option>sal
<option>arroz
<option>farinha
<option>cebola
<option>aucar
<option>feijo
<option>leo
</select>

<OPTION atributos>
Especifica as opes do menu acionado atravs de SELECT. O rtulo de fechamento opcional e geralmente no
utilizado.
Pode conter: texto simples.
Utilizado dentro de:<SELECT>
Atributos:
selected
Marca a opo selecionada;
value="..."
Valor da varivel a ser enviado caso esta opo seja selecionada (texto contido no elemento default).
Exemplo:
Ocupao:
<select name="cargo">
<option>Analista Snior
<option selected>Programador Visual Basic
<option>Programador HTML
<option>Analista de Sistemas
</select>

Ocupao:

<TEXTAREA atributos> ... </TEXTAREA>
Define uma rea bidimensional editvel, para a edio e criao de texto.
Pode conter: texto simples
Atributos:
name="..." Nome da varivel;
rows="..." Nmero de linhas exibidas;
cols="..." Nmero de colunas exibidas. A rea exibida pode conter barras de rolamento para acomodar textos
maiores.
Exemplo:
Digite aqui suas crticas ou comentrios:
<textarea name="campo1" rows=5 cols=50> </textarea>
Digite aqui suas crticas ou comentrios:

ALINHANDO OS CAMPOS DO FORMULRIO
Um recurso prtico para alinhar os campos do formulrio o comando <pre>. Este comando formata
a fonte com tamanho fixo, possibilitando usar o recurso do espao para compensar o tamanho das palavras. Nos
exemplos abaixo segue primeiro um formulrio simples desalinhado, depois, o mesmo formulrio alinhado com a
compensao de espaos que o comando <pre> possibilita colocar.
Exemplos;
Digite seu nome: <input type="text" size=60 name="seunome">
Digite seu endereo: <input type="text" size=60 name="seuendereco">
Sua profisso: <input type="text" size=40 name="profissao">
Digite seu nome:
Digite seu endereo:
Sua profisso:
<pre>
Digite seu nome: <input type="text" size=60 name="seunome">
Digite seu endereo: <input type="text" size=60 name="seuendereco">
Sua profisso: <input type="text" size=40 name="profissao">
</pre>
Digite seu nome:
Digite seu endereo:
Sua profisso:

<FIELDSET atributos> ... </FIELDSET>
Este comando passou a operar na verso 4 do HTML. Ele cria uma moldura com um ttulo em torno de um campo,
deixando-o mais incrementado.
<legend>ttulo...</legend>
Especifica um ttulo para a moldura que envolve os campos.
accesskey=tecla
Especifica uma tecla que, quando pressionada juntamente com Alt, move o cursor para o campo correspondente.
<fieldset>
<legend>Ficha de Cadastro</legend>
<pre>
Empresa: <input type="text" size=60 name="empresa">
Endereo: <input type="text" size=60 name="endereco">
Telefone: <input type="text" size=30 name="telefone">
Fax: <input type="text" size=30 name="fax">
</pre>
</fieldset>
Ficha de Cadastro
Empresa:
Endereo:
Telefone:
Fax:

Formatao de Texto &
Caracteres
bloco
|__ Lgicos: TT, I, B, U, STRIKE,
|___________ BIG, SMALL, SUB, SUP
|__ Fsicos: EM, STRONG, DFN, CODE,
|___________ SAMP, KBD, VAR, CITE
|__ Efeitos: MARQUEE
Esses elementos so usados para destacar trechos de texto. Se dividem em elementos Lgicos, que
sugerem uma utilizao para o texto destacado (grifo, destaque, varivel, cdigo, etc.) e elementos Fsicos, que
sugerem uma formatao especfica para o trecho (negrito, itlico, etc.). A ao destes ltimos restringe-se
capacidade de visualizao do browser;
Todos podem conter: texto, elementos de formatao de caracteres, <A>, <IMG>, <BR>
So permitidos dentro de: cabealhos, elementos de formatao de caracteres, <A>, <PRE>, <P>, <LI>, <DD>,
<DT>, <TD>

ELEMENTOS LGICOS
<STRONG> ... </STRONG>
Destaque (geralmente negrito).
Este um texto rotulado com STRONG.
<EM> ... </EM>
Grifo (geralmente itlico).
Este um texto rotulado com em.
<CITE> ... </CITE>
Citao (geralmente itlico).
Este um texto rotulado com cite.
<VAR> ... </VAR>
Varivel (geralmente itlico).
Este um texto rotulado com var.
<SAMP> ... </SAMP>
Amostra (geralmente fonte de largura fixa).

Este um texto rotulado com
samp.
<KBD> ... </KBD>
Teclado (geralmente fonte de largura fixa).
Este um texto rotulado com kbd.
<DFN> ... </DFN>
Indica definio de uma palavra (geralmente
em itlico).
Este um texto rotulado com dfn.
<CODE> ... </CODE>
Quando se deseja mostrar cdigos de
programas em geral, e no se quer que o
browser interprete tais cdigos, usa-se esse tag
(geralmente fonte de largura fixa).
Este um texto rotulado com code.

ELEMENTOS FSICOS
<B> ... </B> Negrito. Este um texto formatado com bold.
<I> ... </I> Itlico. Este um texto formatado com itlico.
<TT> ... </TT> Teletipo.
Este um texto formatado com tt.
<U> ... </U> Sublinhado. Este um texto formatado com sublinhado.
<STRIKE> ... </STRIKE> Texto riscado Este um texto formatado com STRIKE.
<DEL> ... </DEL> Texto riscado
<S> ... </S> Texto riscado
<SUB> ... </SUB> Texto Subscrito. H
2
0, H
2
SO
4

<SUP> ... </SUP> Texto Sobrescrito. E = mc
2
, 20
o
C
<SMALL> ... </SMALL> Texto normal, agora texto escrito com small.
<BIG> ... </BIG> Formata o texto um
pouco maior que o normal. o oposto do
comando small.
Este texto est escrito com big.
<BLINK> ... </BLINK> Texto Pulsante. Faz com que o texto pisque
Os browsers Internet Explorer e Opera no reconhecem esse recurso.
Voc tambm pode usar vrios comandos de formatao ao mesmo tempo sobrepondo-os, sempre seguindo a lgica
LIFO, isto : A primeira tag a ser aberta, a ltima a ser fechada. Exemplos:
<b><i><u>Este texto est com bold, itlico e sublinhado.</u></i></b>
Este texto est com bold, itlico e sublinhado.
<tt><strike>Este texto est com teletipo riscado.</strike></tt>
Este texto est com teletipo riscado.

OBJETOS EM MOVIMENTO
Marquee uma propriedade que possibilita o efeito de rolamento de um objeto (texto, quadro ou
imagem) para a esquerda ou direita, para cima ou para baixo como tambm define sua velocidade. A sintaxe a
seguinte:
<MARQUEE atributo=efeito>objeto</MARQUEE>
ATRIBUTOS:
align="top", "middle", "bottom"
Alinha o texto pelo topo, meio e inferior, respectivamente.
behavior=scroll, slide, alternate
Scroll - Inicia o texto aparecendo de um lado e segue at desaparecer a ltima letra do outro.
Slide - Inicia o texto de um lado e segue at a primeira letra tocar o lado oposto, ento ele pra.
Alternative - Cria o efeito do texto aparecer de um lado e segue at tocar o lado oposto, ento ele retorna.
bgcolor="cor"
Especifica a cor de fundo. Pode ser pelo nome da cor ou atravs de seu cdigo RGB.
direction=left, right, up, down
Especifica a direo do texto, esquerda (default), direita, para cima e para baixo, respectivamente.
height="nmero", %
Especifica a largura do painel. Se for um nmero ele especifica a quantidade de pixels se for % ele especifica a largura
da janela do marquee em porcentagem.
hspace="nmero"
Especifica a largura em pixels das margens esquerda / direita.
loop="nmero", -1, infinite
Especifica quantas vezes ser executado a rolagem do texto, se o valor for -1 ou infinite, o texto rolar infinitamente.
scrollamount="nmero"
Especifica a quantidade de pixels que ser usada para deslocar o marquee, ou seja, quanto maior for o valor, maior ser
a velocidade de deslocamento.
scrolldelay="nmero"
Especifica em milissegundos o tempo de deslocamento do texto.
vspace="nmero"
Determina em pixels a margem superior e inferior do marquee.
width="nmero", %
O nmero especifica a altura do painel, % especifica a altura em relao a janela em porcentagem.
Exemplos:
Aqui configurei que um texto com fonte tamanho 5 (<font size="5px">) iria rolar numa faixa de 70% (width=70%)
da tela entre duas barras <hr>
<CENTER>
<HR WIDTH="80%">
<MARQUEE behavior=scroll width="70%">
<font size="5px"><b>No esquea de fazer back-up de seus arquivos.</b></font>
</MARQUEE>
<HR WIDTH="80%">
</CENTER>

Agora um exemplo com o texto rolando de baixo para cima direction="up" num quadro e de cima para baixo
direction="down" noutro quadro. Para isso criei uma tabela com duas clulas de 250px cada, width="250" e inseri
os quadros nelas. Abri o espao vertical com height="100" e diminui a velocidade de movimento das letras com
scrollamount="1" de forma que ela ir correr lentamente como na abertura de um filme. E finalmente inseri algumas
imagens tambm.
<CENTER>
<TABLE>
<TR>

<TD WIDTH="250">
<MARQUEE behavior=scroll width=250 height="100" direction="up" scrollamount="1">
<IMG SRC="imagens/3sun5a.gif" align="left">
<CENTER><I>Texto...</I></CENTER>
</MARQUEE>
</TD>

<TD WIDTH="250">
<MARQUEE behavior=scroll width=250 height="100" direction="down" scrollamount="1">
<IMG SRC="imagens/3sun6c.gif" align="left">
<CENTER><I>Texto...</I></CENTER>
</MARQUEE>
</TD>

</TR>
</TABLE>
</CENTER>

Aqui configurei uma cor de fundo (bgcolor="#dda0dd") com o texto em movimento alternado (behavior=alternate)
Sintaxe:
<marquee behavior=alternate direction=left bgcolor="#dda0dd">
<font size="5px"><b><i> muito fcil aprender HTML, 8-))</i></b></font>
</marquee>

Aqui combinei quatro conjuntos de marquee com rolagens em direes alternadas.
<marquee behavior=scroll direction=right width=50% bgcolor="#ff7f50">
<font color="#191970"><b>Agora quatro marquees combinados.</b></font></marquee>
<marquee behavior=scroll direction=left width=50% bgcolor="#ffa500">
<font color="#ff4500"><b>.combinados marquees quatro Agora</b></font></marquee>
<marquee behavior=scroll direction=left width=50% bgcolor="#ffa500">
<font color="#ff4500"><b>Agora quatro marquees combinados.</b></font></marquee>
<marquee behavior=scroll direction=right width=50% bgcolor="#ff7f50">
<font color="#191970"><b>.sodanibmoc seeuqram ortauq arogA</b></font></marquee>

Aqui aumentei a velocidade de rolamento do texto com scrollamount="30".
<marquee behavior=scroll direction=right scrollamount="30">
<font color="green"><b>Texto ajato para internautas com leitura dinmica.</b></font>
</marquee>

Neste exemplo configurei o rolamento de um texto com vrias linhas utilizando o comando <pre> para criar o efeito de
atraso de incio de cada linha.
<marquee behavior=scroll direction=left scrolldelay="150" vspace="20">
<font size="3" color="#ff00ff">
<pre><b>Agora bem devagarzinho...
Voc pode fazer efeitos
de movimento com vrias
linhas
tambm.</b></pre>
</marquee>

Agora configurei os rolamentos de texto dentro de uma tabela. Separei a sintaxe em mdulos para ficar mais fcil o
entendimento.
<center>
<table border="5" bgcolor="#ffd700" width="450">
<tr><td bgcolor="#00bfff">
<marquee behavior=scroll direction=left scrollamount="3">
<b>_#_#_#_#</b>
</marquee>
</td>
<td colspan=2 bgcolor="#9acd32">
<b>EXTRA!</b>
</marquee>
</td>
<td bgcolor="#f0e68c">
<b>EXTRA!</b>
</marquee>
</td></tr>
<tr>
<td colspan=4 bgcolor="#483d8b">
<marquee behavior=scroll direction=right scrollamount="3">
<font color="#ffffff">LTIMAS NOTCIAS!...</font>
</marquee>
</td>
</tr>
</table>
</center>

E finalmente a rolagem que um arquivo de imagem em movimento.
<marquee behavior=scroll direction=left scrolldelay="140" scrollamount="20">
<img src="imagens/borboleta.gif">
</marquee>
Humm!... S pra ficar mais bonitinho vou colocar umas florzinhas de fundo. Estou criando uma janela com o comando
<iframe> e dentro dessa janela estou jogando o arquivo flores1.htm com um background. A aplicao do comando
<iframe> est explicado em outra seo mas mesmo assim aqui vai a sintaxe:
<center>
<iframe src="flores1.htm" width="650" height="90" scrolling="auto" frameborder="1">
</iframe>
</center>
E aqui est o resultado. Ficou bonito, n?
Os browsers Netscape e Opera no aceitam esse recurso.

Elementos Especiais
A
IMG
HyperText Markup Language... O termo hypertext definido por texto que tem link para outros
textos. Os termos markup language definem anotaes para a estrutura de um texto. Sendo assim o que caracteriza
a estrutura HTML a sua propriedade de se ligar indefinidamente a outros documentos. E esta propriedade, devido a
sua grande importncia, deu origem ao acrnimo HTML.
Mas o que vem a ser um link? O link um canal, uma porta de conexo com outra pgina. Na barra de comandos no
topo desta pgina, por exemplo, existe uma srie de links que possibilita a interao desta com outras pginas desse site
ou de outros sites espalhados pela Rede. Os links podem ser:
relativos, absolutos, internos e externos

LINKS RELATIVO & ABSOLUTO
Link um termo ingls que quer dizer Ligao. Como o nome mesmo j diz, a funo do link ligar
dois documentos. O link pode ser Relativo ou Absoluto. O link relativo no especifica o caminho completo do
endereo do arquivo, j o link absoluto sim. Por exemplo aqui est o link relativo que direciona para o arquivo de
historia.htm, que est nesse mesmo diretrio, nesse mesmo servidor:
<A HREF="historia.htm">Histria</A>
Histria
Porm o seu endereo absoluto seria:
<A HREF="http://orbita.starmedia.com/~edaurelio/historia.htm">Histria</A>
Histria
Bem mais complexo!
Mas como o arquivo historia.htm, onde quero chegar, est no mesmo diretrio do mesmo servidor ento no preciso de
todo esse trabalho de digitao, apenas o nome do arquivo j basta. J o link absoluto usado para localizar arquivo
que est num servidor diferente, por isso seu endereo tem que estar completo.
O link tambm chamado de Hiperlink

LINKS INTERNO & EXTERNO
O Link Interno aquele que liga dois pontos em uma mesma homepage. Acima expliquei que o link
relativo no possua o endereo completo por estar apontando um endereo no mesmo diretrio, pois bem, todos os
links relativos so links internos.
O Link Externo aquele que cria uma ligao entre homepages diferentes e, por isso, um link absoluto (tem que
possuir o endereo completo). Todos os links externos so absolutos porm nem todos os links absolutos so externos.
O exemplo de um link absoluto (acima) um link interno.

<A atributos> ... </A>
O que uma ncora?
Uma ncora um ponto de referncia que marca o destino de um link interno. Eles so prticos quando uma homepage
possui muita informao. As ncoras criam pontos de ligao entre todos os tpicos abordados, organizando sua
estrutura e com isso otimizando sua navegao. Um exemplo prtico a seo Guia de Referncias que possui um
ndice remissivo ligado aos seus respectivos temas localizados em outros partes desta HP.
Para definir um link, utilizaremos o par de tags <A> </A>, cujo "A" vem de "Anchor" ("ncora" em ingls).
Vamos supor que dentro desta pgina eu queira criar um link para uma palavra que se encontra l no final (desta
pgina). Ento, nesta palavra, eu teria que colocar uma marcao, a ncora, para que o link a encontrasse. Portanto um
link possui dois comandos distintos: <A HREF="...">, comando de partida e <A NAME="#..."> comando de
chegada que possibilitam:
Saltos para pontos diferentes em uma mesma pgina ou
Saltos para pontos de uma pgina diferente no mesmo diretrio.
Em atributos vou explicar com alguns exemplos como eles funcionam.
ATRIBUTOS:
href="..."
De Hypertext REFerence ou referncia de hipertexto. Informa a URL, que pode ser um documento HTML, uma
imagem ou outro tipo de recurso. Como exemplo vou criar um link para outro site de HTML:
<A HREF="http://www.icmsc.sc.usp.br/manuals/HTML/index.html">Tutorial HTML ICMC-USP</A>
O resultado : Tutorial HTML ICMC-USP

name="..."
Este atributo estabelece o ponto de chegada nos saltos interligados do link. Por exemplo: Vou criar uma ligao (o link)
entre este ponto da pgina e um outro l embaixo no final. A palavra de ancora chamei de imgreduzidas e ela fica
uma linha antes da seo "CRIANDO UM DIRETRIO DE IMAGENS REDUZIDAS") . O smbolo # avisa o
browser para procurar o link no documento atual. A sintaxe :
<A HREF="#imgreduzidas">Diretrio de Imagens</A>
E a ncora de chegada (que est fixado no ponto de destino):
<A NAME="imgreduzidas"></A>
Agora d uma clicada em Diretrio de Imagens para ver o salto. O salto foi para aquele ponto especfico porque
coloquei uma ncora l.

target="_blank", "nome" ou "_top"
Especifica uma janela ou quadro que recebero a pgina ou recurso referenciado.
Se target="_blank", a pgina ser aberta em uma nova janela do browser.
<a href="a11.htm" target="_blank">Tabela de Caracteres Especiais</a>
Se target="nome" a pgina ser aberta dentro de um frame que possua o tal nome.
Vide um bom exemplo em Montando estruturas com frames onde nomeei um target como "ladodireito"
Se target="_top", a pgina ser aberta sobre a mesma janela do browser, ignorando qualquer organizao de frames.
<a href="a11.htm" target="_top">Tabela de Caracteres Especiais</a>

title="descrio"
Apresenta um quadro com a descrio do link quando o mouse posicionado sobre ele.
<a href="a11.htm" title="Cascading Style Sheets">CSS</a>
CSS
Outro exemplo de TITLE est em Botes com imagens.

LINKS SEM SUBLINHADO, AUTOMTICO, PISCANTE, OCULTO e ETC
LINK SEM SUBLINHADO
Este o link tradicional, que voc j conhece: Ferramenta TodoBR
<A HREF="http://www.todobr.com.br">Ferramenta TodoBR</A>
Ele, geralmente, se apresenta na cor azul e possui um sublinhado. Voc pode omitir esse sublinhado inserindo o
seguinte parmetro STYLE="text-decoration:none". Ento ele ficar assim: Ferramenta TodoBR
<A HREF="http://www.todobr.com.br" STYLE="text-decoration:none">Ferramenta TodoBR</A>
No exemplo acima eu estou tirando o sublinhado de um link especfico, "Ferramentas TodoBR", para fazer o mesmo
com todos os links da pgina basta inserir estes parmetros em qualquer lugar da pgina entre <BODY...> e
</BODY>
<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
</style>

LINK QUE MUDA O CURSOR
Quando voc sobrepe um link com o cursor ele muda a seta para uma mozinha com o dedo indicador apontado, esta
a condio default. Porm voc pode escolher qual figura deve aparecer em determinado link. Nos exemplos abaixo
eu configurei o primeiro com o cursor HELP (que apresenta uma seta com a interrogao) e o segundo com o cursor de
espera (com a ampulheta). Para descobrir os demais cdigos dos cursores v at [Alterando o formato do cursor]
<A HREF="http://www.todobr.com.br" style="cursor:help">Ferramenta TodoBR</A>
Ferramenta TodoBR
<A HREF="http://www.todobr.com.br" style="cursor:wait">Ferramenta TodoBR</A>
Ferramenta TodoBR

LINK AUTOMTICO
O link automtico consiste naquele que abre espontaneamente quando o mouse passa sobre ele, sem que seja necessrio
o internauta dar o clique. Sua sintaxe simples:
<A HREF="marcha.htm" onmouseover="parent.location='marcha.htm'">Marcha</A>
Agora passe o mouse sobre Marcha

LINK PISCANTE
Trata-se do link que fica alternando a cor da letra ou de fundo chamando mais a ateno do internauta. Exemplo:
Yahoo! BRASIL
Para criar esse tipo de link em sua HP existem duas etapas:
PRIMEIRO - Copie e cole o script abaixo antes da tag </BODY> de sua pgina.
<script>
// Flashing Link Dynamic Drive (www.dynamicdrive.com)
if (document.all&&document.all.flashlink){
var flashlinks=document.all.flashlink
if (flashlinks.length==null)
flashlinks[0]=document.all.flashlink
function changecolor(which,type,color){
if (type==0){
if (flashlinks[which].style.color!=color)
flashlinks[which].style.color=color
else
flashlinks[which].style.color=''
}
else if (type==1){
if (flashlinks[which].style.backgroundColor!=color)
flashlinks[which].style.backgroundColor=color
else
flashlinks[which].style.backgroundColor=''
}
}
if (flashlinks.length==null){
var flashengine='setInterval("changecolor(0,'+flashlinks[0].flashtype+',\''+flashlinks[0].flashcolor+'\')",'+'1000)'
eval(flashengine)
}
else
for (i=0;i<FLASHLINKS.LENGTH;I++){
var
flashengine='setInterval("changecolor('+i+','+flashlinks[i].flashtype+',\''+flashlinks[i].flashcolor+'\')",'+'1000)'
eval(flashengine)
}
}
</script>
SEGUNDO - Configure o link onde o efeito deve acontecer com os seguintes parmetros: id="lashlink" - para criar
o efeito intermitente; flashtype=0 | 1, sendo que 0 (zero) para a letra que pisca ou 1 para o fundo que pisca e
finalmente flashcolor="cor", para definir a cor do texto ou do fundo que ir piscar. Abaixo segue dois exemplos
com as suas respectivas sintaxe configuradas.
<a href="index.htm" id="flashlink" flashtype=0 flashcolor="#b0c4de"><b>HOME</b></a>
HOME
<a href="http://www.soswebmaster.com.br/" id="flashlink" flashtype=1 flashcolor="#ffff00">
<b>SOS WebMaster</b></a>
SOS WebMaster

LINK OCULTO
Qual a utilidade de criar um link que ningum possa ver?
Bom, isso vai da sua imaginao. Voc pode criar situaes interessantes com esse recurso. Imagine alguns links
ocultos e automticos numa homepage de estrias ilustrada que entram inesperadamente com um fundo musical. O
internauta, ao mover o mouse sobre sua pgina entrar numa seo oculta, sem que ele entenda o que est acontecendo.
A sintaxe do link oculto (e automtico) a seguinte:
<A HREF="a8espelho.htm" onmouseover="parent.location='a8espelho.htm'"
style="text-decoration:none">    </A>
Onde (no-break space) cria um espao em branco que ser a rea de atuao do link. Para aumentar essa rea
basta aumentar a quantidade de espaos. No exemplo acima coloquei 4 espaos. Agora movimente o mouse aqui
adiante dessa linha...
CUIDADO: A situao pode perder o controle se voc carregar sua HP com links ocultos. O internauta pensar que o browser
dele est com problemas, ou que sua HP possua links parasitas que ficam abrindo constantemente sem que ele tenha
solicitado, ento ele ir se cansar entre os irritantes vai-e-vem's e abandonar sua pgina.

LINK COM MENSAGEM
Atravs da funo onclick="alert('...')" podemos inserir uma mensagem no link. Essa mensagem aparecer entre o
clique no link e a mudana da tela. Esse recurso til para mensagens de aviso em geral, etc.
<A HREF="ab.htm" onclick="alert('Tutorial HTML Edaurelio')">Glossrio WEB</A>
Glossrio WEB

ENVIANDO E-MAIL VIA HTML
Podemos acionar o programa de E-mail diretamente de uma pgina HTML usando uma variao do
comando <A>, que usa a opo mailto no lugar da URL. O comando completo :
<a href="mailto:edaurelio@hotmail.com">Pergunte ao autor</a>
Pergunte ao autor
O mesmo comando usado para anexar uma imagem ao acionador do E-mail. Basta trocar a frase "pergunte ao
autor" pela sintaxe <img src="mail.gif"> (mail.gif o nome do arquivo desse pombinho que est voando a em
baixo). O atributo border="0" elimina a borda e deixa um acabamento mais apresentvel em figuras com
movimento. Exemplo:
Sintaxe:
<A HREF="mailto:edaurelio@hotmail.com">
<IMG SRC="imagens/mail.gif" border="0"></a>

Voc pode enviar E-mail para mltiplos destinatrios simplesmente colocando os endereos E-mail separados por
vrgulas. Exemplo:
<a href="mailto:fulano@ig.com.br, siclano@hotmail.com, beltrano@aol.com.br">

CRIANDO LINKS PARA DOWNLOAD
Vamos supor que agora sua homepage j est pronta e voc queira colocar uma relao de arquivos a
disposio do usurio para download. Mas... como faz-lo, qual tag devo utilizar e onde coloca-los?
Primeiro, por uma questo de organizao, crie uma pasta chamada download no servidor onde sua homepage est
hospedada, ela ser o local onde voc ir colocar seus arquivos para download, logicamente. Depois basta utilize a tag
<a href> que a mesma tag utilizada para criar os links e direcione os arquivos indicando sua URL. Como exemplo
coloquei o aplicativo icondraw.exe para download. Ento sua sintaxe a seguinte:
<a href="download/icondraw.exe">[Icondraw download aqui]</a>
[Icondraw download aqui]
Embora, neste exemplo, o aplicativo no esteja zipado, o browser ir apenas copi-lo para o local que o usurio
determinar. Porm caso o usurio tenha um plug-in instalado em seu HD compatvel o arquivo que ele est copiando,
como por exemplo arquivos de vdeo, ento o arquivo ser executado. Se esta no for a inteno do webmaster ento
aconselhvel zipar os arquivos. Os arquivos zipados, por serem menores, tambm so copiados mais rpido.

LINKS PARA ABRIR ARQUIVOS DO EXCEL OU WORD
Imagine a seguinte situao: Voc tenha uma relao de arquivos criados nos softwares Excel (*.xls)
ou Word (*.doc) e quer coloca-los a disposio do pblico sem ter o trabalho de converte-los em arquivos HTML e
depois coloca-los online ou ter que envi-los via e-mail para centenas, ou quem sabe milhares, de usurios.
Nessa situao a alternativa mais simples seria copiar os arquivos como esto para o diretrio onde o seu site est
hospedado e depois criar links direcionados para eles. Ento quando o usurio clicar no link do seu interesse o sistema
ir fazer o download do arquivo correspondente (Excel ou Word) e depois abri-lo logo em seguida. Para isso basta
direcionar o link para o arquivo.xls (ou .doc) exatamente como faria para direcionar uma URL. A sintaxe esta:
<A HREF="historico.xls" target="window">Historico de Atualizao de Arquivos</A>
Historico de Atualizao de Arquivos
<A HREF="historiawww.doc" target="window">Histria da World Wide Web</A>
Histria da World Wide Web
Logicamente, para que tudo funcione direitinho o usurio ter que possuir o sistema operacional Windows com o
Office instalado (ou algum outro software compatvel), seno o sistema ir fazer apenas o download do arquivo sem
abri-lo.

SEU SITE NA PGINA DE ABERTURA
Quando acionamos o browser para entrar na Rede algumas vezes notamos que ele abre um site
qualquer sem que tenhamos especificado sua URL. Isso acontece porque a URL deste site est configurada, no
browser, para entrar sempre que conectamos. A sintaxe a seguir cria esta opo do internauta habilitar sua homepage
no browser dele. Ela pode ser inserida em qualquer lugar do seu cdigo-fonte. O exemplo a seguir habilita minha
homepage como pgina de abertura em seu browser. Observe que a URL absoluta.
<CENTER>
<A HREF="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage
('http://orbita.starmedia.com/~edaurelio/index.htm');">
Gostaria de colocar este site como sua pgina de abertura?
</A>
</CENTER>
Gostaria de colocar este site como sua pgina de abertura?
NOTA: Para desabilitar essa funo (no Internet Explorer) basta entrar em [Tools], depois em [Internet Options...] e em Homepage clique em [Use Blank].

<IMG atributos>
Insere uma imagem no documento.
Utilizado dentro de: elementos de formatao de caracteres, listas, tabelas, formulrios, <A>
Atributos:
SRC="..."
A URL da imagem o nico atributo obrigatrio. No existe a terminao </IMG>.
OBS: A posio do comando IMG antecede o texto em todos os exemplos abaixo.

ALIGN="top | middle | bottom | left | right"
Alinha a imagem em relao ao texto pelo topo, meio, base (default), esquerda e direita, respectivamente. Exemplos:
<IMG SRC="imagens/leaf6.jpg" ALIGN="top"> Alinha a parte...
Alinha a parte de cima da imagem com a parte mais alta da linha. O texto, ao saltar para a linha
seguinte, ocupa a linha imediata aps o trmino da figura, causando uma falha de seqncia conforme mostra esse
exemplo.

<img src="imagens/leaf6.jpg" ALIGN="middle"> Alinha a base...
Alinha a base do texto com a linha mdia da imagem. Quando o texto troca de linha, este salta
para a parte inferior da figura causando uma falha de continuidade aparente, conforme apresentada nesse exemplo.

<img src="imagens/fnt14001.jpg" ALIGN="bottom">linha a parte...
linha a parte de baixo da imagem com a base do texto. Neste exemplo colocamos uma figura da letra capitular
"A" no incio da frase para destacar o texto do pargrafo.

<img src="imagens/acdsee.jpeg" ALIGN="left">Este parmetro...
Este parmetro posiciona a imagem no canto esquerdo jogando todo o texto para a direita. Aps o
trmino da imagem o texto volta a ocupar a largura normal da pgina envolvendo a rea inferior da
imagem conforme apresenta neste exemplo. Esta opo no causa falha de continuidade do texto.

<img src="imagens/acdsee.jpeg" ALIGN="right">Alinha a imagem...
Alinha a imagem direita forando o texto a ocupar todo o lado livre a esquerda. O alinhamento do
texto segue uma simetria sem quebras ou falhas aparentes. Assim como no exemplo acima, aps o
trmino da imagem, o texto volta a ocupar a largura normal da pgina envolvendo a rea inferior da
imagem.

No existe um atributo em IMG que centraliza a imagem envolvendo-a com textos a sua esquerda e direita. Para isso
temos que recorrer a tabela. Exemplo:
Sintaxe:
<TABLE>
<TR>
<TD WIDTH="250" STYLE="text-align:justify">Texto lado esquerdo...</TD>
<TD WIDTH="150"><img src="imagens/sol3.gif"></TD>
<TD WIDTH="250" STYLE="text-align:justify">Texto lado direito...</TD>
</TR>
</TABLE>
Nosso Sol uma estrela de mdia
grandeza, ocupando a posio central
do nosso sistema planetrio. A luz
desse astro leva oito minutos para
atingir a Terra. Como tal, encontra-se
formando Hlio pela queima de
Hidrognio h cerca de 4,6 bilhes de
anos.
A massa do sistema (99,8%)
concentra-se no Sol, com os planetas
girando ao seu redor, em rbitas
elpticas de pequena excentricidade. O
movimento de todos estes corpos
concentra praticamente todo o
momento angular do sistema.
ismap
Indica que a figura uma imagem mapeada (imagemap) controlada pelo servidor (o mapa estabelecido por arquivo
separado, no servidor).

usemap="#nome_do_mapa"
Indica que a figura uma imagem mapeada (imagemap) controlada pelo cliente (o mapa estabelecido pelo elemento
<map>, na mesma pgina HTML). #nome_do_mapa informa o rtulo do mapa <map> usado pela imagem.

width="largura", height="altura"
Informa a largura e a altura da imagem, em pixels. til para acelerar a visualizao (dispensa o browser de ter que
calcular o tamanho da imagem. Com esses parmetros, ele reserva espao para a figura e mostra logo o texto.
NOTA: Para saber o tamanho exato da imagem, basta clicar sobre ela com o boto direito do mouse e selecionar propriedades, ali apresentada as caractersticas do arquivo
juntamente com o seu tamanho em pixels.
Ao colocar o sinal % aps algum valor em "width", ele calcular esse valor (em porcentagem) em relao largura da
janela. Exemplos:
<img src="imagens/acdsee.jpeg" width="100%" height="80">
<img src="imagens/acdsee.jpeg" width="70%" height="150">
Para aprender mais sobre este assunto v para propriedades width & height.

border="valor"
Permite criar e alterar o tamanho da borda ao redor da imagem, sendo que: BORDER="0" oculta a borda.
Exemplos:
<IMG SRC="imagens/brass.jpeg"
BORDER="0">
BORDER="1">
BORDER="5">

vspace="y" hspace="x"
Cria um espao entre a imagem e o texto que a envolve. Exemplo:
<IMG SRC="imagens/acdsee.jpeg" VSPACE="20" HSPACE="20" align="left">
Definem uma espaamento invisvel ao redor da imagem criando um tipo de moldura.
Respectivamente, definem os espaos vertical e horizontal, em pixels. Observe a margem que
envolve os quatros cantos da figura a esquerda, ela parece ter uma borda oculta.

alt="texto"
Este parmetro apresenta o contedo do texto especificado quando o cursor posicionado sobre a imagem. Este texto
tambm muito til como referncia para os browsers que no trabalham com imagens. Exemplo:
<img src="imagens/acdsee.jpeg" alt="ACDsee verso 2.3">
Posicione o cursor sobre a imagem esquerda e deixe-o por alguns segundos.
Porm se o seu browser no for compatvel a exibio de imagens ele apresentar algo semelhante a
esta caixinha com o "X" e a etiqueta de informao sobre a suposta imagem.
E... este ser o resultado caso no especifique nada em alt.

onmouseover, onmouseout="imagem"
Estes dois atributos faz com que, ao passar o cursor sobre um objeto, ele mude para um segundo objeto ou funo pr
programado. Por exemplo: Observe as duas imagens na tabela abaixo:
home1.gif home2.gif
Sintaxe:
<center>
<a href="index.htm" onmouseover="imagem.src='imagens/home2.gif'"
onmouseout="imagem.src='imagens/home1.gif'">
<img src="imagens/home1.gif" name="imagem"></a>
</center>
Onde:
href="index.htm"
Indica o nome da pgina que ser aberta;
onmouseover="imagem.src='imagens/home2.gif
Determina o que ir ocorrer quando o cursor estiver sobre o objeto;
onmouseout="imagem.src='imagens/home1.gif
Determina o que ir ocorrer quando o cursor estiver fora da rea do objeto e finalmente,
img src="imagens/home1.gif
Que a figura original do link.
Agora mova o cursor sobre a imagem acima. Viu?... Ele muda para a outra imagem programada.
Outro exemplo de utilizao desses parmetros. Agora alterando o status da barra do Windows
Sintaxe:
<center>
<a href="index.htm" onmouseover="window.status='Alterando a barra de status'; return true;
" onmouseout="window.status=''; return true;">
<img src="imagens/home3.gif" name="imagem2"></a>
</center>
Agora ao mover o cursor sobre a imagem, ela muda o status do Windows para a frase "Alterando a barra de status"
(que fica no canto inferior esquerdo do seu monitor).

CRIANDO UM DIRETRIO DE IMAGENS REDUZIDAS
Uma das maiores tentao do programador HTML enriquecer sua homepage com lindas imagens.
Mas a Internet ainda muito lenta (99% dos internautas ainda possuem conexes abaixo de 56Kb/s!!...) e o uso de
imagens ir acarretar numa demora considervel no tempo de transferncia se o seu site tiver alguns MBytes de
imagens. Uma alternativa seria o Diretrio de Imagens Reduzidas.
A idia consiste numa srie de imagens reduzidas com link para sua correspondente em tamanho natural. Bom...
existem vrias maneiras de se criar um diretrio de imagens reduzidas e irei explicar uma delas da forma que sei.
Sintaxe:
<center>
<table border>
<tr>
<td><a href="modelos/janela.htm">
<img src="imagens/janela2.jpg" width="120" height="82" alt="janela2"></a></td>
<td><a href="modelos/pesadelo.htm">
<img src="imagens/pesadelo2.jpg" width="120" height="82" alt="pesadelo2"></a></td>
<td><a href="modelos/smoke.htm">
<img src="imagens/smoke2.jpg" width="120" height="82" alt="smoke2"></a></td>
</tr>
<tr>
<td><a href="modelos/lobos.htm">
<img src="imagens/lobos2.jpg" width="120" height="82" alt="lobos2"></a></td>
<td><a href="modelos/master.htm">
<img src="imagens/master2.jpg" width="120" height="82" alt="master2"></a></td>
<td><a href="modelos/dragoes.htm">
<img src="imagens/dragoes2.jpg" width="120" height="82" alt="dragoes2"></a></td>
</tr>
</table>
</center>
Na sintaxe acima criei uma tabela com duas linhas, cada linha com 3 clulas, cada clula com um arquivo de imagem
que uma cpia reduzida do seu original em tamanho real que, por sua vez aberto num arquivo HTML exclusivo. O
que fiz foi ancorar cada arquivo de imagem reduzida com seu correspondente em tamanho natural. Os arquivos
reduzidos poderiam ser at menores, mas como exemplo t bom. Procure analisar a sintaxe que fica fcil entender o
raciocnio.
Agora movimente o cursor sobre o diretrio de imagens, abaixo, escolha uma e clique sobre ela.

IMAGEM DE BAIXA RESOLUO
lowsrc="arquivo"
Este atributo, do comando <IMG>, faz com o browser exiba uma imagem inicial, de baixa resoluo, enquanto carrega
a imagem definitiva. Logicamente para que a ttica d certo a imagem de baixa resoluo deve ser bem menor que a
definitiva.
<img src="arquivo1" lowsrc="arquivo2">
A imagem de baixa resoluo coloque em "arquivo2".
FRAMES
FRAMESET
|__ FRAME
|__ NOFRAMES
IFRAME

<FRAMESET atributos> ... </FRAMESET>
Define um conjunto de quadros. Um arquivo HTML que contenha o <frameset> no deve conter
tambm o descritor <BODY>.
Utilizado dentro de: <HTML>, <FRAMESET>
Pode conter: <FRAME>, <NOFRAMES>, <FRAMESET>
Atributos:
cols="x, y, ..."
Define a largura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de "%") em relao largura total
da pgina ou um valor absoluto em pixels.
rows="x, y, ..."
Define a altura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de "%") em relao altura total
da pgina ou um valor absoluto em pixels.
frameborder=1 / 0
Estabelece a largura em pixels da borda dos quadros. Por default, todo quadro possui uma borda. Para retir-la use
frameborder="0".

FRAMES VERTICAIS
Esta a sintaxe de um arquivo HTML simples com frames verticais. O exemplo abaixo consiste num
arquivo chamado framecols.htm, dividido em trs: frame 1, 2 e 3 com 10, 30 e 20 colunas, respectivamente. Cada
frame exibir seu arquivo correspondente conforme mostra o comando <frame src="...">
Arquivo framecols.htm:
<HTML>
<HEAD>
<TITLE>Exemplo de um frame</TITLE>
</HEAD>
<frameset cols=10,30,20>
<frame src="frame1.htm">
</frameset>
</HTML>

Exemplo
Como voc pode notar o arquivo framecols.htm foi criado apenas para estruturar a apresentao dos outros arquivos
HTML, chamados frames1.htm, frame2.htm e frame3.htm. Framecols.htm a moldura de apresentao desses trs
arquivos HTML. Quando a janela criada para cada arquivo no for suficiente para exibir todo o seu contedo, ele
automaticamente cria barras de rolagem vertical e/ou horizontal, conforme a necessidade.

FRAMES HORIZONTAIS
Outro exemplo, agora com o atributo "rows=10,25,10": e sem as bordas, frameborder="0".
Sintaxe:
<HTML>
<HEAD>
</HEAD>
<frameset rows=10,25,10 frameborder="0">
</frameset>
</HTML>
<>
Exemplo
Para dividir os frames em janelas iguais no browser usamos o "*". Assim <frameset cols=*,*,*> ou <frameset
rows=*,*,*> ir criar trs janelas verticais ou horizontais equivalentes.
Outra forma de distribuir os frames usando valores percentuais. Determine quantos % cada frame dever ocupar na
janela do monitor. As distribuies sempre devero totalizar os 100%.
Exemplo: <frameset cols=20%,60%,20%>

FRAMES COMBINADOS
Os atributos cols & rows podem ser combinados simultaneamente criando janelas verticais e
horizontais.
Sintaxe:
<HTML>
<HEAD>
</HEAD>
<frameset cols=30%,70%>
<frameset rows=50%,50%>
</frameset>
</frameset>
</HTML>
<>
Exemplo
framespacing=valor
Este atributo altera a espessura das bordas deixando os frames mais separados entre si.
Sintaxe:
<HTML>
<HEAD>
</HEAD>
<frameset cols=30%,70% framespacing=15>
</frameset>
</frameset>
</HTML>
<>
Exemplo

<FRAME atributos>
Define um quadro dentro de um conjunto <frameset>.
Utilizado dentro de: <FRAMESET>
Atributos:
align=top, middle, bottom, left, right
Ajusta o alinhamento do frame ou do texto.
frameborder=1 / 0
Ativa ou desativa a exibio de borda no frame relacionado.
src="URL"
Informa a URL do documento que ser exibido dentro do quadro.
name="rtulo"
Define um nome para o quadro que pode ser referenciado pelo atributo target do elemento <a>.
marginheight="nmero"
Define um espaamento vertical em pixels entre a borda do quadro e o seu contedo.
marginwidth="nmero"
Define um espaamento horizontal em pixels entre a borda do quadro e o seu contedo.
noresize
Impede que o quadro possa ser redimensionado pelo usurio.
scrolling="yes | no"
Decide se haver ou no barra de rolamento para permitir a visualizao do contedo do quadro. Por default, as barras
de rolamento aparecem sempre que o contedo ultrapassa a rea de visualizao do browser.
Sintaxe:
<HTML>
<HEAD>
</HEAD>
<frame marginwidth=50 marginheight=50 src="frame1.htm">
<frame scrolling="no" src="frame2.htm">
</frameset>
<frame frameborder=0 src="frame3.htm">
</frameset>
</HTML>
<>
Exemplo
Neste exemplo, no frame 1 configurei marginwidth=50 marginheight=50 observe como ficaram as margens do
texto. Ele criou um espaamento nas bordas verticais e horizontais. No frame 2 configurei scrolling="no", ou seja,
sem barras de rolagem. Embora exista uma parte do texto que ficou oculta (no monitor de 14"), a barra de rolagem
vertical no aparece. No frame 3 configurei frameborder=0, ento ele aparecer sem bordas, observe a diferena
entre os frames 1 e 2, com borda e o frame 3, sem borda.

<NOFRAMES> ... </NOFRAMES>
Caso o browser do usurio seja antigo ou no compatvel com os recursos de frames, um recurso muito
utilizado inserir uma mensagem de aviso entre <NOFRAMES>... </NOFRAMES>, informando-o do fato.
Utilizado dentro de: <FRAMESET>
Pode conter: o mesmo que <BODY>
Sintaxe:
<HTML>
<HEAD>
</HEAD>
<frame marginwidth=50 marginheight=50 src="frame1.htm">
<frame scrolling="no" src="frame2.htm">
</frameset>
<frame frameborder=0 src="frame3.htm">
</frameset>
<noframes>
<p>Voc entrou numa pgina que usa frames, um recurso no suportado pelo browser que est usando.
Sugerimos obter uma verso atualizada do Netscape Navigator 3.0 ou do Internet Explorer 3.0 atravs
dos seguintes sites:
<p>Microsoft: <a href="http://www.microsoft.com">http://www.microsoft.com</a>
<p>Netscape: <a href="http://home.netscape.com">http://home.netscape.com</a>
<p><center>Clique no boto [Back] do seu browser para voltar.</center>
</noframes>
</HTML>
Vamos supor que o seu browser no suporta frames, ento ao acessar este exemplo o quadro que apareceria em seu
monitor seria mais ou menos igual a isso:
Exemplo
NOTA: Logicamente esse exemplo apenas uma simulao e para isso exclui os parmetros de frames do arquivo para que surtisse o efeito desejado de um browser sem frame.

Montando um Diretrio com Frames
Agora vamos aprender como montar uma estrutura com frames verticais de forma que, ao clicar no
ndice do frame esquerda ele mude apenas o frame direita mantendo o resto da pgina inalterada. Para montar essa
estrutura vou criar mais trs arquivos que me serviro como exemplos. Os arquivos chamaro matriz.htm,
indice.htm e abertura.htm (dei aos arquivos nomes associados as suas funes pra ficar mais fcil o
entendimento).
matriz.htm
Este e o arquivo que ir comportar os frames. ele que ir aparecer no monitor com os dois frames verticais.
indice.htm
Este o arquivo que ir conter a lista de arquivos esquerda. Sero os nossos j conhecidos frame1, frame2 e
frame3.htm.
abertura.htm
Este o arquivo que sempre ir aparecer direita quando entrarem na sua pgina juntamente com o arquivo ndice
esquerda.
Sintaxe do arquivo matriz.htm
<HTML>
<HEAD>
<TITLE>MATRIZ - Aprendendo a trabalhar com frames.</TITLE>
</HEAD>
<frameset cols=20%,*>
<frame name="ladoesquerdo" src=indice.htm>
<frame name="ladodireito" src="abertura.htm">
</frameset>
</HTML>
Observe que o frame da esquerda ter 20% de tamanho <frameset cols=20%,*> e o asterisco indica que o restante
do espao ficar com o arquivo da direita. O parmetro <frame name="ladoesquerdo" src=indice.htm> define
qual arquivo ir aparecer esquerda e <frame name="ladodireito" src=abertura.htm>, qual arquivo ir
aparecer a direita.
Pronto! agora vamos criar o arquivo chamado indice.htm.
Sintaxe do arquivo indice.htm
<HTML>
<HEAD>
<TITLE>INDICE - Aprendendo a trabalhar com frames.</TITLE>
<base target="ladodireito">
</HEAD>
<body bgcolor="#daa520">
<center>
<h1>Diretrio</h1>
<p>Clique sobre a lista abaixo.
<p><a href="abertura.htm">abertura</a>
<p><a href="frame1.htm">Frame 1</a>
<p><a href="../a9.htm#indice" target=_top>Voltar</a>
</center>
</body>
</HTML>
O parmetro <base target="ladodireito"> acima, ir indicar ao browser onde os arquivos vinculados pelo
comando <a href> devem ser carregados. Para entender melhor vamos ao exemplo prtico, ele nada mais que os
dois arquivos apresentados acima.
Exemplo
Note como ficou fcil o entendimento analisando as sintaxes dos arquivos acima e depois verificando o exemplo. O
arquivo abertura.htm por ser um arquivo comum, que poder ser substitudo por qualquer outro, no apresentei sua
sintaxe aqui.

<IFRAME> ... </IFRAME>
Define um frame embutido na pgina (como uma janela) e permite tambm a incluso de outros
documentos HTML.
Atributos
src=URL
Endereo do documento que ser exibido.
name=texto
Nome do frame.
width=nmero
Define a largura do frame.
height=nmero
Define a altura do frame.
align= top | middle | bottom | left | right
Alinha o frame em relao a pgina no topo, meio, base, esquerda e direita, respectivamente.
frameborder=1 | 0
O valor 1 insere uma borda no frame, o valor 0 omite.
margnwidth=pixels
Define uma largura para a margem.
marginheight=pixels
Define uma altura para a margem.
scrolling=yes | no | auto
yes permite a rolagem do frame, no no permite.
Exemplo: Vou criar uma janela no centro desta pgina utilizando o comando iframe A sintaxe de configurao a
seguinte:
<center>
<iframe width="350" height="200" scrolling="auto" frameborder="1">
</iframe>
</center>
Este frame possui o tamanho de 350 x 200 pixels, barra de rolagem automtica e uma borda. Agora irei colocar um
arquivo HTML dentro desta janela. O arquivo ser aquele modelo de background que usei em outra ocasio.
Sintaxe:
<center>
<iframe src="background1.htm" width="350" height="200" scrolling="auto" frameborder="1">
</iframe>
</center>
No prximo exemplo coloquei um texto rolante dentro da janela. Para criar o texto rolante coloquei uma frase qualquer
dentro do comando marquee que por sua vez est dentro do arquivo banner.htm, depois inseri o arquivo
banner.htm dentro da janela iframe, pronto.
Sintaxe deste exemplo:
<center>
<iframe src="banner.htm" width="400" height="20"
scrolling="no" frameborder="1" marginheight="2px">
</iframe>
</center>
Arquivo banner.htm
<HTML>
<HEAD>
<TITLE>Banner</TITLE>
</HEAD>
<BODY bgcolor="#D8D8BF">
<center>
<marquee behavior=scroll width="700">
<FONT FACE="verdana" SIZE="2">
Outro exemplo de aplicao esta mensagem estilo banner.
</font>
</marquee>
</center>
</BODY>
</HTML>

Folha de Estilo em Cascata

O CSS: (Cascading Style Sheets) ou Folhas de Estilo em Cascata, foi
introduzido na Web atravs do browser Internet Explore, da Microsoft, em 1996 e
passou a incorporar os demais browser desde ento.

Uma folha de estilo pode ser definida como um gabarito que formata os comandos
HTML de um bloco, uma pgina ou uma homepage de acordo com as preferncias
do programador. Atravs dela fica mais fcil e rpido gerenciar o layout de sua
homepage.
Background
Border
Color
Direction
Float
Font-family
Letter-spacing
Line-height
Margin
Text-align
Vertical-align
White-space
Writing-mode
Width &
Height
Word-spacing

PROPRIEDADES MAIS COMUNS E SEUS RESPECTIVOS VALORES

background
Define a cor ou imagem de fundo. A cor pode ser especificada atravs das 16 cores da paleta VGA ou do padro RGB
no formato #rrggbb. A imagem apresentada atravs de sua URL.
Exemplos:
BODY {background: url(papel-de-parede.gif)}
TABLE {background:#007700}
P {background: yellow}
</STYLE>

background-image
Define uma imagem de fundo na pgina, no pargrafo ou no texto. A imagem especificada atravs de sua URL da
seguinte forma:
1) BACKGROUND NA PGINA
Insira o cdigo a seguir depois de </HEAD>
BODY {background-image: url(flower.jpe)}
</STYLE>
2) BACKGROUND EM PARGRAFO
Observe que o cdigo CSS est configurado dentro da tag <P> (Pargrafo):
<P STYLE="text-indent:1in; background-image:url(sombras.jpg); font-family:arial; color:999999"> Entrar
em buracos profundos, perigosos, misteriosos...
Entrar em buracos profundos, perigosos, misteriosos, sem dvida a Espeleologia no s um
esporte corajoso, ela tambm ocupa uma das faces mais bizarras da cincia. Eu mesmo, apesar de
apreciar este tipo de aventura, ainda sinto uma certa estranheza em tal procedimento. Tambm vejo esta
mesma postura na pergunta irnica e tantas vezes formulada. "Mas o que voc espera encontrar l no
fundo?". A est o grande segredo. Sempre em busca do inusitado, geramos mapas e relatrios
confidenciais, e mesmo que, com certa reserva, tentamos explicar o que buscamos, o leigo nunca ficar
sabendo.
As demais propriedades background-repeat, position e attachment tambm funcionam dentro do pargrafo. Abaixo
estou usando o mesmo pargrafo com a propriedade background-repeat: no-repeat.
<P STYLE="text-indent:1in; background-image:url(flower2.gif) background-repeat:no-repeat; font-
family:arial; color:005500">Entrar em buracos...
sabendo.

Eu sei que a florzinha t fora de contexto mas fiz isso para mostrar um detalhe interessante. O arquivo flower2.gif (que
coloquei como background) possui um fundo transparente. O efeito disso que o background do pargrafo se funde
com o background da pgina. Outro detalhe que o texto sobrepe a imagem.
3) BACKGROUND NO TEXTO
Agora aplicando uma textura somente em uma
<SPAN STYLE="background-image: url(imagens/back1.gif)>palavra</SPAN>.
Agora aplicando uma textura somente em uma palavra.

background-repeat
Define a disposio que a imagem dever ocupar no fundo. As opes so: no-repeat (a imagem posicionada no
canto superior esquerdo do seu monitor); repeat-x (a imagem ir se repetir somente na horizontal partindo do canto
superior esquerdo do monitor); repeat-y (a imagem ir se repetir somente na vertical, partindo do canto superior
esquerdo do monitor). O cdigo-fonte de cada exemplo encontra-se em seus arquivos correspondentes.
no-repeat repeat-x repeat-y

background-position
Esta propriedade determina a posio onde a imagem de fundo deve aparecer. Existem duas maneiras diferentes para
especificar estas posies: Palavras chaves ou valores numricos.
1) PALAVRAS CHAVES:
top - Alinha a imagem com o topo do elemento selecionador.
left - Alinha a imagem com o canto esquerdo do elemento selecionador.
right - Alinha a imagem com o canto direito do selecionador.
bottom - Alinha a imagem com a parte inferior do selecionador.
center - Centraliza a imagem dentro do selecionador.
background-position:right
2) VALORES NUMRICOS:
Os valores so empregados nas coordenadas "X" (horizontal) e "Y" (vertical). So eles points (pt), inches (in),
centimeters (cm), pixels (px) ou percentage (%). Logicamente a unidade usada em "Y" deve ser a mesma usada
em "X".
background-position

background-attachment
Esta propriedade, configurada com o parmetro fixed, permite criar uma imagem fixa no fundo de modo que ao
acionar a barra de rolagem a imagem no se move. Esta propriedade tambm funciona em conjunto com as
propriedades de posio e disposio relacionadas acima.
background-attachment

border
Define uma borda que ir envolver um objeto (um texto, uma imagem...). Bons exemplos de aplicao dessa
propriedade esto na seo bordas.
bordas

border-color
Define a cor da borda. A cor pode ser definida pelo cdigo RGB.
border-color

border-style
Define um estilo de borda. Os estilos podem ser: dotted, dashed, solid, double, none, grove, ridge, inset e
outset.
border-style

border-width
Define a espessura da borda. As espessuras podem ser: thin, mediun e thick.
border-width

color
Especifica a cor do texto que pode ser um dos 16 nomes da paleta VGA ou do padro RGB no formato #rrggbb.
Exemplos:
<H2 STYLE="COLOR:purple">TEXTO COR PURPURA</H2>
TEXTO COR PURPURA

direction
Especifica uma sentido de leitura jogando o texto margem direita ou esquerda. Embora esta propriedade possua uma
certa similaridade com a propriedade text-align, ela foi desenvolvida para auxiliar idiomas cujo sentido de escrita
inverso ao nosso idioma ocidental, tipo alguns idiomas da frica, Oriente Mdio e sia Prxima. A margem esquerda
(default (ou condio assumida ou configurao padro)) o padro CSS ocidental e por isso no precisamos nos
preocupar com a configurao do sentido de escrita de nossas redaes. Esta propriedade possui dois valores:
ltr (left to rigth) da esquerda para a direita.
rtl (rigth to left) da direita para a esquesda.
Exemplo:
<P STYLE="direction:rtl">O texto passa a margear o lado direito do monitor.
O texto passa a margear o lado direito do monitor .
Para aprender mais sobre este assunto v para:
Criando pginas com Fluxos invertidos com a tag <HTML DIR="RTL | LTR">

float
Esta propriedade permite posicionar objetos direita ou esquerda de outro objeto sem que para isso precisemos
recorrer aos recursos de tabelas. Este objeto definido como "flutuante". Esta propriedade possui 3 valores:
left - Move o objeto para a esquerda e posiciona o texto ao seu redor.
right - Move o objeto para a direita e posiciona o texto ao seu redor.
none - Mostra o objeto sem alterao.
<P><IMG SRC="imagens/tutorial.gif" style="float:right; margin:1in">Neste exemplo...
Neste exemplo criei um pargrafo com <P> e defini que o arquivo de imagem tutorial.gif ficaria
no canto direito desse texto.

font-family
Seleciona o tipo de fonte. Pode-se usar uma lista de opes separadas por vrgulas. Caso a primeira opo no esteja
disponvel, usa-se a segunda e assim por diante. Um nome genrico pode ser usado como ltimo da lista caso nenhuma
das fontes seja encontrada. Os valores suportados so: serif, sans-serif, cursive, fantasy e monospace.
Exemplo:
BODY {font-family: Casablanca, Garamond, serif}
H1 {font-family: Brush Script, fantasy}
H2 {font-family: Gill Sans, Arial, sans-serif}
PRE {font-family: Lucida Console, Courier, monospace}
</STYLE>

font-size
Muda o tamanho absoluto ou relativo da fonte. Para valores absolutos, pode-se usar vrias unidades: pontos (pt),
centmetros (cm), milmetros(mm), pixels(px) ou paicas (pc). Para valores relativos: porcentagem em relao fonte-
base (%) ou um dos nomes: xx-small, x-small, small, medium, large, x-large e xx-large.
Exemplo:
BODY {font-size: 10pt}
P {font-size: 12px}
H1 {font-size: 1cm}
H2 {font-size: 8mm}
H3 {font-size: 1pc}
PRE {font-size: 80%}
</STYLE">

font-style
Seleciona o estilo da fonte. Pode ser italic, normal e oblique.
<P STYLE="font-style:normal">Uma fonte com estilo normal.
Uma fonte com estilo normal.
<P STYLE="font-style:italic">Uma fonte com estilo italic.
Uma fonte com estilo italic.
<P STYLE="font-style:oblique">Uma fonte com estilo oblique.
Uma fonte com estilo oblique.

font-weight
Define a espessura da fonte. Pode ser extra-bold, bold, demi-bold, medium, demi-light, light, extra-light ou
os valores 100, 200, 300, 400, 500, 600, 700, 800 e 900. Uma observao que embora a maioria das fontes
possuam sua verso em negrito (bold), so poucas as fontes (e terminais)que possuem os demais estilos de espessura.
Definir uma espessura, extra-light por exemplo, numa fonte que no possui esse estilo ir fazer com que a configurao
deixe de funcionar e assuma a condio default.
<FONT STYLE="font-weight:300; font-family:arial">Arial</FONT>
Aqui esto alguns exemplos de formatao com valores.
300 Arial
600 Arial
900 Arial
300 Verdana
600 Verdana
900 Verdana
300
Courier New
600
Courier New
900
Courier New
300 Times New Roman
600 Times New Roman
900 Times New Roman

font-variant
Esta propriedade de formatao de fontes possui dois valores: normal que corresponde a letra normal (maiscula ou
minscula), propriamente dita e small-caps que formata as fontes minsculas criando um efeito interessante de caixa
alta pequena que diferencia da caixa alta normal. Exemplos:
<P STYLE="font-variant:normal">Texto com fontes minsculas normal.
Texto com fontes minsculas normal.
<P STYLE="font-variant:normal">TEXTO COM FONTES MAISCULAS NORMAL.
TEXTO COM FONTES MAISCULAS NORMAL.
<P STYLE="font-variant:small-caps">Ambas as fontes configuradas com SMALL-CAPS.
AMBAS AS FONTES CONFIGURADAS COM SMALL-CAPS.

letter-spacing
Espaamento entre letras. Os valores podem ser points (pt), inches (in), centimeters (cm) ou pixels (px).
Exemplos:
<P>Texto com espaamento padro
Texto com espaamento padro.
<P STYLE="letter-spacing:5px">Texto com espaamento de 5px.
T e x t o c o m e s p a a m e n t o d e 5 p x .
<P STYLE="letter-spacing:5pt">Texto com espaamento de 5pt.
T e x t o c o m e s p a a m e n t o d e 5 p t .

line-height
Define a espessura da linha. Os valores podem ser points (pt), inches (in), centimeters (cm), pixels (px) ou
percentage (%). No exemplo estou usando esta propriedade numa tabela. Criei diversas linhas com espaamento
progressivo comeando com 5px, na primeira linha e segundo at 50px, na ltima. Observe que na primeira linha o
texto foi parcialmente escondido. Isso ocorre porque uma vez aplicando essa propriedade, o browser desabilita a
condio default (de espaamento) e passa a considerar o espao definido pelo webmaster, mesmo que este espao no
seja suficiente para apresentar o item contido nele.
<TBODY ALIGN="center">
Uma linha com 5x
<TR>
<TD STYLE="line-height: 5px">Uma linha com 5x</TD></TR>
<TD STYLE="line-height:20px">Uma linha com 20px</TD></TR>
</TBODY>
</TABLE>
Uma linha com 20px
Uma linha com 30px
Uma linha com 40px
Uma linha com 50px

margin
Ajusta a distncia das margens dos quatro cantos do objeto por igual. Os valores de ajustes podem ser points (pt),
inches (in), centimeters (cm) ou pixels (px). No exemplo a seguir ajustei um pargrafo com margens de uma
polegada. E aproveitando observe o bonito alinhamento do texto que foi ajustado com a propriedade text-align:justify.
<P STYLE="margin:1in; color:#000080; font-family:Bookman Old Style; text-align:justify">GEORGE BOOLE...
GEORGE BOOLE - Matemtico ingls (1815-1864).
considerado o pai da Lgica moderna. Nasce em uma
famlia pobre e estuda por conta prpria, dedicando-se ao
latim e ao grego. professor de escolas elementares de
1831 a 1849, quando funda um colgio particular. Passa a
interessar-se por Matemtica e, depois de ler obras dos
matemticos franceses Laplace e Legendre, passa a
escrever artigos para o Jornal Matemtico da Universidade
de Cambridge. Em 1847, no artigo A Anlise Matemtica
da Lgica, introduz o uso de smbolos matemticos para
expressar processos lgicos, de modo a que eles possam
ser lidos com o mesmo rigor de uma equao algbrica.
Com isso, d origem Lgica moderna. Em 1848, publica
Os Clculos da Lgica e, em 1854, escreve Uma
Investigao das Leis do Pensamento.
(Fonte Bibliogrfica : Almanaque Abril - 1997)

margin-bottom
Ajusta a distncia da margem da base do objeto (no exemplo, um pargrafo), criando um espao de separao entre ele
e a seqncia da pgina. Observe que neste exemplo estou usando uma escala de valor diferente, pontos (pt).
<P STYLE="margin-bottom:70pt; color:#3333ff; font-family:verdana">Quando a verdadeira histria...
Quando a verdadeira histria da evoluo do esprito for escrita, ser a maior, a mais
emocionante histria de todos os tempos, porque cobrir todos os tempos e toda fase de
experincia humana. Essa histria contar que os homens precisaram de milhares e milhares
de anos para emergir das profundezas da ignorncia, da superstio, do medo, do
preconceito, da mitologia e dos conceitos errneos.

margin-left
Ajusta a distncia da margem esquerda. E aproveitando os mesmos exemplos para mostrar as propriedades color e
font-family, tambm. E novamente outra escala diferente, centimeters (cm)
<P STYLE="margin-left:5cm; color:#3333ff; font-family:verdana">Falar nos grandes pensadores...
Falar nos grandes pensadores como Galileu, que acreditou,
como Coprnico, que a Terra gira em volta do Sol --- foi
obrigado pela Inquisio a renegar suas afirmaes e foi proibido
de publicar seus eruditos livros. Que vergonha sentimos
rememorando essas perseguies da Igreja a homens que
ousaram procurar a Verdade apesar das doutrinas e decretos em
vigor.

margin-right
Agora a referncia a margem direita. Os valores so os mesmos: points (pt), inches (in), centimeters (cm) ou
pixels (px).
<P STYLE="margin-right:250px; color:#3333ff; font-family:verdana">A histria do esprito humano...
A histria do esprito humano honrar Charles Darvin, cujo
estudo profundo das plantas e dos animais resultou no
clebre A Origem Das Espcies que abalou o mundo, no
qual antecipou a teoria da evoluo. Credite-se moderna
teologia o fato de que a obra de Deus, atravs da evoluo,
agora reconhecida por muitas seitas religiosas. A marcha
majestosa do tempo atravs das idades tem visto o esprito
do homem desenvolver poderes que ele mal imaginava
durante seus primeiros dias na Terra.

margin-top
A margem de topo define o espaamento do pargrafo de cima. No exemplo temos um espaamento de uma polegada
margin-top:1in, uma fonte diferente font-family:arial com alinhamento centralizado text-align:center.
<P STYLE="margin-top:1in; color:#9400d3; font-family:arial; text-align:center">O capito Fitz Roy...
O capito Fitz Roy determinou sairmos do estreito de Magalhes tomando o rumo do canal
Magdalen, cujo descobrimento ainda era de data recente. A nossa rota apontava exatamente ao sul,
ao longo daquele lgubre corredor, que, como j disse antes, parecia conduzir a um mundo novo e
ainda mais tenebroso.
Para ver mais alguns exemplos com aplicao da propriedade margin, v para:
Mtodo Embedding

text-align
Especifica o alinhamento do texto que pode ser left, center, right e justify. No exemplo o alinhamento feito pela
margem direita.
<P STYLE="text-align:right; color:#127b12; font-family:courier new">O capito Fitz Roy...
O capito Fitz Roy determinou sairmos do estreito de Magalhes tomando o rumo
do canal Magdalen, cujo descobrimento ainda era de data recente. A nossa rota
apontava exatamente ao sul, ao longo daquele lgubre corredor, que, como j
disse antes, parecia conduzir a um mundo novo e ainda mais tenebroso.

text-decoration
Altera atributos do texto como sublinhado, sobrelinha, sem-linha, riscado, etc. As opes so none, underline,
overline, line-through e italic.
<P STYLE="text-decoration:underline">Texto com sublinhado
Texto com sublinhado.
<P STYLE="text-decoration:line-through">Texto riscado
Texto riscado.
<P STYLE="text-decoration:overline">Texto com sobrelinha
Texto com sobrelinha.

text-indent
Determina um recuo da primeira linha do pargrafo que a distncia entre o incio do texto e a margem esquerda. Os
valores so points (pt), inches (in), centimeters (cm) ou pixels (px).
<P STYLE="text-indent:1in; font-family:arial; text-align:justify; padding:15px">
Entrar em buracos profundos, perigosos...
sabendo.

text-transform
Esta propriedade possui trs valores: uppercase - Formata o texto em letras maisculas, lowercase - Formata o texto
em letras minsculas e capitalize - Formata a primeira letra de cada palavra em maiscula. Exemplos:
<FONT STYLE="text-transform:uppercase">texto formatado com uppercase</FONT>
TEXTO FORMATADO COM UPPERCASE
<FONT STYLE="text-transform:lowercase">texto formatado com lowercase</FONT>
texto formatado com lowercase
<FONT STYLE="text-transform:capitalize">texto formatado com capitalize</FONT>
texto formatado com capitalize

vertical-align
Esta propriedade controla o alinhamento vertical de um objeto em relao ao texto. Seus principais valores so:
baseline - Alinha o objeto pela base da linha. Esta a condio default, ou seja, a condio que ir se apresentar
quando voc no atribuir valores esta propriedade.
middle - Alinha o objeto pelo meio da linha mdia.
top - Alinha o objeto pelo topo da linha
Um texto com alinhamento "vertical-align:baseline" com a imagem.
Um texto com o alinhamento "vertical-align:middle" com a imagem.
Um texto com o alinhamento "vertical-align:top" com a imagem.
percentage - Especifica uma porcentagem da altura do elemento para com o texto padro, sendo que 0%
corresponde a base da linha e 100% ao topo da linha.
Um texto normal com um texto elevado 10%, outro elevado 30% e mais outro elevado 50%.
sub - Cria um texto subscrito igual a tag <SUB>.
super - Cria um texto sobrescrito igual a tag <SUP>.
Um texto normal <SPAN STYLE="vertical-align:super"> com um texto sobrescrito.</SPAN>
Um texto normal
com um texto sobrescrito.

Um texto normal <SPAN STYLE="vertical-align:sub"> com um texto subscrito.</SPAN>
Um texto normal
com um texto subscrito.

Ainda existem os valores bottom, text-bottom e text-top porm estes possuem deslocamento vertical semelhantes
aos j apresentados acima.

white-space
Esta propriedade gerencia como o browser deve tratar os espaos em branco. Ela possue trs valores:
normal - a condio default e corresponde ao texto normal com apenas um espao entre as palavras. Nesta condio
mesmo que voc inserir diversos espaos entre as palavras no cdigo fonte o browser reconhecer apenas um.
pre - Manter todos os espaos em branco que voc inserir entre as palavras no cdigo fonte. Funo equivalente a tag
<PRE> (PREformatted text) do HTML.
nowrap - Funo equivalente a tag <NOBR> do HTML. Elimina a quebra de linha, apresentando TODO o texto em
uma nica linha indefinidamente a menos que voc force uma quebra de linha com a tag <BR> (BReak Line = Quebra
de linha). Quando o texto de uma nica linha for muito grande o browser apresenta a barra de locomoo horizontal no
canto inferior do monitor.
<P
CLASS=normal>Repare nos espaos entre as palavras...
Repare nos espaos entre as palavras...
<P
CLASS=pre>Repare nos espaos entre as palavras...
Repare nos espaos entre as palavras...
NOTA: Esta propriedade no funciona com o Internet Explorer 6.0 ou inferior.

writing-mode
Writing-mode ou Modalidade de escrita a propriedade que controla o sentido da escrita. O modo default left-to-
right, top-to-bottom (da esquerda para a direita, de cima para baixo) em lnguas ocidentais, mas a modalidade pode ser
configurada de cima para baixo, da direita para a esquerda conforme o padro da escrita oriental. Ela possui dois
valores:
lr-tb - (left to right - top bottom) Escrita da esquerda para a direita do topo para baixo, padro ocidental
tb-rl - (top bottom - right to left) Escrita to topo para baixo da direita para a esquerda, padro oriental.
Para ns ocidentais esta propriedade interessante para criar alguns efeitos de texto vertical. Com writing-mode
podemos escrever de cima para baixo ou, usando um pouquinho mais a imaginao, com os filtros fliph & flipv,
escrever de baixo para cima.
Exemplos:
<P STYLE="writing-mode:tb-rl; width:600px"> Esta uma frase escrita na vertical usando a propriedade CSS
writing-mode.
Esta uma frase escrita na vertical usando a propriedade CSS writing-mode.
Como voc pode observar a altura da linha assume a espessura da palavra mais comprida (propriedade), mas podemos
inserir toda a frase numa nica coluna usando a propriedade white-space:nowrap.
<P ALIGN="center"><SPAN STYLE="writing-mode:tb-rl; white-space:nowrap">
Agora toda a frase numa nica coluna.</SPAN>
Agora toda a frase numa nica coluna.
Para inverter o sentido da escrita usamos os filtros fliph & flipv da seguinte maneira:
<P ALIGN="center">
<SPAN STYLE="writing-mode:tb-rl; filter:flipv fliph; color:#3cb371; font-size:20px}"> Esta uma frase
escrita na vertical, de baixo para cima, usando os filtros flipv & fliph.</SPAN>
Esta uma frase escrita na vertical, de baixo para cima, usando os filtros flipv & fliph.

Agora temos recursos para escrever
alguns filtros e um pouco de imaginao textos em todos os sentidos usando...
algumas tag HTML, propriedades CSS,
Para aprender mais sobre os filtros flipv & fliph, v para:
Filtros Fliph & Flipv

width & height
Estas duas propriedades tm a mesma funo que as suas similares em HTML. WIDTH determina a largura do objeto
e HEIGHT a sua altura. Ambas podem ser usadas em conjunto ou separadamente. Seus valores podem ser em pixel
(px), point (pt), centimeter (cm) e inches (in). No exemplo, embora a dimenso natural do arquivo mundo.gif
seja de 44x42px, configurei-o de forma ampliada aumentando sua largura e altura. Da mesma forma voc pode
diminui-lo de tamanho fazendo-o caber num espao menor que as suas medidas normais.
Tamanho normal
<IMG SRC="imagens/mundo.gif">
Tamanho ampliado
<IMG SRC="imagens/mundo.gif" STYLE="width:4cm; height:4cm">
NOTA: O efeito de ampliar ou diminuir a dimenso do arquivo no altera o seu tamanho em pixels.

word-spacing
Configura o espao entre as palavras. Os valores podem ser em pixel (px), point (pt), centimeter (cm) e inches
(in).
<P STYLE="word-spacing:15px"> Este texto est configurado com um espaamento de 15px.
Este texto est configurado com um espaamento de 15px.
<P STYLE="word-spacing:1cm"> Porm este outro texto...
Porm este outro texto est configurado com um espaamento de 1cm.

Seqncias de Escape & Smbolos
A seguinte tabela relaciona caracteres com suas entidades numricas e nomeadas, obtidas em HTML
atravs de uma seqncia de escape iniciando por "&" e terminando em ";". As seqncias abaixo no garantem que o
caracter representado ir aparecer na tela. Tudo depende da capacidade da plataforma ou do terminal que ir exibi-lo.
Nmero Nome Smbolo Nmero Nome Smbolo
" "
"
Î Î
&
& &
ĩ Ï
< <
<
Ð Ð
> >
>
Ñ Ñ
[espao](*) Ò Ò
¡ ¡
Ó &Ocaute;
¢
¢
Ô Ô
£ £
Õ Õ
¤ ¤
Ö Ö
¥ ¥
× ×
¦ ¦
Ø Ø
§
§
Ù Ù
¨ ¨
Ú Ú
© ©
Û Û
ª ª
Ü Ü
« «
Ý Ý
¬
¬
Þ Þ
ß ß
® ®
à à
¯ ¯
á á
° °
â â
± ±
ã ã
² ²
ä ä
³ ³
å
å
´ ´
æ æ
µ µ
ç ç
¶ ¶
è è
· ·
é é
¸ ¸
ê ê
¹ ¹
ë ë
º º
ì ì
» »
í í
¼ ¼
î â
½ ½
ï ï
¾ ¾
ð ð
¿ ¿
ñ ñ
À À
ò ò
Á Á
ó ó
Â Â
ô
ô
Ã Ã
õ õ
Ä Ä
ö ö
Å Å
÷ ÷
Æ &Aelig;
ø ø
Ç Ç
ù ù
È È
ú ú
É É
û û
Ê Ê
ü ü
Ë Ë
ý ý
Ì Ì
þ þ
Í Í
ÿ ÿ
(*) espao inquebrvel (no-break space)

USANDO SMBOLOS > W M C 1 1 1 1 1 1
Atravs da tag <font face="..."> podemos configurar o texto para caracteres gregos ou outros
smbolos que esto disponveis no sistema Windows. Aqui segue um exemplo dos tipos de figuras que podemos inserir
em um documento HTML.
Como modelo para os exemplos que aprensentarei a seguir relacionei os nmeros, o alfabeto completo (caixa alta e
baixa) e mais alguns smbolos matemticos na fonte padro Times New Roman, 12 (default)
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
! @ # $ % & * ( ) - _ + = { } [ ] ? / < > \ | " '
Agora a mesma relao de cima configurada com a fonte symbol. A numerao permanece a mesma porm o nosso
alfabeto ocidental muda para o alfabeto Grego
<font face="symbol">
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6

! # % & ( ) _ + = { } [ ] ? / < > |
</font>
Novamente a mesma relao de cima s que agora configurada com a fonte wingdings, color="#C02420" e
size="4". Agora os nmeros e letras foram totalmente substitudos por smbolos. A ltima linha est configurada com
size="7".
<font face="wingdings" color="#C02420" size="4">
1 1 1 1 1 1 1 1 1 1 1 1 1
C 1 1 1 1 1 1 1 1 1 1 1
E O O M 4 4 + 1 1
C C 1 1 1 1 1 1 1 1 1 1
+ < * 1 + = 1 1 1 1 1
E W 1 1 1 1 1 1 1
5 O 1 # ' 1 5 1 1 4 > 1
> W 1 1
</font>
E finalmente com a fonte webdings, color="#191970" e size="4". A ltima linha est configurada com
size="7"
<font face="webdings" color="#191970" size="4">
Q _ + w Q _ + w Q _ +
~ _ # + + - w | @ . 7
@ @ @ @ _ @ g { \ 4 w
] M = = ( @ O + M M w w q @ @ _
@ @ @ @
</font>
Apesar desses tipos de fontes serem prticas por no sobrecarregar (em KBytes) a pgina HTML, este recurso possui
algumas inconvenincias: O tipo de fonte determinado pelo webmaster pode mudar para default caso o usurio no as
disponha em seu sistema, ou podem existir problemas de interpretao nos diferentes sistemas que existem conectados
na Web (Unix, Macintosh, etc...).
T A B E L A D E C O R E S
O cdigo RGB (Red - Green - Blue) informa a quantidade de luz vermelha, verde e azul que compe
a cor, respectivamente. Este valor representado em nmero hexadecimal, onde os bytes que variam de 00 (ausncia da
cor) a FF (maior intensidade da cor), esto divididos em trs grupos. Cada grupo pode variar at 256 tons da cor que ele
representa. Os tons podem ser misturados com os tons de outras cores e o total de combinaes possveis de 256 x
256 x 256 = 16.777.216. Exemplo:
#FF0000 vermelho
#00FF00 verde
#0000FF azul
#000000 preto (ausncia das cores)
#FFFFFF branco (a soma de todas elas)
A exibio correta das cores depende da capacidade do vdeo onde sero vistas. Poucos sistemas tm capacidade de
mostrar mais que 65.536 cores simultneas. Se seu browser no suporta cores em clulas de tabelas, voc no poder
ver a amostra da cor. Alm disso, as cores exibidas podem variar de sistema para sistema, dependendo de diversos
fatores de software e hardware.

SINTAXE HTML/CSS
Alm do cdigo RGB, as cores tambm podem ser configuradas atravs dos 16 nomes padro da
paleta VGA ou no formato da folha de estilo (CSS) em valores decimais ou porcentagens, conforme o modelo
abaixo:
PADRO FORMATO SINTAXE RESULTADO
HTML #RRGGBB <FONT COLOR=#AA77CC>TEXTO</FONT> TEXTO
HTML paleta VGA <FONT COLOR=yellow>TEXTO</FONT> TEXTO
CSS #RGB <FONT STYLE="COLOR:#A7C">TEXTO</FONT> TEXTO
CSS RGB(x,x,x) <FONT STYLE="COLOR:RGB(18,117,34)">TEXTO</FONT> TEXTO
CSS RGB(%,%,%) <FONT STYLE="COLOR:RGB(20%,70%,10%)">TEXTO</FONT> TEXTO
No formato RGB(x,x,x), cada valor de "x" no pode ultrapassar a 256 (valor decimal) e no formato RGB(%,%,%)
os trs valores somados no podem ultrapassar os 100%, naturalmente. Nos exemplos acima usei como referncia um
texto mas voc pode aplicar estes formatos em tudo que exige cores, tais como background, tabelas, botes, links, etc.
O quadro a seguir apresenta as 16 cores da paleta VGA suportados por todos os browsers que exibem cores, com
seus respectivos cdigos RGB em hexadecimal.
PALETA VGA
NOME PADRO CDIGO NOME PADRO CDIGO
red
ff0000
maroon
800000
lime
00ff00
green
008000
blue
0000ff
navy
000080
yellow
ffff00
olive
808000
aqua
00ffff
teal
008080
fuchsia
ff00ff
purple
800080
white
ffffff
silver
c0c0c0
black
000000
gray
808080
Os nomes das cores a seguir so definidas pelo sistema X-Window (Unix) e reconhecidas pelo Netscape Navigator.
Qualquer outro browser dever ser capaz de interpretar o cdigo hexadecimal.
NOME CDIGO NOME CDIGO
aliceblue
f0f8ff
lightseagreen
20b2aa
antiquewhite
faebd7
lightskyblue
87cefa
aquamarine
7fffd4
lightslateblue
778899
azure
f0ffff
lightslategray
888888
beige
f5f5dc
lightsteelblue
b0c4de
bisque
ffe4c4
lightyellow
ffffe0
black
000000
limegreen
00ff00
blanchedalmond
ffebcd
linen
faf0e6
blue
0000ff
magenta
ff00ff
blueviolet
8a2be2
maroon
800000
brown
a52a2a
mediumaquamarine
66cdaa
burlywood
deb887
mediumblue
0000cd
cadetblue
5f9ea0
mediumorchid
ba55d3
chartreuse
7fff00
mediumpurple
9370db
chocolate
d2691e
mediumseagreen
3cb371
coral
ff7f50
mediumslateblue
7b68ee
cornflowerblue
6495ed
mediumspringgreen
00fa9a
cornsilk
fff8dc
mediumturquoise
48d1cc
cyan
00ffff
mediumvioletred
c71585
darkblue
00008b
midnightblue
191970
darkcyan
008b8b
mintcream
f5fffa
darkgoldenrod
b8860b
mistyrose
ffe4e1
darkgray
a9a9a9
moccasin
ffe4b5
darkgreen
006400
navajowhite
ffdead
darkkhaki
bdb76b
navy
000080
darkmagenta
8b008b
oldlace
fdf5e6
darkolivegreen
556b2f
olivedrab
6b8e23
darkorange
ff8c00
orange
ffa500
darkorchid
9932cc
orangered
ff4500
darkred
8b0000
orchid
da70d6
darksalmon
e9967a
palegoldenrod
eee8aa
darkseagreen
8fbc8f
palegreen
98fb98
darkslateblue
483d8b
paleturquoise
afeeee
darkslategray
2f4f4f
palevioletred
db7093
darkturquoise
00ced1
papayawhip
ffefd5
darkviolet
9400d3
peachpuff
ffdab9
deeppink
ff1493
peru
cd853f
deepskyblue
00bfff
pink
ffc0cb
dimgray
696969
plum
dda0dd
dodgerblue
1e90ff
powderblue
b0e0e6
firebrick
b22222
purple
800080
floralwhite
fffaf0
red
ff0000
forestgreen
228b22
rosybrown
bc8f8f
gainsboro
dcdcdc
royalblue
4169e1
ghostwhite
f8f8ff
saddlebrown
8b4513
gold
ffd700
salmon
fa8072
goldenrod
daa520
sandybrown
f4a460
gray
7f7f7f
seagreen
2e8b57
green
008000
seashell
fff5ee
greenyellow
adff2f
sienna
a0522d
honeydew
f0fff0
skyblue
87ceeb
hotpink
ff69b4
slateblue
6a5acd
indianred
cd5c5c
slategray
708090
ivory
fffff0
snow
fffafa
khaki
f0e68c
springgreen
00ff7f
lavender
e6e6fa
steelblue
4682b4
lavenderblush
fff0f5
tan
d2b48c
lawngreen
7cfc00
thistle
d8bfd8
lemonchiffon
fffacd
tomato
ff6347
lightblue
add8e6
turquoise
40e0d0
lightcoral
f08080
violet
ee82ee
lightgoldenrodyellow
fafad2
wheat
f5deb3
lightgray
d3d3d3
white
ffffff
lightgreen
90ee90
whitesmoke
f5f5f5
lightpink
ffb6c1
yellow
ffff00
lightsalmon
ffa07a
yellowgreen
9acd32

D ynamic H yper T ext M arkup L anguage
SCRIPT
Alterando o formato do cursor
Link que altera o cursor
Anexando objetos ao cursor

<SCRIPT>...</SCRIPT>
status="mensagem"
Exibe uma mensagem que aparece na barra de status do Windows. Voc pode alterar essa mensagem como quiser,
basta determinar entre os parmetros <script>status="..."</script> a mensagem que quer que aparea.
Por exemplo: Esta pgina est configurada com a mensagem Anavilhanas so ilhas do rio Amazonas:
Sintaxe:
<SCRIPT>
status="Anavilhanas so ilhas do rio Amazonas"
</SCRIPT>
Agora observe o canto inferior esquerdo do seu monitor. A mensagem est l. Movimente o cursor sobre outras ncoras
e o status ir mudar mas quando voc desloca para qualquer outro ponto da tela o default Anavilhanas... retorna.
defaultstatus="mensagem"
Mostra uma mensagem quando nenhuma outra est sendo exibida.
Obviamente estes parmetros s funcionam no Internet Explore.

ALTERANDO O FORMATO DO CURSOR
Se voc est usando o Internet Explore v4.0 ou o Netscape v6.0, voc tem o recurso de alterar o
formato do cursor. Basta acrescentar ao comando HREF o parmetro STYLE="cursor:tipo_do_cursor".
FIGURA NOME NS IE COMANDO
Interrogao 6+ 4+ cursor:help
Cruz 6+ 4+ cursor:crosshair
Cursor padro 6+ 4+ cursor:default
No padro 6+ 4+ cursor:hand
Cruz com setas 6+ 4+ cursor:move
Seta para o norte 6+ 4+ cursor:n-resize
Seta para o nordeste 6+ 4+ cursor:ne-resize
Seta para o leste 6+ 4+ cursor:e-resize
Seta para o sudeste 6+ 4+ cursor:se-resize
Seta para o sul 6+ 4+ cursor:s-resize
Seta para o sudeste 6+ 4+ cursor:sw-resize
Seta para o oeste 6+ 4+ cursor:w-resize
Seta para o noroeste 6+ 4+ cursor:nw-resize
Insero horizontal 6+ 4+ cursor:text
Ampulheta 6+ 4+ cursor:ne-wait
Tempo progressivo 6+ cursor:progress
Acesso proibido 6+ cursor:not-allowed
6+ cursor:no-drop
Insero vertical 6+ cursor:ne-resize
6+ cursor:all-scroll
Ajuste de coluna 6+ cursor:col-resize
Ajuste de linha 6+ cursor:row-resize
Um arquivo especfico 6+ 6+ cursor:url(...)

LINK QUE ALTERA O CURSOR
No ltimo caso da tabela acima a propriedade cursor:url(...) especifica um arquivo.ani a escolher. Por
exemplo: Vou configurar o link Tutorial com o arquivo 3db2ap11.ani.
TUTORIAL
<A HREF="tutorial.htm" STYLE="cursor:url(imagens/3db2ap11.ani)">TUTORIAL</A>
Para mudar definitivamente o cursor de uma pgina basta usar a classe de estilo inserindo body {cursor:url( ... )}
entre as tags <HEAD> ... </HEAD>. Por exemplo: Configurei as pginas desta HP com este belo cursor verde, ele
o arquivo 3dgarrom.cur que est no meu subdiretrio imagens. Este cursor s ir funcionar neste homepage, de
modos que, quando voc clicar num link ou fechar a pgina ele voltar ao cursor normal configurado em seu sistema
operacional.
<HEAD>
body {cursor:imagens/3dgarrom.cur}
</STYLE>
</HEAD>

ANEXANDO OBJETOS AO CURSOR
Agora vou mostrar como vincular um arquivo de imagem ao cursor de modo que, ao
movimentar o cursor, o arquivo de imagem o acompanhar. O arquivo que vou usar como exemplo o
3sun6c.gif.

3sun6c.gif
PRIMEIRO:
Insira o script JavaScript ( direita) entre as tags <HEAD>...</HEAD>
do arquivo onde o efeito deve acontecer.

<script type="text/javascript">
function cursor()
{
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clientY
}
</script>
SEGUNDO:
Neste mesmo arquivo acrescente entre os demais parmetros da tag BODY o parmetro
onmousemove="cursor()". Ento a BODY do arquivo ficar mais ou menos assim:
<BODY text="#000000" link="#0000ee" vlink="#551a8b" alink="#ff0000 onmousemove="cursor()">
TERCEIRO:
E por ltimo insira em qualquer lugar do arquivo (de preferncia quase no fim, antes de </BODY>) a chamada para o
arquivo 3sun6c.gif, que ir seguir o cursor incansavelmente.
<IMG ID="trail" STYLE="visibility:hidden" SRC="imagens/3sun6c.gif" WIDTH="64" HEIGHT="64">
Repare que configurei WIDTH="64" HEIGHT="64" exatamente com o tamanho do arquivo. Agora vamos ao
teste do exemplo:
Exemplo
Uma opinio minha: O webmaster deve tomar cuidado ao usar este tipo de efeito para incrementar sua HP porque
ele pode acabar torrando a pacincia do internauta que ao movimentar o cursor tem esse objeto atrapalhando ou
distraindo sua ateno.

Multimdia
BGSOUND
EMBED
NOEMBED

<BGSOUND atributo>
Voc j entrou num site com fundo musical? A msica parece dar um colorido especial s coisas. Na
Internet tambm assim. Existe um comando chamado BGSOUND que executa um arquivo de som, exclusivo do
Internet Explorer, assim que a pgina acessada. Uma vez iniciada a execuo do som, pode-se interromp-la
pressionando Esc ou simplesmente mudando de pgina.
Como exemplo configurei esta pgina com um fundo sonoro, um arquivo chamado entrada.mid que deve ser
colocado entre as tags <HEAD>...</HEAD>. A sintaxe bem simples:
<BGSOUND SRC="audio/entrada.mid" LOOP="1">
ATRIBUTOS:
SRC="URL"
Especifica o endereo do arquivo de som. No exemplo acima o meu arquivo mid est dentro do diretrio chamado
"audio".
LOOP="nmero | infinite"
"nmero" Determina quantas vezes o arquivo ser executado, infinite executa o arquivo indefinidamente.
Outro recurso interessante o comando meta que possibilita um controle melhor sobre o tempo de execuo do
arquivo de udio. A seguir outro exemplo, agora com apresentao desse recurso.
Sintaxe:
<HTML>
<HEAD>
<TITLE>Perereca</TITLE>
</HEAD>
<BODY bgcolor="#000000">
<CENTER><img src="../imagens/perereca.jpg" border="0"></a></CENTER>
<META HTTP-EQUIV="refresh" content="5; url=audio/arow00af.wav">
</BODY>
</HTML>

Exemplo

USANDO O COMANDO IMG PARA INSERIR VDEOS
Dentro do comando IMG existe um parmetro muito usado para se inserir clipe de vdeo na homepage.
o DYNSRC, abreviatura de Dynamic Source.
Sintaxe:
<center>
<img dynsrc="imagens/search.avi" width=100 height=70 loop=infinite>
</center>
No exemplo acima temos dynsrc que exibe o arquivo search.avi numa janela de 100 x 70 pixels com uma repetio
infinita (loop=infinite).
ATRIBUTOS:
ALIGN=top, middle, bottom, left, right
Alinha o texto que margeia a imagem pelo topo, meio, base, esquerda e direita, respectivamente.
ALT="texto"
Exibe um texto alternativo no lugar da imagem.
BORDER=nmero
Especifica a largura da borda.
CONTROLS
Exibe botes de controle sob a imagem.
DYNSRC="URL"
Exibe o arquivo de vdeo. Os formatos de arquivo so avi, mpg e mov.
HEIGHT=nmero
Determina a altura da janela que ser aberta para exibir o arquivo.
HSPACE=nmero
Especifica uma margem horizontal entre a imagem e o texto.
LOOP=nmero, infinite
Especifica quantas vezes o arquivo ser exibido.
SRC=endereo
Especifica o endereo do arquivo de vdeo.
START=fileopen / mouseover
Fileopen (default), especifica que o vdeo deve ser executado imediatamente. Mouseover faz com que o vdeo seja
executado somente quando o cursor do mouse passa sobre a rea da imagem.
VSPACE=nmero
Especifica uma margem vertical entre a imagem e o texto.
WIDHT=nmero
Determina a largura da janela que ser aberta para exibir o arquivo.
Agora vamos testar mais alguns parmetros de configurao sobre o mesmo arquivo search.avi:
Sintaxe:
<center>
<img dynsrc="imagens/search.avi" border=2 start=mouseover alt="Lanterna do Windows">
</center>
O parmetro border=2 criou uma borda preta em torno da imagem; start=mouseover faz a imagem se movimentar
quando o cursor do mouse passado sobre ela, o alt="Lanterna do Windows" apresenta uma janelinha com o
nome "Lanterna do Windows", quando a imagem, por uma razo qualquer, deixa de ser carregada.
O parmetro controls no consegui faze-lo funcionar. Que pena!! Ele parece ser interessante... Algum tem alguma
dica sobre este parmetro?

<EMBED atributos> ... </EMBED>
Executa ou carrega um objeto, como um vdeo ou arquivo de som.
ATRIBUTOS:
ALIGN="left", "right", "top", "bottom"
Alinha o texto esquerda, direita, topo e base, respectivamente.
BORDER="nmero"
Insere e determina a espessura de uma borda em torno do applet.
FRAMEBORDER="no"
Configura uma moldura sem borda.
HEIGHT="nmero"
Determina a altura da janela em pixels.
HIDDEN="true", "false"
Determina se o plug-in visvel na pgina.
HSPACE="nmero"
Especifica as bordas horizontais.
NAME="texto"
Especifica o nome do applet.
PALLETE="foreground", "background"
S usado na plataforma Windows. Foreground faz a paleta do plug-in ser a paleta de primeiro plano. Background a
do segundo plano.
PLUGINSPACE="endereo"
Especifica o endereo que contm as instrues para a instalao do plug-in.
VSPACE="nmero"
Especifica as bordas verticais.
TYPE="mimetype"
Determina o tipo de MIME da tag embed deve ser carregado.
WIDTH="nmero"
Determina a largura da janela em pixels.
Sintaxe:
<center>
<embed src="imagens/search.avi" width="200" height="200">
Este texto est alinhado no topo.
</embed>
</center>
Este texto est alinhado no topo.

<NOEMBED> ... </NOEMBED>
Este comando exibe uma mensagem informando que o browser usado no tem capacidade para exibir o
objeto. A mensagem deve ser inserida entre <noembed> e </noembed>.
Elementos
Especiais
APPLET
PARAM
FONT
BR
NOBR
WBR
MAP
AREA

<APPLET atributos> ... </APPLET>
Esta tag inclui um programa executvel em Java na pgina, os applets Java, como so chamados.
So programas de computador acionados pelos documentos em HTML. Os applets so transferidos a partir de um
servidor Web para, em seguida, serem executados no computador do usurio. Os applets Java so multiplataforma, isso
, eles funcionam em PC, Macintosh, Sum, IBM ou Hewlwtt-Packard. Esse tipo de independncia de plataforma tem
sido a razo de seu maior sucesso.
Atributos:
code="classe Java"
Informa o nome do arquivo executvel que ser carregado ou a sua URL completa.
codebase="URL base"
Informa o caminho para o arquivo executvel citado em code. obrigatrio se no foi fornecida a URL completa em
code.
name="nome"
Fornece um rtulo para o applet (opcional)
align, alt, hspace, vspace, height, width idnticos aos atributos de mesmo nome de <img>
Um exemplo da aplicao de um applet esta fonte multicolorida que aparece abaixo.

Para exibir este efeito de fonte em sua homepage basta copiar o arquivo RainbowText.class para o diretrio onde
est o arquivo HTML que ir exibir o efeito, depois insira no arquivo HTML os seguintes parmetros:
Sintaxe:
<applet code="RainbowText.class" width=310
height=42>
<param name=text value="Fonte Multicolorida">
<param name=fontname value="Arial">
<param name=bgcolor value="cd853f">
<param name=fontstyle value="B">
<param name=fontsize value="30">
<param name=sleeptime value="180">
</applet>
Cole esse cdigo-fonte no arquivo HTML onde voc quer que o efeito aparea. Seus parmetros de configurao so o
seguinte:
width=310 height=42 o tamanho da janela onde o texto est contido;
text value especifica o texto que ir exibir o efeito;
fontname especifica o tipo da fonte;
bgcolor a cor de fundo;
fontstyle o efeito (no nosso exemplo ela est em negrito "B");
fontsize o tamanho da fonte e finalmente
sleeptime que determina o tempo de durao do efeito apresentado.
Pronto!
Ah, sim! Na verdade voc nem precisa fazer download do RainbowText.class. que quando voc abre uma homepage
que possui os aplicativos applets Java o arquivo copiado automaticamente para o seu diretrio de arquivos
temporrios. Para localiza-lo basta clicar em [Iniciar], na barra de ferramentas do Windows e depois em
[Localizar]. Digite *.class <Enter>. O comando de busca ir apresentar uma relao de todos os applets que voc
foi adquirindo pelas suas jornadas na Web. O RainbowText.class estar entre eles. Basta copia-lo para o diretrio de
sua homepage e pronto.

<PARAM atributos>
Fornece parmetros para um applet.
Utilizado dentro de: <APPLET>
Atributos:
name="nome"
Informa o nome do parmetro (definido no applet).
value="valor"
Informa o valor do parmetro (definido pelo autor da pgina).
Vide o exemplo aplicado acima.

<FONT atributos> ... </FONT>
Altera tamanho, tipologia e cor do texto marcado.
Pode conter: texto, formatao de caracteres
Utilizado dentro de: blocos, listas, tabelas, formulrios
Atributos:
size="valor" ou"incremento"
Altera o tamanho do texto. Pode ser atravs de um valor de 1, o menor, at 7, o maior (o padro 3, caso no seja
especificado o tamanho) ou atravs de incrementos de -3 a +3. No exemplo abaixo configurei cada letra com um
tamanho diferente, partindo do tamanho 7 em ordem decrescente, depois crescente, depois decrescente...
<font size="7">T</font><font size="6">A</font><font size="5">M</font><font size="4">A</font>...
T A M A N H O D A S F O N T E S
T A M A N H O D A S F O N T E S

color="#rrggbb" ou "nome"
Altera a cor do texto. Pode ser atravs do valor RGB (Red/Green/Blue) ou atravs de um dos 16 nomes padro VGA do
Windows. Os valores RGB esto na base hexadecimal (0 a 9, A, B, C, D, E, F).
C R I A N D O U M G R A D I E N T E D E C O R E S
EXEMPLOS:
<font color="red">Texto em vermelho</font>
Texto em vermelho
<font color="008000">Agora verde</font>
Agora verde
<font color="0000ff">Em azul</font>
Em azul
<font color="ab0125">Cor vinho</font>
Cor vinho
Nome Cdigo Nome Cdigo
red
ff0000
maroon
800000
lime
00ff00
green
008000
blue
0000ff
navy
000080
yellow
ffff00
olive
808000
aqua
00ffff
teal
008080
fuchsia
ff00ff
purple
800080
white
ffffff
silver
c0c0c0
black
000000
gray
808080

face="nome de fonte"
Altera a tipologia do texto de acordo com o nome de uma fonte disponvel no sistema local. Se a fonte no estiver
disponvel, no ser alterada.
Exemplos de faces:
Texto exibido na fonte Verdana.
Texto exibido na fonte Courier New.
Texto exibido na fonte TimesRoman.
Texto exibido na fonte Arial Narrow.
Texto exibido na fonte MS Sans Serif.

<BR atributos>
Break Line - Quebra de linha. Fora o texto que o segue a iniciar na prxima linha.
Utilizado dentro de: cabealhos, elementos de formatao de caracteres, blocos, clulas de tabelas, itens de listas.
clear="left", "right", "all"
Sem a opo clear simplesmente introduz uma quebra de linha. Com a opo clear=left, quebra a linha e desce at
encontrar uma margem esquerda limpa. clear=right faz o mesmo em relao margem direita e clear=all, desce at
encontrar ambas as margens livres de figuras.

<NOBR> ... </NOBR>
Esse comando evita que o texto seja quebrado em mais de uma linha, ou seja, o texto envolvido por
<nobr>...</nobr> ir ter somente uma linha no importando a quantidade de palavras que ele contenha.

<WBR> Word Break
Indica ao browser onde o texto pode ser quebrado. Esta tag usada em conjunto com <NOBR>.

<MAP atributos> ... </MAP>
O formato de imagem mais usado na Internet o GIF e o JPG. Eles foram adotados devido seu
tamanho comprimido, otimizando o tempo de abertura das homepages que utilizam imagens, fotos ou figuras em
gerais. Tais imagens podem ser mapeadas de forma que uma determinada rea sua possa ser vinculada a uma ncora de
acesso para outros links. Mapear uma imagem consiste em determinar as coordenadas da imagem que pertencem a uma
rea de link com pontos de ativao. Existem duas maneiras de se fazer isso.
Uma imagem formada por pixels (pontos). Seu tamanho dimensionado pelos eixos X (largura) e Y (altura). A
imagem dos limes abaixo possui a dimenso de 81 x 66 pixels. Portanto suas coordenadas partem do canto superior
esquerdo (0 x 0) e vo at o canto inferior direito (81 x 66).
NOTA: Para verificar a dimenso de uma imagem basta clicar sobre ela com o boto direito do mouse e depois
selecionar Propriedades (no browser Internet Explore), ali apresentado vrias informaes sobre a imagem, entre
elas sua dimenso. Faa um teste na imagem acima.
Mapear uma imagem consiste em informar ao browser que determinada rea da imagem ir acessar outro link.
Atributo:
name="nome_do_mapa"
Rotula o mapa com um nome que pode ser referenciado por uma imagem atravs do atributo usemap.
Sintaxe:
<center>
<img src="imagens/lemon.gif" usemap="#demomap" border="1">
<map name="demomap">
<area shape=rect coords="0,0,40,33" href="img-mapeada.htm">
</map>
</center>
Observe o comando img src="...", especificando o nome da imagem, com o parmetro usemap="#...",
especificando o nome do mapa, antecedendo o comando map name="...". Agora movimente o cursor sobre a
imagem abaixo e observe que no seu primeiro 1/4 aparece a opo de ncora para outro arquivo HTML.

<AREA atributos>
Define coordenadas para imagens mapeadas. As coordenadas variam conforme o tipo da rea a ser
mapeada. A rea do tipo circular possui duas coordenadas, uma para definir o centro do crculo e outra para definir o
raio. A rea retangular possui duas coordenadas, tambm, uma para o vrtice superior esquerdo e outra para o vrtice
inferior direito. A rea poligonal possui uma coordenada para cada vrtice, conforme o tipo da poligonal.
Utilizado dentro de: <MAP>
Atributos:
shape="circ, poly" ou "rect"
Crculo, polgono ou retngulo, respectivamente.
coords="coordenadas"
Depende da forma: coords="x1, y1, x2, y2, x3, y3, ..." definem os vrtices em um polgono; coords="x1,
y1, x2, y2" vrtices opostos em um retngulo; coords="x, y, r" centro e raio de um crculo.
href="URL"
Informa a URL que deve ser carregada ao se selecionar a rea.
nohref
Permite que a rea selecionada no acione nenhum link.

Editores de reas Mapeadas.
Determinar as coordenadas de uma rea quadrada ou retangular at que fcil, o problema comea a
complicar quanto tentamos definir as reas circulares ou, pior, as poligonais de uma imagem qualquer. Para isso temos
diversos softwares shareware ou freeware que faz todo o trabalho matemtico.
Aqui vai um editor de reas mapeadas, o Map This v1.31 (Mpths131.exe) com 870KBytes de
tamanho. Se no me engano ele um aplicativo shareware.
Ou talvez queira procurar algum outro nos sites de downloads relacionados abaixo.
MAP THIS

TABELAS
A tabela apareceu pela primeira vez no HTML verso 3.2 em 1995 e desde ento tem sido um dos
principais recursos de otimizao da pgina permitindo o alinhamento de textos, imagens e blocos de informaes,
muitas vezes criado pela prpria tabela. Os temas, a seguir, so um bom exemplo para mostrar o que podemos fazer
com este recurso.

USANDO TABELAS PARA CRIAR COLUNAS DE TEXTO
Uma forma de incrementar a apresentao de sua homepage dividir o texto em duas ou mais colunas,
estilo manchete de revista. Vou montar um exemplo com um texto formatado em duas colunas. Primeiro digite o texto
em modo simples, sem qualquer formatao. Depois divida o texto exatamente no meio criando uma linha em branco
entre o texto superior e o inferior (conforme o exemplo do texto em itlico, abaixo). O texto superior ser a coluna
direita e o inferior a esquerda.
Bloco de texto superior:
O ciclo da gua na costa terrestre possui um percurso bastante complexo, parcialmente dirigido pelo ciclo da
atmosfera, importante veculo transportador da gua, quer sob a forma de gotculas finamente dispersas, quer sob a
forma gasosa. A energia necessria para este ciclo provm do calor solar, e assim, por um nmero infinitamente
grande de vezes, uma molcula de gua evaporada do oceano e a ele retorna, precipitada pelas chuvas, podendo
tambm cair no continente, infiltrando-se solo adentro, ser absolvida por uma planta qualquer que em pouco tempo
devolver a mesma molcula atmosfera, podendo ento, direta ou indiretamente, por meio dos regatos e rios
retornar ao oceano.
Bloco de texto inferior:
Estes so os ciclos mais freqentes, havendo, contudo, um nmero ilimitado de outros ciclos mais complexos e de
importncia geolgica. Se considerarmos uma molcula de gua saindo pela primeira vez superfcie terrestre,
provinda das profundezas da crosta e trazida pelas atividades vulcnicas como gua juvenil (que nem sempre
realmente juvenil, pois o magma pode ter assimilado sedimentos ricos em gua, sendo esta novamente devolvida
superfcie), poder ela tomar diversos rumos. Condensando-se em chuva e caindo no oceano, poder ser levada s
grandes profundezas e novamente aprisionada junto aos sedimentos abissais por vrias centenas de milnios, at ser
novamente incorporada a um magma e novamente expulsa.
Agora vou inserir os parmetros de tabela <table> , envolvendo os dois blocos de texto, superior e inferior. Entre eles
irei inserir uma coluna intermediria com <td width="4%">, dentro da qual colocarei uma linha vertical s por
questo de esttica e acabamento. O cdigo fonte o seguinte:
Sintaxe:
<table>
<tr>
<td width="48%">
Bloco de texto superior...
</td>
<td width="4%">Linha
vertical(*)
</td>
<td width="48%">
Bloco de texto inferior...
</td></tr></table>

(*) NOTA A sintaxe de criao da linha vertical encontra-se no seguinte
exemplo:
O resultado este:
O ciclo da gua na costa terrestre possui um percurso
bastante complexo, parcialmente dirigido pelo ciclo da
atmosfera, importante veculo transportador da gua,
quer sob a forma de gotculas finamente dispersas, quer
sob a forma gasosa. A energia necessria para este ciclo
provm do calor solar, e assim, por um nmero
infinitamente grande de vezes, uma molcula de gua
evaporada do oceano e a ele retorna, precipitada pelas
chuvas, podendo tambm cair no continente, infiltrando-
se solo adentro, ser absolvida por uma planta qualquer
que em pouco tempo devolver a mesma molcula
atmosfera, podendo ento, direta ou indiretamente, por
meio dos regatos e rios retornar ao oceano.
Bloco de texto inferior:
Estes so os ciclos mais freqentes, havendo, contudo,
um nmero ilimitado de outros ciclos mais complexos e
de importncia geolgica. Se considerarmos uma
molcula de gua saindo pela primeira vez superfcie
terrestre, provinda das profundezas da crosta e trazida
pelas atividades vulcnicas como gua juvenil (que nem
sempre realmente juvenil, pois o magma pode ter
assimilado sedimentos ricos em gua, sendo esta
novamente devolvida superfcie), poder ela tomar
diversos rumos. Condensando-se em chuva e caindo no
oceano, poder ser levada s grandes profundezas e
novamente aprisionada junto aos sedimentos abissais
por vrias centenas de milnios, at ser novamente
incorporada a um magma e novamente expulsa.
Observe que a soma de "width="48%" + "4%" + "48%" = 100% que a largura da tela do seu monitor. A
coluna do centro serve como um separador de texto e dentro dessa coluna que est inserida a linha vertical.
Agora vou usar o mesmo exemplo para inserir imagens nas colunas.
Sintaxe:
<table>
<tr>
<td width="48%">
Bloco de texto superior, primeiro pargrafo...
<img src="imagens/nuvens.jpg" align="left" vspace="6" hspace="10" border="2">
Bloco de texto superior, segundo pargrafo... </td>

<td width="4%">Linha vertical</td>

<td width="48%">
<img src="imagens/sunset11.jpg" align="left" vspace="6" hspace="10"
border="2">
Bloco de texto inferior...</td>
</tr>
</table>

quer sob a forma de gotculas
finamente dispersas, quer sob
a forma gasosa. A energia
necessria para este ciclo
provm do calor solar, e
assim, por um nmero
infinitamente grande de vezes,
uma molcula de gua
evaporada do oceano e a ele retorna, precipitada pelas
chuvas, podendo tambm cair no continente, infiltrando-
se solo adentro, ser absolvida por uma planta qualquer
que em pouco tempo devolver a mesma molcula
atmosfera, podendo ento, direta ou indiretamente, por
Estes so os ciclos mais freqentes,
havendo, contudo, um nmero ilimitado
de outros ciclos mais complexos e de
importncia geolgica. Se
considerarmos uma molcula de gua
saindo pela primeira vez superfcie
terrestre, provinda das profundezas da
crosta e trazida pelas atividades
vulcnicas como gua juvenil (que nem
sempre realmente juvenil, pois o magma pode ter
assimilado sedimentos ricos em gua, sendo esta
novamente devolvida superfcie), poder ela tomar
diversos rumos. Condensando-se em chuva e caindo no
oceano, poder ser levada s grandes profundezas e
novamente aprisionada junto aos sedimentos abissais
por vrias centenas de milnios, at ser novamente
meio dos regatos e rios retornar ao oceano. incorporada a um magma e novamente expulsa.
Pronto! Ficou bonita mas vou increment-la um pouco mais: Imagine o mesmo exemplo com figura de centro e o texto
margeando suas duas laterais. Para isso vou criar mais dois blocos de tabela, com trs divises cada, e trabalhar com
eles. O layout da interface ficar assim:
Texto 1... Texto 4...
Texto 2... Imagem Texto 5...
Texto 3... Texto 6...
A sintaxe esta:
<table>
<tr>
<td width="48%">Texto 1...</td>
<td width="4%"></td>
</tr>
</table>

<table>
<tr>
<td width="50%"><img src="imagens/sky03.jpg" align="left" vspace="6"
hspace="10" Border="2"></td>
</tr>
</table>

<table>
<tr>
<td width="4%"></td>
</tr>
</table>
Resultado...
quer sob a forma de gotculas finamente dispersas, quer
sob a forma gasosa.
Estes so os ciclos mais freqentes, havendo, contudo,
um nmero ilimitado de outros ciclos mais complexos e
de importncia geolgica. Se considerarmos uma
molcula de gua saindo pela primeira vez superfcie
terrestre, provinda das profundezas da crosta e trazida
pelas
A energia necessria para
este ciclo provm do calor
solar, e assim, por um
nmero infinitamente grande
de vezes, uma molcula de
gua evaporada do oceano
e a ele retorna, precipitada
pelas chuvas, podendo
tambm cair no continente,
atividades vulcnicas como
gua juvenil (que nem
sempre realmente juvenil,
pois o magma pode ter
assimilado sedimentos ricos
em gua, sendo esta
novamente devolvida
superfcie), poder ela tomar
diversos rumos.
infiltrando-se solo adentro, ser absolvida por uma
planta qualquer que em pouco tempo devolver a mesma
molcula atmosfera, podendo ento, direta ou
indiretamente, por meio dos regatos e rios retornar ao
oceano.
Condensando-se em chuva e caindo no oceano, poder
ser levada s grandes profundezas e novamente
aprisionada junto aos sedimentos abissais por vrias
centenas de milnios, at ser novamente incorporada a
um magma e novamente expulsa.

INSERINDO IMAGENS, CORES E BACKGROUNDS EM TABELAS
Os comandos de tabelas tambm so prticos para alinhar vrias imagens lado a lado. Os exemplos
mostrados, a seguir, explicam como fcil fazer isso. Vamos comear com o bsico alinhando trs arquivos de
imagem.gif.
Sintaxe:
<center>
<table border>
<tr>
<td><img src="imagens/brasil.gif"></td>
<td><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif"></td>
</tr>
</table>
</center>
Configurando border="0" e usando cellpadding="50" para aumentar os espaos entre as figuras temos os
seguintes resultados:
Sintaxe:
<center>
<table border="0" cellpadding="50">
<tr>
<td><img src="imagens/brasil.gif"></td>
<td><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif"></td>
</tr>
</table>
</center>
Voc pode inserir um texto do lado direito, esquerdo, ou, usando a tag <BR>, (BReak line = quebra de linha), acima e
abaixo da imagem.
Sintaxe:
<center>
<tr>
<td><img src="imagens/brasil.gif"><br>Bandeira do Brasil</td>
<td>Sol de vero<br><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif">Sorria!!!</td>
</tr>
</table>
</center>
Bandeira do
Brasil
Sol de vero
Sorria!
!!
Agora vamos inserir uma cor de fundo com o atributo bgcolor:
Sintaxe:
<center>
<table border="0" cellpadding="50" bgcolor="#87ceeb">
<tr>
</tr>
</table>
</center>
Bandeira do
Brasil
Sol de vero
Sorria!
!!
Ainda usando o mesmo exemplo para inserir um background.
Sintaxe:
<center>
<table border="0" cellpadding="50" background="imagens/mmb_bg.gif">
<tr>
</tr>
</table>
</center>
Bandeira do
Brasil
Sol de vero
Sorri
a!!!
Agora vamos inserir cores e backgrounds nas clulas, alternadamente. Coloquei o cellspacing="0" para eliminar os
espaos entre as clulas.
Sintaxe:
<center>
<table border="0" cellpadding="50" cellspacing="0">
<tr>
<td bgcolor="#87ceeb"><img src="imagens/brasil.gif"<br>Bandeira do Brasil></td>
<td background="imagens/mmb_bg.gif">Sol de vero<br><img src="imagens/sol2.gif"></td>
<td bgcolor="#88cf00"><img src="imagens/sorriso.gif">Sorria!!!</td>
</tr>
</table>
</center>
Bandeira do
Brasil
Sol de vero
Sorr
ia!!!
Pronto!!

INSERINDO GIFS ANIMADOS EM BACKGROUND
Geralmente utilizamos uma barra animada para realar um ttulo, separar textos, figuras ou
simplesmente como enfeite ilustrativo. Mas... qual ser a reao dos browsers (navegadores) se eu inserir um gif
animado como um background? Ser que funciona?? Fiz essa experincia com os trs browsers mais utilizados na Rede
e descobri que apenas o Opera no aceita este artifcio. Aqui esto alguns exemplos de gifs animados de barras que
podem ser inseridos como background em uma tabela.
barani11.gif
bowline.gif
utlign26.gif
Sintaxe:
<center>
<tr>
<td background="imagens/barani11.gif" width="100" align="center">
<font color="1e90ff"><b>barani.gif</b></font></td>
<td background="imagens/bowline.gif" width="100" align="center">
<b>bowline.gif</b></td>
<td background="imagens/utlign26.gif" width="100" align="center">
<font color="ffffff"><b>utlign26.gif</b></font></td>
</tr>
</table>
</center>
Resultado:
barani.gif bowline.gif utlign26.gif

Folhas de Estilo em Cascata
O CSS: (Cascading Style Sheets) ou Folhas de Estilo em Cascata, uma tecnologia que apareceu em
1996, padronizada pelo World Wide Web Consortium (a entidade que define os padres da WEB), e que no parte do
HTML padro, mas sim um conjunto de novas tags que ajudam a ter um melhor controle sobre o layout e o
gerenciamento de nossas pginas. Agora vamos conhecer um pouco mais sobre essa tecnologia: O nosso prximo
assunto ser...
BORDAS (esta criada com TABLE)
<TABLE WIDTH="680" border background="imagens/bg_t14.jpg" bgcolor="#ffcc99" bordercolor="red">
<TR><TD ALIGN="center"><TT><B><FONT SIZE="4">BORDAS</FONT></B></TT> (esta criada com TABLE)
</TD></TR>
</TABLE>
BORDAS (esta criado com CSS)
<DIV STYLE="border-style:double; border-width:3px; border-color:red; background:url(imagens/bg_t14.jpg)">
<CENTER><TT><B><FONT SIZE="4">BORDAS</FONT></B></TT> (esta criado com CSS)</CENTER>
</DIV>
A exemplo dos dois efeitos de ilustrao sobre o ttulo deste tpico "BORDAS", apresentados acima, o primeiro foi
criado com a tag <TABLE> e o segundo com o recurso CSS, <DIV>. Embora os recursos de tabela tenha oferecido
diversas opes de configurao ao webmaster, o CSS surgiu para aumentar essa liberdade com maior nfase
criatividade.
Os dois modelos acima foram configurados com os mesmos parmetros de cor, textura e fonte, observe a diferena de
apresentao. Muito sutil, no mesmo? Porm a borda criada com os recursos da Folha de Estilo possui outros
parmetros de formatao que a tag TABLE no possui. Agora vou apresentar algumas propriedades que esto
relacionadas com as bordas:

padding
Cria um espaamento entre o objeto (nesse caso o texto) e as quadro bordas. Esse espaamento pode ser definido em
points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%).
<DIV STYLE="border: solid; border-width:1px; padding:5px">padding com 5px</DIV>
padding com 5px
<DIV STYLE="border: solid; border-width:1px; padding:10pt">padding com 10pt</DIV>
padding com 10pt
<DIV STYLE="border: solid; border-width:1px; padding:1cm">padding com 1cm</DIV>
padding com 1cm

Porm h situaes que no precisamos de um espao eqidistante entre o objeto e seus quatro lados. Nesse caso para
obter um controle mais refinado sobre as bordas podemos usar as seguintes propriedades:
padding-bottom
Cria um espaamento entre o objeto e a borda da base.
padding-left
Cria um espaamento entre o objeto e a borda esquerda.
padding-right
Cria um espaamento entre o objeto e a borda da direita.
padding-top
Cria um espaamento entre o objeto e a borda de topo. Os espaamento so definido em points (pt), inches (in),
centimeters (cm), pixels (px) ou percentage (%).
<DIV STYLE="border: solid; border-width:1px; padding-bottom:15px">padding com 5px</DIV>
padding com 5px
<DIV STYLE="border: solid; border-width:1px; padding-left:25pt">padding com 10pt</DIV>
padding com 10pt
<DIV STYLE="border: solid; border-width:1px; padding-top:1cm">padding com 1cm</DIV>
padding com 1cm
Aprenda mais sobre essa propriedade em Botes Texturizados

border-width
Especifica a espessura da borda. A espessura pode ser definida em trs padres especficos: thin, medium e thick ou
em pixels.
Exemplos:
<DIV STYLE="border: solid; border-width: 1px;">borda extrafina</DIV>
borda extrafina
<DIV STYLE="border: solid; border-width: thin;">borda fina</DIV>
borda fina
<DIV STYLE="border: solid; border-width: medium;">borda mdia</DIV>
borda mdia
<DIV STYLE="border: solid; border-width: thick;">borda grossa</DIV>
borda grossa
<DIV STYLE="border: solid; border-width: 10px;">borda com 10 pixels</DIV>
borda com 10 pixels

border-color
Altera a cor da borda. A cor pode ser definida pelo nome padro ou pelo cdigo RGB.
<DIV STYLE="border: solid; border-color: green;">borda verde</DIV>
borda verde
<DIV STYLE="border: solid; border-color: #6495ed;">borda azul</DIV>
borda azul

border-style
Altera o estilo da borda e possibilita at oito tipos diferentes de configurao: solid (solido), dashed (tracejado),
dotted (pontilhado), double (duplo), groove (entalhe), ridge (saliente), inset (baixo relevo), outset (alto relevo) e
none (sem borda).
Exemplos:
<DIV STYLE="border-style: solid;">borda slida</DIV>
borda slida
<DIV STYLE="border-style: dashed;">borda tracejada</DIV>
borda tracejada
<DIV STYLE="border-style: dotted;">borda pontilhada</DIV>
borda pontilhada
<DIV STYLE="border-style: double;">borda dupla</DIV>
borda dupla
<DIV STYLE="border-style: groove;">borda sombreada</DIV>
borda sombreada
<DIV STYLE="border-style: ridge;">borda sombreada</DIV>
borda sombreada
<DIV STYLE="border-style: inset;">borda em baixo relevo</DIV>
borda em baixo relevo
<DIV STYLE="border-style: outset;">borda em alto relevo</DIV>
borda em alto relevo
<DIV STYLE="border-style: none;">Sem borda</DIV>
Sem borda

A configurao da borda tambm pode ser feita em cada um de seus lados independentemente. Existem
propriedades que tratam de efeitos como espessura, tipo e cor de apenas um dos lados da borda sem alterar a
configurao dos demais lados. Eles so:
border-bottom-color - Cor da borda base.
border-bottom-style - Estilo da borda base.
border-bottom-width - Largura da borda base.
border-left-color - Cor da borda esquerda.
border-left-style - Estilo da borda esquerda.
border-left-width - Largura da borda esquerda.

border-right-color - Cor da borda direita.
border-right-style - Estilo da borda direita.
border-right-width - Largura da borda direita.
border-top-color - Cor da borda topo.
border-top-style - Estilo da borda topo.
border-top-width - Largura da borda topo.
Os valores de color so definidos pelo nome da cor ou pelo cdigo RGB. Os valores de style so solid, dashed,
dotted, double, groove, ridge, inset, outset e none. Os valores de width so thin, medium, thick e pixels.
Exemplo:
<DIV STYLE="border-top-color:#1E90FF; border-top-width:4px; border-top-style:double; border-
bottom-color:#1E90FF; border-bottom-width:4px; border-bottom-style:double; border-left-style:none;
border-right-style:none">Um quadro com borda dupla sem as laterais</DIV>
Um quadro com borda dupla sem as laterais
Porm existe uma forma mais simples caso queira especificar os quatro lados com estilo, cor e largura sem precisar
repetir todas as categorias de propriedades. A propriedade border-top, por exemplo, aceita os trs valores de largura,
cor e tipo simultaneamente. Ento a sintaxe do cdigo fonte do mesmo exemplo acima ficaria assim:
<DIV STYLE="border-top:#1E90FF 4px double; border-bottom:#1E90FF 4px double; border-left:none;
border-right:none"> Um quadro com borda dupla sem as laterais</DIV>
Um quadro com borda dupla sem as laterais
Mais outro exemplo, agora mudando todas as bordas radicalmente:
<DIV STYLE="border-top:#87ceeb 2px dashed; border-bottom:#ff4500 5px double; border-left:#ffff00 7px
solid; border-right:#FF7F00 10px solid; ">Um quadro com borda mista</DIV>
Um quadro com borda mista

O controle das bordas no fica s nisso. Podemos combina-las com outras tags HTML e JavaScript. No
exemplo abaixo tem um marcador de data e horas (JavaScript) realado com bordas. O comando CSS est destacado
em negrito. A TABLE um recurso que usei para definir o comprimento da barra (pois WIDTH no funciona dentro
do CSS e BORDER-WIDTH executa outra funo)
<CENTER>
<TABLE WIDTH="300">
<TR>
<TD ALIGN="center">
<DIV STYLE="border-style: outset; background: #b0c4de">
<font size="1" face="verdana">
<script language="JavaScript"></script>
</DIV>
</TD>
</TR>
</TABLE>
</CENTER>
29 de Maio de 2010 - Sbado - 12:07
Agora uma borda com background com texto em movimento.
<DIV STYLE="border-style: outset; background: #66cdaa">
<MARQUEE behavior=scroll scrollamount="2" width=100%>
<FONT SIZE="1" face="verdana">COMBINANDO COMANDOS COM
CSS</FONT>
</MARQUEE>
</DIV>
Criando botes...
<TABLE>
<TR>
<TD width="100" align="center">
<DIV STYLE="border-style: outset; background: #d8bfd8">
<a href="index.htm" style="text-decoration:none">
<FONT SIZE="1" face="verdana">Home</FONT></A></DIV>
</TD>
</TR>
</TABLE>
Home
Criando botes com textura gif/jpg...
<TABLE>
<TR>
<TD width="100" align="center">
<DIV STYLE="border-style: outset;
background:url(imagens/textura01.jpe)">
<a href="index.htm" style="text-decoration:none">
<FONT SIZE="3" face="courier new">Home</FONT></A></DIV>
</TD>
</TR>
</TABLE>
Home
Para criar uma barra de comandos basta repetir a sintaxe do boto (acima) para cada link e inseri-los dentro de uma
tabela. Veja como ficou minha barra de comandos com esta formatao.
Home Introduo Histria Tutorial Comandos Glossrio Faqs

border-collapse
O Efeito Collapse. Para mostrar o que este efeito nada melhor que a aplicao prtica de um exemplo. A tabela do
lado esquerdo possui uma formatao padro cuja borda, em alto relevo, j bem conhecida na Internet.
TABELA
PADRO
' ^ ~
Acentos, til, cedilha
; : , Ponto e vrgula, dois pontos, vrgula
< > Sinal de maior ou menor
# & * Trelha, E comercial, asterisco

TABELA
COM
COLLAPSE
' ^ ~
Acentos, til, cedilha
; : , Ponto e vrgula, dois pontos, vrgula
< > Sinal de maior ou menor
# & * Trelha, E comercial, asterisco
( ) [ ] { } Parnteses, chaves, colchetes
! ? $
Exclamao, interrogao,
cifro
` " + Apstrofe, aspas. mais
/ | \
Barra,
pipe, barra
invertid
( ) [ ] { } Parnteses, chaves, colchetes
! ? $
Exclamao, interrogao,
cifro
` " + Apstrofe, aspas. mais
/ | \
Barra, pipe,
barra
invertid
No lado direito temos a mesma tabela configurada com o Efeito Collapse que omite suas bordas e apresenta uma
textura suave em auto-relevo dando um acabamento visual mais refinado. Aqui est uma aplicao CSS tabela.
Praticamente todos os comandos de border-style podem ser usados para revestir uma tabela criando novos efeitos.
Abaixo segue uma seleo dos efeitos mais interessantes. Novamente vamos comear com uma tabela padro, ela serve
como ponto de referncia.
<table border width="230">
<tr><th colspan=2>Tabela padro</th></tr>
<tr><td>clula 1</td><td>clula 2</td></tr>
</table>
Tabela padro
clula 1 clula 2
<table border width="230"
STYLE="border-collapse:collapse">
<tr><th colspan=2>Efeito collapse</th></tr>
</table>
Efeito collapse
clula 1 clula 2
STYLE="border:4px dashed">
<tr><th colspan=2>Borda tracejada</th></tr>
</table>
Borda tracejada
clula 1 clula 2
STYLE="border:5px double">
<tr><th colspan=2>Borda dupla</th></tr>
</table>
Borda dupla
clula 1 clula 2
STYLE="border:3px inset">
<tr><th colspan=2>Baixo relevo</th></tr>
</table>
Baixo relevo
clula 1 clula 2
STYLE="border:3px outset">
<tr><th colspan=2>Alto relevo</th></tr>
</table>
Alto relevo
clula 1 clula 2
STYLE="border:3px none">
<tr><th colspan=2>Sem bordas</th></tr>
</table>
Sem bordas
clula 1 clula 2
STYLE="border-collapse:collapse;
border-top:#b0c4de 4px solid;
border-left: #228b22 4px solid;
border-bottom:#ff6347 4px solid;
border-right:#ee82ee 4px solid">
<tr><th colspan=2>Multicolorida</th></tr>
</table>
Multicolorida
clula 1 clula 2

LINHAS TRACEJADAS <DIV STYLE atributos></DIV>
Aqui temos um texto envolto por uma linha tracejada. Na verdade uma borda tracejada que tambm pode ser usada
como linha. Para isso basta omitir o texto entre <DIV> e </DIV> e a borda se transforma em linha.
<DIV STYLE="border-bottom:dashed 1px"></DIV>
<DIV STYLE="border-bottom:dashed 2px #7b68ee"></DIV>
<DIV STYLE="border-bottom:dashed 4px #238E23"></DIV>
<DIV STYLE="border-bottom:dashed 6px #FF6EC7"></DIV>
Outros tipos de linhas...
<DIV STYLE="border-style: double;"></DIV>
<DIV STYLE="border-style: groove;"></DIV>
<DIV STYLE="border-style: double; border-width: thick;"></DIV>
<DIV STYLE="border-style: inset;"></DIV>
<DIV STYLE="border-top: #ffff00 2px solid; border-bottom: #FF7F00 2px solid;"></DIV>
<DIV STYLE="border-top: #ffff00 2px solid; border-bottom: #FF7F00 2px solid;"></DIV>

BOTES
Aqui est uma pequena abordagem sobre o tema Botes. Com o tempo irei colocando outros exemplos
prticos at que o assunto seja dominado por completo. Como sempre fao, o cdigo-fonte est esquerda e o exemplo
a direita. O mesmo comando tambm est apresentado na forma de link e com arquivos de imagem, isso bom para
efeito de comparao.
Comando "Fecha a janela".
<FORM>
<INPUT TYPE="button" NAME="Button"
VALUE="Fechar a janela" ONCLICK="window.close()">
</FORM>

<A HREF=JavaScript:window.close()>Fechar a janela</a> Fechar a janela
<A HREF=JavaScript:window.close()>
<IMG SRC="imagens/fechar.gif"></a>
Comando "Imprime esta pgina".
<FORM>
<INPUT TYPE="button" NAME="Button"
VALUE="Imprimir esta pgina" ONCLICK="window.print()">
</FORM>

<A HREF=JavaScript:window.print()>Imprimir esta pgina</a>
Imprimir esta
pgina

<A HREF=JavaScript:window.print()>
<IMG SRC="imagens/imprimir.gif"></a>
Comandos "Voltar" e "Avanar".
<FORM>
<INPUT TYPE="button" NAME="Button" VALUE="Voltar"
ONCLICK="window.history.go(-1)">
</FORM>
<A HREF="javascript:window.history.go(-1)">Voltar</a> Voltar

<FORM>
<INPUT TYPE="button" NAME="Button" VALUE="Avanar"
ONCLICK="window.history.go(1)">
</FORM>
<A HREF="javascript:window.history.go(1)">Avanar</a> Avanar
Comando "Cdigo Fonte".
<INPUT TYPE="button" VALUE="Cdigo Fonte"
ONCLICK="window.location = "view-source:"
+ window.location.href">

BOTES COLORIDOS
Voc j deve ter reparado na Rede o uso de botes personalizados, isso , aqueles botes que possuem
belas cores e no o cinza tradicional. Pois bem, agora vamos aprender como faze-los. Vou apresentar a sintaxe de dois
botes simples, que chamarei de Boto 1 e Boto 2, eles vo me servir de base para alguns exemplos:
<INPUT TYPE="submit" NAME="button" VALUE="Boto 1">
<INPUT TYPE="submit" NAME="button" VALUE="Boto 2">
Boto 1
Boto 2
Esta a configurao bsica de um boto. O atributo VALUE="texto" o que apresenta a escrita na sua superfcie.
Agora vou acrescentar alguns parmetros interessantes: O Boto 1 ter uma letra azul escuro (color: 0000FF) e um
fundo azul claro (background-color: 87CEFA), o Boto 2 ter uma letra preta (color: 000000)e um fundo
amarelo ouro (background-color: FFD700).
<INPUT TYPE="submit" NAME="button" VALUE="Boto 1"
STYLE="color:0000FF; background-color:87CEFA">
STYLE="color:000000; background-color:FFD700">
Boto 1
Boto 2

BOTES LINKADOS
Agora vamos ao ponto mais importante: Enderear os botes com links. Para isso vou ter que renomear
os botes, por uma questo de referncia. O boto 1 passar a ser o Cad? e o 2 ser o Tay Metapesquisador
(Cad? e Tay so poderosas ferramentas de busca brasileiras). Um detalhe de apresentao ser incluir o parmetro
STYLE="cursor:hand" para que o cursor mude para a mozinha quando o mouse sobrepe o boto. Repare que
antes, nos botes 1 e 2 acima, isso no acontecia. Para aprender mais sobre cursores v para [Alterando o formato do
cursor] ou tambm [Link que muda o cursor].
<FORM METHOD=GET ACTION="http://www.cade.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Cad?"
STYLE="cursor:hand; color:0000FF; background-color:87CEFA">
</FORM>
Cad?
<FORM METHOD=GET ACTION="http://www.tay.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Tay Metapesquisador"
STYLE="cursor:hand; color:000000; background-color:FFD700">
</FORM>
Tay Metapesquisador
Note que o tamanho do boto se ajusta automaticamente a quantidade de caracteres que tem na sua superfcie. Para
alinhar os botes lado-a-lado vou recorrer aos recursos de <TABLE> (tabela).
<CENTER>
<TABLE>
<TR>
<TD>
<FORM METHOD=GET ACTION="http://www.cade.com.br/">
STYLE="cursor:hand; color:0000FF; background-color:87CEFA">
</FORM>
</TD>
<TD>
<FORM METHOD=GET ACTION="http://www.tay.com.br/">
STYLE="cursor:hand; color:000000; background-color:FFD700">
</FORM>
</TD>
</TR>
</TABLE>
</CENTER>
Cad? Tay Metapesquisador
Continuando, voc notou que os botes personalizados apresentados acima so estticos, isso , no reagem a
sobreposio do mouse. Movimente o mouse sobre eles (sem clicar) e repare que eles parecem uma reles imagem em
seu monitor. Ento vamos sofisticar um pouco mais esses exemplos. Agora vamos aprender como faz-los responder a
sobreposio do mouse com alternamento de cores.
PRIMEIRO PASSO: Insira o cdigo CSS/JavaScript a seguir entre as tags <HEAD> e </HEAD>. Observe os
seletores .troca1 e .troca2. So eles que iro definir as cores iniciais do boto. Como escolhi duas cores diferentes
ento tenho que usar dois seletores com propriedades diferentes.
<STYLE>
.troca1 {background-color:87CEFA}
.troca2 {background-color:FFD700}
</STYLE>

<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>
SEGUNDO PASSO: Agora vem a sintaxe dos botes que iro responder a sobreposio do mouse. Usei exatamente o
modelo anterior com os acrscimos (em negrito) das funes onMouseover e onMouseout. As cores em
hexadecimal 98DFFA (azul claro) e 87CEFA (azul escuro), FFE811 (amarelo claro) e FFD700 (amarelo escuro)
foram escolhidas a gosto.
<CENTER>
<TABLE>
<TR>
<TD>
<FORM METHOD=GET ACTION="http://www.cade.com.br/"
onMouseover="Troca('98DFFA')" onMouseout="Troca('87CEFA')">
STYLE="color:#0000FF; cursor:hand" class="troca1">
</FORM>
</TD>
<TD>
<FORM METHOD=GET ACTION="http://www.tay.com.br/"
onMouseover="Troca('FFE811')" onMouseout="Troca('FFD700')">
STYLE="color:#000000"; cursor:hand" class="troca2">
</FORM>
</TD>
</TR>
</TABLE>
</CENTER>
Pronto!
Cad? Tay Metapesquisador

BOTES TEXTURIZADOS
Usando background para inserir texturas, porm, antes quero apresentar outro recurso que ser til
conhecer. Geralmente a superfcie do boto muito pequena e isso dificulta uma definio clara de sua textura. Para
resolver esse problema vou usar o atributo padding cuja funo definir o distanciamento entre o texto (do boto) e
suas bordas, manipulando a sua rea de superfcie. Os valores usados em padding so points (pt), inches (in),
centimeters (cm), pixels (px) ou percentage (%). Aprenda mais sobre esse atributo em [Espaamento entre o
texto e as bordas].
<INPUT TYPE="submit" NAME="button" VALUE="Boto 1" STYLE="color:000000">
Boto 1
O boto 1 possui o tamanho default, sem padding
Agora os botes 2 (padding:5px), 3 (padding:9px) e 4 (padding:12px), respectivamente. A sintaxe abaixo
refere-se apenas ao boto 2.
<INPUT TYPE="submit" NAME="button" VALUE="Boto 2" STYLE="color:000000; padding:5px">
Boto 2

Boto 3

Boto 4
Pronto, j temos recurso para inserir as texturas. Elas no devem dificultar a leitura do texto que est na superfcie,
portanto tenho que fazer uma seleo das mais adequadas. As escolhidas foram as seguintes:
textura01.jpe
fundo3.jpe
textura23.jpe
Atravs do atributo background:url(...) vou inseri-las dentro dos botes. Novamente s vou apresentar a sintaxe do
boto 2, as demais s copiar a mesma sintaxe e alterar o nome do arquivo.
STYLE="color:000000; padding:5px; background:url(imagens/textura01.jpe)">
Boto 2

Boto 3

Boto 4

TAMANHO & FORMATO DOS BOTES
Na lio acima usei a propriedade padding para alterar o tamanho do boto porm esta propriedade
no foi criada especificamente para isso. Para manipular o tamanho, bem como, o formado quadrado ou retangular do
boto usamos as propriedades width e height. Seus valores podem ser em pixel (px), point (pt), centimeter
(cm) e inches (in). Agora a sintaxe do boto 2 ficou assim:
STYLE="color:000000; width:25; height:120; background:url(imagens/textura01.jpe)">
Boto 2

Boto 3

Boto 4
Repare, no boto 2, que ao especificar seu tamanho com essas propriedades ele perdeu o ajuste automtico deixando
seu texto ilegvel. Este um cuidado que devemos tomar.

BOTES COM IMAGENS
Agora vou usar background para inserir uma imagem no boto. Nesse caso vou omitir o texto de sua
superfcie configurando VALUE=" ", depois s configurar as propriedades width & height para o
tamanho da imagem. Com a ausncia do texto a figura dever transmitir uma idia de qual seria a funo do boto,
logicamente, seno o internauta ter que clicar nele pra descobrir onde vai dar. Nesse caso ento coloque um ttulo
explicativo title="descrio" logo aps o link e tudo estar resolvido. Nos exemplos abaixo configurei quatro
botes com o link de ferramentas de busca com as sua respectivas figuras.

Vou apenas apresentar a sintaxe do boto Cad? (para no ficar repetitivo). Os demais s copiar a sintaxe e mudar o
link e a figura. Observe que o parmetro title="Ferramenta de Busca" s est inserido no link Cad?. Passe o
mouse sobre os links e repare a diferena.
<FORM METHOD=GET ACTION="http://www.cade.com.br/" title="Ferramenta de Busca"">
<INPUT TYPE="submit" NAME="button" VALUE=" " STYLE="color:000000; width:94; height:40;
background:url(imagens/cade.gif); cursor:hand"></FORM>
Note que embora o arquivo cade.gif possua um tamanho de 88 x 34px configurei o tamanho do boto com 94 x
40px para compensar as bordas do boto (3px para cada lado).

Fonte Tridimensional
Agora vamos entrar na rea de posicionamento de objetos da folha de estilo para aprender um
efeito novo e interessante. O que um objeto? Objeto todo elemento envolvido por uma tag, como por exemplo um
texto, uma imagem, um link... O ttulo Fonte Tridimensional nada mais que trs camadas de objetos sobrepostos, ou
seja, trs frases iguais porm com cores e alinhamentos diferentes.
Sua sobreposio possvel devido a propriedades de posicionamento position, top e left. Position est configurada
com o valor absolute que define uma posio fixa no monitor. Top ser a distncia que o bloco ter da borda superior
(de seu monitor) e left a distncia da borda esquerda. Os valores top/left esto em pixels(px) Ento a sintaxe ficar
assim:
<DIV STYLE="position:absolute; top:80; left:196; font-
family:arial;
color:000000; font-size:45">Fonte Tridimensional</DIV>
family:arial;
color:daa520; font-size:45">Fonte Tridimensional</DIV>
family:arial;
color:228b22; font-size:45">Fonte Tridimensional</DIV>
Observe que os valores de top (80, 82 e 84) e left (196, 198 e 200), criam um ligeiro deslocamento de cada camada
para baixo e para a direita. esse deslocamento que ir criar o efeito tridimensional da fonte. Para alterar o ngulo de
inclinao basta manipular esses valores. A ordem de sobreposio obedece a ordem da sintaxe, isso , o objeto que
vem primeiro ser sobreposto pelos que vem depois, se voc inverter as posies o mesmo ocorrer no efeito visual.
Bom..., nem tudo um mar de rosas para o webmaster. O problema do posicionamento de objetos com o
position:absolute est nas diversas resolues de monitores que existem por a. Por isso aconselho usar esse recurso
sempre no topo da pgina, assim ela permanecer, mais ou menos, no local que voc estipulou em monitores com
resolues diferentes. Como cerca de 90% dos monitores so de resoluo 800 por 600 pixels aconselho usa-la como
referncia.
Uma vantagem que se voc for criar um arquivo gif com essas dimenses ele ocuparia, pelo menos, uns 8.000 bytes
de tamanho enquanto que pela forma de posicionamento de objetos ele ocuparia seus reles 400 bytes, ou seja, 20
vezes menor. Algo a se considerar.
NOTA: O browser Netscape v4.51 no aceita o posicionamento de objetos. J os browseres IE v5.5 e o
Opera v5.02 aceitam esse recurso perfeitamente.
Para aprender mais sobre textos tridimensionais, v para:
Mtodo Embedding

<span> ... </span>
nfase definida por folha de estilos. O texto marcado com este elemento se apresentar na tela de
acordo com as propriedades de estilo (cor, fonte, tamanho, estilo, sublinhado, background, etc.) definidas em uma folha
de estilos. No exemplo abaixo estou usando a tag SPAN para aplicar uma cor de fundo s fontes:
<SPAN style="background:#9acd32"><h2>xito</h2></SPAN>
xito
Todo aquele que pretende realizar um projeto, para obter o mais completo xito, deve comear por convencer-se de
que lograr o que deseja; deve ter a determinao de vencer todos os obstculos, empregando o maior entusiasmo em
tudo quanto fizer. Seja qual for o seu objetivo, dedica-lhe todas as energias do vosso crebro; e, concentrando o vosso
pensamento, dizei: "Terei bom xito, nada haver que seja capaz de me impedir".

<SPAN STYLE="background-image:url(imagens/back1.gif); FONT-FAMILY:courier new">Agora
aplicando...</SPAN>
Agora aplicando uma textura no fundo do texto. usando o mesmo princpio
Para obter mais informaes sobre esta propriedade v para:
Background-image
SPAN tambm possibilita criar diversos efeitos visuais na fonte atravs da propriedade filter ideais
para destacar ttulos ou dar maior nfase a alguma frase. Aqui esto selecionados alguns deles:

EFEITO GLOW
<span style="height:1; filter:glow(color=#FF0000); color:#FFDEAD>No sculo 18...</span>
"No sculo 18, a inveno do pra-raios, por Benjamin Franklin, foi condenada pela Igreja como inveno do diabo.
Sendo o raio expresso da clera do Senhor, s podia ser tentao do demo impedir que o castigo divino casse sobre o
mundo. Na Frana, a "excomunho" foi levada a srio: em Saint-Omer, Vissey de Bois foi processado por heresia, por
instalar um pra-raios em sua casa".
Este efeito de borramento conseguido atravs da propriedade de estilo filter:glow aplicado a tag span, conforme
mostra a sintaxe acima. Ele tambm pode ser aplicado as linhas e figuras (arquivos gif, jpg...), basta envolver o
elemento com span e suas propriedades. height:1 destaca a visualizao do efeito, (color=#FF0000) especifica a
cor do borramento e finalmente color:#FFDEAD a cor do texto.
Para aprender mais sobre esta propriedade v para:
Filtro Glow.
Filtros Combinados

EFEITO BLUR
<span style="width: 550; height:1; font-size: 24pt; font-family: Arial Black;
color: green; Filter: Blur(Direction=225, Strength=4)">No sculo 18...</span>
Este efeito de letras em 3D conseguido atravs da propriedade de estilo filter:blur e configurao de seus atributos:
Direction=225 indica o ngulo de inclinao da sombra que vai de 0 a 360 graus (no exemplo coloquei uma
inclinao de 225 graus), e strength=4 indica o comprimento que a sombra deve ter.
DIRECTION indica o ngulo de inclinao do efeito
Direction=0 Direction=45 Direction=90 Direction=135
Direction=180 Direction=225 Direction=270 Direction=315
STRENGH indica o comprimento do efeito
Strength=2 Strength=5 Strength=7 Strength=9
Para aprender mais sobre esta propriedade:
Filtro Blur.

EFEITO DROPSHADOW
<span style="width: 550; height:1; font-size: 28pt; font-family:courier new; color: black;
Filter: DropShadow(Color=#FFFFFF, OffX=3, OffY=3, Positive=1)">No sculo 18...</span>
Onde color:#FFFFFF define a cor da sombra, offx=3 o deslocamento horizontal em pixel, offy=3 o deslocamento
vertical em px, positive=1 a sombra ter um efeito externo ou 0 para um efeito interno.
Deslocamentos do efeito com offx & offy
offx=0, offy=5 offx=5, offy=0 offx=5, offy=5 offx=10, offy=10

EFEITO WAVE
<span style="width: 357; height: 50; font-size: 24pt; font-family: Arial Black; color: red;
Filter: Wave(Freq=4, Phase=100, Strength=3)">EFEITO WAVE</span>
Onde Freq=2 define o nmero de ondulaes, Phase=5 determina a sua freqncia e Strength=50 a sua
intensidade.
Filtro Wave.
Filtros Combinados

EFEITO MASK
<span style="width: 350; height: 30; font-size: 45pt;
Filter: Mask(Color=#800080)">EFEITO MASK</span>
Este efeito cria uma mscara de fundo para a fonte que passa a ser transparente. Repare que o background da pgina
tambm acontece no interior da fonte. Seu parmetro color=#800080 define a cor da mscara.
Filtros Combinados

EFEITO SHADOW
Sintaxe:
<span style="height:10; color:#556B2F
filter:shadow(color=ff0000, direction=320, enabled=1)">
<h1>World<BR> Wide<BR> Web</h1>
</span>
World
Wide
Web
Onde height:10 ajusta a distncia do sombreamento com a prxima linha de baixo, color:#556B2F define a cor da
letra, color=ff0000 (entre aspas) define a cor da sombra, direction=320 ajusta o ngulo de direo, e enabled=1
habilita o efeito.
Os browsers Netscape, Opera e Internet Explorer inferior a v5,5 no aceitam estes recursos.

Filtros Combinados
Agora que sabemos, um pouco, como eles funcionam j podemos criar alguns efeitos interessantes
usando dois ou mais filtros sobre o mesmo objeto. No exemplo a seguir vou usar um combinado dos filtros Wave e
Glow sobre o texto CARTOON PICS. Repare que alguns webmasters preferem simular este mesmo efeito criando
arquivos.gif (por acharem esta maneira mais simples), que ficarem se envolvendo com parmetros de DHTML/CSS, o
que no o nosso caso.
CARTOON PICS
Sintaxe:
<P ALIGN="center" STYLE="font-size:42px; font-family:'arial black';
filter:wave(Add=1, Freq=2, LightStrength=100, Phase=16, Strength=1)
filter:glow(color=black, Strength=1); height=1; font-weight:bold; color:purple">
CARTOON PICS
Na sintaxe acima realcei os parmetros dos dois filtros com cores distintas para que voc possa observar onde comea e
termina cada um com a formatao de suas respectivas propriedades (que est envolvida pelo HTML convencional).
Um detalhe importante que para obter o efeito degrade do texto, voc no pode format-lo com o cdigo RGB
(Red/Green/Blue) mas somente com os Nomes Padro suportados pelos browsers, Caso contrrio o degrade no
funcionar.
NOMES PADRO CDIGO NOMES PADRO CDIGO
red
ff0000
maroon
800000
lime
00ff00
green
008000
blue
0000ff
navy
000080
yellow
ffff00
olive
808000
aqua
00ffff
teal
008080
fuchsia
ff00ff
purple
800080
white
ffffff
silver
c0c0c0
black
000000
gray
808080
NOTA: Esta tabela de Nomes Padro NO EST COMPLETA. Existem mais nomes de cores, porm como exemplo
estes j so suficientes.
Assim, como usei a nome padro da cor purple, no exemplo, ento seu degrade correspondente ser a cor funchsia,
como consta na tabela acima. Ainda aproveitando o mesmo exemplo agora vou fazer outro combinado dos filtros
DropShadow e Glow modificando algumas propriedades como fonte e cor:
CARTOON PICS
Sintaxe:
<P ALIGN="center" STYLE="font-size:42px; font-family:verdana; filter:
DropShadow(offx=3, offy=3, color:#ff00ff, positive=1) filter:
glow(color=black, Strength=2); height=1; font-weight:bold; color:#8a2be2">
CARTOON PICS
Uma pequena observao: Vai acontecer que quando voc aplicar a sintaxe acima em um texto com letras minsculas,
as letras "p", "q", "y" e "j" aparecero com suas bases cortadas.
copy the pics
Para resolver isso basta aumentar a altura da linha inserindo a propriedade line-height e configurar seu valor para que
o corte desaparea.
Sintaxe:
<P ALIGN="center" STYLE="font-size:35px; font-family:verdana; filter:
DropShadow(offx=3, offy=3, color:#ff00ff, positive=1) filter: glow(color=black,
Strength=2); height=1; font-weight:bold; color:#8a2be2; line-height:50px"> copy
the pics
copy the pics

Outro exemplo agora combinando 3 filtros: Mask, Shadow e Chroma. Este, porm, vou apresentar por etapas para
que fique bem claro o efeito que cada filtro ir causar no objeto.
1) filter:mask(color=#000000) cria uma mscara de cor preta que ir envolver o texto e width:280; height:70 define
o tamanho que a mscara deve ter.
Olhe Isto!
2) O filtro shadow(color=#228b22, direction=135) cria um sombreado onde color=#228b22 define a sua cor e
direction=135 o seu ngulo de inclinao.
Olhe Isto!
3) E, finalmente o filtro chroma(color=#000000) anula a mscara preta realando o efeito interno do texto.
Olhe Isto!
Sintaxe:
<P ALIGN="center"> <SPAN STYLE="width:280; height:70; font-size:50px; font-
family:verdana; font-weight:bold; filter:mask(color=#000000)
shadow(color=#228b22, direction=135) chroma(color=#000000)">Olhe Isto!
</SPAN>
Logicamente este efeito s ir funcionar em textos com letras grandes, algo acima de font-size:30px e espessura
realada com font-weight:bold. Abaixo configurei o mesmo efeito em um texto com tamanho normal. O efeito
desapareceu!...

"No sculo 18, a inveno do pra-raios, por Benjamin Franklin, foi condenada pela Igreja
como inveno do diabo. Sendo o raio expresso da clera do Senhor, s podia ser tentao
do demo impedir que o castigo divino casse sobre o mundo. Na Frana, a "excomunho" foi
levada a srio: em Saint-Omer, Vissey de Bois foi processado por heresia, por instalar um
pra-raios em sua casa".

TABELAS complexas
TABELAS complexxas

O objetivo desta seo no apenas apresentar tabelas com aplicaes dos atributos ROWSPAN e
COLSPAN (quando uma clula ocupa mais de uma linha ou coluna, tipo organograma), mas tambm apresentar e
ensinar aquelas tabelas criativas, elaboradas, que parecem um quebra-cabeas, verdadeiros exerccios de pacincia e
obstinao.
GRFICOS DE BARRAS
Certo dia, quando analisava alguns grficos do jornal Folha de So Paulo, perguntei a mim mesmo:
Ser que conseguiria criar esses mesmos grficos com a tag <TABLE> do HTML? Aps gastar cerca de uma hora com
a montagem das matrizes a resposta foi SIM!! E ficaram bonitos, tambm. E, outro detalhe, aps pegar o jeito eles
ficam relativamente simples. Eu no acredito que seja o primeiro a utilizar uma tabela dessa forma mas, at a presente
data, ainda no encontrei ningum fazendo isso. Geralmente o webmaster utiliza arquivos gif ou jpg que (c entre ns),
alm de serem mais trabalhosos ocupam mais espao na pgina, tambm.
Aproveitando uma aplicao til para meus novos grficos em HTML aqui vai uma informao interessante: A
freqncia mensal de minha HP nos ltimos meses. A ltima vez que fiz um cadastro do meu Tutorial numa ferramenta
de busca foi em julho de 2001 e de l pra c sua freqncia vem aumentando em escala geomtrica.
TUTORIAL
HTML
EDAURELIO
FREQNCIA:
pessoas/ms
OUTUBRO
504
NOVEMBRO
490
DEZEMBRO
258
JAN/2002
669
FEVEREIRO
550
MARO
1119
ABRIL
1354
MAIO
1217

Dados
fornecidos pela
Agora vamos analisar passo-a-passo como montar o grfico. Ele nada mais que um conjunto de mdulos sendo que
cada mdulo consiste numa tabela inserida dentro da outra. A sintaxe abaixo seria o mdulo outubro.
Mdulo Outubro
<TABLE STYLE="border-collapse:collapse">
<TR>
<TD WIDTH="65" ALIGN="right">OUTUBRO</TD>
<TD HEIGHT="17">
<TABLE BORDER BGCOLOR="#8fbc8f" WIDTH="126"
HEIGHT="17">
<TR><TD></TD></TR></TABLE></TD>
<TD HEIGHT="17" valign="middle">504</TD>
</TR>
</TABLE>
OUTUBRO 504
ESCALA 4:1
504 pessoas / 4 = 126 pixels
Observe que dentro do mdulo existem trs clulas <TD> A primeira clula define o espao onde inserido o ms
(WIDTH="60") e o seu alinhamento pela direita (ALIGN="right"). A segunda define a altura da barra
(HEIGHT="17") e possui outra tabela em seu interior cuja funo definir a cor da barra
(BGCOLOR="#8fbc8f"), seu comprimento (WIDTH="126") e textura (BORDER + <TD></TD> sem
contedo). A terceira clula define o espao onde inserido o valor 504, (que a freqncia do ms) e o seu
alinhamento pelo meio (valign="middle").
Pronto, agora basta copiar esse mesmo mdulo quantas vezes quiser e configurar seus valores de comprimento. Em
meu grfico utilizei a escala 4:1, (4 pessoas para cada pixel), mas voc pode escolher qualquer escala conforme
melhor lhe convier. Abaixo estou apresentando o mesmo grfico s que na verso vertical.
504 490 258 669 555 1119 1354 1217 784 816 677 513 584 419 496
OUT NOV DEZ JAN FEV MAR ABR MAI JUN JUL AGO SET OUT NOV DEZ
TUTORIAL HTML EDAURELIO
GRFICO DE FREQUNCIA 2001/2002
pessoas/ms
O grfico de barras vertical segue o mesmo princpio s que ele um pouco mais complexo. Vou pegar o mdulo
outubro e comparar sua sintaxe com o de novembro (o mdulo outubro est em BOLD e o de novembro em fonte
PRETA), ambos esto dentro da estrutura geral do grfico:
<TABLE>
<TR>
<TD HEIGHT="300" valign="bottom">
<TABLE BORDER BGCOLOR="#add8e6" HEIGHT="101"
WIDTH="30"><TR>504
</TD><TD></TD></TR></TABLE></TD>

<TD HEIGHT="400" valign="bottom">
<TABLE BORDER BGCOLOR="#add8e6" HEIGHT="98" WIDTH="30"><TR> 490
<TD></TD></TR></TABLE></TD>
...

</TR>
<TR>
<TD ALIGN="center">OUT</TD>
<TD ALIGN="center">NOV</TD>
...
</TR>
</TABLE>
Agora o mdulo composto de apenas uma clula que, por sua vez, contm outra tabela. Na clula <TD> definido a
altura mxima do grfico HEIGHT="300" e que seu contedo deve estar alinhado pela base valign="bottom". E
na tabela definimos sua cor BGCOLOR="#add8e6", altura do mdulo do ms HEIGHT="168" e sua largura
WIDTH="30". Nesse grfico usei a escala 5:1 (5 pessoas para cada pixel), 504 pessoas / 5 = 101 pixel (valor
arredondado).
504 490
OUT NOV
Mais alguns modelos de grficos de barras com valores aleatrias. Eles seguem o mesmo princpio.
54 61

86 97

113 138
OUT

DEZ

FEV
GRFICO DE BARRAS GEMINADAS
ilustrativo

58 31
MAR ABR MAI
19
JAN FEV
-12 -25 -8
JUN
GRFICO DE BARRAS INVERTIDAS
ilustrativo
NOTA: O browser Netscape v4.51 no aceita o parmetro BGCOLOR de uma tabela que estiver
inserida dentro de outra tabela. J os browseres IE v5.5 e o Opera v5.02 aceitam esse parmetro
perfeitamente.

BANNER TUTORIAL EDAURELIO
Este uma verso do quadro que uso na abertura da minha HP. Ele possui 9 tabelas intercaladas, uma
dentro da outra, criando um efeito de banner. Deu um trabalho danado cria-la e passei duas noites em claro tentando
faze-la funcionar nos trs browsers.
HOME
INTRODUO
HISTRIA
TUTORIAL
COMANDOS
GLOSSRIO
FAQS
H yper T ext M arkup L
FRUNS
ASCII
CORES
JAVASCRIPT
BUSCADORES
LINKS
CONCLUSO
Sua homepage uma janela aberta para o mundo. Aprimore-a com todos os recursos que a Internet tem a oferecer.
No comeo apenas tinha uma imagem na cabea de como ela deveria ficar, partindo disso fui montando sua estrutura.
Logicamente na primeira tentativa ficou uma droga e embora ela apresentasse uma estrutura coerente no Internet
Explorer, no havia jeito de faze-la funcionar no Netscape ou no Opera, ento fui "pescando" as gafes de sintaxe aqui e
ali. Olhando o cdigo-fonte fica mais fcil de entender como ela foi criada.
Ainda sobre tabelas em forma de banner, estou criando um outro site sobre Espeleologia cuja barra de topo uma
mistura de vrios recursos HTML. O link este aqui: [ IRCN - Indice de Referncias de Cavidades Naturais de So
Paulo].

TABELA COM IMAGENS LINKADAS
Agora uma tabela contendo imagens que se alternam quando so clicadas com o mouse. No exemplo
abaixo eu coloquei 3 clulas de tabela contendo 3 imagens diferentes mas a quantidade de clulas assim como de
imagens podem variar conforme o gosto do fregus. Logicamente, por uma questo de esttica, as clulas e imagens
devero ter tamanhos iguais entre si.
Clique sobre as imagens...
PRIMEIRA ETAPA: Selecionei as 3 imagens, sakura.gif, libra.jpg e light.jpg com tamanhos iguais (width="150"
heiht="338"). Em seguida criei a estrutura de tabela normal com 3 clulas. Dentro dessas clulas inseri os parmetros
da tag IFRAME. Ento a tabela ficou assim:
<CENTER>
<TR>
<TD><IFRAME src="arquivo-a.htm" width="150" height="338" scrolling="no"
frameBORDER="0"></IFRAME></TD>
<TD><IFRAME src="arquivo-b.htm" width="150" height="338" scrolling="no"
<TD><IFRAME src="arquivo-c.htm" width="150" height="338" scrolling="no"
</TR>
</TABLE>
</CENTER>
Observe que cada IFRAME tem o mesmo tamanho das imagens. O atributo scrolling="no" omite aquelas barras de
rolagens horizontal e vertical, frameBORDER="0" elimina o efeito de borda em baixo relevo. Porm as imagens
no so inseridas diretamente dentro do IFRAME, para isso criei 3 arquivos HTML que chamei arquivo-a.htm,
arquivo-b.htm e arquivo-c.htm sendo que cada um possui S, E SOMENTE S, uma imagem.

SEGUNDA ETAPA: Os arquivos HTML com as imagens contidas so simples, porm possuem alguns parmetros
importantes. Como exemplo vou apresentar a sintaxe de apenas um deles, os outros dois so semelhantes s mudando
os nomes do arquivo e sua respectiva imagem. Aqui est ele:
Sintaxe do arquivo-a.htm
<HTML>
<HEAD>
<TITLE>IMAGEM LIGHT</TITLE>
</HEAD>
<BODY bgcolor="#000000">
<DIV STYLE="position: absolute; left: 0px; top: 0px">
<A HREF="arquivo-b.htm"><IMG SRC="imagens/light.jpg" width="150"
height="338"></A>
</DIV>
</BODY>
</HTML>
Observe que a imagem light.jpg deste arquivo possui um link chamando o arquivo-b. A imagem do arquivo-b
possui outro link chamando o arquivo-c e a imagem deste um link chamando o arquivo-a, fechando o loop de 3
saltos. Bom... este s um exemplo de como a coisa funciona. Cada um pode fazer da sua maneira conforme o talento
e a inspirao do momento. Caso as explicaes no ficaram bem claras, relaxe..., aconselho imprimi-las. Depois
analisando-as com calma as coisas comeam a parecer simples. Boa sorte!!
o r i a l D H T M L / C S S E d a u r e l i o
2 0 0 1 - 2 0 0 4

Um recurso interessante que o CSS trouxe ao webmaster foi o controle do posicionamento
de objetos na tela, que no era possvel apenas com o HTML convencional. Agora podemos no s definir a
localizao exata de um objeto, como tambm, sobrepo-los em camadas nas mais diferentes maneiras.
Atravs da propriedade POSICION o posicionamento pode acontecer de trs modos distintos:
Absolute - O posicionamento definido pelas margens superior e esquerda da tela.
Relative - O posicionamento definido pela margem inferior do ltimo objeto e margem esquerda da tela.
Static - O posicionamento definido pelo prximo espao disponvel no canto esquerdo da tela.
As propriedades left (esquerdo) e top (topo) define a distncia que o objeto ter em relao ao browser ou a
outro objeto dependendo do que for definido em posicion. As unidades que definem as distncias podem ser
em pixels (px), points (pt) e porcentagem (%).
As propriedades width (largura) e height (altura) definem o tamanho do bloco que ir comportar o objeto.
Suas unidades tambm so as j relacionadas acima: px, pt e %.

POSIO ABSOLUTA
Quando voc especifica uma posio absoluta em pixel de um objeto (um quadro, uma imagem ou algum
texto), ele aparecer no local exato que voc o especificar mesmo quando o internauta minimiza a tela do
browser. Os blocos de posies absoluta podem se sobrepor e a hierarquia de sobreposio obedece aquela
apresentada no cdigo-fonte, isso , os objetos definidos por ltimo iro sobrepor os anteriores. Abaixo
segue um exemplo prtico de como isso acontece.
Bloco vermelho
Bloco azul
Bloco verde
<DIV STYLE="background-color: #CC0000; position: absolute;
left: 200px; top: 810px; height: 50px; width: 200px;"> Bloco
vermelho</DIV>
<DIV STYLE="background-color: #007FFF; position: absolute;
left: 300px; top: 830px; height: 50px; width: 200px;"> Bloco azul</DIV>
<DIV STYLE="background-color: #238E23; position: absolute;
left: 400px; top: 850px; height: 50px; width: 200px;"> Bloco verde</DIV>

Agora invertendo as posies dos blocos vermelho e azul:
Bloco azul
Bloco vermelho
Bloco verde
<DIV STYLE="background-color: #007FFF; position: absolute;
left: 300px; top: 1130px; height: 50px; width: 200px"> Bloco azul</DIV>
<DIV STYLE="background-color: #CC0000; position: absolute;
left: 200px; top: 1150px; height: 50px; width: 200px"> Bloco
vermelho</DIV>
<DIV STYLE="background-color: #238E23; position: absolute;
left: 400px; top: 1170px; height: 50px; width: 200px"> Bloco verde</DIV>

Repare tambm que para apresentar o segundo exemplo acima tive que alterar as propriedades left & top
dos trs blocos para que o exemplo fosse deslocado mais para baixo na tela.

POSIO RELATIVA
Agora vou apresentar os mesmos exemplos porm mudando a configurao de absolute para relative.
Como j disse na posio relativa o objeto ir ocupar o prximo espao disponvel abaixo do ltimo objeto.
Porm, como estou usando trs blocos como exemplo, existe alguns peculiaridades interessantes que preciso
explicar:
Bloco vermelho
Bloco azul
Bloco verde
<DIV STYLE="background-color: #CC0000; position: relative;
left:200px; top:10px; height: 50px; width: 200px;"> Bloco vermelho</DIV>
<DIV STYLE="background-color: #007FFF; position: relative;
left:300px; top:10px; height: 50px; width: 200px;"> Bloco azul</DIV>
<DIV STYLE="background-color: #238E23; position: relative;
left: 400px; top:-20px; height: 50px; width: 200px;"> Bloco verde</DIV>
O top do bloco vermelho est a 10px abaixo do texto, j o top do bloco azul tambm deveria estar a 10px
abaixo do texto (sobrepondo a metade direita do bloco vermelho), porm sua distncia no corresponde com
o que vemos. Isso porque relative contabiliza a distncia do texto mais a altura (height) do bloco anterior.
Ento ele ir contar 10px + 50px = 60px abaixo do texto. Para sobrepo-los temos que inserir valores
negativos em top. Observe que o bloco verde possui top:-20px, ento ele ir subir 30px para dentro do
bloco azul (pois alm do bloco verde no ter os 10px, ele possui -20px totalizando -30px). A equao ficaria
assim:
10 + 50 + 50 +[-20 -(+10)] = 80px.
Isso quer dizer que o bloco verde com top=-20px est 80px abaixo do texto. Isso parece deverasmente
complicado... Qual seria a utilidade de relative funcionar assim? Bom, uma das utilidades que encontrei foi
que para posicionar um objeto no meio ou final de arquivos HTML relativamente longos, no precisamos
ficar calculando sua posio vertical, relative j o colocaria diretamente no local disponvel mais prximo.
Agora sobre a razo dele funcionar assim s o W3C (Consrcio Internacional que padroniza os protocolos e
linguagens utilizadas na Web) saber responder.

POSIO ESTTICA
A posio esttica ir inserir o objeto no espao disponvel mais prximo sem nenhuma caracterstica
especial aplicada a ele, isso , ele ir ocupar o primeiro canto superior esquerdo, conforme voc est vendo
abaixo independente de voc inserir valores em left e top.
Bloco vermelho
Bloco azul
Bloco verde
<DIV STYLE="background-color: #CC0000; position: static;
left:200px; top:10px; height: 50px; width: 200px;"> Bloco vermelho</DIV>
<DIV STYLE="background-color: #007FFF; position: static;
left:300px; top:10px; height: 50px; width: 200px;"> Bloco azul</DIV>
<DIV STYLE="background-color: #238E23; position: static;
left: 400px; top:-20px; height: 50px; width: 200px;"> Bloco verde</DIV>
Observe que em static as propriedades left & top so ignoradas. Mas se os browseres j possuem esta
condio (canto superior esquerdo) como default para posicionar qualquer objeto, ento qual seria a
aplicao prtica para static?
Humm!... Ainda no descobri mas, sem dvida, ela deve existir.

A propriedade z-index define uma hierarquia de sobreposio de objetos independente da
seu alinhamento sinttico. Os valores de z-index so sempre inteiros e o objeto que tiver o maior valor ir
sobrepor os demais. Essa norma usada tanto para o posicionamento absoluto como para o relativo.
Sintaxe do exemplo da esquerda
<DIV STYLE="position: absolute; left: 300px; top: 2810px; z-
index:1">
<IMG SRC="imagens/elefante.gif"></DIV>
index:2">
<IMG SRC="imagens/galo.gif"></DIV>

Sintaxe do exemplo da direita
index:2">
<IMG SRC="imagens/elefante.gif"></DIV>
index:1">
<IMG SRC="imagens/galo.gif"></DIV>
Repare que embora o alinhamento sinttico das figuras permanea o mesmo, a sobreposio das figura se
alteraram.

A propriedade overflow aplicada sobre um texto que extrapolou o tamanho do bloco definido por width
e height. Seus valores so:
visible - Onde ser mostrado todo o contedo da caixa.
hidden - Onde no ser mostrado o contedo que ficar fora dos limites da caixa.
auto - O browser manter o tamanho do bloco e mostrar uma barra de rolagem, caso seja necessrio.
scroll - O browser sempre mostrar uma barra de rolagem, mesmo que no seja necessrio.
Exemplo:
<DIV STYLE="overflow:scroll; width:400px; height:80px; background-color:#ffc0cb">
Este texto est configurado com overflow:scroll e ir aparecer dentro de um quadro com
barras de rolagem horizontal e vertical mesmo que as barras sejam desnecessrias.
</DIV>
Este texto est configurado com overflow:scroll e ir aparecer dentro de um quadro com barras de rolagem
horizontal e vertical mesmo que as barras sejam desnecessrias.
<DIV STYLE="overflow:visible; width:300px; height:80px; background-color:#ffc0cb">
Este texto est configurado com overflow:visible e ir aparecer dentro de um quadro
sem barras de rolagem.
</DIV>
Este texto est configurado com overflow:visible e ir aparecer dentro de um quadro sem barras de rolagem.
Esta seo encontra-se em estudo ainda.
TABELAS II

Continuando sobre o tema TABELAS que, por ser
muito longo, dividi em 3 arquivos HTML para no
ultrapassarem 50KBytes de tamanho e com isso ficarem
mais dinmicos. Neste arquivo estarei apresentando as tags
menos conhecidas, seus recursos e principalmente os
exemplos aplicados.
<TABLE>
|__
<FRAME>
|__
<RULES>
|__
<SUMMARY>

BORDAS COM FRAME & RULES
FRAME="valor"
Define diversas opes de bordas para a tabela. Os valores podem ser:
above- Borda somente no lado de cima.
below- Borda somente no lado de baixo.
border- Bordas nos quatros cantos.
box- Borda nos quatros lados externos.
hsides- Borda somente nos lados de cima e de baixo.
lhs- Borda somente no lado esquerdo.
rhs- Borda somente no lado direito.
void
- Borda em nenhum lado (default) BORDER =
0.
vsides- Bordas somente nos lados esquerdo e direito.

RULES="valor"
Define diversas opes de bordas para as clulas dentro de uma tabela. Os valores podem ser:
all - Bordas em todas as linhas e colunas.
cols- Bordas somente nas colunas.
groups
- Bordas em um grupo de clulas definidas pelos atributos THEAD, TFOOT, TBODY, COLGROUP e
COL
none- Nenhuma borda. Valor default.
rows- Bordas somente nas linhas.
Exemplos:
Sintaxe:
<TABLE BORDER=2 bordercolor="blue"
FRAME="hsides" RULES="cols">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
<TD>clula 3</TD>
</TR>
<TR>
<TD>clula 4</TD>
clula 1 clula 2 clula 3
<TD>clula 5</TD>
<TD>clula 6</TD>
</TR>
</TABLE>
<TABLE BORDER=2 bordercolor="#8A2BE2"
FRAME="box" RULES="none">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
<TD>clula 3</TD>
</TR>
<TR>
<TD>clula 4</TD>
<TD>clula 5</TD>
<TD>clula 6</TD>
</TR>
</TABLE>
<TABLE BORDER=2
BORDERCOLORLIGHT="#228B22" FRAME="box"
RULES="rows">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
<TD>clula 3</TD>
</TR>
<TR>
<TD>clula 4</TD>
<TD>clula 5</TD>
<TD>clula 6</TD>
</TR>
</TABLE>
<TABLE BORDER BORDERCOLOR="#4682b4"
FRAME="void" RULES="all">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
<TD>clula 3</TD>
</TR>
<TR>
<TD>clula 4</TD>
<TD>clula 5</TD>
<TD>clula 6</TD>
</TR>
</TABLE>
<TABLE BORDER=4 BORDERCOLOR="#555555"
FRAME="vsides" RULES="cols">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
<TD>clula 3</TD>
</TR>
<TR>
<TD>clula 4</TD>
<TD>clula 5</TD>
<TD>clula 6</TD>
</TR>
</TABLE>
Aprenda mais sobre bordas de tabelas em:
Efeito collapse
Bordas criadas com CSS

SUMMARY="texto"
Summary insere uma mensagem no cdigo fonte da tabela (que no aparece no monitor) que fornece um resumo do
objetivo e da estrutura da tabela. Deve ser usado por agentes que geram mdia no visual, como a falada.
<TABLE BORDER SUMMARY="Esta
uma tabela exemplo">
<TR>
<TD>clula 1</TD>
<TD>clula 2</TD>
</TR>
</TABLE>
clula 1 clula 2
CLASSE DE ESTILO
Voc j deve ter reparado, na sintaxe de diversos exemplos desse tutorial o uso dos elementos
<STYLE>, <DIV>, <LINK> e <SPAN> e dos atributos STYLE, CLASS e ID. Nesta seo irei apresentar o que eles
so, como funcionam e alguns modelos prticos com suas respectivas sintaxe.
J sabemos que uma vez definido o layout do link dentro das tags <BODY> ou <STYLE> de uma pgina, todos os links
dessa pgina apresentaro este mesmo layout. Porm, vamos supor que esta pgina possua 10 links (de um total de
50, digamos) que preciso apresentar maior nfase com uma formatao diferente quela predefinida em <BODY> ou
<STYLE>, aqui que entra o atributo CLASS (classes). Uma classe pode ser definida como um subgrupo de um estilo.
Atravs dela podemos selecionar grupos de objetos de uma mesma categoria e configura-los com uma formatao
diferente quela predefinida. A frmula a seguinte:
seletor.classe {propriedade:valor; propriedade:valor; ... }
seletor.classe {propriedade:valor; propriedade:valor; ... }
</STYLE>
Onde "seletor" representa qualquer tag, depois, separado por um ponto vem a "classe" que representa um nome
qualquer dado a classe e, entre as chaves, "propriedade:valor" que representa a formatao dessa classe. Agora a
mesma frmula acima com valores reais:
A:hover.link-cinza {COLOR:#888888; font-weight:bold}
A:hover.link-vermelho {COLOR:#FF0000; font-weight:bold}
A:hover.link-azul {COLOR:#1E90FF; font-weight:bold}
A:hover.link-verde {COLOR:#008000; font-weight:bold}
</STYLE>
Depois adiciono o atributo CLASS="link..." aos links que quero fazer distino de cor:
<A CLASS="link-cinza" HREF="ab.htm">Glossrio WWW</A>
<A CLASS="link-vermelho" HREF="javascript.htm">JavaScript</A>
<A CLASS="link-azul" HREF="tutorial.htm">Tutorial DHTML/CSS</A>
<A CLASS="link-verde" HREF="ferramentas.htm">Buscadores</A>
Agora passe o ponteiro do mouse sobre a relao de links abaixo.
Glossrio WWW
JavaScript
Tutorial DHTML/CSS
Buscadores

Continuando... Na verdade voc pode criar alguns efeitos bem exticos em links. Usando o mesmo princpio de classes
de estilo podemos aplicar bordas, trocar o tamanho/estilo da fonte, inserir background ou at mesmo filtros. Tudo ir
depender da sua imaginao. Alguns exemplos:
A:hover.link-bordas {border-style:dashed; border-width:1px}
A:hover.link-glow {height:1; filter:glow(color=#FF0000)"; color:#FFDEAD}
A:hover.link-sublinhado {border-bottom-style:double 2px; color:#FF0000}
A:hover.link-background {background-image:url(imagens/back1.gif)}
A:hover.link-invert {filter:fliph; height:1}
</STYLE>
O cdigo da classe de estilo (acima) pode ser inserido em qualquer lugar dentro do cdigo fonte do arquivo.html porm
aconselho coloc-lo logo aps o final do cabealho </HEAD> assim, quando precisar fazer alguma alterao, fica mais
fcil localiz-lo. Em seguida crio o atributo CLASS="link..." configurando seus respectivos links.
<A CLASS="link-bordas" HREF="ab.htm">Link com bordas tracejada</A>
<A CLASS="link-glow" HREF="javascript.htm">Link com filtro glow</A>
<A CLASS="link-sublinhado" HREF="tutorial.htm">Link com sublinhado</A>
<A CLASS="link-background" HREF="ferramentas.htm">Link com background</A>
<A CLASS="link-invert" HREF="a24.htm">Link invertido</A>
Link com bordas tracejada
Link com filtro glow
Link com sublinhado
Link com background
Link invertido
Agora, usando este mesmo exemplo com imagens, criamos alguns efeitos interessantes:
<A CLASS="link-glow" HREF="http://www.cade.com.br/">
<IMG SRC="imagens/achei.gif" HSPACE="20"></A>
<A CLASS="link-background" HREF="http://www.cade.com.br/">
<A CLASS="link-invert" HREF="http://www.cade.com.br/">
Embora os links comuns j estejam pr-configurados em <BODY>, criei diversas classes de links com suas respectivas
formataes. A isso chamamos de CLASSES DE ESTILOS. Ainda sobre este mesmo tema vamos ao nosso ltimo
exemplo...
Observe esta barra com um texto
Aparentemente ela parece ser um texto dentro de uma tabela, certo?... Mas no , apenas um pargrafo! Um
pargrafo configurado com CLASS. No incio deste arquivo, logo aps </HEAD> criei uma relao de tags configuradas
com classes de estilo e entre elas est a sintaxe deste pargrafo:
P.barra01 {background-image:url(imagens/bg_t14.jpg); text-indent:1in;
font-family:courier new; font-weight:bold; font-size:18px; BORDER-color:#b22222;
BORDER-style:double}
</STYLE>
Depois simplesmente adiciono o atributo CLASS="barra01" dentro de <P> no pargrafo que quero destacar como
ttulo e pronto.
<P CLASS="barra01">Observe esta barra com um texto
Se porventura existirem 20 pargrafos iguais a este, dentro do arquivo, estarei otimizando o seu tamanho evitando de
escrever (ou copiar) 20 vezes a sua sintaxe (que por sinal no pequena). E caso queira fazer alguma alterao o
trabalho ser fcil e rpido bastando mexer em <classe de estilo> uma nica vez.
A classe de estilo muito til para economizar tempo, diminuir o tamanho do cdigo fonte e com isso as possibilidades
de erros de digitao, sua pgina ir carregar mais rpida, aumenta o controle do layout tornando mais fcil sua
manuteno e/ou alterao, e outras coisas mais que ir descobrir depois...
Para saber mais sobre esse assunto v para:
Mtodo Embedding.

* FILTROS *
Observe a barra de comandos no topo desta pgina. Ela parece estranha, quase sumida... Agora repare
o rtulo colorido "Tutorial DHTML/CSS Edaurelio" logo abaixo da barra esquerda, est desfocado... Repare tambm no
ttulo desta seo "*FILTROS*" ele apresenta um sombreado e a sua letra R est invertida.
Estes efeitos visuais apareceram pela primeira vez como controles de ActiveX e posteriormente foram incorporados
como propriedades de folha de estilo aceitas inicialmente pelo browser Internet Explorer v4.0. Efeitos anteriormente
que s poderiam ser criados com aplicativos como o Photoshop em arquivos de imagem agora podem ser usados em
qualquer objeto HTML como por exemplos bloco de texto, tabelas, links, bordas, etc e inclusive criar efeitos dinmicos!!
Eles so fceis de aprender e basicamente sua sintaxe a seguinte:
<DIV STYLE="filter:nome(parmetro=valor, parmetro=valor, etc...)">objeto</DIV>
Onde name define o tipo de filtro, parmetro define suas propriedades de formatao e valor suas unidades que
geralmente so graus, pixels, %, etc. A seguir apresento uma relao de filtros em ordem alfabtica, bem como seus
parmetros e alguns exemplos interessantes. Voc pode aplicar diversos filtros ao mesmo objeto criando uma
variedade de efeitos conforme manda a sua imaginao.

ALPHA
O filtro Alpha, cujo efeito j foi apresentado na barra de comandos acima, cria um efeito de
transparncia total ou parcial no objeto por ele envolvido de forma que quanto menor for a sua graduao de
porcentagem, definida por opacity=% maior ser a sua transparncia.
PARMETROS:

Opacity - Apresenta o grau de transparncia do objeto e seu valor refere-se a %. Opacity=100 apresenta um objeto
totalmente opaco e opacity=0 um objeto totalmente invisvel.
FinishOpacity - Define o nvel de opacidade e seus valores vo de 0 a 100%.
Style - Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular.
StartX - Coordenada horizontal para comeo do gradiente de opacidade.
StartY - Coordenada vertical para comeo do gradiente de opacidade.
FinishX - Coordenada horizontal para o fim do gradiente de opacidade.
FinishX - Coordenada vertical para o fim do gradiente de opacidade.
No exemplo a seguir temos um bloco de texto com fonte preta e diversos graus de opacidade com estilos diferentes.
ALPHA UNIFORME
<SPAN STYLE="font-size: 24pt; font-family: Arial Black; height:1;
filter:Alpha(opacity=20)">ALPHA UNIFORME</SPAN>
ALPHA LINEAR
filter:Alpha(style=1)">ALPHA LINEAR</SPAN>
ALPHA RADIAL INTERNO
filter:Alpha(opacity=0, FinishOpacity=50, style=2)">ALPHA RADIAL INTERNO</SPAN>
ALPHA RADIAL EXTERNO
filter:Alpha(opacity=60, style=2)">ALPHA RADIAL EXTERNO</SPAN>
Agora o mesmo efeito alpha aplicado a uma tabela, primeiro apresentando a tabela normal, depois ela mesma
envolvida pelo filtro:
TABELA NORMAL
300 Arial
600 Arial
900 Arial
300 Verdana
600 Verdana
900 Verdana
300
Courier New
600
Courier New
900
Courier New
300 Times New Roman
600 Times New Roman
900 Times New Roman
TABELA COM FILTER:ALPHA(OPACITY=50, STYLE=2)
300 Arial
600 Arial
900 Arial
300 Verdana
600 Verdana
900 Verdana
300
Courier New
600
Courier New
900
Courier New
300 Times New Roman
600 Times New Roman
900 Times New Roman
A sintaxe simplificada da tabela esta:
<DIV STYLE="filter:alpha(opacity=20, style=2); height:1">
<TABLE>
...
</TABLE>
</DIV>

BLUR
Este filtro cria um efeito difuso diminuindo a definio das bordas do objeto. Sua sombra apresenta a
mesma cor do objeto porm com uma textura mais atenuada.
PARMETROS:

add - Parmetro booleano, 1 Sombreamento ntido, 0 Sombreamento difuso.
direction - Define o ngulo em que o efeito deve acontecer. Seu valor vai de 0 (topo) em incrementos de 45 graus
at 315 graus.
strength - Define o comprimento que o efeito deve ter. Default = 5.
Figura e texto SEM o filtro. Figura e texto COM o filtro.
<SPAN STYLE="height:1; filter: Blur(Direction=45, add=0, Strength=3)"><FONT COLOR="blue">
<IMG SRC="imagens/cs05g.gif">Figura e texto</FONT> <B>COM</B><FONT COLOR="red"> o filtro.</FONT></SPAN>
No exemplo acima envolvi uma imagem e um texto de trs cores. Repare que a difuso acompanha as cores do texto.
Para aprender mais sobre este filtro v para [Efeito Blur]

CHROMA
Este filtro torna uma cor especfica do objeto transparente. No exemplo a seguir tenho a imagem
home1.gif cujo fundo branco cria um contraste com o background da pgina. Porm com o filtro chroma posso
neutralizar o fundo branco (#FFFFFF) da imagem simulando uma imagem GIF de fundo transparente.
PARMETROS:

color - Define uma cor do cdigo RGB que sofrer o efeito de transparncia.

<IMG SRC="imagens/home1.gif">

<SPAN STYLE="filter:chroma(color=FFFFFF); height:1">
<IMG SRC="imagens/home1.gif"></SPAN>
NOTA: O filtro no funcionar se a cor selecionada para o efeito no existir na figura.

DROPSHADOW
Este filtro cria um eleito de sombra solida no objeto que pode ser direcionada conforme o ngulo
desejado. No exemplo a seguir temos a mesma tabela j apresentada no filtro Alpha, porm sem o BGCOLOR (para
realar o efeito deste filtro sobre ela).
PARMETROS:

color - Define a cor RGB (#rrggbb) da sombra. Os valores so em hexadecimal.
offx - Determina a distncia de afastamento em "x" (horizontal), os valores em pixels (px) podem ser positivos ou
negativos.
offy - Determina a distncia de afastamento em "y" (vertical), os valores em pixels (px) podem ser positivos ou
negativos.
positive - Parmetro booleano: 1 para sombra positiva. 0 para sombra negativa.
TABELA COM FILTER:DROPSHADOW
300 Arial
600 Arial
900 Arial
300 Verdana
600 Verdana
900 Verdana
300
Courier New
600
Courier New
900
Courier New
300 Times New Roman
600 Times New Roman
900 Times New Roman
Sintaxe simplificada da tabela:
<DIV STYLE="filter:dropshadow(color=#1E90FF, offx=-2,
offy=-2, positive=1); height:1">
<TABLE>
...
</TABLE>
</DIV>
NOTA: Embora esse filtro possa ser aplicado em qualquer objeto, ele apresentar um melhor resultado em fontes ou
imagens com fundos transparentes ou vazados. Para aprender mais sobre este filtro v para [Efeito DropShadow]

FLIPH e FLIPV
Estes dois filtros criam o efeito de imagem invertida no objeto. FlipH inverte no sentido horizontal como
um reflexo de espelho e FlipV inverte no sentido vertical como o reflexo na superfcie de um lago.
</P ALIGN="center" STYLE="filter:fliph; height:1; font-size:20px; color:#8B008B"> <B>Socorram-me,...</B>
Socorram-me, subi no nibus em Marrocos.
<P ALIGN="center" STYLE="filter:flipv; height:1; font-size:20px; color:#8A2BE2"> <B>Socorram-me,...</B>
Socorram-me, subi no nibus em Marrocos.

GLOW
O filtro Glow cria um efeito de borramento nos contornos do objeto. Este borramento pode assumir uma
cor diferente do objeto. Repare que no exemplo a seguir o objeto (uma tabela) possui bordas brancas com um texto
preto, e no entanto seu borramento azul (color=#1E90FF).
PARMETROS:

color - Define a cor RGB (#rrggbb) do borramento.
strength - Determina a distncia de afastamento do efeito. Seu valor em pixels (px) e pode ser valor positivo
(borramento externo) ou negativo (borramento interno).
TABELA COM FILTER:GLOW
300 Arial
600 Arial
900 Arial
300 Verdana
600 Verdana
900 Verdana
300
Courier New
600
Courier New
900
Courier New
300 Times New Roman
600 Times New Roman
900 Times New Roman
Sintaxe simplificada da tabela:
<DIV STYLE="filter:glow(color=#1E90FF strength=10); height:1">
<TABLE>
...
</TABLE>
</DIV>
Para aprender mais sobre este filtro v para [Efeito Glow]

GRAY
Este filtro anula os efeitos de cor do objeto apresentando-o em tons de cinza. At onde sei este filtro no
possui parmetros e a sintaxe bem simples.
<IMG SRC="imagens/anjodapaz.jpg">

<SPAN STYLE="filter:gray; height:1">
<IMG SRC="imagens/anjodapaz.jpg"></SPAN>

INVERT
Este filtro tem a propriedade de inverter a matriz de cores do objeto criando um efeito semelhante ao
negativo de uma fotografia.

<SPAN STYLE="filter:invert; height:1">

MOTION BLUR
Este filtro cria um efeito de movimento no objeto.
PARMETROS:

strenght - Define o comprimento do efeito, seu valor em pixels.
direction - Define o grau em que o efeito deve ocorrer. Ele pode ser de 0 a 360 graus.
progid:DXImageTransform.Microsoft - Parmetros proprietrios da Microsoft.
No exemplo a seguir h uma imagem normal e mais duas com o efeito aplicado dentro de uma tabela. Todas elas
foram centralizadas dentro de suas respectivas clulas. Repare que as imagens com efeito Motion Blur sofreram uma
deslocao no sentido do movimento que o efeito causou. Isso acontece porque agora o efeito passa a fazer parte da
imagem alterando o seu centro de equilbrio.
1 2 3
Sintaxe da clula 3
<SPAN STYLE="HEIGHT:1; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=40, direction=30)">
<IMG SRC="imagens/gal001.gif">
</SPAN>

WAVE
Cria um efeito de ondulao no objeto.
PARMETROS:

add - Parmetro booleano: 1 cria o efeito wave, 0 anula o efeito.
freq - Define o nmero de ondulaes que o objeto deve sofrer.
lightstrength - Define a intensidade de ondulao luminosa. Seu valor vai de 0 a 100%.
phase - Define a freqncia da ondulao, seu valor vai de 0 a 360graus.
strength - Define a intensidade da ondulao da imagem.

<SPAN STYLE="filter:wave(freq=13, lightstrength=30); height:1">
Para aprender mais sobre este filtro v para [Efeito Wave]

XRAY
Este filtro cria um efeito semelhante ao filtro Gray transformando as cores do objeto em tons de cinza.
Ainda no sei quais as diferenas entre esses dois filtros.
ARQUIVO DE IMAGEM NORMAL
<IMG SRC="imagens/3sun6c.gif">

E COM O FILTRO XRAY
<DIV STYLE="filter:xray; height=1"> Imagem
</DIV>
FOLHA DE ESTILO

O Cascading Style Sheets (CSS), ou Folhas de Estilo Encadeadas,
o nome de uma tecnologia criada para complementar a linguagem HTML
e facilitar a criao e manuteno de sites na Web.
Mtodo
Linking
Mtodo
Embedding
Mtodo
Importing
Mtodo
Inline
Unidades &
Valores
Herana
Sua primeira verso ou CSS1 foi lanada em dezembro de 1996 e um modelo simples de formatao,
na maior parte para apresentaes screen-based. O CSS1 tem aproximadamente 60 propriedades. A verso CSS2,
lanada em maio de 1998, foi desenvolvida sobre o CSS1 e, alm de incluir todas as propriedades do CSS1, possui por
volta de 70 propriedades novas. Ambos os padres CSS1 & CSS2 so reconhecidos pelo W3C (World Wide Web
Consortium), entidade que cuida do desenvolvimento e padronizao das tecnologias ligadas Web.
Uma folha de estilo pode ser definida como um gabarito que formata os comandos HTML de um bloco, uma pgina ou
uma homepage de acordo com as preferncias do programador. Atravs dela fica mais fcil e rpido gerenciar o layout
de sua homepage. A palavra Cascading (encadeamento) se refere possibilidade de uma style sheet "importar" outras
formataes para dentro de si. Isto , se quiser acrescentar outras formataes alm das que j existem na prpria
pgina eu poderei criar um arquivo.css e depois chama-lo para dentro da pgina complementando suas formataes.
Existe vrias formas de incorporar a folha de estilo em uma pgina. Aqui esto as formas mais utilizadas:
Linking (Ligao) - Consiste em importar um arquivo.css (j previamente configurado) para dentro do
arquivo.HTML. A ligao feita atravs do comando LINK, cuja sintaxe mostrada a seguir:
<LINK REL=StyleSheet HREF="arquivo.css">
Esse comando deve ser colocado dentro da tag <HEAD> no cabealho do arquivo HTML onde a configurao deve
acontecer. Conforme voc pode notar em HREF="arquivo.css", ambos os arquivos devem estar no mesmo diretrio.

Embedding (Incorporao) - Consiste em incorporar a folha de estilo no prprio arquivo HTML. Esse mtodo tem
um efeito mais local pois ele configura apenas o arquivo onde ele est inserido. A sintaxe a seguinte:
...
...
</STYLE>
Esse comando tambm deve ser colocado dentro da tag <HEAD> no cabealho do arquivo HTML onde a configurao
deve acontecer.

Importing (Importao) - A palavra Cascading (encadeamento) se refere possibilidade de uma style sheet
"importar" outra para dentro de si e definir novos comandos alm dos j definidos no arquivo. O mtodo importao
usado atravs do comando @IMPORT no qual inserido um arquivo.css externo dentro do arquivo.HTML. Esse
comando deve ser usado dentro da tag <STYLE> como mostra o modelo abaixo:
@IMPORT URL(.../arquivo.css)
</STYLE>
A URL(...) deve conter o link absoluto de onde o arquivo.css de localiza. O atributo TYPE="text/css" opcional e
informa que o anexo se trata de um documento texto do tipo folha de estilo.

Inline (Em linha) - Esse mtodo permite a aplicao da folha de estilo em apenas um bloco de comando especfico
sem que os demais blocos sejam alterados. Exemplo:
<P STYLE="color: white"> Embora todos os pargrafos desta pgina estejam configurado com fonte
preta, este configurei com fonte branca por intermdio da folha de estilo atravs do mtodo inline. </P>
Embora todos os pargrafos desta pgina estejam configurado com fonte preta, este configurei com fonte branca por
intermdio da folha de estilo atravs do mtodo inline.
Pronto, aqui foram apresentados os quatro principais mtodos (Linking, Embedding, Importing e Inline) de utilizar
uma folha de estilo. Agora vamos aprofundar em cada um deles, com exemplos prticos de como eles funcionam.

MTODO LINKING
O mtodo Linking consiste em importar um arquivo.css para dentro do arquivo.HTML. O arquivo.css
um arquivo de texto que contm comandos de folha de estilo e possui uma extenso "css". Ele pode ser criado atravs
de qualquer editor de texto simples, o WordPad do Windows por exemplo. A configurao das pginas desse tutorial
est num arquivo chamado matrix.css. D uma olhada em sua sintaxe AQUI. A vantagem desse mtodo que ele
facilita muito a reformatao do layout de uma homepage. Imagine ter que reconfigurar 40 ou 50 pginas! O comando
que incorpora o arquivo matrix.css no arquivo.html o seguinte:
<LINK REL=StyleSheet HREF="matrix.css">
Este comando deve ser colocado entre as tags <HEAD> e </HEAD>. O atributo HREF est com um link relativo,
isso quer dizer que ambos os arquivos (este e o matrix.css) encontram-se no mesmo diretrio do servidor onde esta HP
est hospedada.

MTODO EMBEDDING
Por este mtodo a folha de estilo incorporada atravs do comando STYLE que sugiro colocar antes
do comando </HEAD>. A sintaxe bsica de um estilo definida pelo modelo a seguir:
<style type="text/css">
seletores {propriedade:valor; propriedade:valor}
seletores {propriedade: valor}
...
</style>
Sendo que:
Seletor - um comando HTML ou um nome criado iniciado por um ponto.
Propriedade - o atributo desse comando que ser alterado.
Valor - a caracterstica atribuda propriedade.
Pois bem, vou comear criando trs seletores que se chamaro .efeito1a, .efeito1b e .efeito1c, esses nomes escolhi
aleatoriamente. Dentro de cada seletor vou declarar um tipo de fonte com seu respectivo tamanho (font:35px arial
black), sua cor (color:#rrggbb), o espaamento entre as letras (letter-spacing:3px), e finalmente sua disposio
em relao a margem do pargrafo (margin:0px 0px -0px 0px;), tudo no necessariamente nesta ordem. Cada
declarao DEVE estar separada por ponto e virgula. Como j falei (e sempre bom repetir), todos os seletores devero
estar envolvidos pelas tags <STYLE>...</STYLE>. O comando TYPE="text/css" declara que as informaes a
seguir trata-se de um documento folha de estilo. Por exemplo:
.efeito1a {color:#000080; font-size:35px; font-famify: arial black; letter-spacing:3px; margin:0px 3px -45px 1px;}
.efeito1b {color:#FFFFFF; font-size:35px; font-family:arial black; letter-spacing:3px; margin:0px 5px -48px 2px;}
.efeito1c {color:#4169E1; font-size:35px; font-family:arial black; letter-spacing:3px; margin:0px 10px -51px 3px;}
</STYLE>
Agora tenho 3 declaraes prontas e configuradas. Elas podem ser inseridas em qualquer parte do arquivo mas
aconselho coloca-la antes da tag de fechamento do cabealho </HEAD> (para ficar mais fcil localiza-la depois).
Agora vou enderear cada declarao atravs da propriedade CLASS. Esta deve ser colocada onde eu quero que o
efeito acontea. Exemplo:
<P ALIGN="center" CLASS=efeito1c>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito1b>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito1a>Cascading Style Sheets
E finalmente o resultado: uma frase com sobreposio de 3 textos com cores diferentes criando um efeito 3D:


S para reforar o entendimento agora vou pegar este mesmo exemplo e alterar alguns parmetros para ver o que
acontece:
.efeito2a {color:#003366; font-size:35px; font-family:arial black; margin:0px;}
.efeito2b {color:#999999; font-size:35px; font-family:arial black; margin:0px 5px -52px 15px;}
.efeito2c {color:#CCCCCC; font-size:35px; font-family:arial black; margin:0px 10px -53px 30px;}
</STYLE>
<P ALIGN="center" CLASS=efeito2c>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito2b>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito2a>Cascading Style Sheets

.efeito3a {color:#000000; font-size:40px; margin:0px;}
.efeito3b {color:#444444; font-size:40px; margin:0px 0px -35px 20px;}
.efeito3c {color:#888888; font-size:40px; margin:0px 0px -35px 40px;}
.efeito3d {color:#cccccc; font-size:40px; margin:0px 0px -35px 60px;}
</STYLE>
.efeito4a {color:#a0522d; font-size:35px; font-family:courier new; margin:0; letter-spacing:0px;}
.efeito4b {color:#daa520; font-size:40px; font-family:courier new; margin:0px 0px -45px 20px; letter-spacing:-1px;}
.efeito4c {color:#ffd700; font-size:45px; font-family:courier new; margin:0px 0px -50px 35px; letter-spacing:-2px;}
.efeito4d {color:#ffefd5; font-size:50px; font-family:courier new; margin:0px 0px -55px 50px; letter-spacing:-3px;}
</STYLE>

Veja bem, nestes exemplos usei algumas propriedades CSS que foram aplicadas a um ttulo, podemos dizer, deixando-
o personalizado. Porm existem cerca de 130 propriedades que apresentam as mais diferentes formas possveis de
formatao de uma pgina, propiciando uma gama de recursos ainda pouco conhecido e explorado pelos webmasters.
Na seo CSS apresento uma pequena relao delas que so abordadas neste tutorial.
Para aprender mais sobre efeitos 3D, v para:

ALGUNS DETALHES IMPORTANTES:
1) Se houver mais de um seletor para a mesma declarao, como H1 e H2 no exemplo abaixo, eles devem ser
separados por vrgulas.
BODY {background: url(textura.jpg) navy; color: white}
H1, H2 {color: yellow; font-size: 24pt; font-family: Arial}
</STYLE>
2) Elementos de nvel inferior herdam propriedades dos elementos de nvel hierrquico mais alto. Uma cor de texto
definida para body ser usada para colorir todo o texto do documento, a no ser que sejam sobrepostos por uma regra
subseqente. No modelo abaixo o todo o texto ser branco, exceto os ttulos marcados com <H1> e <H2>, que sero
amarelo.
BODY {color: white}
H1, H2 {color:yellow}
</STYLE>
3) Para seletores especiais que mudam de estado, como o texto marcado com <A>, possvel atribuir propriedades
diferentes para cada estado. Um bom exemplo pode ser visto em Links Coloridos na seo Classe de Estilo.

MTODO IMPORTING
O mtodo importao usado atravs do comando @IMPORT e consiste no processo de inserir um
arquivo.css externo dentro do arquivo.HTML. Esse comando deve ser usado dentro da tag <STYLE> como mostra o
modelo abaixo:
@IMPORT URL(.../arquivo.css)
</STYLE>
Mtodo semelhante ao Linking que chama um arquivo externo por intermdio de um endereo HREF="...", porm
com uma abrangncia maior possibilitando chama-lo at de um servidor diferente. Eu, particularmente, no vejo a
vantagem de ter um arquivo layout de uma pgina em servidor diferente salvo se eu entendi errado a funo desse
comando. Caso esteja enganado solicito a algum mais instrudo me informar atravs do E-mail
edaurelio@hotmail.com a finalidade exata do mesmo.
Obrigado!

MTODO INLINE
Esse mtodo possibilita configurar apenas um bloco tag em questo mantendo inalterado os demais
blocos similares atravs do atributo STYLE="lista de propriedades", de modo que estas propriedades no precisam
ser declaradas em um cabealho especial em <head>. Aqui segue diversos exemplos interessantes de configurao:
MANIPULANDO A ESPESSURA DA LINHA DO TEXTO:
Os hobbits so um povo discreto mas muito antigo, mais numeroso outrora do que hoje em dia. Amam a paz e
a tranqilidade e uma boa terra lavrada: uma regio campestre bem organizada e bem cultivada era seu refgio
favorito. Hoje, como no passado, no conseguem entender ou gostar de mquinas mais complicadas que fole de
forja, um moinho de gua ou um tear manual, embora sejam habilidosos com ferramentas.
Acima, em azul, temos uma frase com a espessura de linha padro adotada pelo browser. Abaixo temos a mesma frase
com a espessura entre as linhas alterada para mais.
<P STYLE="line-height: 25pt; color:00009c"> Os hobbits so um povo...
Ainda o mesmo exemplo agora alterando o espao para menos.
<P STYLE="line-height: 10pt; color:00009c"> Os hobbits so um povo...

UNIDADES & VALORES
O CSS proporciona diversas unidades de medidas para se definir o tamanho, distncia, largura, altura
ou espaamento entre objetos (fonte, tabelas, margens, bordas... etc). As unidades podem ser Absolutas ou
Relativas. Unidades absolutas so aquelas que apresentam valores fixos, que no se alteram conforme a resoluo
do monitor. Unidades relativas apresentam valores variveis que sofrem alteraes conforme a resoluo do monitor
onde a pgina visualizada. Unidades absolutas e relativas s podem ser configuradas com nmeros inteiros
(positivos ou negativos), tais como, 1, 2, 15, -7, -10... etc. No adianta configurar valores com nmeros fracionrios ou
mistos, tais como, 3/4 ou 2,75 que o browser no os reconhecer. As unidades so:
ABSOLUTAS:

Milmetro (mm)
Centmetro (cm), onde 1cm = 10mm
Polegada (in), onde 1in = 2,54cm
Ponto (pt), onde 1pt = 1/72in
Pica (pc), onde 1pc = 12pt
RELATIVAS:

em
ex
Pixel (px) (default)
Porcentagem (%)

A unidade utilizada por default pelos browsers o pixel (px), isso , o browser assume esta unidade de medida
quando o webmaster no especifica qualquer unidade depois do valor. Exemplo:
SINTAXE EFEITO
<SPAN STYLE="font-size:12px">TEXTO</SPAN> TEXTO
<SPAN STYLE="font-size:12">TEXTO</SPAN> TEXTO
Repare que na segunda linha, como no especifiquei uma unidade para o valor 12, o browser assumiu a unidade pixel
(px). Agora observe o que acontece quando pego o mesmo exemplo e defino a unidade milmetro (mm) para este
nmero:
SINTAXE EFEITO
<SPAN STYLE="font-size:12px">TEXTO</SPAN>
TEXTO
<SPAN STYLE="font-size:12mm">TEXTO</SPAN>
TEXTO
Valores negativos criam um efeito de sobreposio dos objetos e so bons para criar efeitos 3D em texto ou sobrepor
imagens para realar o layout da pgina. Nesta pgina, mais acima, apresentei alguns exemplos de como isso acontece
configurando a propriedade margin com valores negativos.

HERANA DE ESTILO
O que vem a ser herana em CSS? Herana quer dizer que as formataes genricas (de nvel
hierrquico inferior), prevalecero indefinidamente a menos que voc declare outra formatao especfica para
cada elemento. Explico: Vamos supor que voc tenha uma pgina cujo corpo seja formatado com fonte arial,
background cor creme (#ffdead) e uma cor de letra cor marrom (#5b0000). Ento, usando o Mtodo Embedding a
sntaxe de sua pgina seria a seguinte:
BODY {font-family:arial; color:#B0C4DE; background:#007700}
</STYLE>
Isso quer dizer que essas caractersticas prevalecero em sua pgina (herana) a menos que voc altere algum elemento
especfico. No exemplo estou mudando a formatao de apenas um pargrafo usando o Mtodo Inline.
<P STYLE="font-family:courier new; color:00009c">
Este pargrafo ser diferente dos demais da pgina porque defini uma formatao especfica para ele. Para os demais
prevalece a formatao anterior.

Trotes & Brincadeiras

O objetivo desta seo no ensinar o internauta a passar hoaxes (falsos boatos) via e-mail mas
apresentar alguns truques, trotes e brincadeiras sobre HTML e homepages que andam circulando pela Web e que
podem ser aplicadas contra amigos ou conhecidos desavisados sobre esses recursos. Outra caracterstica desta seo
que voc no precisa fazer download de programas pois os trotes resumem-se em digitar certos parmetros ou
configurar alguns links.

FULANO DE TAL FOI PRESO!!...
Imagine a seguinte situao: Voc tem um amigo ou colega de trabalho que tmido, pacato, religioso
ou um exemplo de boa conduta, porm algum descobriu na Internet entre as manchetes fofoqueiras virtuais que esse
tal amigo no nada daquilo que se pensava... pelo contrrio, foi preso por embriagues, andar nu no meio da rua,
pregar a liberdade sexual em praa pblica e desacato as autoridades, entre outras... hehehe!!!... At que ele descubra
quem foi o excomungado que colocou esse artigo maculando seu santo nome na Internet, ele ser o foco das
atenes!!...
A brincadeira consiste numa pgina gerada por um programa (um script) que aceita literalmente qualquer nome que
venha entre os parmetros http:// e o .foipreso.com (para homens) ou .foipresa.com (para mulheres). Ento esta
varivel (o nome da pessoa) inserida em determinados lugares do texto da manchete virtual de forma dinmica e
voltil. Desta forma, quando abrir o site, somente voc l o contedo com o nome que inseriu e ao fechar nada mais
existir, porm a vtima no sabe disso, ela vai pensar que a manchete est circulando em toda a Rede. A sintaxe essa:
http://nome.do.rapaz.foipreso.com (para homem)
http://nome.da.moa.foipresa.com (para mulher)
Exemplo: Vamos supor que o nosso amigo (a vtima) se chama Luiz Roberto, ou que a amiga (a vtima) se chama
Maria dos Santos, ento os links ficaro assim:
http://luiz.roberto.foipreso.com
http://maria.dos.santos.foipresa.com
Voc pode colocar at o nome completo da pessoa desde que ele seja separado por ponto. Evite colocar nomes com
acentuao ou cedilha, tais como Conceio, Fbio... O link no funcionar com nomes acentuados. Agora clique nos
links acima e veja como eles funcionam. O site http://www.fuipreso.com tambm oferece a opo de criar o link
com o nome da pessoa e mandar via email.
Depois s gargalhadas.

UMA HOMEPAGE INVADIDA POR HACKERS?...
Existe um parmetro que quando inserido no final do link de uma pgina cria um efeito de
bagunamento amplo geral e irrestrito em seu contedo. O parmetro este: .crazy.sytes.org/ A pgina cujo link for
acompanhado por esta extenso abrir com as fontes embaralhadas, letras trocadas e espaamento entre as letras
alterados. Quem se deparar com esse efeito em seu browser pensar que seu micro foi contaminado por algum tipo de
vrus, ou talvez que o site foi invadido por hacker, vai saber!!... Como exemplo peguei o link da Folha online, ento o
link ficar assim:
http://www.folha.com.br.crazy.sytes.org/
NOTA: Alguns servidores no reconhecem esta extenso e apresentam uma mensagem de erro 404 "pgina no
encontrada". Neste caso sugiro testar o link antes de aplicar a brincadeira.

UMA HOMEPAGE NO ESPELHO!...
O parmetro .mirror.sytes.org/ inserido no final de um link cria o efeito de imagem invertida na
pgina semelhante ao reflexo de um espelho tornando sua leitura praticamente impossvel. O efeito no se limita a
inverter apenas a pgina mas tambm cada letra e imagens exibidas nela. Exemplo:
http://www.uol.com.br.mirror.sytes.org/
Para a brincadeira ficar ainda mais interessante sugiro colocar os parmetros no link da pgina principal no micro da
vtima sem que ela perceba, claro. Assim, quando ela acionar o browser a pgina de abertura exibir o efeito. Na
verdade, para eliminar o efeito de espelho basta deletar a extenso .mirror.sytes.org/ do final de seu link (na barra
de endereos do browser) e depois clicar em atualizar (na barra de comandos do mesmo), porm esse detalhe besta
geralmente passa desapercebido no s pelo internauta calouro, como tambm por muitos internautas veteranos e, se
ningum avis-lo sobre a brincadeira, vai acabar dele acionar o tcnico de suporte para sanar o problema.
NOTA: Muitos servidores no reconhecem esta extenso e apresentam uma mensagem de erro 404 "pgina no
encontrada". Neste caso sugiro testar o link antes de aplicar a brincadeira.

Hyper Text Markup Language

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hyper Text Markup Language

Uploaded by

Copyright:

Available Formats

Dynamic Hyper Text Markup Language

Cascading Style Sheets

uCABEALHO, CORPO E RODAP DAS TABELAS

[espao](*) Ò Ò

ß ß

(*) espao inquebrvel (no-break space)

You might also like

Hyper Text Markup Language

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hyper Text Markup Language

Uploaded by

Copyright:

Available Formats

Dynamic Hyper Text Markup Language

Cascading Style Sheets

uCABEALHO, CORPO E RODAP DAS TABELAS

&#160; &nbsp; [espao](*) &#210; &Ograve;

&#173; &shy; &#223; &szlig;

(*) espao inquebrvel (no-break space)

You might also like

[espao](*) Ò Ò

ß ß