Tabelas As tabelas foram uma grande conquista para os autores de documentos para a Web.

Com elas possvel, por exemplo, termos estas pginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegao e observaes. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustraes de maneira organizada. Como j foi possvel perceber, as tabelas podem conter textos, listas, pargrafos, imagens, diversas outras formataes - inclusive outras tabelas. Novas verses de HTML e de navegadores populares vm acrescentando diversos atributos s tabelas, e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis. A formatao de tabelas faz parte da verso 3.0 da linguagem HTML. Manipular tabelas em HTML d trabalho e necessita de calma. A tag para criao de uma tabela <TABLE>, e dentro dela voc coloca atributos importantes para a criao correta da sua tabela. No esquea de fazer o fechamento da tag com </TABLE>. - Atributos de Tabela - <TABLE BORDER> O elemento delimita uma tabela e a espessura de sua borda: <TABLE BORDER=valor da espessura> ... </TABLE> - WIDTH e HEIGHT Com estes atributos, voc pode definir o tamanho que a tabela vai ocupar na tela. WIDTH (largura), HEIGHT (altura). Eles podem ser em pixels ou em porcentagem. Basicamente o HEIGHT no usado , mas o valor de largura muito til. Veja como usar: <TABLE BORDER=valor da borda WIDTH="valor da largura"> Um exemplo de tabela com valor de largura que ocupe 75% da tela (WIDTH="75%"): Coluna 1 Coluna 2 linha1, coluna 1 linha 2, coluna 1 linha 1, coluna 2 linha 2, coluna 2

- Dentro dessa formatao, inserimos as linhas e elementos da tabela: - <TH> ... </TH> Define um cabealho para a tabela

- <TR> ... </TR> Delimita uma linha - <TD> ... </TD> Delimita um elemento da tabela Veja como fica a tag para a criao de uma tabela com 2 linhas e 2 colunas: <TABLE BORDER=2> <TH> Coluna 1</TH><TH> Coluna 2 </TH> <TR><TD> linha1, coluna 1</td><td> linha 1, coluna 2 </TD></TR> <TR><TD> linha 2, coluna 1</TD><TD>linha 2, coluna 2 </TD></TR> </TABLE> Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Agora veja a mesma tabela sem bordas (border=0): Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 - Atributos COLSPAN e ROWSPAN possvel dividir colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=2> <TH COLSPAN=2>Colunas 1 e 2</TH> <TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</T><TD>linha 2, coluna 2</TD></TR> <TH ROWSPAN=3>3 linhas juntas</TH> <TD>uma linha</TD> <TR><TD>duas linhas</TD></TR> <TR><TD>trs linhas</TD></TR> </TABLE> Resultado: Colunas 1 e 2 3 linhas juntas linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha duas linhas trs linhas

Neste exemplo, temos que o cabecalho Colunas 1 e 2 compreende duas colunas (colspan=2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3). - Cores de fundo Quando voc cria uma tabela, ela tem o fundo transparente e, portanto, vai sempre assumir a cor do fundo ou a imagem de fundo da pgina. Mas possvel que voc defina uma cor de fundo para cada clula, linha e coluna da sua tabela. Para isso voc deve incluir o atributo "BGCOLOR", veja como fica: <table border=2> <th bgcolor="#FF0000">Coluna 1</th> <th bgcolor="#009900">Coluna 2</th> <tr> <td>linha1, coluna 1</td> <td> linha 1, coluna 2</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> </tr> </table> Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Voc pode definir a cor de fundo de qualquer linha ou coluna que quiser, bastando apenas incluir o atributo junto da tag de linha ou coluna. Da mesma forma voc pode incluir tags de fonte e imagem para colocar dentro de cada clula da tabela. - Imagem de fundo Voc tambm pode colocar em uma tabela uma imagem de fundo, como um papel de parede somente para a tabela. Para isso, voc s precisa colocar o atributo "BACKGROUND". Veja como fazer: <table border=2 background="nome da imagem que vai aparecer"> <th><font color="#000000">Coluna 1</font></th> <th><font color="#000000">Coluna 2</font></th> <tr> <td><font color="#000000">linha1, coluna 1</font></td> <td><font color="#000000"> linha 1, coluna 2</font></td> </tr> <tr> <td><font color="#000000">linha 2, coluna 1</font></td> <td><font color="#000000">linha 2, coluna 2</font></td> </tr> </table> Resultado: Coluna 1Coluna 2

linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Assim como quando colocamos uma imagem de fundo em uma pgina, a imagem de fundo em uma tabela ser "repetida" at preencher todo o espao da tabela. Onde houver uma cor de fundo definida para a clula, coluna ou linha a imagem de fundo no vai aparecer. Veja: Coluna 1Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Frames - Parte 1 Os frames so divises da tela do navegador em diversas telas (ou "quadros"). Com isso, torna-se possvel apresentar mais de uma pgina por vez, por exemplo, um ndice principal em uma parte pequena da tela, e os textos relacionados ao ndice em outra parte. Trata-se de um recurso muito usado para criar menus de navegao em que o menu sempre est fixo e somente o outro frame muda para que apaream as pginas. Para criar uma pgina com 2 frames, voc ter que criar no mnimo 3 pginas, para resultar em uma. Isso porque, neste caso, cada frame uma pgina HTML (2 frames) e h uma terceira pgina principal que vai ter as informaes destes frames dentro dela. Para criar um frame, primeiro crie duas pginas simples e salve no mesmo diretrio. Crie agora uma terceira pgina, com a seguinte tag: <HTML> <HEAD> <TITLE> Coloque o Ttulo aqui </TITLE> </HEAD> <FRAMESET COLS=20%,80%> <FRAME SRC="a.html"> <FRAME SRC="b.html"> </FRAMESET> <BODY> </BODY> </HTML> Lembre-se de sempre colocar o cdigo para os frames abaixo da tag </head> e antes da tag <body>. A parte FRAMESET define a diviso da pgina em "quadros". Neste exemplo, a pgina

ser dividida em duas colunas (Atributo COLS), sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que sero mostradas nos frames definidos Assim, aqui vemos que a pgina "a.html" ser mostrada na primeira coluna (que ocupar 20% da tela), e "b.html" ser mostrada na segunda (ocupando 80% da tela). Substitua "a.htm" para a primeira pgina que voc criou por "b.htm" na segunda. Salve e veja o resultado. Este o comando bsico para fazer uma pgina com frames. Vamos ver os tipos de frames que possvel voc criar. Na seo de "Download de Exemplos" voc poder baixar arquivos com exemplos de frames para facilitar a construo de suas pginas.Frames - Parte 2 Como j foi possvel observar, FRAMESET tem atributos que definem a diviso da janela do navegador em colunas; essa diviso tambm pode ser feita em linhas, e utilizando uma combinao de "framesets" para variadas apresentaes. Lembre-se de sempre colocar o cdigo para os frames abaixo da tag </head> e antes da tag <body>. Confira os tipos mais comuns de divises que voc pode fazer. Voc poder fazer o download dos arquivos de exemplos neste tutorial.

<FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html"> </FRAMESET>

<FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAME SRC="linha2.html"> </FRAMESET> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAME SRC="linha2.html"> </FRAMESET> </FRAMESET> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html"> </FRAMESET> </FRAMESET> Lembre-se de que os frames fixos no precisam ter nomes, mas os frames que recebero textos, sim! O exemplo simples visto at agora segue o modelo da primeira composio (em colunas). As composies com mais de um frameset precisam ser bem planejadas para funcionarem bem. Os valores dos atributos COLS e ROWS, voc pode alterar conforme a necessidade. - Atributos Especiais:

At este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). Outros atributos permitem um maior controle sobre a apresentao: - FRAMEBORDER="NO" Eliminao das bordas dos frames: "NO" sem bordas, "YES" com bordas. - BORDER="valor do espao" Eliminao do espao entre os frames. - SCROLLING="NO" Frame sem barra de rolagem. A opo "YES" define a existncia da barra de rolagem. Combinando estes atributos em uma tag de frames simples teramos: <FRAMESET COLS="20%, 80%" FRAMEBORDER="NO" BORDER="0" SCROLLING="NO"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> Frames - Parte 3 Sempre que se aciona um link dentro de uma pgina, o padro que a pgina referente a esse link seja carregada na mesma janela da pgina anterior. No exemplo visto com frames, seguir um link dentro da janela direita faz com que a pgina apontada seja mostrada ocupando a janela da direita (coluna de 80%). Para isso voc tem que indicar ao navegador, em que frame deseja que a pgina do link seja mostrada. Para isso voc usa o atributo "NAME". <HTML> <HEAD> <TITLE>Coloque o Ttulo aqui</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html" NAME=principal> </FRAMESET> </HTML> Veja no cdigo-fonte acima que o frame associado coluna2.html tem um atributo NAME. Isso faz com que se possa "direcionar" o frame em que queremos mostrar determinada pgina ao acionarmos um link. Veja como ficaria a tag de link para isso: <a href="apresenta2.html" target="principal">Exemplo</a>. Quando se acionar esse link, a pgina ser mostrada no frame onde est a coluna2.html, ou seja, em vez de carregar o link na mesma coluna em que est coluna1.html, ela ser mostrada na coluna em que est coluna2.html. O "Target" define que o link deve abrir no

frame que tem este nome, no caso o "coluna2.html". Voc define o nome de cada frame e, no target, voc define para qual frame ser aberto o link. Download de Exemplos Agora que voc j viu como criar os frames e alterar seus atributos, voc poder fazer o download de arquivos de exemplo que vo servir para que voc possa ter uma idia e uma base para o incio da construo de suas pginas com frames. Ao lado de cada exemplo voc encontra o link para fazer o download do arquivo que est no formato "exe". Todos devem ser colocados em um mesmo diretrio. Abrindo o arquivo "principal.html" voc v o exemplo, os outros arquivos so os frames que voc poder editar com tudo aquilo que voc est aprendendo aqui.

Exemplo 1: Fazer o download deste exemplo

Exemplo 2: Fazer o download deste exemplo

Exemplo 3: Fazer o download deste exemplo

Exemplo 4: Fazer o download deste exemplo Formulrios - Parte 1 Um formulrio um modelo para a entrada de um conjunto de dados. Eles so muito usados em registros eletrnicos ou em formulrios para o envio de emails para as pginas sem precisar abrir um programa de email ou digitar endereos, alm da vantagem de ter campos para cada tipo de informao. O primeiro passo para fazer formulrios aprender as tags que fazem os campos de entrada de dados. O elemento <FORM> inicia um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento. <FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM> - Atributos da tag <FORM> - ACTION

Especifica o URL do script ao qual sero enviados os dados do formulrio. - METHOD Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente so GET e POST. Ambos os mtodos transferem dados do navegador para o servidor, com a seguinte diferena bsica: . POST Os dados inseridos fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. . GET Os dados inseridos fazem parte do URL associado consulta enviada para o servidor; suporta at 128 caracteres. Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo sistema para enviar os dados. Normalmente so usados "scripts". Os scripts que organizam esses dados de entrada de todos os campos em um conjunto de informaes e realizem uma tarefa programada, como por exemplo enviar os dados do formulrio para o seu email. HTML no tem condies de fazer isso, por isso necessrio utilizar scripts CGI, PERL ou ASP para executar estas tarefas, porm estes tipos de scripts necessitam de aprendizado mais dedicado para se criar o que voc deseja e so muito mais complexos do que a linguagem HTML, pois eles processam informaes. Voc pode usar scripts prontos em seus formulrios, mas no momento ainda no possvel membros da StarMedia Home Pages executarem os scripts nos servidores.Formulrios - Parte 2 Agora precisamos criar os campos onde os usurios vo digitar os dados e selecionar as opes. Voc inclui estes campos dentro da tag <FORM>. Conhea a funo de cada um e como cri-los: <INPUT> Esta a tag para iniciar a criao de campos de dados. H vrios atributos que permitem a criao de diferentes campos de entrada de dados. Vejamos: - Campo de dados texto

Quando INPUT no apresenta atributos, assume-se TYPE=TEXT como padro formatao: <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"> </FORM> Ou apenas: <FORM> Nome: <INPUT NAME="Nome"> </FORM> Resultado: Nome: - Campo de dados de texto em formato senha Entrada de texto na qual os caracteres so escondidos por asteriscos. muito usado para entradas de senhas, como se pode ver no exemplo. <FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> </FORM> Resultado: Usurio: Senha: - Atributo NAME Ele especialmente para que voc d um nome ao campo, ele no aparece na pgina, mas serve para identificar o campo e o valor digitado no email que voc receber, nunca deixe de definir o nome dos campos, s assim voc voc poder saber o que cada usurio preencheu em cada campo. Por exemplo se voc tem vrios campos de texto, cada um para um tipo de infromao diferente, voc usa o name para identificar o campo. Voc vai ver sempre que em todas as tags INPUT este atributo est presente. Basta incluir ele da seguinte forma: <INPUT TYPE=TEXT NAME="coloque o nome do campo">

- Atributo VALUE - VALUE Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usurio no preencher este campo, ser adotado este valor padro. Se o usurio quiser inserir dados, ele somente precisar apagar o que j estiver escrito. Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome"> Resultado: Nome: - Atributo SIZE - SIZE Especifica o tamanho do espao no vdeo para o campo do formulrio. S vlido para campos TEXT e PASSWORD. O valor padro 20. <FORM> Endereo: <INPUT TYPE=TEXT SIZE=35> </FORM> Endereo: - Atributo MAXLENGTH - MAXLENGTH o nmero de caracteres aceitos em um campo de dados; este atributo s vlido para campos de entrada TEXT e PASSWORD. <FORM>Dia do ms: <INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2> </FORM> Resultado: Dia do ms: Apenas 2 caracteres sero lidos pelo formulrio, no importa o quanto se escreva neste campo. - Campo de Dados Escondido (Hidden)

Este tipo de campo funciona igual a um campo de texto, s que ele no aparece no formulrio para o visitante. Ele est l no cdigo, mas o visitante no pode v-lo ou alter-lo. Isso importante para voc incluir informaes que achar necessrias, mas que no deseja que o visitante altere. Veja um exemplo: <FORM> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> Aqui o campo est escondido. O visitante no o v, mas ele vai ser processado pelo formulrio. Voc pode inclu-lo sem problemas junto com os outros elementos. Por exemplo: <FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> - Mltipla escolha Voc tambm pode criar um campo onde o usurio s precisa selecionar as opes, sem digitar nada. H dois tipos bsicos de seleo: - CHECKBOX Insere um boto de escolha de valores para vrias opes. <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br > <INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha Um atributo "CHECKED" marca uma escolha inicial, isto , se o usurio no escolher nenhuma opo, o formulrio ir considerar a alternativa "pr-escolhida": <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vlei <br> <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol Resultado: Esportes que voc pratica: Futebol

Vlei Natao Basquete Tnis Bocha - Escolha nica - RADIO Insere um boto de escolha de valores para uma opo, isto , somente uma alternativa pode ser escolhida. <INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br> <INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional Uma diretiva CHECKED marca uma escolha inicial - se o usurio no escolher nenhuma opo, o formulrio ir considerar a alternativa "pr-escolhida": <INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br> <INPUT TYPE=RADIO NAME="time" VALUE="naut">Nutico Resultado: Seu time do corao: Palmeiras Internacional Cruzeiro - Botes de ao Os botes so usados para executar aes dentro do formulrio, como enviar os dados ou limpar os campos. - SUBMIT Apresenta o boto que causa o envio dos dados de entrada para o servidor. <FORM> <INPUT TYPE=SUBMIT> </FORM> Resultado:

possvel modificar a mensagem desse boto atravs do atributo VALUE.

<FORM> <INPUT TYPE=SUBMIT VALUE="Envia mensagem"> </FORM>

- RESET Restaura os valores iniciais das entradas de dados. <FORM> <INPUT TYPE=RESET> </FORM> Resultado:

possvel modificar a mensagem desse boto atravs do atributo VALUE <FORM> <INPUT TYPE=RESET VALUE="Apaga tudo!"> </FORM> Formulrios - Parte 3 - <SELECT> Apresenta uma lista de valores em um menu suspenso. timo para criar escolhas que o usurio seleciona sem precisar digitar atravs de campos <OPTION>. Veja como fazer: . <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Resultado: Abacaxi Creme Morango Chocolate - Atributo SELECTED Tambm possvel estabelecer uma escolha-padro, atravs do atributo SELECTED

<SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Resultado: Abacaxi Creme Morango Chocolate Aqui o Creme j aparece previamente selecionado. - Atributo SIZE Com o atributo SIZE, escolhe-se quantos itens da lista sero mostrados (no exemplo, SIZE=4): Abacaxi Creme Morango Chocolate - <TEXTAREA> Abre uma rea para entrada de texto, de acordo com atributos para nmero de colunas, linhas, e - se for o caso - um valor inicial. um campo onde as pessoas podero digitar mais texto do que nos campos de texto que vimos na parte 2. Alm disso, o usurio pode ver o texto que est digitando. A tag fica assim: <TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentrio </TEXTAREA> Resultado: Deixe seu comentrio Repare que, no atributo "COLS", definimos o nmero de colunas para a largura do campo de texto e, em "ROWS", o nmero de linhas para o campo de texto. Se o usurio digitar mais do que cinco linhas, surgir uma barra de rolagem para ele cortar o texto se desejar. Os valores destes atributos podem ser modificados vontade de acordo com a sua necessidade.Inserindo Sons Voc pode incluir em sua pgina um som de fundo. Com isso, sempre que algum acessar sua pgina, este som ser tocado. Desta forma voc pode fazer seu site ter mais recursos e personalidade. Os arquivos de som ideais para serem inseridos em uma home page so aqueles no

formato MIDI (.MID), mas voc tambm pode incluir sons do tipo WAVE (.WAV). O Netscape e o Internet Explorer tm algumas diferenas em seu sistema e, por isso, em algumas verses do Netscape o som pode no tocar. A tag deve ser <EMBED>. Veja o exemplo: <embed src="nome da msica" autostart="true" loop=10> - Em "nome da musica" voc coloca o nome da msica mid ou wav. - Em "loop" voc coloca o nmero de vezes que o som vai ser repetido. - Em "autostart" voc define se quer que a msica comece a tocar sozinha (atributo TRUE), se voc colocar "FALSE" o usurio ter que clicar no boto de "play"para ouvir a msica Se voc quiser que ele fique se repetindo infinitamente, basta colocar "infinity" no lugar de um nmero. No necessrio colocar "</embed>" neste caso. ncoras ncoras so links estabelecidos para certas partes de uma mesma pgina ou de outra pgina qualquer, por exemplo, se voc quer que um link v direto para um texto que est no meio de uma pgina sem o visitante ter que descer a pgina. Por exemplo, clicando aqui voc salta automaticamente para o fim da pgina. Para o funcionamento de uma ncora deve-se estabelecer dois comandos: - Um que defina o lugar da pgina para onde se pretende "saltar" e - Outro que identifique esse ponto de destino. - Links com ncoras para uma mesma pgina Voc pode fazer com que links saltem para determinados pontos de uma mesma pgina, facilitando a navegao. Veja como. Primeiro vamos definir o ponto de destino. Voc deve incluir a seguinte tag exatamente no local onde quer que o link v: <A NAME="Coloque o nome da ancora aqui"></A> - NAME um parmetro que define um ponto de destino. - Agora voc pode usar a tag de link "comum" para fazer o link saltar para o ponto onde voc definiu: <a href="#nome da ancora">Texto</a> Repare que h um smbolo "#" antes do nome da ncora. ele que vai fazer o navegador

entender que deve ir para a ncora que voc definiu. - Links com ncoras para uma outra pgina Agora digamos que voc queira que o link v para uma outra pgina e direto para um texto no final dela. Primeiro voc deve incluir, na pgina de destino, a tag da ncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a pgina. Em seguida, na pgina que ter o link, voc deve construir a tag assim: <a href="nome-do-lugar-a-ser-levado#nome da ancora">Texto</a> Em "nome-do-lugar-a-ser-levado" voc coloca o URL ou a pgina html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de ncora deve ser o mesmo nome de ncora que voc definiu na pgina de destino. Voc pode incluir quantas ncoras quiser em sua pgina, mas lembre-se de que cada uma deve ter um nome diferente. Cores Hexadecimais A tabela abaixo apresenta os cdigos de cores que podem ser utilizados em documentos HTML. As cores marcadas por um asterisco vermelho podem ser escritas no lugar dos cdigos.

Nome da cor * White * Red * Green * Blue Magenta Cyan * Yellow * Black * Aqua Baker"s Chocolate Blue Violet Brass Bright Gold Brown Bronze

Cdigo da cor #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853

Aparncia

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 Gold Goldenrod *Gray Green Copper Green Yellow Hunter Green Indian Red Khaki Light Blue Light Grey Light Steel Blue Light Wood *Lime

#A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323 #238E23 #CD7F32 #DBDB70 #C0C0C0 #527F76 #93DB70 #215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8 #8F8FBD #E9C2A6 #32CD32

Mandarian Orange *Maroon Medium Aquamarine Medium Blue

#E47833 #8E236B #32CD99 #3232CD

Medium Forest Green #6B8E23 Medium Goldenrod Medium Orchid Medium Sea Green Medium Slate Blue #EAEAAE #9370DB #426F42 #7F00FF

Medium Spring Green #7FFF00 Medium Turquoise Medium Violet Red Medium Wood Midnight Blue * Navy Neon Blue Neon Pink New Midnight Blue New Tan Old Gold Orange Orange Red Orchid Pale Green Pink Plum Quartz Rich Blue Salmon Scarlet Sea Green #70DBDB #DB7093 #A68064 #2F2F4F #23238E #4D4DFF #FF6EC7 #00009C #EBC79E #CFB53B #FF7F00 #FF2400 #DB70DB #8FBC8F #BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68

Semi-Sweet Chocolate #6B4226 Sienna * Silver Sky Blue #8E6B23 #E6E8FA #3299CC

Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan Thistle Turquoise Very Dark Brown Very Light Grey Violet Violet Red Wheat Yellow Green

#007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #99CC32