Apostila Aprenda Construir Home Pages - Manual Completo de HTML - Portugues

8/3/2019 Apostila Aprenda Construir Home Pages - Manual Completo de HTML - Portugues

1/37

Manual Completo de HTML


2/37

Uma pgina Web simples

Apesar dessa aparente sofisticao, as pginas Web no passam de documentos de texto simples.Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferena que as pginas Web contm algumas marcas especiais para determinar o papel de cada elemento

dentro do texto. Alguns elementos so marcados como ttulos, outros como pargrafos. Asmarcaes 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 paracriar as pginas Web, HTML.

O mnimo que voc precisa saber sobre HTML

O primeiro conceito que deve-se ter em mente ao projetar pginas Web que HTML no foi criadapara controlar a aparncia dos documentos, ao contrrio dos processadores de texto e programasde layoutde pgina. Como dissemos h pouco, os tags de HTML apenas informam ao navegadoro que so os elementos que esto na pgina. Eles dizem, por exemplo, que um determinadotrecho 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, oque 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 textona fonte (tipo de caractere) que quiser.Em compensao muito simples criar uma pgina bsica para colocar na Internet com HTML.Neste captulo, apresentamos um exemplo enxuto, que aos poucos ficar mais sofisticado.

Software necessrio para esta seo

Como a pgina Web um documento de texto comum, pode-se utilizar um editor de texto simples,como o Notepad do Windows. Existem editores de HTML que podem facilitar a confeco daspginas. importante notar que os exemplos descritos aqui devem ser gravados no formato texto e com aextenso .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 deWeb 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 doWindows ou um mais sofisticado, como o Photoshop. Tambm preciso cuidado na hora de gravaras imagens. O formato mais aceito pelos navegadores o GIF. O Paintbrush do Windows gravaarquivos apenas nos formatos BMP ou PCX. Ser necessrio um outro programa para fazer aconverso, como o Lview. Veja a lista dos programas recomendados para edio em HTML nocaptulo Programas. Alm disso, ser necessrio um navegador de Web para visualizar aspginas. 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/)Acentuao

No recomendvel que os documentos Web contenham acentos. Ainda que todos osnavegadores existentes entendam a presena de um caractere acentuado, existem ocasies emque o texto em HTML pode ficar truncado. Por exemplo, quando algum copia uma pgina Web ea envia para outra pessoa atravs de correio eletrnico. Para contornar este problema, existe umatabela de cdigos que substituem os acentos. Os navegadores transformam estes cdigos emcaracteres acentuados e o documento poder ser transmitido por qualquer meio. Sugesto: odocumento pode ser escrito com os acentos e, antes de ir para o servidor de Web, ser submetido a
http://programas.htm/http://home.netscape.com/comprod/mirror/client_download.htmlhttp://home.netscape.com/comprod/mirror/client_download.htmlhttp://www.microsoft.com/ie/download/default.htmhttp://www.microsoft.com/ie/download/default.htmhttp://www.ncsa.uiuc.edu/SDG/Software/Mosaic/http://home.netscape.com/comprod/mirror/client_download.htmlhttp://home.netscape.com/comprod/mirror/client_download.htmlhttp://www.microsoft.com/ie/download/default.htmhttp://www.ncsa.uiuc.edu/SDG/Software/Mosaic/http://programas.htm/


3/37

uma macro de processador de texto para substitu-los pelos cdigos HTML. O Apndice A mostraa tabela de acentos ISO 8859 Latin-1. Para facilitar a leitura, os exemplos deste livro contm osacentos normais de um editor de texto ao invs dos cdigos.

Primeiro Exemplo

A melhor maneira de aprender a escrever pginas de Web fazendo. Vamos ao primeiro exemplo:Primeiro exemploTtulo principalEste o texto do primeiro exemplo.Para dividir os pargrafos, usa-se o tag

.

Este o segundo pargrafo. Para colocar um novo ttulo depoisde um pargrafo no necessrio colocar o tag

.Ttulo secundrioPara abrir uma linha, usa-se o tag
,
certo?Uma lista

Item 1Item 2Item 3Observao: 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 navegador

Assim que o exemplo for salvo no editor de texto com a extenso .htm ou .html, pode-se

visualiz-lo em um navegador. Para abrir o arquivo, deve-se escolher Open, Open File ou OpenLocal File no menu File do navegador. Alguns navegadores tem um boto Open na barra debotes. .

Como funcionam os tags

O primeiro exemplo mostra vrios trechos de texto marcados por cdigos colocados entre oscaracteres < e >. Esses cdigos, chamados de tags, so responsveis pela marcao do texto emfuno 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. Algunsso 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 espaopara 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 tagse 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, estdividido em duas partes: o cabealho e o corpo do texto, cada um indicado por um par de tagsdiferente. Tudo que estiver entre o par e ir compor o cabealho, noaparecendo na pgina. O elemento principal do cabealho o ttulo do documento, que deve sercolocado entre o par e . Os navegadores mostram o ttulo na barra de ttulo doprograma e na rea em aparecem as pginas j visitadas. Por fim, existe o par e


4/37

, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela donavegador.

Ttulos

No 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.Pargrafos

Os pargrafos so digitados normalmente. O tag

serve para indicar o incio de um novopargrafo. 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.

Linhas

Assim como as marcas de pargrafo, as quebras de linha so indicadas por um tagsimples. Paraabrir uma nova linha, usa-se o tag
.

Listas

O incio de uma lista pode ser indicado com e o final com . Esse tagdescreve listas

no-ordenadas (unordered lists, em ingls) e simplesmente coloca um elemento grfico (umcrculo, um quadrado etc.) no comeo de cada item da lista. Existem outros tipos de listas. Arelao completa pode ser encontrada no Apndice B. O incio de cada item indicado com o tag.

Melhorando a aparncia

Com os tags bsicos do primeiro exemplo j possvel criar pginas Web para colocar disposio dos usurios. O exemplo mostrado h pouco completo e, se colocado em um servidorWeb, 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 destedocumento.

AlinhamentoA primeira providncia para melhorar a aparncia da pgina modificar o alinhamento do texto. Oalinhamento padro (com o qual vm configurados os navegadores) esquerda. Para mudar oalinhamento padro deve-se adicionar o atributo ALIGN dentro dos tags que marcam os ttulos e ospargrafos.

Ttulo

Este um pargrafo centralizado.

Desta vez, o tag

ganhou uma opo (ALIGN=CENTER). Por isso, preciso utilizar um tagdefechamento (
) para indicar que apenas aquele pargrafo receber um alinhamento diferente.
Margem

Outro controle sobre o alinhamento dos elementos da pgina pode ser conseguido atravs damudana de margem. O texto sempre comea a uma determinada distncia da janela donavegador (um pouco diferente em cada navegador). s vezes, ser necessrio aumentar essamargem 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 tagpode seracumulado para conseguir margens maiores. Veja os exemplos:Texto com mais margemTexto com mais margemainda


5/37

Texto pr-formatado

Existe 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 teclaenter) 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 deespao e colocar o texto em praticamente qualquer lugar da pgina.Apesar da vantagem dessa forma de alinhamento arbitrrio, o tag muda o tipo de caracterepara uma fonte monoespaada. Uma fonte monoespaada aquela na qual todos os caracteresocupam o mesmo espao horizontal, ao contrrio da fonte proporcional, na qual o i ocupa menosespao do que o a, por exemplo.Este texto est pr-formatado. A fonte monoespaada e as entradas de pargrafo,assim como os espaos adicionais, sorespeitadas.Neste caso, a margem esquerdafoi aumentada em cinco caracteres.O texto normal recebe fonte proporcional e ignora a presena de espaos amais no meio do texto. Entradas de pargrafo adicionaistambm so

ignoradas.

No Netscape, possvel colocartags de ttulo den,tro do par e , permitindo amanuteno da fonte proporcional (Times New Roman, por exemplo). Na maioria dosnavegadores, porm, os tags de ttulo so ignorados e se sobrepem aos tags de pr-formatao,eliminando o seu efeito.

Mudando os caracteres

Estilos de caracteres

Para dar nfase em determinados trechos de texto, pode-se usar negrito, itlico ou mesmo a fontemonoespaada citada h pouco.Texto em negrito

Texto em itlico

Texto monoespaado

Ao contrrio de , o tag ignora espaos em branco adicionais e entradas de pargrafono meio do texto. Em relao ao espaamento, o tag funciona exatamente como textonormal.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 caracteres

Alguns navegadores aceitam a modificao do tamanho do texto atravs do atributo SIZE do tag.TextoO 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 nmerode pontos (a unidade utilizada para medir os caracteres). Portanto o melhor experimentar todosos tamanhos e avaliar o resultado.Texto com FONT SIZE=7

Texto com FONT SIZE=6


6/37






O tag tambm pode ser utilizado com um atributo diferente para cada letra. A aplicaomais bvia a colocao de uma capitular, aquela letra em tamanho maior no incio de umpargrafo.TextoTambm possvel modificar o tamanho de todo o texto de uma vez s colocando o tag no topo do texto.

Cores diferentes

Alguns navegadores tambm aceitam modificar a cor padro do texto e do fundo da janela dodocumento. 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 dosatributos 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 brancaouTexto na cor brancaDessa forma, possvel ter texto de vrias cores na mesma pgina.Texto em branco, azul,verde e vermelho

Mudando o tipo de caractere

O Internet Explorer, navegador da Microsoft lanado no segundo semestre de 1995, trouxe a

novidade de permitir a mudana do tipo de caractere do texto. O autor de uma pgina Web podedefinir qual ser o tipo de determinada parte do texto, mas o usurio precisa ter aquela fonteinstalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com oWindows.Ttulo principalEste o texto do primeiro exemplo. Para dividir os pargrafos, usa-se otag

.

Este o segundo pargrafo. Para colocar um novo ttulo depois de umpargrafo no necessrio (tampouco funciona) colocar o tag

.

Ttulo secundrioPara abrir uma linha, usa-se o tag
,
certo?

Uma listaItem 1Item 2Item 3

Hyperlinks

At agora produzimos apenas um documento bastante simples, que poderia ser composto com


7/37

recursos muito mais sofisticados em qualquer processador de texto. Mas neste livro estamosfalando de documentos de hipertexto, que podem fazer ligaes com outros textos.Os pontos que ligam esses hipertextos so chamados de hyperlinks, links ou ncoras dehipertexto. O tag que indica a regio a ser tratada como um hyperlink o par e . Dentrodesse tag, na forma de atributo, colocada a referncia ao arquivo ligado. A referncia indica aURL do documento. Quando o usurio clicar sobre o trecho realado pela ncora de hipertexto, oarquivo 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 algumaforma, normalmente em uma cor diferente e sublinhado. O cursor do mouse se transforma em umamozinha quando colocado sobre o texto realado. Ao clicar no link, o arquivo htmleasy.html, dodiretrio /~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 outrodocumento

disponvel na Internet. Pode-se fazer uma pgina com uma lista de pginas preferidas da rede comsuas devidas ligaes de hipertexto.Lista de recursos sobre HTMLComposing Good HTMLCERN's style guide for online hypertextHow to Write HTML FilesIntroduction to HTMLThe HTML Quick Reference GuideThe official HTML specification

este exemplo, as URLs esto entre aspas. Isso significa que o servidor vai considerar a diferenaentre maisculas e minsculas (o que se chama de sensitivo caixa) na hora de localizar oarquivo. Se no exemplo acima o arquivo HTML_quick.html estiver gravado no servidor comohtml_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. possvelindicar apenas o nome do servidor.Apple Computer

The SpotNeste exemplo, os servidores da Apple e do The Spot se encarregaro de indicar qual a pginaque deve sercarregada. Essa pgina principal chamada normalmente de home page.Quando a ncora apontar para uma pgina armazenada no mesmo servidor, no necessriocolocar o endereoda mquina. Se o documento estiver no mesmo diretrio, basta indicar o nome do arquivo.Exemplo 1O link acima chama o arquivo exemplo1.htm, que deve estar no mesmo diretrio da pgina. Se o


8/37

documento estiver em um subdiretrio de onde est o arquivo que contm a ncora, precisoindic-lo.Exemplo1Digamos que agora seja necessrio traar o caminho de volta, colocando uma ncora no arquivoexemplo1.htm para a pgina anterior.Volta para exemplo de ncoraA referncia cruzada entre arquivos armazenados no mesmo computador mas em diretriosdiferentes merecebastante ateno. Digamos que existam dois diretrios colocados no mesmo nvel. Um chamadomusica e outro, comida. Um arquivo chamado rock.htm, do diretrio musica deve fazer umareferncia ao arquivo feijoada.htm, do diretrio comida. A ncora de hipertexto do documentorock.htm deve ficar assim:Tudo sobre feijoadaTambm pode-se fazer uma referncia a uma outra partedo mesmo documento. Isso particularmente til quando se est fazendo um ndice de um texto. Ancora para um texto no mesmo documento fica assim:Captulo 1Enquanto o alvo do link fica desta forma:Captulo 1Neste 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 outraspessoas 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 ExemploSendo que exemplo.htm o nome do arquivo referenciado e captulo1 a referncia a uma partedaquele texto.Cores dos hyperlinksDa mesma forma que possvel definir cores diferentes para o fundo e o texto, pode-se mudar acor 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 serdiferente da cor das referncias nunca visitadas. Alm disso, o link pisca em uma cor aindadiferente dessas duas logo depois que clicado pelo usurio. A cor dos links definida no tag.Onde:LINK determina a cor dos links no visitadosALINK determina a cor que os links devem piscar quando clicadosVLINK determina a cor dos links j visitadosNeste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, eos visitados em verde. Para no confundir os usurios, a cor dos links j visitados deve ser umaverso mais clara da cor das ligaes ainda no visitadas.

magens

Agora que j explicamos como fazer um documento hipertexto, podemos finalmente incluirimagens nessa pgina Web. Para inserir uma imagem basta indicar o nome do arquivo dentro dotag .


9/37

Aqui voc v uma imagem:

Note que a imagem...

Neste exemplo, a imagem imagem.gif aparece alinhada entre as frases Aqui voc v umaimagem: e Note que a imagem....Se a imagem estiver em um diretrio diferente do arquivo de texto, preciso especific-lo nareferncia. Recomenda-se que as imagens sejam colocadas em um diretrio separado parafacilitar a manuteno dos arquivos. Exemplo:Aqui voc v uma imagem:


Alinhamento da imagemNo exemplo anterior, a imagem ficou alinhada esquerda da tela e o texto imediatamente posteriora ela alinhou-se com o canto inferior direito da imagem. Esse o alinhamento padro de textoscom imagens. possvel mudar o alinhamento utilizando o atributo ALIGN= dentro do tag .Aqui voc v uma 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 usadoum texto mais longo, apenas uma linha ficar alinhada com a imagem. O restante ser jogado paraa linha seguinte. Exemplo:Aqui voc v uma imagem:

Note que a imagem est alinhada esquerda. O texto imediatamente posterior imagem ficaalinhado no canto superior direito. Mas apenas uma linha acompanha a imagem. O restante dotexto jogado para a linha seguinte.

Exemplo 12: quebra de linha depois da imagemEste problema pode ser contornado utilizando outros atributos de alinhamento que fazem aimagem flutuar ao lado do texto. Exemplo:Aqui voc v uma imagem:

Note que a imagem est alinhada esquerda. Alguns navegadores, como o Netscape, permitemcolocar o texto em torno da imagem, independente de seu comprimento. como se a imagemestivesse flutuando no meio do texto.

Neste exemplo, a imagem ficou alinhada esquerda e permitiu que todo o texto imediatamenteposterior ficasse alinhado direita. Para alinhar a imagem direita, usa-se o atributoALIGN=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 textoimediatamente posterior puxado para o lado da imagem. Se for necessrio interromper o fluxo detexto 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 ateste ponto.
A partir daqui o texto jogado para a prxima margem livre emqualquer 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:



10/37

Texto alternativoDe nada vai adiantar caprichar na produo de uma imagem, se a pessoa que est vendo aspginas utiliza um navegador incapaz de mostrar imagens (sim, eles existem e so bastanteutilizados, principalmente o lynx).Outros usurios tambm ajustam o navegador para no carregar imediatamente as imagens. Porcausa 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 textoalternativo. Pode-se colocar o ttulo ou a melhor descrio possvel de uma imagem utilizando oatributo alt:

No exemplo acima, o navegador foi ajustado para no carregar a imagem imediatamente aocarregar a pgina. O texto alternativo aparece junto com o cone de imagem.MargensPode-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 eembaixo da imagem, o atributo VSPACE. Se o problema for espao dos lados da imagem, usa-se 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 interlaceamentoOs formatos de imagem mais aceitos pelos navegadores so GIF e JPG. A vantagem do formatoGIF que se pode gravar na opo GIF89 para conseguir que a imagem seja carregadaprogressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, ousurio 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 menosespao 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 emimagens criadas em computadorou desenhadas. A compresso do formato GIF se d ainda melhor com imagens com poucas corese trechos contnuos de uma cor s.

DimensesSe as dimenses da imagem forem colocadas na referncia, o usurio ter a impresso de que apgina foi carregada mais rpido.Fornecendo as dimenses, o navegador reserva o espao para a imagem e vai carregando o textopara que o usurio possa comear a ler. Depois de carregado o texto, as imagens comeam a sermostradas. Deve-se escrever a referncia de imagem neste formato:.

Tabelas

Como ainda no existem formas mais sofisticadas de controlar o posicionamento de imagens etexto, o uso de tabelas tornou-se um recurso essencial para dispor os elementos da pgina demaneira mais criativa.


11/37

Uma tabela simples

As tabelas so compostas de linhas, dentro das quais so colocadas clulas com o contedo.Dentro das clulas pode-se colocar texto, imagens ou at mesmo outras tabelas. Uma linha podeconter 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 clulaA 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 otag, 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. Nosexemplos seguintes adicionamos uma borda tabela. O atributo da borda colocado dentro do tag.Clula 1Clula 2Clula 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 elasocupem o espao de mais de uma coluna ou linha.Clula expandida

Clula 1Clula 2Clula 3Clula 4

ouClula expandidaClula 1Clula 2

Clula 3Clula 4

A soluo necessria para fazer uma clula expandida diferente em cada um dos exemplosanteriores. No caso da clula expandida na largura de duas colunas, ela ficou em uma linhadiferente das clulas 1 e 2. No segundo exemplo, para deixar a clula expandida da altura de duaslinhas foi preciso coloc-la na mesma linha das clulas 1 e 2.


12/37

Dimenses da tabela

Alm de controlar a largura da borda (com o atributo BORDER), possvel definir as dimenses (empixels) de toda a tabela, espao entre clulas e as margens dentro das clulas. Todos essescontroles so feitos atravs de atributos dentro do tag. Os atributos so:WIDTH: para definir a largura da tabelaHEIGHT: para definir a altura da tabelaCELLPADDING: para definir a margem dentro das clulasCELLSPACING: para definir o espao entre as clulasClula expandidaClula 1Clula 2Clula 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 ).

Alinhamento

Os elementos dentro da tabela podem ser alinhados da mesma forma que um pargrafo comum.Se nenhum alinhamento for definido, o contedo das clulas alinhado horizontalmenteesquerda e verticalmente ao centro. Os atributos ALIGN (alinhamento horizontal) e VALIGN(alinhamento vertical) devem ser usados dentro dos tags e (alm de , se for ocaso). Os alinhamentos possveis so:Alinhamento horizontalALIGN=LEFT: alinha o contedo esquerdaALIGN=RIGHT: alinha o contedo direitaALIGN=CENTER: alinha o contedo ao centroAlinhamento verticalVALIGN=BASELINE: mantm as linhas de texto com o mesmo alinhamento (para ser usado dentrode ou no primeiro de uma linha)VALIGN=TOP: alinha o contedo no topoVALIGN=MIDDLE: alinha o contedo ao centroVALIGN=BOTTOM: alinha o contedo na base da clulaVamos utilizar um texto mais longo na segunda clula da segunda coluna para demonstrar oalinhamento padro.Ttulo 1Ttulo 2Clula 1Clula 2

Quando existe um texto longo, a clula expandida at margem da janelado 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 damargem do navegador. Se a largura da janela do navegador for diminuda, tambm diminui a


13/37

largura da segunda coluna. Vamos melhorar a aparncia da tabela ajustando a largura da clula 2em 300 pixels. Assim, a largura de toda a segunda coluna ser ajustada. Aproveitamos esteexemplo para alinhar o texto da clula 1 no topo e mudar a largura da borda da tabela.Ttulo 1Ttulo 2Clula 1Clula 2

A largura de cada clula pode ser controlada individualmente utilizando-se o atributo width.

Cor de fundo das clulas

O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cadaclula. Basta acrescentar o atributo BGCOLOR com a cor desejada aos tags de clula. Em algumascombinaes de cores ser necessrio tambm modificar a cor das letras. Isso feito com o

atributo COLOR dentro do tag.ComidaBebidaArrozVinho

Dicas e Truques em HTML

Truques com imagens

Texturas no background

Da mesma forma que possvel definir uma cor de fundo diferente para as pginas, pode-secolocar uma imagem como papel de parede. Primeiro cria-se um arquivo .GIF e depois inclui-se oatributo BACKGROUND no tag.A imagem que ser colocada no fundo deve ser suave o suficiente para permitir que o texto a sercolocado por cima fique legvel. No exemplo que mostramos aqui, no entanto, escolhemos umpadro quadriculado para mostrar como o arquivo de imagem repetido na tela para compor obackground.

Exemplo 24: colocando uma textura no fundo da pginaNeste exemplo, o arquivo textura.gif utilizado como padro de fundo da pgina. Vriascpias da imagem so colocadas lado a lado at ocupar toda a rea do documento.

Imagem de um pixel

Deve-se ter outros cuidados ao escolher as imagens para o fundo. O principal problema otamanho em bytes destes arquivos. As dimenses da imagem influem no tamanho do arquivo.


14/37

Para criar um arquivo o mais econmico possvel pode-se fazer uma imagem de apenas umpixelquadrado. Essepixel, que estar ocupando um tamanho mnimo em bytes, ser reproduzido emtodo o fundo da pgina, dando a impresso de ser um arquivo nico.

Baixa resoluo

Outra forma de melhorar a performance da pgina Web enviar primeiro uma verso em baixaresoluo 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 umaverso simplificada da mesma imagem (em preto e branco, por exemplo) e informa-se aonavegador para carreg-la antes. Assim, o usurio pode ter uma idia da ilustrao antes de terque esperar pela imagem em alta resoluo. Criado para o Netscape, esse truque chamado delow/high resolution flip trick. A incluso da imagem de baixa resoluo conseguida com acolocao 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 arquivobaixares.gif a imagem de baixa resoluo, que ser carregada antes.A principal utilidade desse truque nos imagemaps. Sem ter que esperar pela imagem de altaresoluo, 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 formatoretangular. Mesmo que a imagem seja um crculo, quando a ilustrao for colocada na pginaWeb, ela ir ocupar um espao retangular. Se esse crculo tiver sido desenhado sobre um fundobranco, esse fundo acompanhar a imagem. possvel fazer uma imagem ficar com o fundo transparente. Digamos que o fundo da pginatenha uma textura e preciso colocar uma imagem que deixe ver o fundo em volta dela. Pode-sedefinir 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 sepretende deixar transparente seja de uma cor s. Essa cor no pode se repetir em qualquer outraparte 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 figurasobre uma textura. Abre-se o arquivo no LViewPro e escolhe-se Background Color no menuOptions. O programa mostra uma tela com todas as cores presentes na imagem. Seleciona-se acor que ficar transparente (neste caso, o cinza) e clica-se em OK. Ao salvar o arquivo, o programapede uma confirmao de gravao no formato GIF89. Clica-se em OK. Ao carregar a imagem nonavegador, a rea que estava na cor cinza ficou transparente e por baixo da imagem apareceu atextura.

Anti-alias

O efeito anti-alias, disponvel em alguns programas de desenho, como o Photoshop, suaviza asbordas 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 detons 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 seolharmos mais de perto, veremos como construdo o anti-alias.No exemplo acima, a primeira imagem, sem anti-alias, tem contorno cheio de degraus. A segundaimagem, com o efeito, mistura os pixels da borda com os do fundo, gerando alguns pontosacinzentados 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 acomplexidade 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.


15/37

Combinao com o background

As imagens com anti-alias tambm dificultam o uso do fundo transparente. Na verdade, os doistruques so praticamente incompatveis. Como preciso escolher apenas uma cor para fazer umaimagem com fundo transparente, os tons da transio no contorno aparecem como se fossem umborro. Quando o uso do anti-alias indispensvel, recomenda-se que a imagem seja produzida jsobre 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 precisoconverter a imagem para fundo transparente. Mas, se for necessrio fazer a transparncia, os tonsda 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 sendoproduzida quando se utiliza uma textura como background. Nem sempre uma imagem com fundotransparente funciona sobre uma textura. A dica de novo criar a imagem j sobre a textura queser utilizada. preciso que a textura escolhida seja uniforme para que no haja problemas deencaixe quando a imagem for colocada na pgina.

Letreiro

O Internet Explorer implementa uma forma muito simples de dar movimento ao texto. O recursofunciona como um letreiro luminoso de bolsa de valores, no qual o texto corre da direita para aesquerda. 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 derolagem 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 textorola pela tela da direita para a esquerda.No exemplo acima, uma rea de 30pixels de altura (HEIGHT=30) por 300pixels de largura(WIDTH=300) ser criada para a exibio do texto em movimento, que ser apresentado da direitapara a esquerda (DIRECTION=LEFT). A velocidade expressa tambm empixels pelo atributoSCROLLAMOUNT. Quanto maispixels, mais rpido correr o texto na tela.

Trechos de vdeo

No Microsoft Internet Explorer 2.0 possvel incluir um trecho de vdeo numa pgina. A Microsoft

inventou um atributo chamado DYNSRC (de dynamic source, fonte dinmica) para ser includodentro 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 tambmreceber a imagem, ainda que esttica, inclui-se no mesmo tago atributo SRC com o arquivo deimagem comum correspondente.O exemplo acima implementa numa pgina lida com o Internet Explorer 2.0 o arquivo de vdeovideo.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 ousurio passar o mouse sobre ele. O atributo LOOP=INFINITE declara que o vdeo ser exibidocontinuamente at que o usurio mude de pgina.Outros atributos so:START=FILEOPEN: o vdeo comea a ser exibido assim que a pgina carregadaCONTROLS: adiciona um conjunto de botes para controlar a execuo do vdeoLOOP=n: Executa o trecho de vdeo n vezes. Se for colocado LOOP=5, o vdeo ser exibido cincovezes.LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o trecho de vdeo ser executadoquando colocado em loop.

Trilha sonora

O Internet Explorer 2.0 tambm aceita colocar uma trilha sonora em uma pgina Web. Como no tagque


16/37

implementa a execuo de vdeo, possvel utilizar um dispositivo de looping, que pode manter o arquivotocando constantemente ou por um nmero definido de vezes. Para colocar uma trilha sonora, a Microsoftcriou 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 ousurio 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 nmerodeterminado de vezes. Exemplo:

No exemplo acima, o arquivo som.wav ser executado cinco vezes.

Marca d'gua

No Internet Explorer pode-se controlar o comportamento da imagem de fundo, o background. A empresacriou um atributo para o tag chamado BGPROPERTIES. Com a opo BGPROPERTIES=FIXED, aimagem de fundo fica fixa quando o usurio rola o texto para cima. O recurso d a impresso da pgina teruma marca d'gua e de que o texto flutua sobre o fundo.

Mapas clicveis

O mapa clicvel uma imagem que contm vrias ligaes de hipertexto. Numa mesma figura,pode-se oferecer ao usurio a opo de clicar em regies diferentes para escolher onde ele quer ir.A primeira tarefa para criar um mapa clicvel produzir a imagem. Depois, preciso utilizar umprograma de edio de mapas. O Mapedit, para Windows 3.1 e 3.11, e o MapThis!, para Windows95, so os mais conhecidos.Deve-se carregar o arquivo de imagem no editor de mapas e utilizar as ferramentas disponveispara marcar as reas da imagem que podero ser clicadas pelo usurios. Os editores de mapastm ferramentas para desenhar reas na forma de crculos, retngulos, polgonos (forma livre) oupontos.

O prximo passo definir qual arquivo cada uma dessas regies ir chamar. Clicando com o botodireito 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 usurioclicar em uma rea da imagem fora das reas com links. O arquivo defaultpode ser uma pginaWeb 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. NoMapThis!, 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 aomapa.Onde:HTTP://ALGUM.SITE.COM.BR o endereo do servidor onde esto as pginas. precisoconfirmar com o administrador do servidor a necessidade deste endereo. Alguns servidores maisrecentes, como os da Netscape, exigem apenas a colocao do nome do arquivo./CGI-BIN/IMAGEMAP a localizao do programa imagemap, que ir processar as informaesdo mapa. Essa localizao deve ser confirmada com o administrador do servidor. Algunsservidores mais recentes, como os da Netscape, exigem apenas a colocao do nome do arquivo./mapa.map o nome do arquivo de mapa. Neste caso, o arquivo deve estar no diretrio principal


17/37

das pginas Web. Se estiver em um diretrio diferente, deve-se acrescentar a informao.Exemplo: /mapas/mapa.map.IMG SRC=mapa.gif a referncia imagemISMAP indica que esta imagem um mapa clicvelPara testar o mapa, preciso que todos os arquivos sejam transferidos para o servidor. um bommomento para checar com o administrador do servidor todos os diretrios referenciados. O

principal a localizao do programa imagemap, que normalmente est no diretrio /cgi-bin.Deve-se checar tambm com o administrador se necessrio que ele modifique o arquivoimagemap.conf para incluir a localizao dos mapas novos. Esse arquivo informa ao programaimagemap onde esto os mapas. Alguns servidores mais recentes, como os da Netscape, exigemapenas a colocao do nome do arquivo.

Mapas processados no cliente

Em 1995 (com o Internet Explorer e o Netscape 2.0), tornou-se possvel criar mapas que noprecisam de programas instalados no servidor para funcionar. o que se chama de mapasprocessados no cliente. Assim pode-se testar os mapas antes de envi-los ao servidor e diminuir otempo de resposta quando o usurio clica na imagem.O truque inventado para processar os mapas clicveis no navegador foi colocar as informaessobre 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 dehipertexto e salvar o arquivo .map. Para colocar as informaes do mapa na pgina, deve-secopiar o contedo do arquivo .map para a pgina Web dentro de um novo tagchamado .O contedo do mapa criado pelo Mapedit no exemplo anterior o seguinte:circle circulo.htm 74,76,96,121rect quadrado.htm 270,123,179,32poly triangul.htm 375,27,428,124,321,124,375,27Onde: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 ocentro 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 ocanto inferior direito do retngulo (270,123,179,32). J o polgono precisa de uma coordenadapara 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 ummapa processado no cliente. As informaes sobre as reas sensveis so colocadas comoatributos 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 regioO 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, qualmapa deve ser utilizado para o processamento.


18/37

O atributo USEMAP, seguido do caractere #, indica o nome do mapa. No exemplo acima, somenteos 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 notag. No deve-se esquecer, no entanto, de executar os procedimentos normais de um mapaprocessado no servidor, ou seja, enviar o arquivo do mapa (.map) para o diretrio onde ficaro

armazenadas as pginas e verificar se necessrio referenci-lo no arquivo de configuraoimagemap.conf do servidor.O exemplo completo de um mapa processado no cliente o seguinte: importante que a descrio do mapa aparea na pgina antes que a referncia da imagem.

Erros mais comuns

Esquecer de fechar as aspass vezes defeitos estranhssimos aparecem no documento HTML. Por exemplo, simplesmenteuma parte do texto desaparece. preciso conferir se no foi esquecido de fechar as aspasutilizadas em um nome de arquivo dentro de uma referncia.Colocar os nomes dos arquivos em maisculasOs servidores que utilizam o sistema operacional Unix a maioria dos servidores Internet fazemdiferena quando o nome de um arquivo escrito em maisculas ou minsculas (caixa alta e caixabaixa). Para o servidor, os arquivos TEXTO.TXT e texto.txt so diferentes. o que se chama desensitivo caixa (case sensitive, em ingls). A sensitividade caixa tambm mantida quando onome do arquivo colocado entre aspas na referncia. Se o arquivo foi nomeado como imagem.gife 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 emminsculas).Esquecer de citar o diretrio em uma refernciaClica-se no link e aparece uma mensagem dizendo que odocumento no foi encontrado. Basta checar os links para descobrir se no faltou colocar o diretrio onde esto arquivo. Em mapas clicveis, o cuidado deve ser ainda maior. Deve-se checar as referncias das reas comligao de hipertexto (no editor de mapas), a localizao do arquivo imagemap (normalmente /cgi-

bin/imagemap) e o nome do mapa.Fechar uma clula em um pargrafo diferente ridculo, mas o Netscape insiste em incluir espaos em branco entre as clulas se o tag de fim declula 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


19/37

Fechar uma referncia em um pargrafo diferenteUma variao desse erro acontece com os links de imagem. preciso encerrar a ncora dehipertexto no mesmo pargrafo do contedo da referncia. Do contrrio, o navegador adiciona umtrao da cor do link. A soluo a mesma do exemplo anterior: colocar o tag imediatamentedepois do contedo do link.

Exemplos de pginas Web

Neste captulo mostramos pginas que utilizam algumas das dicas apresentadas neste livro econtornam de forma criativa as limitaes de HTML.c|netUm dos sites mais acessados de 1995, o c|net combina grficos simples para aumentar avelocidade de carregamento com uma formatao discreta, permitindo que um grande nmero denavegadores sejam capazes de visualizar a pgina da mesma forma.carregamento rpidoImagensAs imagens utilizados no c|net tm sempre poucas cores e formato simples, normalmenteretangular ou redondo, sem sombreados nas letras. Cada pgina recebe apenas uma imagemsofisticada, como vemos acima. O fundo tambm recebeu uma imagem para dar o tom de amarelocaracterstico do site.Texto monoespaadoComo alternativa fonte padro dos navegadores, a c|net usa bastante o texto monoespaado,inclusive nos links de ttulos de reportagens.AlinhamentoO 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|netc|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. Criadano programa de desenho sobre um fundo de uma cor que no aparece em nenhuma parte dodesenho, a imagem passou por um programa como o LView Pro para determinar a cor de fundo. Oarquivo de imagem, na verdade, assim:Southern UtahEsta 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 o


20/37

atributo BORDER=0 para que no recebessem uma borda da cor dos links. O atributo ALT foiutilizado para permitir que mesmo navegadores sem capacidade de mostrar imagens pudessemaproveitar a pgina. As imagens tambm receberam os atributos VSPACE e HSPACE paraadicionar espao entre ela.Southern UtahSouthern Utah

0

@art GalleryA 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 tabulaesidnticas para cada linha. A imagem est alinhada esquerda porque no recebeu nenhumatabulao.@art galleryWelcome to @art, an electronic artgallery affiliated with the Schoolof Art and Design, the University


21/37

of Illinois at Urbana-Champaign.This gallery has been implementedby the faculty members Kathleen

Programas

W3e

Editor de HTML produzido pelo Ncleo de Computao Eletrnica da Universidade do Rio deJaneiro. 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.html

HTMLed

Editor 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 paraWindows 95, pode-se abrir os arquivos arrastando-os para a janela do programa. O HTMLed podeser 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)

TextPad

O TextPad um editor de texto para Windows95 que tem excelentes funes para editar egerenciar pginas de WWW. A principal delas a possibilidade de fazer busca e troca em umconjunto de arquivos ao mesmo tempo. Digamos que seja preciso trocar o tag para emuma coleo de 50 pginas. O programa permite abrir mltiplos arquivos com apenas umaoperao 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 domenu Edit.Outro recurso poderoso do Textpad a janela Manage Files, no menu File. Al possvel realizartarefas como copiar ou mover vrios arquivos simultaneamente. Mas a principal aplicao destegerenciador de arquivos possibilidade de renomear vrios arquivos ao mesmo tempo, funoextremamente 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 Center

O JASC Media Center um gerenciador de arquivos de imagem essencial para quem trabalha comuma grande quantidade de ilustraes nas pginas Web. Alm de permitir a visualizao de umconjunto de arquivos na forma de miniaturas (conhecidas como thumbnails), o JASC Media Centerpode executar uma srie de modificaes simultneas sobre as imagens. possvel pedir que umacoleo 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 Pro

O LView Pro serve para visualizar e fazer edies simples em arquivos de imagem. Diferente doJASC Media Center, o LView Pro s consegue editar um arquivo de cada vez. A funo deBackground Color do menu Options serve para marcar uma cor de fundo como transparente.
http://www.nce.ufrj.br/~cracky/w3e.download.htmlftp://ftp.uol.com.br/pub/netutil/htmled16.zipftp://ftp.uol.com.br/pub/netutil/htmled16.zipftp://ftp.uol.com.br/pub/netutil/htmled32.zipftp://ftp.uol.com.br/pub/netutil/htmled32.zipftp://ftp.uol.com.br/pub/netutil/txp3220.zipftp://ftp.uol.com.br/pub/netutil/jasc.ziphttp://www.nce.ufrj.br/~cracky/w3e.download.htmlftp://ftp.uol.com.br/pub/netutil/htmled16.zipftp://ftp.uol.com.br/pub/netutil/htmled32.zipftp://ftp.uol.com.br/pub/netutil/txp3220.zipftp://ftp.uol.com.br/pub/netutil/jasc.zip


22/37

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 deum 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.zip

Mapedit

Editor 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.zip

Tabela de acentos

Os caracteres especiais da tabela ISO 8859 Latin-1

&Aelig;
ftp://ftp.uol.com.br/pub/netutil/lviewp1b.zipftp://ftp.uol.com.br/pub/netutil/lviewp1b.zipftp://ftp.uol.com.br/pub/netutil/lview32.zipftp://ftp.uol.com.br/pub/netutil/mpths120.zipftp://ftp.uol.com.br/pub/netutil/mpths120.zipftp://ftp.uol.com.br/pub/netutil/mapedit.zipftp://ftp.uol.com.br/pub/netutil/lviewp1b.zipftp://ftp.uol.com.br/pub/netutil/lview32.zipftp://ftp.uol.com.br/pub/netutil/mpths120.zipftp://ftp.uol.com.br/pub/netutil/mapedit.zip


23/37

(Netscape) (Netscape)


24/37

& &< >" "

Lista de tags e atributos

Os tags apresentados aqui formam uma compilao das definies oficiais da linguagem mais asextenses introduzidas por empresas como Netscape e Microsoft. Observaes em itlico indicamquais navegadores (e a partir de qual verso) aceitam determinado tag, atributo ou opo. Quandonenhuma observao estiver presente, significa que aquele elemento aceito por todos osnavegadores.

A tabela mostra os tags com a descrio de suas funes, atributos e as respectivas opes. Osatributos 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 pginaContedo da pgina


e

Marca o incio e o fim do ttulo do documento.Exemplo: Ttulo da pginaContedo da pgina


25/37


e

Marca o incio e o fim do contedo do documento.Exemplo: Ttulo da pginaContedo da pgina

Aceito por: todos os navegadoresAtributosBGCOLOR=#nnnnnn: modifica a cor do fundo da pgina (o Apndice C mostra os valores possveisde n).Exemplo: ou O fundo destapgina brancoAceito por: Netscape 1.1 eInternet ExplorerBACKGROUND=imagem.gif: coloca uma imagem como fundo da pgina.Exemplo: Esta pgina tem uma imagem nofundo.Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0BGPROPERTIES=FIXED: Mantm fixa a imagem de fundo quando a pgina rolada, criando umefeito de marca d'gua.Exemplo: A imagem destapgina no rola junto com o texto.Aceito por: Internet Explorer 2.0LEFTMARGIN=n: define a largura da margem esquerda da pgina (sendo que n o valor empixelsda margem).Exemplo: A margem esquerda desta pgina de 10pixels.Aceito por: Internet ExplorerTOPMARGIN=n: define a altura da margem superior (sendo que n o valor empixels da margem).Exemplo: A margem superior desta pgina de 10pixels.Aceito por: Internet ExplorerTEXT=#nnnnnn: modifica a cor do texto (o Apndice C mostra os valores possveis de n).Exemplo: O texto desta pgina est emvermelho.Aceito por: Netscape 1.1 e Internet ExplorerLINK=#nnnnnn: modifica a cor dos links no visitados (o Apndice C mostra os valores possveisde n).Exemplo: Os links no visitados desta pginaaparecem 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 possveisde n).Exemplo: Os links ativos desta pgina aparecem emvermelho.Aceito por: Netscape 1.1 e Internet ExplorerVLINK=#nnnnnn: modifica a cor dos links j visitados (o Apndice C mostra os valores possveisde n).Exemplo: Os links visitados desta pgina aparecem emvermelho.


26/37

Links

e

Marca o incio e o fim de um link.AtributosHREF=URL: indica para onde o link levar (sendo URL o endereo para onde o linkest

apontando).Exemplo: Site da XYZ (leva para uma pgina em outrocomputador, Texto (leva para uma outra pgina no mesmocomputador), Captulo 1 (leva para uma outra parte domesmo documento) ou Captulo 1 dotexto (leva para uma parte determinada de outro documento)Aceito por: todos os navegadoresNAME=nome: identifica o alvo de um linkno meio de um documento (sendo que nome o nomedado ao alvo de um link).Exemplo: Captulo 1...Captulo 1Aceito por: todos os navegadoresTARGET=WINDOW: abre uma nova janela do navegador com o resultado de um link.Exemplo: Site da XYZ (O pginaprincipal do site da XYZ aberta em uma segunda janela do navegador).Aceito por: Netscape 2.0

Texto e alinhamento

Modifica a formatao padro do texto.

AtributosSIZE=n: modifica o tamanho padro do texto. Sendo que n pode valer de 1 a 7. O tamanho padrodo 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.AtributosSIZE=n: modifica o tamanho de determinada parte do texto. Sendo que n um valor de 1 a 7. Ovalor 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 ExplorerCOLOR=#nnnnnn: modifica a cor de um trecho de texto. O Apndice C mostra os valores possveis

de n.Exemplo: Texto ou Texto (coloca otexto na cor branca)Aceito por: Netscape 2.0 e Internet ExplorerFACE=fonte: modifica o tipo do texto. Sendo que fonte o nome da fonte. A fonte definidaprecisa estar instalada no computador do usurio.Exemplo: Texto (coloca o texto na fonte Arial.Aceito por: Internet Explorer


27/37

e

Coloca o texto em negrito.Exemplo: TextoAceito por: todos os navegadores

e

Coloca o texto em itlico.Exemplo: TextoAceito por: todos os navegadores

e

Coloca o texto em uma fonte monoespaada (Courier, por exemplo).Exemplo: TextoAceito 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 navegadoresAtributoALIGN=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: TextoAceito por: Netscape e Internet Explorer

Insere uma quebra de linha.Exemplo: Linha 1
Linha2AtributoCLEAR=ALL: joga o texto para a prxima margem livre aps a imagem.Exemplo: Texto
TextoAceito por: Netscape e Internet Explorer

e

Marca um trecho formatado com fonte monoespaada. A formatao com espaos e entradas depargrafos passa a ser respeitada.Exemplo: T e x t oAceito por: Netscape, NCSA Mosaic e Internet Explorer (a verso Macintosh do Internet Explorerno 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: TtuloAceito por: todos os navegadoresAtributo


28/37

ALIGN=CENTER, RIGHT ou LEFT: modifica o alinhamento do ttulo. ALIGN=CENTER alinha o ttuloao centro. ALIGN=RIGHT, alinha o ttulo ao direita. ALIGN=LEFT alinha o ttulo esquerda.Exemplo: Ttulo centralizadoAceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0

Linhas

Inclui uma linha horizontal.Exemplo: TextoTextoAceito por: todos os navegadoresAtributosSIZE=n: define a altura da linha. Sendo que n pode ser um valor de 1 a 100.Exemplo: Aceito por: Netscape e Internet ExplorerWIDTH=n: define a largura da linha horizontal. Sendo que n pode ser um nmero qualquer ou umpercentual 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 ExplorerALIGN=LEFT, RIGHT ou CENTER: modifica o alinhamento da linha horizontal.Exemplo Aceito por: Netscape e Internet Explorer

Listas

e

Marcam o incio e o fim de uma lista de definio. Devem ser usados com os tags e .Exemplo: TtuloTextoTtuloTextoAceito por: todos os navegadores

e

Marcam os ttulos de uma lista de definio. Devem ser usados junto com os tags e .Exemplo: TtuloTextoTtuloTexto


e

Marcam o incio e o fim do texto de uma lista de definio. Devem ser usados junto com os tags e .Exemplo: TtuloTexto


29/37

TtuloTextoAceito por: todos os navegadores

e

Marcam o incio e o fim de uma lista no ordenada. Deve ser usado junto com o tag. Os itensda lista recebem marcas grficas na primeira linha conhecidas como bullets.Exemplo: Item 1Item 2Aceito por: todos os navegadores

e

Marcam o incio e o fim de uma lista ordenada. Os itens da lista so colocados em ordem erecebem na primeira linha um nmero ou letra. Devem ser usados junto com o tag.Exemplo: Item 1Iem 2Aceito por: todos os navegadoresAtributoSTART=n: especifica o nmero a partir do qual os itens da lista comeam a ser contados. Sendoque n pode ser um nmero ou uma letra. Tambm podem ser utilizados nmeros romanos.Exemplo: Item 1Item 2Aceito 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 1Item 2Aceito por: todos os navegadores

e

Marcam o incio e o fim de uma lista. Devem ser usados junto com o tag.Exemplo: Item 1Item 2Aceito por: todos os navegadoresMarca um item de lista. Pode ser usado com os tags, , , e .Exemplo: Item 1Item 2Aceito por: todos os navegadoresAtributosTYPE=n: modifica o tipo de marca que ser colocada antes de cada item da lista. Quando utilizado


30/37

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 amesma opo produza um quadrado vazio). TYPE=DISC coloca um crculo cheio. TYPE=SQUAREcoloca um quadrado cheio. Quando utilizado em uma lista no ordenada, modifica o tipo decaractere 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 1ouItem 1Item 2Aceito por: Netscape 1.1 e Internet Explorer

Imagens

Insere uma imagem.AtributosSRC=imagem.gif: indica o arquivo de imagem a ser carregado. Sendo que imagem.gif o nomedo arquivo de imagem a ser usado.Exemplo: Aceito por: todos os navegadoresDYNSRC=video.gif: indica o arquivo de vdeo a ser carregado.Exemplo: (o atributo SRC=imagem.gif deveser colocado para que os navegadores que no aceitam o atributo DYNSRC possam mostrar umaimagem)Aceito por: Internet Explorer

CONTROLS: inclui um conjunto de botes para controlar a execuo do arquivo de vdeo. Deve serutilizado junto com o atributo DYNSRC.Exemplo: Aceito por: Internet ExplorerLOOP=n ou INFINITE: define quantas vezes o arquivo de vdeo ser executado. Sendo que n onmero de vezes que o arquivo ser executado. LOOP=INFINITE executa o arquivoindefinidamente, at que o usurio mude de pgina. Deve ser utilizado junto com o atributoDYNSRC.Exemplo: Aceito por: Internet ExplorerSTART=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=MOUSEOVERexecuta 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 aimagem. Deve ser usado com o atributo DYNSRC.Exemplo: Aceito por: Internet ExplorerALIGN=n:modifica o alinhamento da imagem em relao ao texto. Sendo que n uma das opesa seguir. ALIGN=LEFT faz a imagem flutuar esquerda, enquanto o texto circunda a imagempela direita. ALIGN=RIGHT faz a imagem flutuar direita, enquanto o texto circunda a imagempela 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.


31/37


32/37


e

Indicam a marcao de um mapa processado no cliente. Deve ser usado junto com o tage o atributo de imagem USEMAP=#n.Exemplo:

Aceito por: Netscape 2.0 e Internet ExplorerAtributosNAME=MAPA: sendo que MAPA o nome do mapa processado no cliente.Exemplo: Aceito por: Netscape 2.0 e Internet Explorer

Define 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 ExplorerAtributosSHAPE=formato: define o formato da regio sensvel do mapa processado no cliente. Sendo queformato 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 ExplorerCOORDS=x,y: define as coordenadas da regio sensvel. Sendo que x e y so valores empixelsque marcam a coordenada de um ponto na imagem. E x ponto do eixo horizontal, enquanto y oponto do eixo vertical. Uma rea sensvel formada por vrias coordenadas. Quando o formato darea forSHAPE=RECT (retngulo), h dois pares de x e y. O primeiro indica o canto superioresquerdo do retngulo e o segundo, o canto inferior direito. Quando o formato forSHAPE=CIRC, ha coordenada do centro do crculo e a do raio. Quando o formato forSHAPE=POLY, existem paresde x e y para cada um dos pontos que formam a rea.Exemplo:


33/37

Aceito por: Netscape 2.0 e Internet ExplorerHREF=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 nomesmo computador.Exemplo: ouExemplo: Aceito por: Netscape 2.0 e Internet ExplorerNOREF: indica que a rea determinada no chama arquivo nenhum. Serve para definir quequalquer 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 428pixels delargura e 124pixels de altura.Exemplo:


Marquee

e

Permite fazer um trecho de texto correr de um lado a outro da tela.Exemplo: TextoAceito por: Internet ExplorerAtributosALIGN=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 domarquee. ALIGN=BOTTOM alinha o texto com a base do marquee.

Exemplo: TextoAceito por: Internet ExplorerBEHAVIOR=SCROLL, SLIDE ou ALTERNATE: controla o comportamento do texto dentro domarquee. BEHAVIOR=SCROLL faz com que o texto entre por um dos cantos do marquee e sai poroutro. Com BEHAVIOR=SLIDE, o texto entra por um cantos do marquee e pra ao chegar no cantooposto. Com BEHAVIOR=ALTERNATE, o texto fica passando de um canto a outro, sempre dentrodo marquee.Exemplo: TextoAceito por: Internet Explorer


34/37

BGCOLOR=#nnnnnn: muda a cor do fundo do marquee. O Apndice C mostra os valores possveisde n.Exemplo: TextoAceito por: Internet ExplorerDIRECTION=LEFT ou RIGHT: define a direo na qual o texto se move. DIRECTION=LEFT faz otexto correr para a esquerda. DIRECTION=RIGHT faz o texto correr para a direita.

Exemplo: TextoAceito por: Internet ExplorerHEIGHT=n ou n%: define a altura do marquee. Sendo que n um valor empixels ou um percentualda altura da janela.Exemplo: TextoAceito por: Internet ExplorerWIDTH=n ou n%: define a largura do marquee. Sendo que n um valor empixels ou um percentualda largura da janela.Exemplo: TextoAceito por: Internet ExplorerHSPACE=n: define margens esquerda e direita do marquee. Sendo que n um valor empixels.Exemplo: TextoAceito por: Internet Explorer

VSPACE=n: define margens acima e abaixo do marquee. Sendo que n um valor empixels.Exemplo: TextoAceito por: Internet ExplorerLOOP=n: define quantas vezes o texto ir cruzar o marquee. Sendo que n o nmero de vezesque o texto ir cruzar o marquee. Se n for igual a 1 ou a INFINITE, o texto ir se movimentarinfinitamente.Exemplo: TextoAceito por: Internet ExplorerSCROLLAMOUNT=n: controla a velocidade do texto, definindo o nmero depixels entre cadaredesenho do texto. Sendo que n o valor empixels que separa cada redesenho do texto. Quantomaior forn, mais rpido ser o movimento texto.Exemplo: TextoAceito por: Internet ExplorerSCROLLDELAY=n: controla a velocidade do marquee ao definir os intervalos de redesenho dotexto. Sendo que n o valor em milisegundos do intervalo de redesenho do texto. Quanto menorforn, mais rpido ser o texto.Exemplo: TextoAceito por: Internet Explorer

Som

Carrega um arquivo de udio como trilha sonora da pgina.Exemplo: Aceito por: Internet Explorer

AtributosSRC=som.wav: define o nome do arquivo de udio a ser carregado Sendo que som.wav o nomedo arquivo a ser carregado. Aceita os formatos .WAV, .AU e .MID.Exemplo: Aceito por: Internet ExplorerLOOP=n: define quantas vezes o arquivo de udio ser executado. Sendo que n o nmero devezes que o arquivo de udio ser executado. Se n for igual a 1 ou a INFINITE, o arquivo serexecutado infinitamente.Exemplo:


35/37

Aceito por: Internet Explorer

Tabelas

e

Marca o incio e o fim de uma tabela.

Exemplo: TextoTextoAceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0AtributosBORDER=n: define a borda da tabela. Sendo que n o valor empixels da borda.Exemplo: TextoTextoAceito por: Internet Explorer 2.0, Netscape 1.1 e NCSA MosaicBORDERCOLOR=#nnnnnn: define a cor principal da borda. O Apndice C mostra os valores decores possveis de n.Exemplo: TextoTextoAceito por: Internet ExplorerBORDERCOLORLIGHT=#nnnnnn: define a cor da sombra mais clara da borda. O Apndice Cmostra os valores de cores possveis de n.Exemplo: TextoTextoAceito por: Internet ExplorerBORDERCOLORDARK=#nnnnnn: define a cor da sombra mais escura da borda. O Apndice Cmostra os valores de cores possveis de n.Exemplo: TextoTexto

Tabela de cores


36/37

A tabela abaixo apresenta os cdigos de cores que podem ser utilizados em documentos HTML. Somente osnomes de cores acompanhados de asterisco podem ser utilizados no lugar dos cdigos. Olive, fuchsia, purplee teal no tm correspondentes em cdigo.

Nome da corCdigo dacor

Aparncia

*White #FFFFFF*Red #FF0000*Green #00FF00*Blue #0000FFMagenta #FF00FFCyan #00FFFF*Yellow #FFFF00*Black #000000*Aqua #70DB93Baker's Chocolate #5C3317Blue Violet #9F5F9FBrass #B5A642Bright Gold #D9D919Brown #A62A2ABronze #8C7853

Bronze II #A67D3DCadet Blue #5F9F9FCool Copper #D98719Copper #B87333Coral #FF7F00Corn Flower Blue #42426FDark Brown #5C4033Dark Green #2F4F2FDark Green Copper #4A766EDark Olive Green #4F4F2FDark Orchid #9932CDDark Purple #871F78Dark Slate Blue #6B238E

Dark Slate Grey #2F4F4FDark Tan #97694FDark Turquoise #7093DBDark Wood #855E42Dim Grey #545454Dusty Rose #856363Feldspar #D19275Firebrick #8E2323Forest Green #238E23*FuchsiaGold #CD7F32Goldenrod #DBDB70*Gray #C0C0C0

Green Copper #527F76Green Yellow #93DB70Hunter Green #215E21Indian Red #4E2F2FKhaki #9F9F5FLight Blue #C0D9D9Light Grey #A8A8A8Light Steel Blue #8F8FBDLight Wood #E9C2A6*Lime #32CD32


37/37

Mandarian Orange #E47833*Maroon #8E236BMedium Aquamarine #32CD99Medium Blue #3232CDMedium Forest Green #6B8E23Medium Goldenrod #EAEAAEMedium Orchid #9370DBMedium Sea Green #426F42Medium Slate Blue #7F00FFMedium Spring Green #7FFF00Medium Turquoise #70DBDBMedium Violet Red #DB7093Medium Wood #A68064Midnight Blue #2F2F4F*Navy #23238E

Neon Blue #4D4DFFNeon Pink #FF6EC7New Midnight Blue #00009CNew Tan #EBC79EOld Gold #CFB53B

*OliveOrange #FF7F00Orange Red #FF2400Orchid #DB70DBPale Green #8FBC8FPink #BC8F8FPlum #EAADEA*PurpleQuartz #D9D9F3Rich Blue #5959ABSalmon #6F4242Scarlet #8C1717Sea Green #238E68

Semi-Sweet Chocolate #6B4226Sienna #8E6B23*Silver #E6E8FASky Blue #3299CCSlate Blue #007FFFSpicy Pink #FF1CAESpring Green #00FF7FSteel Blue #236B8ESummer Sky #38B0DETan #DB9370*TealThistle #D8BFD8Turquoise #ADEAEA

Very Dark Brown #5C4033Very Light Grey #CDCDCDViolet #4F2F4FViolet Red #CC3299Wheat #D8D8BFYellow Green #99CC32

Apostila Aprenda Construir Home Pages - Manual Completo de HTML - Portugues

Documents

Transcript of Apostila Aprenda Construir Home Pages - Manual Completo de HTML - Portugues