manual de html - completo
TRANSCRIPT
Manual de HTML - Completo
Uma pgina Web simplesApesar dessa aparente sofisticao, as pginas Web no passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferena que as pginas Web contm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos so marcados como ttulos, outros como pargrafos. As marcaes so usadas tambm para indicar os links que levam a outros documentos na rede. Essas marcas so chamadas de tags e esto especificadas dentro da linguagem utilizada para criar as pginas Web, HTML.
O mnimo que voc precisa saber sobre HTMLO primeiro conceito que deve-se ter em mente ao projetar pginas Web que HTML no foi criada para controlar a aparncia dos documentos, ao contrrio dos processadores de texto e programas de layout de pgina. Como dissemos h pouco, os tags de HTML apenas informam ao navegador o que so os elementos que esto na pgina. Eles dizem, por exemplo, que um determinado trecho o ttulo principal do documento e outro um item de lista. A formatao do trecho deixada para o navegador. Cada navegador mostra a pgina de uma forma um pouco diferente, o que dificulta o trabalho de programao visual na Web. Para complicar ainda mais, cada usurio pode modificar a configurao padro de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensao muito simples criar uma pgina bsica para colocar na Internet com HTML. Neste captulo, apresentamos um exemplo enxuto, que aos poucos ficar mais sofisticado.
Software necessrio para esta seoComo a pgina Web um documento de texto comum, pode-se utilizar um editor de texto simples, como o Notepad do Windows. Existem editores de HTML que podem facilitar a confeco das pginas. importante notar que os exemplos descritos aqui devem ser gravados no formato texto e com a extenso .htm ou .html. Portanto, se for utilizado um processador de texto, como o Word, WordPerfect ou WordStar, o arquivo deve ser salvo no formato somente texto. O navegador de Web no vai entender um arquivo gravado nos formatos especficos dos processadores de texto (.doc, por exemplo). Ser necessrio tambm um programa de desenho para criar as imagens, como o Paintbrush do Windows ou um mais sofisticado, como o Photoshop. Tambm preciso cuidado na hora de gravar as imagens. O formato mais aceito pelos navegadores o GIF. O Paintbrush do Windows grava arquivos apenas nos formatos BMP ou PCX. Ser necessrio um outro programa para fazer a converso, como o Lview. Veja a lista dos programas recomendados para edio em HTML no captulo Programas. Alm disso, ser necessrio um navegador de Web para visualizar as pginas. Os exemplos deste livro foram testados nos seguintes navegadores: Netscape Navigator 2.0 (http://home.netscape.com/comprod/mirror/ client_download.html) Microsoft Internet Explorer 2.0 (http://www.microsoft.com/ie/download/default.htm) NCSA Mosaic 2.0.0 (http://www.ncsa.uiuc.edu /SDG/Software/Mosaic/)
AcentuaoNo recomendvel que os documentos Web contenham acentos. Ainda que todos os navegadores existentes entendam a presena de um caractere acentuado, existem ocasies em que o texto em HTML pode ficar truncado. Por exemplo, quando algum copia uma pgina Web e a envia para outra pessoa atravs de correio eletrnico. Para contornar este problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam estes cdigos em caracteres acentuados e o documento poder ser transmitido por qualquer meio. Sugesto: o documento pode ser escrito com os acentos e, antes de ir para o servidor de Web, ser submetido a
uma macro de processador de texto para substitu-los pelos cdigos HTML. O Apndice A mostra a tabela de acentos ISO 8859 Latin-1. Para facilitar a leitura, os exemplos deste livro contm os acentos normais de um editor de texto ao invs dos cdigos.
Primeiro ExemploA melhor maneira de aprender a escrever pginas de Web fazendo. Vamos ao primeiro exemplo: Primeiro exemplo Ttulo principal Este o texto do primeiro exemplo. Para dividir os pargrafos, usa-se o tag
. Este o segundo pargrafo. Para colocar um novo ttulo depois de um pargrafo no necessrio colocar o tag
. Ttulo secundrio Para abrir uma linha, usa-se o tag
,
certo? Uma lista
- Item 1
- Item 2
- Item 3
Observao: a representao dos tags e
foi escrita na forma de cdigo (
e
, respectivamente). Do contrrio, essa representao no seria mostrada
na pgina, mas interpretada com os efeitos reais de cada um dos
tags.
Visualizando o exemplo no navegadorAssim que o exemplo for salvo no editor de texto com a extenso .htm ou .html, pode-se visualiz-lo em um navegador. Para abrir o arquivo, deve-se escolher Open, Open File ou Open Local File no menu File do navegador. Alguns navegadores tem um boto Open na barra de botes. .
Como funcionam os tagsO primeiro exemplo mostra vrios trechos de texto marcados por cdigos colocados entre os caracteres < e >. Esses cdigos, chamados de tags, so responsveis pela marcao do texto em funo de seu papel dentro do documento. O ttulo principal marcado com os tags e , enquanto os pargrafos so separados pelo tag . Existem dois tipos de tags. Alguns so formados aos pares, indicando o incio e o fim do trecho afetado, como o par e . Outros podem ser colocados individualmente, como o , que simplesmente insere um espao para dividir pargrafos. Mais adiante, mostraremos que os tags tambm podem receber atributos.
Tags bsicosExistem quatro pares de tags que devem ser sempre colocados na pgina. O par de tags e deve englobar todo o contedo da pgina (estar presente no incio e no fim do texto) para indicar ao navegador que se trata de um documento HTML. O documento, por sua vez, est dividido em duas partes: o cabealho e o corpo do texto, cada um indicado por um par de tags diferente. Tudo que estiver entre o par e ir compor o cabealho, no aparecendo na pgina. O elemento principal do cabealho o ttulo do documento, que deve ser colocado entre o par e . Os navegadores mostram o ttulo na barra de ttulo do programa e na rea em aparecem as pginas j visitadas. Por fim, existe o par e
, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador.
TtulosNo corpo do texto podem ser colocados at seis nveis de ttulos. A hierarquia comea em , como o maior ttulo, e termina em , como o menor. Os ttulos e aparecem to pequenos no navegador que provavelmente nunca sero usados.
PargrafosOs pargrafos so digitados normalmente. O tag serve para indicar o incio de um novo pargrafo. Se o tag for colocado antes de um ttulo (, por exemplo), a marca de pargrafo ignorada. Nesse caso, o prprio ttulo se encarrega de colocar o espao necessrio.
LinhasAssim como as marcas de pargrafo, as quebras de linha so
indicadas por um tag simples. Para abrir uma nova linha, usa-se o
tag
.
ListasO incio de uma lista pode ser indicado com
- e o final com
. Esse tag descreve listas no-ordenadas (unordered lists, em ingls) e simplesmente coloca um elemento grfico (um crculo, um quadrado etc.) no comeo de cada item da lista. Existem outros tipos de listas. A relao completa pode ser encontrada no Apndice B. O incio de cada item indicado com o tag .
Melhorando a aparnciaCom os tags bsicos do primeiro exemplo j possvel criar pginas Web para colocar disposio dos usurios. O exemplo mostrado h pouco completo e, se colocado em um servidor Web, pode ser identificado com sua prpria URL e acessado de qualquer lugar do mundo. Porm, o primeiro exemplo deixa muito a desejar em apelo visual. Vamos melhorar a aparncia deste documento.
AlinhamentoA primeira providncia para melhorar a aparncia da pgina modificar o alinhamento do texto. O alinhamento padro (com o qual vm configurados os navegadores) esquerda. Para mudar o alinhamento padro deve-se adicionar o atributo ALIGN dentro dos tags que marcam os ttulos e os pargrafos. Ttulo Este um pargrafo centralizado. Desta vez, o tag ganhou uma opo (ALIGN=CENTER). Por isso, preciso utilizar um tag de fechamento () para indicar que apenas aquele pargrafo receber um alinhamento diferente.
MargemOutro controle sobre o alinhamento dos elementos da pgina pode ser conseguido atravs da mudana de margem. O texto sempre comea a uma determinada distncia da janela do navegador (um pouco diferente em cada navegador). s vezes, ser necessrio aumentar essa margem e fazer com que o texto comece mais para dentro da pgina. O par de tags e serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos: Texto com mais margem Texto com mais margem ainda
Texto pr-formatadoExiste ainda uma terceira forma de modificar o alinhamento. a utilizao do par de tags e . Usando esses tags, todos os espaos e entradas de pargrafo (o resultado da tecla enter) so respeitados. Em um texto normal, qualquer espao a mais entre duas palavras ignorado pelo navegador. Com a pr-formatao, pode-se controlar o espaamento com a barra de espao e colocar o texto em praticamente qualquer lugar da pgina. Apesar da vantagem dessa forma de alinhamento arbitrrio, o tag muda o tipo de caractere para uma fonte monoespaada. Uma fonte monoespaada aquela na qual todos os caracteres ocupam o mesmo espao horizontal, ao contrrio da fonte proporcional, na qual o i ocupa menos espao do que o a, por exemplo. Este texto est pr-formatado. A fonte monoespaada e as entradas de pargrafo, assim como os espaos adicionais, so respeitadas. Neste caso, a margem esquerda foi aumentada em cinco caracteres. O texto normal recebe fonte proporcional e ignora a presena de espaos a mais no meio do texto. Entradas de pargrafo adicionais tambm so ignoradas. No Netscape, possvel colocar tags de ttulo den,tro do par e , permitindo a manuteno da fonte proporcional (Times New Roman, por exemplo). Na maioria dos navegadores, porm, os tags de ttulo so ignorados e se sobrepem aos tags de pr-formatao, eliminando o seu efeito.
Mudando os caracteres Estilos de caracteresPara dar nfase em determinados trechos de texto, pode-se usar negrito, itlico ou mesmo a fonte monoespaada citada h pouco. Texto em negrito Texto em itlico Texto monoespaado Ao contrrio de , o tag ignora espaos em branco adicionais e entradas de pargrafo no meio do texto. Em relao ao espaamento, o tag funciona exatamente como texto normal. Os tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos. Texto em negrito e itlico Texto monoespaado em negrito Texto monoespaado em itlico Texto monoespaado em negrito e itlico
Tamanhos de caracteresAlguns navegadores aceitam a modificao do tamanho do texto atravs do atributo SIZE do tag . Texto O tag pode ser atribudo a qualquer parte do texto, com exceo dos ttulos (, etc.). Os valores do atributo SIZE variam de 1 a 7, O tamanho normal do texto nos navegadores equivalente a SIZE=3. No existe nenhuma relao entre os valores no atributo SIZE e o nmero de pontos (a unidade utilizada para medir os caracteres). Portanto o melhor experimentar todos os tamanhos e avaliar o resultado. Texto com FONT SIZE=7 Texto com FONT SIZE=6
Texto
com com com com com
FONT FONT FONT FONT FONT
SIZE=5 SIZE=4 SIZE=3 SIZE=2 SIZE=1
O tag tambm pode ser utilizado com um atributo diferente para cada letra. A aplicao mais bvia a colocao de uma capitular, aquela letra em tamanho maior no incio de um pargrafo. Texto Tambm possvel modificar o tamanho de todo o texto de uma vez s colocando o tag no topo do texto.
Cores diferentesAlguns navegadores tambm aceitam modificar a cor padro do texto e do fundo da janela do documento. Essa definio feita em atributos do tag . Os atributos so BGCOLOR e TEXT. ou O exemplo acima produz uma pgina com fundo branco e texto na cor preta. Os valores dos atributos so definidos em uma tabela de cores no padro RGB ou pelo nome da cor. Pode-se definir ainda a cor de determinados trechos de texto, com o atributo color no tag . Texto na cor branca ou Texto na cor branca Dessa forma, possvel ter texto de vrias cores na mesma pgina. Texto em branco, azul, verde e vermelho
Mudando o tipo de caractereO Internet Explorer, navegador da Microsoft lanado no segundo semestre de 1995, trouxe a novidade de permitir a mudana do tipo de caractere do texto. O autor de uma pgina Web pode definir qual ser o tipo de determinada parte do texto, mas o usurio precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows. Ttulo principal Este o texto do primeiro exemplo. Para dividir os pargrafos, usa-se o tag
. Este o segundo pargrafo. Para colocar um novo ttulo depois de um pargrafo no necessrio (tampouco funciona) colocar o tag
. Ttulo secundrio Para abrir uma linha, usa-se o tag
,
certo? Uma lista
- Item 1
- Item 2
- Item 3
HyperlinksAt agora produzimos apenas um documento bastante simples, que poderia ser composto com
recursos muito mais sofisticados em qualquer processador de texto. Mas neste livro estamos falando de documentos de hipertexto, que podem fazer ligaes com outros textos. Os pontos que ligam esses hipertextos so chamados de hyperlinks, links ou ncoras de hipertexto. O tag que indica a regio a ser tratada como um hyperlink o par e . Dentro desse tag, na forma de atributo, colocada a referncia ao arquivo ligado. A referncia indica a URL do documento. Quando o usurio clicar sobre o trecho realado pela ncora de hipertexto, o arquivo ligado ser requisitado ao servidor e mostrado na janela do navegador. Uma ligao de hipertexto: HTML Easy! Pro home page Neste exemplo, o texto HTML Easy! Pro home page aparece no navegador realado de alguma forma, normalmente em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mozinha quando colocado sobre o texto realado. Ao clicar no link, o arquivo htmleasy.html, do diretrio /~milkylin/ do servidor www.seed.net.tw ser transmitido pela rede e mostrado na tela. Colocando uma URL no atributo HREF do tag , pode-se ligar uma pgina com qualquer outro documento disponvel na Internet. Pode-se fazer uma pgina com uma lista de pginas preferidas da rede com suas devidas ligaes de hipertexto. Lista de recursos sobre HTML
- Composing Good HTML
- CERN's style guide for online hypertext
- How to Write HTML Files
- Introduction to HTML
- The HTML Quick Reference Guide
- The official HTML specification
este exemplo, as URLs esto entre aspas. Isso significa que o servidor vai considerar a diferena entre maisculas e minsculas (o que se chama de sensitivo caixa) na hora de localizar o arquivo. Se no exemplo acima o arquivo HTML_quick.html estiver gravado no servidor como html_quick.html, o documento no ser localizado e o usurio receber uma mensagem de erro. Nem sempre necessrio colocar uma URL completa em uma ncora de hipertexto. possvel indicar apenas o nome do servidor.
- Apple Computer
- The Spot
Neste exemplo, os servidores da Apple e do The Spot se encarregaro de indicar qual a pgina que deve ser carregada. Essa pgina principal chamada normalmente de home page. Quando a ncora apontar para uma pgina armazenada no mesmo servidor, no necessrio colocar o endereo da mquina. Se o documento estiver no mesmo diretrio, basta indicar o nome do arquivo. Exemplo 1 O link acima chama o arquivo exemplo1.htm, que deve estar no mesmo diretrio da pgina. Se o
documento estiver em um subdiretrio de onde est o arquivo que contm a ncora, preciso indic-lo. Exemplo1 Digamos que agora seja necessrio traar o caminho de volta, colocando uma ncora no arquivo exemplo1.htm para a pgina anterior. Volta para exemplo de ncora A referncia cruzada entre arquivos armazenados no mesmo computador mas em diretrios diferentes merece bastante ateno. Digamos que existam dois diretrios colocados no mesmo nvel. Um chamado musica e outro, comida. Um arquivo chamado rock.htm, do diretrio musica deve fazer uma referncia ao arquivo feijoada.htm, do diretrio comida. A ncora de hipertexto do documento rock.htm deve ficar assim: Tudo sobre feijoada Tambm pode-se fazer uma referncia a uma outra parte do mesmo documento. Isso particularmente til quando se est fazendo um ndice de um texto. A ncora para um texto no mesmo documento fica assim: Captulo 1 Enquanto o alvo do link fica desta forma: Captulo 1 Neste exemplo, quando o usurio clicar sobre o link Captulo 1, ele ser remetido ao ponto onde est a referncia Captulo 1. A parte do texto que referenciada (o alvo de um link) no fica realada como os hyperlinks. Alm de ser invisvel, no obrigatrio que exista um link apontando para ela. Pode-se colocar referncias do tipo em um documento longo apenas para que outras pessoas produzindo pginas Web possam fazer ligaes para determinadas partes do texto. Para citar uma determinada parte de um outro texto, a referncia : Captulo 1 do Exemplo Sendo que exemplo.htm o nome do arquivo referenciado e captulo1 a referncia a uma parte daquele texto. Cores dos hyperlinks Da mesma forma que possvel definir cores diferentes para o fundo e o texto, pode-se mudar a cor dos links. As cores das ncoras de hipertexto variam de acordo com a sua condio: visitados, nunca visitados e ativos. Os navegadores sabem quais foram os hyperlinks j visitados pelo usurio em um determinado perodo de tempo. Por isso, a cor dos links j visitados deve ser diferente da cor das referncias nunca visitadas. Alm disso, o link pisca em uma cor ainda diferente dessas duas logo depois que clicado pelo usurio. A cor dos links definida no tag . Onde: LINK determina a cor dos links no visitados ALINK determina a cor que os links devem piscar quando clicados VLINK determina a cor dos links j visitados Neste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, e os visitados em verde. Para no confundir os usurios, a cor dos links j visitados deve ser uma verso mais clara da cor das ligaes ainda no visitadas.
magensAgora que j explicamos como fazer um documento hipertexto, podemos finalmente incluir imagens nessa pgina Web. Para inserir uma imagem basta indicar o nome do arquivo dentro do tag .
Aqui voc v uma imagem: Note que a imagem... Neste exemplo, a
imagem imagem.gif aparece alinhada entre as frases Aqui voc v uma
imagem: e Note que a imagem.... Se a imagem estiver em um diretrio
diferente do arquivo de texto, preciso especific-lo na referncia.
Recomenda-se que as imagens sejam colocadas em um diretrio separado
para facilitar a manuteno dos arquivos. Exemplo: Aqui voc v uma
imagem: Note que a imagem... Alinhamento da imagem No exemplo
anterior, a imagem ficou alinhada esquerda da tela e o texto
imediatamente posterior a ela alinhou-se com o canto inferior
direito da imagem. Esse o alinhamento padro de textos com imagens.
possvel mudar o alinhamento utilizando o atributo ALIGN= dentro do
tag . Aqui voc v uma imagem: Note que a imagem... Agora a imagem
ficou alinhada esquerda e com o topo do texto Note que a imagem....
Para alinhar a imagem esquerda, mas com o texto no centro, usa-se
ALIGN=MIDDLE. O texto utilizado imediatamente depois da imagem nos
exemplos anteriores curto. Se for usado um texto mais longo, apenas
uma linha ficar alinhada com a imagem. O restante ser jogado para a
linha seguinte. Exemplo: Aqui voc v uma imagem: Note que a imagem
est alinhada esquerda. O texto imediatamente posterior imagem fica
alinhado no canto superior direito. Mas apenas uma linha acompanha
a imagem. O restante do texto jogado para a linha seguinte. Exemplo
12: quebra de linha depois da imagem Este problema pode ser
contornado utilizando outros atributos de alinhamento que fazem a
imagem flutuar ao lado do texto. Exemplo: Aqui voc v uma imagem:
Note que a imagem est alinhada esquerda. Alguns navegadores, como o
Netscape, permitem colocar o texto em torno da imagem, independente
de seu comprimento. como se a imagem estivesse flutuando no meio do
texto. Neste exemplo, a imagem ficou alinhada esquerda e permitiu
que todo o texto imediatamente posterior ficasse alinhado direita.
Para alinhar a imagem direita, usa-se o atributo ALIGN=RIGHT. A
lista completa das formas de se alinhar uma imagem est no Apndice
B. No entanto, quando usa-se os atributos ALIGN=LEFT ou
ALIGN=RIGHT, todo o texto imediatamente posterior puxado para o
lado da imagem. Se for necessrio interromper o fluxo de texto ao
lado da imagem, pode-se usar o tag
com o atributo CLEAR=ALL. Aqui voc v uma imagem: Note que a imagem
est alinhada direita. O texto est contornando a imagem, mas somente
at este ponto.
A partir daqui o texto jogado para a prxima margem livre em
qualquer um dos lados da janela. Borda possvel colocar uma borda em
volta da imagem. O atributo BORDER. O valor da borda expresso em
pixels. Aqui voc v uma imagem: Note que a imagem...
Texto alternativo De nada vai adiantar caprichar na produo de uma imagem, se a pessoa que est vendo as pginas utiliza um navegador incapaz de mostrar imagens (sim, eles existem e so bastante utilizados, principalmente o lynx). Outros usurios tambm ajustam o navegador para no carregar imediatamente as imagens. Por causa de conexes lentas, algumas pessoas preferem receber o texto e depois pedir as imagens. Mas para isso elas precisam saber do que se tratam as imagens. Essa a funo do texto alternativo. Pode-se colocar o ttulo ou a melhor descrio possvel de uma imagem utilizando o atributo alt: No exemplo acima, o navegador foi ajustado para no carregar a imagem imediatamente ao carregar a pgina. O texto alternativo aparece junto com o cone de imagem. Margens Pode-se controlar o espao em volta da imagem colocando o valor em pixels da margem desejada. possvel definir as margens separadamente ou em conjunto. Para mais espao em cima e embaixo da imagem, o atributo VSPACE. Se o problema for espao dos lados da imagem, usase o atributo HSPACE para definir as margens horizontais. Cada um desses atributos (HSPACE e VSPACE) adiciona espao nas duas faces da imagem (em cima e em baixo e direita e esquerda). No h como definir uma margem maior apenas esquerda ou somente na parte inferior. Formatos e interlaceamento Os formatos de imagem mais aceitos pelos navegadores so GIF e JPG. A vantagem do formato GIF que se pode gravar na opo GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, o usurio tem a impresso da imagem estar sendo carregada mais rpido. O formato JPG oferece um fator de compresso maior do que o GIF. As imagens ocupam menos espao em bytes. Mas o processo de compresso do JPG pode causar alguma perda de qualidade imagem. Como regra geral, o formato JPG deve ser usado em imagens fotogrficas e o GIF em imagens criadas em computador ou desenhadas. A compresso do formato GIF se d ainda melhor com imagens com poucas cores e trechos contnuos de uma cor s. Dimenses Se as dimenses da imagem forem colocadas na referncia, o usurio ter a impresso de que a pgina foi carregada mais rpido. Fornecendo as dimenses, o navegador reserva o espao para a imagem e vai carregando o texto para que o usurio possa comear a ler. Depois de carregado o texto, as imagens comeam a ser mostradas. Deve-se escrever a referncia de imagem neste formato: .
TabelasComo ainda no existem formas mais sofisticadas de controlar o posicionamento de imagens e texto, o uso de tabelas tornou-se um recurso essencial para dispor os elementos da pgina de maneira mais criativa.
Uma tabela simplesAs tabelas so compostas de linhas, dentro das
quais so colocadas clulas com o contedo. Dentro das clulas pode-se
colocar texto, imagens ou at mesmo outras tabelas. Uma linha pode
conter vrias clulas, formando-se ento uma tabela com vrias colunas.
Os tags para construir uma tabela so: e : para indicar o incio e o
fim de uma tabela e : para indicar o incio e o fim de uma linha e :
para indicar o incio e o fim de uma clula-ttulo e : para indicar o
incio e o fim de uma clula A nica diferena entre o tag e que o
primeiro marca o texto da clula com nfase. Os navegadores
interpretam essa nfase como negrito. Nos exemplos deste livro, no
utilizamos o tag , j que a nfase pode ser conseguida com tags como
e . No obrigatrio colocar os tags de fechamento dos elementos da
tabela (, e ), mas estes tags so teis para entender melhor a
estrutura de linhas e clulas. Nos exemplos seguintes adicionamos
uma borda tabela. O atributo da borda colocado dentro do tag .
Clula 1Clula 2 Clula 3Clula 4 O exemplo acima mostra uma tabela com
duas linhas e duas colunas. O nmero de colunas definido pelo nmero
de clulas presentes nas linhas. possvel expandir as clulas para que
elas ocupem o espao de mais de uma coluna ou linha. Clula expandida
Clula 1Clula 2 Clula 3Clula 4 ou Clula expandida Clula 1Clula 2
Clula 3Clula 4 A soluo necessria para fazer uma clula expandida
diferente em cada um dos exemplos anteriores. No caso da clula
expandida na largura de duas colunas, ela ficou em uma linha
diferente das clulas 1 e 2. No segundo exemplo, para deixar a clula
expandida da altura de duas linhas foi preciso coloc-la na mesma
linha das clulas 1 e 2.Dimenses da tabelaAlm de controlar a largura
da borda (com o atributo BORDER), possvel definir as dimenses (em
pixels) de toda a tabela, espao entre clulas e as margens dentro
das clulas. Todos esses controles so feitos atravs de atributos
dentro do tag . Os atributos so: WIDTH: para definir a largura da
tabela HEIGHT: para definir a altura da tabela CELLPADDING: para
definir a margem dentro das clulas CELLSPACING: para definir o
espao entre as clulas Clula expandida Clula 1Clula 2 Clula 3Clula 4
Os atributos width e height tambm podem ser utilizados para definir
o tamanho de clulas especficas. Neste caso, devem ser colocado
dentro do tag (ou ).AlinhamentoOs elementos dentro da tabela podem
ser alinhados da mesma forma que um pargrafo comum. Se nenhum
alinhamento for definido, o contedo das clulas alinhado
horizontalmente esquerda e verticalmente ao centro. Os atributos
ALIGN (alinhamento horizontal) e VALIGN (alinhamento vertical)
devem ser usados dentro dos tags e (alm de , se for o caso). Os
alinhamentos possveis so: Alinhamento horizontal ALIGN=LEFT: alinha
o contedo esquerda ALIGN=RIGHT: alinha o contedo direita
ALIGN=CENTER: alinha o contedo ao centro Alinhamento vertical
VALIGN=BASELINE: mantm as linhas de texto com o mesmo alinhamento
(para ser usado dentro de ou no primeiro de uma linha) VALIGN=TOP:
alinha o contedo no topo VALIGN=MIDDLE: alinha o contedo ao centro
VALIGN=BOTTOM: alinha o contedo na base da clula Vamos utilizar um
texto mais longo na segunda clula da segunda coluna para demonstrar
o alinhamento padro. Ttulo 1Ttulo 2 Clula 1 Clula 2 Quando existe
um texto longo, a clula expandida at margem da janela do navegador.
Para controlar a apresentao de texto dentro da tabela, pode-se
modificar as dimenses da clula. A largura da coluna da direita foi
ampliada para que o texto da clula 2 aproveitasse at o final da
margem do navegador. Se a largura da janela do navegador for
diminuda, tambm diminui alargura da segunda coluna. Vamos melhorar
a aparncia da tabela ajustando a largura da clula 2 em 300 pixels.
Assim, a largura de toda a segunda coluna ser ajustada.
Aproveitamos este exemplo para alinhar o texto da clula 1 no topo e
mudar a largura da borda da tabela. Ttulo 1Ttulo 2 Clula 1 Clula 2
A largura de cada clula pode ser controlada individualmente
utilizandose o atributo width. Cor de fundo das clulasO Internet
Explorer, navegador da Microsoft, permite atribuir cores diferentes
para o fundo de cada clula. Basta acrescentar o atributo BGCOLOR
com a cor desejada aos tags de clula. Em algumas combinaes de cores
ser necessrio tambm modificar a cor das letras. Isso feito com o
atributo COLOR dentro do tag . Comida Bebida Arroz Vinho Dicas e
Truques em HTMLTruques com imagens Texturas no backgroundDa mesma
forma que possvel definir uma cor de fundo diferente para as
pginas, pode-se colocar uma imagem como papel de parede. Primeiro
cria-se um arquivo .GIF e depois inclui-se o atributo BACKGROUND no
tag . A imagem que ser colocada no fundo deve ser suave o
suficiente para permitir que o texto a ser colocado por cima fique
legvel. No exemplo que mostramos aqui, no entanto, escolhemos um
padro quadriculado para mostrar como o arquivo de imagem repetido
na tela para compor o background. Exemplo 24: colocando uma textura
no fundo da pgina Neste exemplo, o arquivo textura.gif utilizado
como padro de fundo da pgina. Vrias cpias da imagem so colocadas
lado a lado at ocupar toda a rea do documento.Imagem de um
pixelDeve-se ter outros cuidados ao escolher as imagens para o
fundo. O principal problema o tamanho em bytes destes arquivos. As
dimenses da imagem influem no tamanho do arquivo.Para criar um
arquivo o mais econmico possvel pode-se fazer uma imagem de apenas
um pixel quadrado. Esse pixel, que estar ocupando um tamanho mnimo
em bytes, ser reproduzido em todo o fundo da pgina, dando a
impresso de ser um arquivo nico.Baixa resoluoOutra forma de
melhorar a performance da pgina Web enviar primeiro uma verso em
baixa resoluo das imagens. Esse truque mais til quando a imagem de
grandes propores. Digamos que a imagem seja bastante complexa,
ocupando acima de 30 Kbytes. Cria-se uma verso simplificada da
mesma imagem (em preto e branco, por exemplo) e informa-se ao
navegador para carreg-la antes. Assim, o usurio pode ter uma idia
da ilustrao antes de ter que esperar pela imagem em alta resoluo.
Criado para o Netscape, esse truque chamado de low/high resolution
flip trick. A incluso da imagem de baixa resoluo conseguida com a
colocao do atributo LOWSRC, que indica o arquivo que ser carregado
primeiro. No exemplo acima, o arquivo altareso.gif a imagem
definitiva, de alta resoluo. O arquivo baixares.gif a imagem de
baixa resoluo, que ser carregada antes. A principal utilidade desse
truque nos imagemaps. Sem ter que esperar pela imagem de alta
resoluo, o usurio pode escolher uma rea da verso menos definida e
seguir a sua navegao. Alguns lugares da rede aproveitam o recurso
para criar uma pequena animao.Fundo transparenteOs programas de
desenho, independente do formato da figura, gravam uma imagem no
formato retangular. Mesmo que a imagem seja um crculo, quando a
ilustrao for colocada na pgina Web, ela ir ocupar um espao
retangular. Se esse crculo tiver sido desenhado sobre um fundo
branco, esse fundo acompanhar a imagem. possvel fazer uma imagem
ficar com o fundo transparente. Digamos que o fundo da pgina tenha
uma textura e preciso colocar uma imagem que deixe ver o fundo em
volta dela. Pode-se definir que determinada rea da imagem no tenha
cor nenhuma e dar a impresso de vazado. Para fazer uma imagem com
fundo transparente preciso utilizar um programa como o LViewPro,
que seleciona uma determinada cor como a cor de fundo. Ao carregar
a imagem no navegador, essa cor no ser mostrada, dando o efeito de
transparncia. Por isso preciso que a rea que se pretende deixar
transparente seja de uma cor s. Essa cor no pode se repetir em
qualquer outra parte da imagem. Do contrrio essa parte tambm ficar
transparente. No exemplo a seguir, a imagem foi criada sobre um
fundo cinza. A inteno colocar a figura sobre uma textura. Abre-se o
arquivo no LViewPro e escolhe-se Background Color no menu Options.
O programa mostra uma tela com todas as cores presentes na imagem.
Seleciona-se a cor que ficar transparente (neste caso, o cinza) e
clica-se em OK. Ao salvar o arquivo, o programa pede uma confirmao
de gravao no formato GIF89. Clica-se em OK. Ao carregar a imagem no
navegador, a rea que estava na cor cinza ficou transparente e por
baixo da imagem apareceu a textura.Anti-aliasO efeito anti-alias,
disponvel em alguns programas de desenho, como o Photoshop, suaviza
as bordas de uma imagem. O efeito mistura os pixels da borda com os
pixels do fundo. Por exemplo, se a borda est na cor preta e o fundo
na cor branca, o anti-alias coloca na borda uma gradao de tons de
cinza. Assim, o contorno da imagem fica com maior resoluo.
Dependendo do tamanho, difcil notar as diferenas entre imagens com
ou sem-anti-alias. Mas se olharmos mais de perto, veremos como
construdo o anti-alias. No exemplo acima, a primeira imagem, sem
anti-alias, tem contorno cheio de degraus. A segunda imagem, com o
efeito, mistura os pixels da borda com os do fundo, gerando alguns
pontos acinzentados para fazer a transio de forma mais suave. Uma
desvantagem do anti-alias que a rea de transio entre o contorno e o
fundo aumenta a complexidade da imagem e, conseqentemente, gera
arquivos com mais bytes. Quando possvel, deve-se evitar o efeito
para que os arquivos de imagem fiquem com um tamanho menor.Combinao
com o backgroundAs imagens com anti-alias tambm dificultam o uso do
fundo transparente. Na verdade, os dois truques so praticamente
incompatveis. Como preciso escolher apenas uma cor para fazer uma
imagem com fundo transparente, os tons da transio no contorno
aparecem como se fossem um borro. Quando o uso do anti-alias
indispensvel, recomenda-se que a imagem seja produzida j sobre o
fundo definitivo. Por exemplo, se o fundo da pgina for preto, a
imagem deve ser criada no programa de desenho sobre um fundo da
mesma cor. Se as cores forem idnticas, nem preciso converter a
imagem para fundo transparente. Mas, se for necessrio fazer a
transparncia, os tons da borda combinaro com a cor de fundo da
pgina. Outra situao em que se deve coordenar o fundo da pgina e o
da imagem que est sendo produzida quando se utiliza uma textura
como background. Nem sempre uma imagem com fundo transparente
funciona sobre uma textura. A dica de novo criar a imagem j sobre a
textura que ser utilizada. preciso que a textura escolhida seja
uniforme para que no haja problemas de encaixe quando a imagem for
colocada na pgina.LetreiroO Internet Explorer implementa uma forma
muito simples de dar movimento ao texto. O recurso funciona como um
letreiro luminoso de bolsa de valores, no qual o texto corre da
direita para a esquerda. No caso do letreiro produzido para o
Internet Explorer, utiliza-se o tag para marcar o trecho de texto
que ser animado. Uma srie de atributos permitem controlar o tipo de
rolagem do texto (da esquerda para a direita ou vice-versa), a
velocidade e o tamanho do letreiro, entre outras coisas. Um
letreiro simples seria: Este texto rola pela tela da direita para a
esquerda. No exemplo acima, uma rea de 30 pixels de altura
(HEIGHT=30) por 300 pixels de largura (WIDTH=300) ser criada para a
exibio do texto em movimento, que ser apresentado da direita para a
esquerda (DIRECTION=LEFT). A velocidade expressa tambm em pixels
pelo atributo SCROLLAMOUNT. Quanto mais pixels, mais rpido correr o
texto na tela.Trechos de vdeoNo Microsoft Internet Explorer 2.0
possvel incluir um trecho de vdeo numa pgina. A Microsoft inventou
um atributo chamado DYNSRC (de dynamic source, fonte dinmica) para
ser includo dentro do tag . O formato de arquivo de vdeo suportado
o AVI (Audio Video Interleave). Para que os demais navegadores,
incapazes de entender o atributo DYNSRC, possam tambm receber a
imagem, ainda que esttica, inclui-se no mesmo tag o atributo SRC
com o arquivo de imagem comum correspondente. O exemplo acima
implementa numa pgina lida com o Internet Explorer 2.0 o arquivo de
vdeo video.avi. Outros navegadores (como o Netscape) iro mostrar
apenas a imagem imagem.gif. O atributo START=MOUSEOVER indica que o
trecho de vdeo comear a ser executado quando o usurio passar o
mouse sobre ele. O atributo LOOP=INFINITE declara que o vdeo ser
exibido continuamente at que o usurio mude de pgina. Outros
atributos so: START=FILEOPEN: o vdeo comea a ser exibido assim que
a pgina carregada CONTROLS: adiciona um conjunto de botes para
controlar a execuo do vdeo LOOP=n: Executa o trecho de vdeo n
vezes. Se for colocado LOOP=5, o vdeo ser exibido cinco vezes.
LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo
o trecho de vdeo ser executado quando colocado em loop.Trilha
sonoraO Internet Explorer 2.0 tambm aceita colocar uma trilha
sonora em uma pgina Web. Como no tag queimplementa a execuo de
vdeo, possvel utilizar um dispositivo de looping, que pode manter o
arquivo tocando constantemente ou por um nmero definido de vezes.
Para colocar uma trilha sonora, a Microsoft criou o tag BGSOUND.
Pode-se incluir trechos de udio nos formatos WAV, AU ou MIDI. Neste
exemplo, o arquivo de udio som.wav ser executado constantemente at
que o usurio troque de pgina. S depois que a pgina carregada que o
som comea a tocar. possvel tambm fazer com que o som seja tocado
por um nmero determinado de vezes. Exemplo: No exemplo acima, o
arquivo som.wav ser executado cinco vezes.Marca d'guaNo Internet
Explorer pode-se controlar o comportamento da imagem de fundo, o
background. A empresa criou um atributo para o tag chamado
BGPROPERTIES. Com a opo BGPROPERTIES=FIXED, a imagem de fundo fica
fixa quando o usurio rola o texto para cima. O recurso d a impresso
da pgina ter uma marca d'gua e de que o texto flutua sobre o fundo.
Mapas clicveisO mapa clicvel uma imagem que contm vrias ligaes de
hipertexto. Numa mesma figura, pode-se oferecer ao usurio a opo de
clicar em regies diferentes para escolher onde ele quer ir. A
primeira tarefa para criar um mapa clicvel produzir a imagem.
Depois, preciso utilizar um programa de edio de mapas. O Mapedit,
para Windows 3.1 e 3.11, e o MapThis!, para Windows 95, so os mais
conhecidos. Deve-se carregar o arquivo de imagem no editor de mapas
e utilizar as ferramentas disponveis para marcar as reas da imagem
que podero ser clicadas pelo usurios. Os editores de mapas tm
ferramentas para desenhar reas na forma de crculos, retngulos,
polgonos (forma livre) ou pontos. O prximo passo definir qual
arquivo cada uma dessas regies ir chamar. Clicando com o boto
direito do mouse sobre as reas, obtm-se uma janela onde pode ser
escrito o nome do arquivo. Se o arquivo estiver em um diretrio
diferente, preciso inclu-lo no nome do arquivo. Alm disso,
necessrio indicar o nome do arquivo default, que o navegador deve
carregar quando o usurio clicar em uma rea da imagem fora das reas
com links. O arquivo default pode ser uma pgina Web com uma
mensagem do tipo voc clicou em uma rea sem ligao de hipertexto. Por
favor, tente de novo. No Mapedit, a definio do arquivo default
feita em uma opo do menu File. No MapThis!, o arquivo default
indicado toda vez que se marca uma regio sensvel. Depois de marcar
todas as regies sensveis, basta salvar o arquivo do mapa com a
extenso .map. Com o arquivo do mapa pronto, hora de colocar a
imagem na pgina e fazer a referncia ao mapa. Onde:
HTTP://ALGUM.SITE.COM.BR o endereo do servidor onde esto as pginas.
preciso confirmar com o administrador do servidor a necessidade
deste endereo. Alguns servidores mais recentes, como os da
Netscape, exigem apenas a colocao do nome do arquivo.
/CGI-BIN/IMAGEMAP a localizao do programa imagemap, que ir
processar as informaes do mapa. Essa localizao deve ser confirmada
com o administrador do servidor. Alguns servidores mais recentes,
como os da Netscape, exigem apenas a colocao do nome do arquivo.
/mapa.map o nome do arquivo de mapa. Neste caso, o arquivo deve
estar no diretrio principaldas pginas Web. Se estiver em um
diretrio diferente, deve-se acrescentar a informao. Exemplo:
/mapas/mapa.map. IMG SRC=mapa.gif a referncia imagem ISMAP indica
que esta imagem um mapa clicvel Para testar o mapa, preciso que
todos os arquivos sejam transferidos para o servidor. um bom
momento para checar com o administrador do servidor todos os
diretrios referenciados. O principal a localizao do programa
imagemap, que normalmente est no diretrio /cgi-bin. Deve-se checar
tambm com o administrador se necessrio que ele modifique o arquivo
imagemap.conf para incluir a localizao dos mapas novos. Esse
arquivo informa ao programa imagemap onde esto os mapas. Alguns
servidores mais recentes, como os da Netscape, exigem apenas a
colocao do nome do arquivo.Mapas processados no clienteEm 1995 (com
o Internet Explorer e o Netscape 2.0), tornou-se possvel criar
mapas que no precisam de programas instalados no servidor para
funcionar. o que se chama de mapas processados no cliente. Assim
pode-se testar os mapas antes de envi-los ao servidor e diminuir o
tempo de resposta quando o usurio clica na imagem. O truque
inventado para processar os mapas clicveis no navegador foi colocar
as informaes sobre as reas quentes da imagem na prpria pgina Web. O
processo de produo do mapa continua o mesmo: criar a imagem,
carreg-la no editor de mapas, marcar as reas com ligao de
hipertexto e salvar o arquivo .map. Para colocar as informaes do
mapa na pgina, deve-se copiar o contedo do arquivo .map para a
pgina Web dentro de um novo tag chamado . O contedo do mapa criado
pelo Mapedit no exemplo anterior o seguinte: circle circulo.htm
74,76,96,121 rect quadrado.htm 270,123,179,32 poly triangul.htm
375,27,428,124,321,124,375,27 Onde: circle, rect e poly so os
formatos das regies sensveis. circulo.htm, quadrado.htm e
triangul.htm so os arquivos associados a essas regies. e os nmeros
so as coordenadas das regies sensveis. Apenas duas coordenadas
definem a regio circular do mapa. A primeira coordenada marca o
centro e a segunda aponta o raio da circunferncia (74,76,96,121). O
quadrado tambm s precisa de duas coordenadas, uma indicando o canto
superior esquerdo e outra localizando o canto inferior direito do
retngulo (270,123,179,32). J o polgono precisa de uma coordenada
para cada um pontos que ligam as retas que o formam
(375,27,428,124,321,124,375,27). Por isso, primeiro e o ltimo ponto
so iguais. preciso reordenar as informaes contidas no arquivo
gerado pelo editor de mapas para criar um mapa processado no
cliente. As informaes sobre as reas sensveis so colocadas como
atributos do tag , que por sua vez deve ser colocado entre o par de
tags e . Onde: e indicam o incio e o fim de uma descrio de mapa
processado no cliente. NAME=MAPA indica o nome do mapa. SHAPE
indica o formato da regio. COORDS indica as coordenadas que formam
a regio. HREF indica o arquivo associado regio O mapa processado no
cliente tambm recebe um nome, definido no atributo NAME do tag .
Esse nome utilizado no tag , que agora informa tambm, atravs do
atributo USEMAP, qual mapa deve ser utilizado para o processamento.
O atributo USEMAP, seguido do caractere #, indica o nome do mapa.
No exemplo acima, somente os navegadores capazes de processar mapas
no cliente (Internet Explorer e Netscape 2.0), podero utilizar a
imagem clicvel. Para fazer mapas que todos os navegadores possam
entender, deve-se mesclar as duas tcnicas, utilizando os atributos
ISMAP e USEMAP, simultaneamente no tag . No deve-se esquecer, no
entanto, de executar os procedimentos normais de um mapa processado
no servidor, ou seja, enviar o arquivo do mapa (.map) para o
diretrio onde ficaro armazenadas as pginas e verificar se necessrio
referenci-lo no arquivo de configurao imagemap.conf do servidor. O
exemplo completo de um mapa processado no cliente o seguinte:
importante que a descrio do mapa aparea na pgina antes que a
referncia da imagem.Erros mais comunsEsquecer de fechar as aspas s
vezes defeitos estranhssimos aparecem no documento HTML. Por
exemplo, simplesmente uma parte do texto desaparece. preciso
conferir se no foi esquecido de fechar as aspas utilizadas em um
nome de arquivo dentro de uma referncia. Colocar os nomes dos
arquivos em maisculas Os servidores que utilizam o sistema
operacional Unix a maioria dos servidores Internet fazem diferena
quando o nome de um arquivo escrito em maisculas ou minsculas
(caixa alta e caixa baixa). Para o servidor, os arquivos TEXTO.TXT
e texto.txt so diferentes. o que se chama de sensitivo caixa (case
sensitive, em ingls). A sensitividade caixa tambm mantida quando o
nome do arquivo colocado entre aspas na referncia. Se o arquivo foi
nomeado como imagem.gif e dentro do documento HTML a referncia para
imagem.Gif, o servidor no ir ach-lo. Por isso, deve-se escolher um
padro para os nomes dos arquivos (sempre em maisculas ou sempre em
minsculas). Esquecer de citar o diretrio em uma referncia Clica-se
no link e aparece uma mensagem dizendo que o documento no foi
encontrado. Basta checar os links para descobrir se no faltou
colocar o diretrio onde est o arquivo. Em mapas clicveis, o cuidado
deve ser ainda maior. Deve-se checar as referncias das reas com
ligao de hipertexto (no editor de mapas), a localizao do arquivo
imagemap (normalmente /cgibin/imagemap) e o nome do mapa. Fechar
uma clula em um pargrafo diferente ridculo, mas o Netscape insiste
em incluir espaos em branco entre as clulas se o tag de fim de
clula ficar separado por uma marca de pargrafo do contedo da clula.
O tag deve ser colocado imediatamente depois do contedo da clula.
Exemplo: Errado Certo Fechar uma referncia em um pargrafo diferente
Uma variao desse erro acontece com os links de imagem. preciso
encerrar a ncora de hipertexto no mesmo pargrafo do contedo da
referncia. Do contrrio, o navegador adiciona um trao da cor do
link. A soluo a mesma do exemplo anterior: colocar o tag
imediatamente depois do contedo do link.Exemplos de pginas WebNeste
captulo mostramos pginas que utilizam algumas das dicas
apresentadas neste livro e contornam de forma criativa as limitaes
de HTML. c|net Um dos sites mais acessados de 1995, o c|net combina
grficos simples para aumentar a velocidade de carregamento com uma
formatao discreta, permitindo que um grande nmero de navegadores
sejam capazes de visualizar a pgina da mesma forma. carregamento
rpido Imagens As imagens utilizados no c|net tm sempre poucas cores
e formato simples, normalmente retangular ou redondo, sem
sombreados nas letras. Cada pgina recebe apenas uma imagem
sofisticada, como vemos acima. O fundo tambm recebeu uma imagem
para dar o tom de amarelo caracterstico do site. Texto monoespaado
Como alternativa fonte padro dos navegadores, a c|net usa bastante
o texto monoespaado, inclusive nos links de ttulos de reportagens.
Alinhamento O alinhamento centralizado, alm de fugir do padro (
esquerda) garante um bom balanceamento pgina indepentemente da
largura da janela do navegador. Um trecho do documento HTML da
c|net c|net online front door 292,297 registered members and
growing Minc Um bom exemplo de como combinar imagens com o fundo da
pgina. A imagem da camiseta com um trator desta pgina foi produzida
com o fundo transparente. Criada no programa de desenho sobre um
fundo de uma cor que no aparece em nenhuma parte do desenho, a
imagem passou por um programa como o LView Pro para determinar a
cor de fundo. O arquivo de imagem, na verdade, assim: Southern Utah
Esta pgina mostra uma combinao simples de uma tabela com imagens
dentro das clulas. A tabela tem quatro linhas, cada uma com trs
clulas. Dentro de cada clula existe uma imagem. As imagens contm
referncias. Ao clicar em uma imagem, o usurio levado para outra
pgina. Como as imagens so links para outras pginas, as bordas das
imagens foram eliminadas com oatributo BORDER=0 para que no
recebessem uma borda da cor dos links. O atributo ALT foi utilizado
para permitir que mesmo navegadores sem capacidade de mostrar
imagens pudessem aproveitar a pgina. As imagens tambm receberam os
atributos VSPACE e HSPACE para adicionar espao entre ela. Southern
Utah Southern Utah 0 @art Gallery A galeria @art um bom exemplo de
como utilizar texto pr-formatado. Com o texto pr-formatado pode-se
controlar o alinhamento da poro de texto e das imagens. O texto foi
alinhado direita da pgina utilizando o tag e uma seqncia de
tabulaes idnticas para cada linha. A imagem est alinhada esquerda
porque no recebeu nenhuma tabulao. @art gallery Welcome to @art, an
electronic art gallery affiliated with the School of Art and
Design, the Universityof Illinois at Urbana-Champaign. This gallery
has been implemented by the faculty members
KathleenProgramasW3eEditor de HTML produzido pelo Ncleo de Computao
Eletrnica da Universidade do Rio de Janeiro. Tem verses em ingls e
portugus e permite a edio facilitada de mapas clicveis, fontes
coloridas, trilha sonora, tabelas e letreiros, entre outros
recursos. O W3e pode ser copiado no endereo:
http://www.nce.ufrj.br/~cracky/w3e.download.htmlHTMLedEditor de
HTML que permite personalizao de botes de comandos. Voc pode criar
um boto com as suas marcaes de HTML mais comuns. Tem conversor de
acentos. Na verso para Windows 95, pode-se abrir os arquivos
arrastando-os para a janela do programa. O HTMLed pode ser copiado
em: ftp://ftp.uol.com.br/pub/netutil/htmled16.zip (Windows 3.x)
ftp://ftp.uol.com.br/pub/netutil/htmled32.zip (Windows 95)TextPadO
TextPad um editor de texto para Windows95 que tem excelentes funes
para editar e gerenciar pginas de WWW. A principal delas a
possibilidade de fazer busca e troca em um conjunto de arquivos ao
mesmo tempo. Digamos que seja preciso trocar o tag para em uma
coleo de 50 pginas. O programa permite abrir mltiplos arquivos com
apenas uma operao na janela Open do menu File, diferente da maioria
dos processadores de texto, nos quais preciso fazer o precedimento
de abertura de arquivo para cada documento. Assim fica fcil e rpido
executar o pedido de busca e troca em todos os arquivos abertos com
a opo Replace do menu Edit. Outro recurso poderoso do Textpad a
janela Manage Files, no menu File. Al possvel realizar tarefas como
copiar ou mover vrios arquivos simultaneamente. Mas a principal
aplicao deste gerenciador de arquivos possibilidade de renomear
vrios arquivos ao mesmo tempo, funo extremamente til quando se
precisa trocar a extenso de muitos arquivos de .htm para .html, por
exemplo. O TextPad pode ser copiado no endereo:
ftp://ftp.uol.com.br/pub/netutil/txp3220.zip (Windows 95)JASC Media
CenterO JASC Media Center um gerenciador de arquivos de imagem
essencial para quem trabalha com uma grande quantidade de ilustraes
nas pginas Web. Alm de permitir a visualizao de um conjunto de
arquivos na forma de miniaturas (conhecidas como thumbnails), o
JASC Media Center pode executar uma srie de modificaes simultneas
sobre as imagens. possvel pedir que uma coleo completa de arquivos
seja transformada de praticamente qualquer formato para GIF89. O
JASC Media Center pode ser copiado no endereo:
ftp://ftp.uol.com.br/pub/netutil/jasc.zip (Windows 3.x)LView ProO
LView Pro serve para visualizar e fazer edies simples em arquivos
de imagem. Diferente do JASC Media Center, o LView Pro s consegue
editar um arquivo de cada vez. A funo de Background Color do menu
Options serve para marcar uma cor de fundo como transparente.Tambm
permite a gravao no formato GIF89. O LView Pro pode ser copiado nos
endereos: ftp://ftp.uol.com.br/pub/netutil/lviewp1b.zip (Windows
3.x) ftp://ftp.uol.com.br/pub/netutil/lview32.zip (Windows
95)MapThis!Editor de mapas para Windows 95. Alm da interface
avanada, o programa permite abrir mais de um arquivo ao mesmo
tempo. Tambm possvel dar nomes com mais de oito letras aos
arquivos. O MapThis! pode ser copiado no endereo:
ftp://ftp.uol.com.br/pub/netutil/mpths120.zipMapeditEditor de mapas
para Windows 3.x. o programa mais simples de edio de mapas
disponvel. No tem barra de ferramentas. Os comandos so acessados
nos menus. Para copiar o Mapedit, acesse:
ftp://ftp.uol.com.br/pub/netutil/mapedit.zipTabela de acentosOs
caracteres especiais da tabela ISO 8859 Latin-1&Aelig;
(Netscape) (Netscape) & < > " & < > "Lista de
tags e atributosOs tags apresentados aqui formam uma compilao das
definies oficiais da linguagem mais as extenses introduzidas por
empresas como Netscape e Microsoft. Observaes em itlico indicam
quais navegadores (e a partir de qual verso) aceitam determinado
tag, atributo ou opo. Quando nenhuma observao estiver presente,
significa que aquele elemento aceito por todos os navegadores. A
tabela mostra os tags com a descrio de suas funes, atributos e as
respectivas opes. Os atributos e as opes devem ser colocados dentro
do tag, como no exemplo abaixo.
Onde BR o tag, seguido do atributo CLEAR e sua opo, ALL. Pode-se
colocar mais de um atributo dentro do mesmo tag. Tags bsicos e
Marca o incio e o fim de um documento HTML. Exemplo: Ttulo da pgina
Contedo da pgina Aceito por: todos os navegadores e Marca o incio e
o fim do cabealho. Exemplo: Ttulo da pgina Contedo da pgina Aceito
por: todos os navegadores e Marca o incio e o fim do ttulo do
documento. Exemplo: Ttulo da pgina Contedo da pgina Aceito por:
todos os navegadores e Marca o incio e o fim do contedo do
documento. Exemplo: Ttulo da pgina Contedo da pgina Aceito por:
todos os navegadores Atributos BGCOLOR=#nnnnnn: modifica a cor do
fundo da pgina (o Apndice C mostra os valores possveis de n).
Exemplo: ou O fundo desta pgina branco Aceito por: Netscape 1.1 e
Internet Explorer BACKGROUND=imagem.gif: coloca uma imagem como
fundo da pgina. Exemplo: Esta pgina tem uma imagem no fundo. Aceito
por: Netscape, Internet Explorer e NCSA Mosaic 2.0
BGPROPERTIES=FIXED: Mantm fixa a imagem de fundo quando a pgina
rolada, criando um efeito de marca d'gua. Exemplo: A imagem desta
pgina no rola junto com o texto.Aceito por: Internet Explorer 2.0
LEFTMARGIN=n: define a largura da margem esquerda da pgina (sendo
que n o valor em pixels da margem). Exemplo: A margem esquerda
desta pgina de 10 pixels. Aceito por: Internet Explorer
TOPMARGIN=n: define a altura da margem superior (sendo que n o
valor em pixels da margem). Exemplo: A margem superior desta pgina
de 10 pixels. Aceito por: Internet Explorer TEXT=#nnnnnn: modifica
a cor do texto (o Apndice C mostra os valores possveis de n).
Exemplo: O texto desta pgina est em vermelho. Aceito por: Netscape
1.1 e Internet Explorer LINK=#nnnnnn: modifica a cor dos links no
visitados (o Apndice C mostra os valores possveis de n). Exemplo:
Os links no visitados desta pgina aparecem em vermelho. Aceito por:
Netscape 1.1 e Internet Explorer ALINK=#nnnnnn: modifica a cor dos
links j visitados (o Apndice C mostra os valores possveis de n).
Exemplo: Os links ativos desta pgina aparecem em vermelho. Aceito
por: Netscape 1.1 e Internet Explorer VLINK=#nnnnnn: modifica a cor
dos links j visitados (o Apndice C mostra os valores possveis de
n). Exemplo: Os links visitados desta pgina aparecem em
vermelho.Links e Marca o incio e o fim de um link. Atributos
HREF=URL: indica para onde o link levar (sendo URL o endereo para
onde o link est apontando). Exemplo: Site da XYZ (leva para uma
pgina em outro computador, Texto (leva para uma outra pgina no
mesmo computador), Captulo 1 (leva para uma outra parte do mesmo
documento) ou Captulo 1 do texto (leva para uma parte determinada
de outro documento) Aceito por: todos os navegadores NAME=nome:
identifica o alvo de um link no meio de um documento (sendo que
nome o nome dado ao alvo de um link). Exemplo: Captulo 1...Captulo
1 Aceito por: todos os navegadores TARGET=WINDOW: abre uma nova
janela do navegador com o resultado de um link. Exemplo: Site da
XYZ (O pgina principal do site da XYZ aberta em uma segunda janela
do navegador). Aceito por: Netscape 2.0Texto e alinhamento Modifica
a formatao padro do texto. Atributos SIZE=n: modifica o tamanho
padro do texto. Sendo que n pode valer de 1 a 7. O tamanho padro do
texto 3. Exemplo: Texto (coloca o texto de toda a pgina em um
tamanho maior). Aceito por: Netscape 1.1 e Internet Explorer e
Modifica a formatao de determinada parte do texto. Atributos
SIZE=n: modifica o tamanho de determinada parte do texto. Sendo que
n um valor de 1 a 7. O valor pode ser de -7 a +7 para aumentar o
texto em relao ao tamanho definido no tag . Exemplo: Texto (define
o texto no tamanho 5), Texto (define o texto no tamanho equivalente
ao 6) Aceito por: Netscape 1.1 e Internet Explorer COLOR=#nnnnnn:
modifica a cor de um trecho de texto. O Apndice C mostra os valores
possveis de n. Exemplo: Texto ou Texto (coloca o texto na cor
branca) Aceito por: Netscape 2.0 e Internet Explorer FACE=fonte:
modifica o tipo do texto. Sendo que fonte o nome da fonte. A fonte
definida precisa estar instalada no computador do usurio. Exemplo:
Texto (coloca o texto na fonte Arial. Aceito por: Internet Explorer
e Coloca o texto em negrito. Exemplo: Texto Aceito por: todos os
navegadores e Coloca o texto em itlico. Exemplo: Texto Aceito por:
todos os navegadores e Coloca o texto em uma fonte monoespaada
(Courier, por exemplo). Exemplo: Texto Aceito por: todos os
navegadores e Marca um pargrafo e acrescenta uma linha em branco
depois de cada um. utilizado aos pares ( e ) se for necessria a
colocao de atributo. Exemplo: Pargrafo ou Pargrafo Aceito por:
todos os navegadores Atributo ALIGN=CENTER, LEFT ou RIGHT: alinha o
pargrafo ao centro (ALIGN=CENTER), esquerda (ALIGN=LEFT) ou direita
(ALIGN=RIGHT). Exemplo: Pargrafo Aceito por: Netscape 1.1, Internet
Explorer e NCSA Mosaic 2.0.0 e Alinha o trecho (texto, imagem ou
tabela) ao centro. Exemplo: Texto Aceito por: Netscape e Internet
Explorer
Insere uma quebra de linha. Exemplo: Linha 1
Linha2 Atributo CLEAR=ALL: joga o texto para a prxima margem livre
aps a imagem. Exemplo: Texto
Texto Aceito por: Netscape e Internet Explorer e Marca um trecho
formatado com fonte monoespaada. A formatao com espaos e entradas
de pargrafos passa a ser respeitada. Exemplo: T e x t o Aceito por:
Netscape, NCSA Mosaic e Internet Explorer (a verso Macintosh do
Internet Explorer no respeita formatao com espaos e entradas de
pargrafos. e Adiciona uma margem de cerca de um centmetro. Exemplo:
Texto e Marca um ttulo. Sendo que n pode ser um valor de 1 a 6.
Exemplo: Ttulo Aceito por: todos os navegadores Atributo
ALIGN=CENTER, RIGHT ou LEFT: modifica o alinhamento do ttulo.
ALIGN=CENTER alinha o ttulo ao centro. ALIGN=RIGHT, alinha o ttulo
ao direita. ALIGN=LEFT alinha o ttulo esquerda. Exemplo: Ttulo
centralizado Aceito por: Netscape, Internet Explorer e NCSA Mosaic
2.0.0Linhas Inclui uma linha horizontal. Exemplo: TextoTexto Aceito
por: todos os navegadores Atributos SIZE=n: define a altura da
linha. Sendo que n pode ser um valor de 1 a 100. Exemplo: Aceito
por: Netscape e Internet Explorer WIDTH=n: define a largura da
linha horizontal. Sendo que n pode ser um nmero qualquer ou um
percentual da largura da pgina. Exemplo: ou Aceito por: Netscape e
Internet Explorer NOSHADE: desenha a linha horizontal sem a sombra
para dar o efeito de trs dimenses. Exemplo: Aceito por: Netscape e
Internet Explorer ALIGN=LEFT, RIGHT ou CENTER: modifica o
alinhamento da linha horizontal. Exemplo Aceito por: Netscape e
Internet ExplorerListas e Marcam o incio e o fim de uma lista de
definio. Devem ser usados com os tags e . Exemplo: Ttulo Texto
Ttulo Texto Aceito por: todos os navegadores e Marcam os ttulos de
uma lista de definio. Devem ser usados junto com os tags e .
Exemplo: Ttulo Texto Ttulo Texto Aceito por: todos os navegadores e
Marcam o incio e o fim do texto de uma lista de definio. Devem ser
usados junto com os tags e . Exemplo: Ttulo Texto Ttulo Texto
Aceito por: todos os navegadores
e Marcam o incio e o fim de uma lista no ordenada. Deve ser usado junto com o tag . Os itens da lista recebem marcas grficas na primeira linha conhecidas como bullets. Exemplo: Item 1 Item 2 Aceito por: todos os navegadores e Marcam o incio e o fim de uma lista ordenada. Os itens da lista so colocados em ordem e recebem na primeira linha um nmero ou letra. Devem ser usados junto com o tag . Exemplo: Item 1 Iem 2 Aceito por: todos os navegadores Atributo START=n: especifica o nmero a partir do qual os itens da lista comeam a ser contados. Sendo que n pode ser um nmero ou uma letra. Tambm podem ser utilizados nmeros romanos.Exemplo: Item 1 Item 2 Aceito por: Internet Explorer e Netscape 1.1 e Marcam o incio e o fim de uma lista. Devem ser usados junto com o tag . Exemplo: Item 1 Item 2 Aceito por: todos os navegadores e Marcam o incio e o fim de uma lista. Devem ser usados junto com o tag . Exemplo: Item 1 Item 2 Aceito por: todos os navegadores Marca um item de lista. Pode ser usado com os tags , , , e . Exemplo: Item 1 Item 2 Aceito por: todos os navegadores Atributos TYPE=n: modifica o tipo de marca que ser colocada antes de cada item da lista. Quando utilizado em uma lista ordenada (), pode modificar o tipo de marca para um crculo ou um quadrado. TYPE=CIRCLE coloca um crculo vazio (uma falha no Netscape 2.0 para Windows faz com que a mesma opo produza um quadrado vazio). TYPE=DISC coloca um crculo cheio. TYPE=SQUARE coloca um quadrado cheio. Quando utilizado em uma lista no ordenada, modifica o tipo de caractere que utilizado para a contagem. TYPE=A ou TYPE=a coloca marcas em ordem alfabtica (A, B, C ou a, b, c). TYPE=1 marca os itens em ordem numrica. TYPE=I ou TYPE=i marca os itens com nmeros romanos (I, II, III ou i, ii, iii). Exemplo: Item 1 ou Item 1 Item 2 Aceito por: Netscape 1.1 e Internet ExplorerImagens Insere uma imagem. Atributos SRC=imagem.gif: indica o arquivo de imagem a ser carregado. Sendo que imagem.gif o nome do arquivo de imagem a ser usado.Exemplo: Aceito por: todos os navegadores DYNSRC=video.gif: indica o arquivo de vdeo a ser carregado. Exemplo: (o atributo SRC=imagem.gif deve ser colocado para que os navegadores que no aceitam o atributo DYNSRC possam mostrar uma imagem) Aceito por: Internet Explorer CONTROLS: inclui um conjunto de botes para controlar a execuo do arquivo de vdeo. Deve ser utilizado junto com o atributo DYNSRC. Exemplo: Aceito por: Internet Explorer LOOP=n ou INFINITE: define quantas vezes o arquivo de vdeo ser executado. Sendo que n o nmero de vezes que o arquivo ser executado. LOOP=INFINITE executa o arquivo indefinidamente, at que o usurio mude de pgina. Deve ser utilizado junto com o atributo DYNSRC. Exemplo: Aceito por: Internet Explorer START=FILEOPEN e/ou MOUSEOVER: define quando o arquivo de vdeo comear a ser executado. START=FILEOPEN executa o arquivo quando assim que for carregado. START=MOUSEOVER executa o arquivo quando o mouse for colocado sobre a imagem. START=FILEOPEN,MOUSEOVER executa o arquivo quando for carregado e nas demais vezes em que o mouse for colocado sobre a imagem. Deve ser usado com o atributo DYNSRC. Exemplo: Aceito por: Internet Explorer ALIGN=n:modifica o alinhamento da imagem em relao ao texto. Sendo que n uma das opes a seguir. ALIGN=LEFT faz a imagem flutuar esquerda, enquanto o texto circunda a imagem pela direita. ALIGN=RIGHT faz a imagem flutuar direita, enquanto o texto circunda a imagem pela esquerda. ALIGN=TOP alinha o topo da imagem com o topo do elemento mais alto da linha, que pode ser uma outra imagem. ALIGN=MIDDLE alinha a base do texto com o centro da imagem. ALIGN=BOTTOM alinha a imagem com a base dos outros elementos da linha. Exemplo: Texto Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic ALIGN=TEXTTOP alinha o topo da imagem com o topo do texto, ALIGN=ABSMIDDLE alinha o centro do texto com o centro da imagem. ALIGN=BASELINE e ALIGN=ABSBOTTOM alinham a imagem com a base dos outros elementos da linha Netscape 1.1. Exemplo: Texto Aceito por: Netscape 1.1 VSPACE=n: insere espao acima e abaixo da imagem. Sendo que n o valor em pixels do espao a ser adicionado. Exemplo: Aceito por: Netscape 1.1 e Internet Explorer HSPACE=n: insere espao esquerda e direita da imagem. Sendo que n um valor em pixels do espao a ser adicionado. Exemplo: Aceito por: Netscape 1.1 e Internet Explorer ALT=n: indica o texto para ser colocado quando o navegador no mostra a imagem. Sendo que n um ttulo que identifique a imagem. Exemplo: Aceito por: todos os navegadores WIDTH=n: determina a largura da imagem e reserva o espao no navegador. Sendo que e n o valor em pixels da largura da imagem. Deve ser usado junto com o atributo HEIGHT=n. Exemplo: Aceito por: Netscape 1.1, Internet Explorer e NCSA MosaicHEIGHT=n: determina a altura da imagem e reserva o espao no navegador. Sendo que n o valor em pixels da altura da imagem. Deve ser usado junto com o atributo WIDTH=n. Exemplo: Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic BORDER=n: insere uma borda em torno da imagem. Sendo que n um valor em pixels da espessura da borda. Exemplo: Aceito por: Netscape 1.1 e Internet Explorer ISMAP: indica que a imagem um mapa clicvel processado no servidor. Deve ser usado junto com uma referncia a um arquivo que contenha as informaes do mapa. Exemplo: Aceito por: todos os navegadores. USEMAP=MAPA: indica que a imagem um mapa clicvel processado no cliente. Sendo que MAPA o nome dado ao mapa processado no cliente. Deve ser usado junto com os tags e , que definem as regies sensveis da imagem dentro da pgina Web. Pode ser usado junto com o atributo ISMAP e a referncia a um mapa processado no servidor. Exemplo: ou Aceito por: Netscape 2.0 e Internet Explorer e Indicam a marcao de um mapa processado no cliente. Deve ser usado junto com o tag e o atributo de imagem USEMAP=#n. Exemplo: Aceito por: Netscape 2.0 e Internet Explorer Atributos NAME=MAPA: sendo que MAPA o nome do mapa processado no cliente. Exemplo: Aceito por: Netscape 2.0 e Internet ExplorerDefine uma rea sensvel do mapa clicvel processado no cliente. Deve ser usado junto com o tag e o atributo de imagem USEMAP=#mapa.Exemplo: Aceito por: Netscape 2.0 e Internet Explorer Atributos SHAPE=formato: define o formato da regio sensvel do mapa processado no cliente. Sendo que formato uma das opes a seguir. SHAPE=RECT indica que a regio um retngulo. SHAPE=CIRCLE indica que a regio um crculo. SHAPE=POLY indica que a regio um polgono. Exemplo: Aceito por: Netscape 2.0 e Internet Explorer COORDS=x,y: define as coordenadas da regio sensvel. Sendo que x e y so valores em pixels que marcam a coordenada de um ponto na imagem. E x ponto do eixo horizontal, enquanto y o ponto do eixo vertical. Uma rea sensvel formada por vrias coordenadas. Quando o formato da rea for SHAPE=RECT (retngulo), h dois pares de x e y. O primeiro indica o canto superior esquerdo do retngulo e o segundo, o canto inferior direito. Quando o formato for SHAPE=CIRC, h a coordenada do centro do crculo e a do raio. Quando o formato for SHAPE=POLY, existem pares de x e y para cada um dos pontos que formam a rea. Exemplo: Aceito por: Netscape 2.0 e Internet Explorer HREF=URL: indica a URL deve ser carregada quando a rea determinada da imagem for clicada. Sendo URL o endereo que deve ser carregado quando a rea determinada da imagem for clicada. A URL pode ser um endereo completo ou apenas o nome de um arquivo que est armazenado no mesmo computador. Exemplo: ou Exemplo: Aceito por: Netscape 2.0 e Internet Explorer NOREF: indica que a rea determinada no chama arquivo nenhum. Serve para definir que qualquer rea que no esteja dentro das ligadas a uma URL com HREF=URL no seja clicvel. Deve ser usado dentro do tag no lugar de HREF=URL. O valor de COORDS=x,y deveconter a rea total da imagem. No exemplo a seguir, a dimenso da imagem de 428 pixels de largura e 124 pixels de altura. Exemplo: Aceito por: Netscape 2.0 e Internet ExplorerMarquee e Permite fazer um trecho de texto correr de um lado a outro da tela. Exemplo: Texto Aceito por: Internet Explorer Atributos ALIGN=TOP, MIDDLE ou BOTTOM: modifica o alinhamento do texto em volta do marquee. ALIGN=TOP alinha o texto com o topo do marquee. ALIGN=MIDDLE alinha o texto com o centro do marquee. ALIGN=BOTTOM alinha o texto com a base do marquee. Exemplo: Texto Aceito por: Internet Explorer BEHAVIOR=SCROLL, SLIDE ou ALTERNATE: controla o comportamento do texto dentro do marquee. BEHAVIOR=SCROLL faz com que o texto entre por um dos cantos do marquee e sai por outro. Com BEHAVIOR=SLIDE, o texto entra por um cantos do marquee e pra ao chegar no canto oposto. Com BEHAVIOR=ALTERNATE, o texto fica passando de um canto a outro, sempre dentro do marquee. Exemplo: Texto Aceito por: Internet Explorer BGCOLOR=#nnnnnn: muda a cor do fundo do marquee. O Apndice C mostra os valores possveis de n. Exemplo: Texto Aceito por: Internet Explorer DIRECTION=LEFT ou RIGHT: define a direo na qual o texto se move. DIRECTION=LEFT faz o texto correr para a esquerda. DIRECTION=RIGHT faz o texto correr para a direita. Exemplo: Texto Aceito por: Internet Explorer HEIGHT=n ou n%: define a altura do marquee. Sendo que n um valor em pixels ou um percentual da altura da janela. Exemplo: Texto Aceito por: Internet Explorer WIDTH=n ou n%: define a largura do marquee. Sendo que n um valor em pixels ou um percentual da largura da janela. Exemplo: Texto Aceito por: Internet Explorer HSPACE=n: define margens esquerda e direita do marquee. Sendo que n um valor em pixels. Exemplo: Texto Aceito por: Internet Explorer VSPACE=n: define margens acima e abaixo do marquee. Sendo que n um valor em pixels. Exemplo: Texto Aceito por: Internet Explorer LOOP=n: define quantas vezes o texto ir cruzar o marquee. Sendo que n o nmero de vezes que o texto ir cruzar o marquee. Se n for igual a 1 ou a INFINITE, o texto ir se movimentarinfinitamente. Exemplo: Texto Aceito por: Internet Explorer SCROLLAMOUNT=n: controla a velocidade do texto, definindo o nmero de pixels entre cada redesenho do texto. Sendo que n o valor em pixels que separa cada redesenho do texto. Quanto maior for n, mais rpido ser o movimento texto. Exemplo: Texto Aceito por: Internet Explorer SCROLLDELAY=n: controla a velocidade do marquee ao definir os intervalos de redesenho do texto. Sendo que n o valor em milisegundos do intervalo de redesenho do texto. Quanto menor for n, mais rpido ser o texto. Exemplo: Texto Aceito por: Internet ExplorerSom Carrega um arquivo de udio como trilha sonora da pgina. Exemplo: Aceito por: Internet Explorer Atributos SRC=som.wav: define o nome do arquivo de udio a ser carregado Sendo que som.wav o nome do arquivo a ser carregado. Aceita os formatos .WAV, .AU e .MID. Exemplo: Aceito por: Internet Explorer LOOP=n: define quantas vezes o arquivo de udio ser executado. Sendo que n o nmero de vezes que o arquivo de udio ser executado. Se n for igual a 1 ou a INFINITE, o arquivo ser executado infinitamente. Exemplo: Aceito por: Internet ExplorerTabelas e Marca o incio e o fim de uma tabela. Exemplo: Texto Texto Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0 Atributos BORDER=n: define a borda da tabela. Sendo que n o valor em pixels da borda. Exemplo: Texto Texto Aceito por: Internet Explorer 2.0, Netscape 1.1 e NCSA Mosaic BORDERCOLOR=#nnnnnn: define a cor principal da borda. O Apndice C mostra os valores de cores possveis de n. Exemplo: Texto Texto Aceito por: Internet Explorer BORDERCOLORLIGHT=#nnnnnn: define a cor da sombra mais clara da borda. O Apndice C mostra os valores de cores possveis de n. Exemplo: Texto Texto Aceito por: Internet Explorer BORDERCOLORDARK=#nnnnnn: define a cor da sombra mais escura da borda. O Apndice C mostra os valores de cores possveis de n. Exemplo: Texto Texto Tabela de coresA tabela abaixo apresenta os cdigos de cores que podem ser utilizados em documentos HTML. Somente os nomes de cores acompanhados de asterisco podem ser utilizados no lugar dos cdigos. Olive, fuchsia, purple e teal no tm correspondentes em cdigo. Aparnc Cdigo da Nome da cor ia cor *White *Red *Green *Blue Magenta Cyan *Yellow *Black *Aqua Baker's Chocolate #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317Blue Violet Brass Bright Gold Brown Bronze Bronze II Cadet Blue Cool Copper Copper Coral Corn Flower Blue Dark Brown Dark Green Dark Green Copper Dark Olive Green Dark Orchid Dark Purple Dark Slate Blue Dark Slate Grey Dark Tan Dark Turquoise Dark Wood Dim Grey Dusty Rose Feldspar Firebrick Forest Green *Fuchsia Gold Goldenrod#9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323 #238E23#CD7F32 #DBDB70*Gray Green Copper Green Yellow Hunter Green Indian Red Khaki Light Blue Light Grey Light Steel Blue Light Wood *Lime Mandarian Orange *Maroon Medium Aquamarine Medium Blue Medium Forest Green Medium Goldenrod Medium Orchid Medium Sea Green Medium Slate Blue Medium Spring Green Medium Turquoise Medium Violet Red Medium Wood Midnight Blue *Navy Neon Blue Neon Pink New Midnight Blue New Tan#C0C0C0 #527F76 #93DB70 #215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8 #8F8FBD #E9C2A6 #32CD32 #E47833 #8E236B #32CD99 #3232CD #6B8E23 #EAEAAE #9370DB #426F42 #7F00FF #7FFF00 #70DBDB #DB7093 #A68064 #2F2F4F #23238E #4D4DFF #FF6EC7 #00009C #EBC79EOld Gold *Olive Orange Orange Red Orchid Pale Green Pink Plum *Purple Quartz Rich Blue Salmon Scarlet Sea Green Semi-Sweet Chocolate Sienna *Silver Sky Blue Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan *Teal Thistle Turquoise Very Dark Brown Very Light Grey Violet#CFB53B#FF7F00 #FF2400 #DB70DB #8FBC8F #BC8F8F #EAADEA#D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370#D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4FViolet Red Wheat Yellow Green#CC3299 #D8D8BF #99CC32