HTML Avançado

Conheça sobre tabelas, frames, formulários, como inserir sons em sua página, uso de âncoras e cores hexadecimais.

por Equipe Linha de Código

Tabelas

As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustrações de maneira organizada.

Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

A formatação de tabelas faz parte da versão 3.0 da linguagem HTML. Manipular tabelas em HTML dá trabalho e necessita de calma.

A tag para criação de uma tabela é <table>, e dentro dela você coloca atributos importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento da tag com .

Atributos de Tabela

BORDER: O elemento delimita uma tabela e a espessura de sua borda:

Listagem 1: Sintaxe de uso do atributo border

<TABLE BORDER=valor da espessura> ... </TABLE>

WIDTH e HEIGHT: com esses 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 não é usado , mas o valor de largura é muito útil. Veja como usar:

Listagem 2: Sintaxe de uso dos atributos width e height

<TABLE BORDER=valor da borda WIDTH="valor da largura">

Segue um exemplo de tabela com valor de largura que ocupe 75% da tela (WIDTH="75%"):

Linha 1, Coluna 1	Linha 1, Coluna 2
Linha 2, Coluna 1	Linha 3, Coluna 2

Dentro dessa formatação, inserimos as linhas e elementos da tabela:

<TH>...</TH>: define um cabeçalho para a tabela

><TR>.. </TR>: delimita uma linha

<TD>...</TD>: delimita uma coluna da tabela

Veja como fica o código para a criação de uma tabela com 2 linhas e 2 colunas:

Listagem 3: Código de uma tabela 2x2

<table border="2">
<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>

Agora veja a mesma tabela sem bordas (border=0):

Atributos COLSPAN e ROWSPAN

É possível mesclar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):

Listagem 4: Exemplo de uso do colspan e rowspan

<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</td>
<td>linha 2, coluna 2</td>
</tr>
<th rowspan=3>3 linhas juntas</th>
<tr>
<td>duas linhas</td>
</tr>
<tr>
<td>duas linhas</td>
</tr>
<tr>
<td>três linhas</td>
</tr>
</table>

Resultado: colunas 1 e 2 3 linhas juntas

colunas 1 e 2 3 linhas juntas

linha1, coluna 1	linha 1, coluna 2
linha 2, coluna 1	linha 2, coluna 2
duas linhas
duas linhas
três linhas

Neste exemplo, temos que o cabecalho Colunas 1 e 2 compreende duas colunas (colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3).

Cores de fundo

Quando você cria uma tabela, ela tem um background transparente e, portanto, vai sempre assumir a cor do fundo ou a imagem de fundo da página. Mas é possível que você defina uma cor de fundo para cada célula, linha e coluna da sua tabela. Para isso você deve incluir o atributo "BGCOLOR", veja como fica:

Listagem 5: Exemplo de uso do bgcolor

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

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 célula da tabela.

Imagem de fundo

Você também 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:

Listagem 6: Exemplo de uso do background

<table border=2 background="caminho 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>

Assim como quando colocamos uma imagem de fundo em uma página, a imagem de fundo em uma tabela será "repetida" até preencher todo o espaço da tabela.

Onde houver uma cor de fundo definida para a célula, coluna ou linha a imagem de fundo não vai aparecer.

Frames - Parte 1

Os frames são divisões da tela do navegador em diversas telas (ou "quadros"). Com isso, torna-se possível apresentar mais de uma página 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 navegação em que o menu sempre está fixo e somente o outro frame muda para que apareçam as páginas.

Para criar uma página com 2 frames, você terá que criar no mínimo 3 páginas, para resultar em uma. Isso porque, neste caso, cada frame é uma página HTML (2 frames) e há uma terceira página principal que vai ter as informações destes frames dentro dela.

Para criar um frame, primeiro crie duas páginas simples e salve no mesmo diretório. Crie agora uma terceira página, com o seguinte código:

Listagem 7: Exemplo de uso de frames

<html>
<head>
<title> coloque o título 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 código para os frames abaixo da tag e antes da tag <body>.

A parte FRAMESET define a divisão da página em "quadros". Neste exemplo, a página 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 formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos Assim, aqui vemos que a página "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 página que você criou por "b.htm" na segunda.

Salve e veja o resultado.

Este é o comando básico para fazer uma página com frames. Vamos ver os tipos de frames que é possível você criar. Na seção de "Download de Exemplos" você poderá baixar arquivos com exemplos de frames para facilitar a construção de suas páginas.

Frames - Parte 2

Como já foi possível observar, FRAMESET tem atributos que definem a divisão da janela do navegador em colunas; essa divisão também pode ser feita em linhas, e utilizando uma combinação de "framesets" para variadas apresentações. Lembre-se de sempre colocar o código para os frames abaixo da tag e antes da tag . Confira os tipos mais comuns de divisões que você pode fazer. Você poderá fazer o download dos arquivos de exemplos neste tutorial.

Listagem 8: Modelos de layouts com frames

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

<!--Figura 2-->
<FRAMESET ROWS="20%, 80%">
	<FRAME SRC="linha1.html"> <FRAME SRC="linha2.html">
</FRAMESET>

<!--Figura 3-->
<FRAMESET COLS="20%, 80%">
	<FRAME SRC="coluna1.html">
	<FRAMESET ROWS="20%, 80%">
		<FRAME SRC="linha1.html">
		<FRAME SRC="linha2.html">
	</FRAMESET>
</FRAMESET>

<!--Figura 4-->
<FRAMESET ROWS="20%, 80%">
	<FRAME SRC="linha1.html">
	<FRAMESET COLS="20%, 80%">
		<FRAME SRC="coluna1.html">
		<FRAME SRC="coluna2.html">
	</FRAMESET>
</FRAMESET>

Figura 1: Modelo com frames 1

Download deste exemplo

Figura 2: Modelo com frames 2

Download deste exemplo

Figura 3: Modelo com frames 3

Download deste exemplo

Figura 4: Modelo com frames 4

Download deste exemplo

Lembre-se de que os frames fixos não precisam ter nomes, mas os frames que receberão textos, sim!

O exemplo simples visto até agora segue o modelo da primeira composição (em colunas). As composições 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 apresentação:

FRAMEBORDER="NO": eliminação das bordas dos frames: "NO" sem bordas, "YES" com bordas.

BORDER="valor do espaço": eliminação do espaço entre os frames.

SCROLLING="NO": frame sem barra de rolagem. A opção "YES" define a existência da barra de rolagem.

Combinando estes atributos em uma tag de frames simples teríamos:

Listagem 9: Combinação de atributos do frame

<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 página, o padrão é que a página referente a esse link seja carregada na mesma janela da página anterior. No exemplo visto com frames, seguir um link dentro da janela à direita faz com que a página 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 página do link seja mostrada. Para isso você usa o atributo "NAME".

Veja no código-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 página ao acionarmos um link.

Veja como ficaria a tag de link para isso:

Listagem 10: Link para abrir em frame

<a href="apresenta2.html" target="principal">Exemplo</a>

Quando se acionar esse link, a página 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.

Formulários - Parte 1

Um formulário é um modelo para a entrada de um conjunto de dados. Eles são muito usados em registros eletrônicos ou em formulários para o envio de emails para as páginas sem precisar abrir um programa de email ou digitar endereços, além da vantagem de ter campos para cada tipo de informação.

O primeiro passo para fazer formulários é aprender as tags que fazem os campos de entrada de dados.

O elemento <FORM> inicia um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.

Listagem 11: Sintaxe básica de formulário

<FORM ACTION="URL_de_script" METHOD=método>...</FORM>

Atributos da tag <FORM>

ACTION: especifica o URL do script ao qual serão enviados os dados do formulário.

METHOD: seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do navegador para o servidor, com a seguinte diferença básica:

• 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 formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>.

Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo sistema para enviar os dados. Normalmente são usados "scripts".

Os scripts que organizam esses dados de entrada de todos os campos em um conjunto de informações e realizem uma tarefa programada, como por exemplo enviar os dados do formulário para o seu email. HTML não tem condições de fazer isso, por isso é necessário utilizar scripts CGI, PERL ou ASP para executar estas tarefas, porém estes tipos de scripts necessitam de aprendizado mais dedicado para se criar o que você deseja e são muito mais complexos do que a linguagem HTML, pois eles processam informações.

Você pode usar scripts prontos em seus formulários, mas no momento ainda não é possível membros da StarMedia Home Pages executarem os scripts nos servidores.

Formulários - Parte 2

Agora precisamos criar os campos onde os usuários vão digitar os dados e selecionar as opções. Você inclui estes campos dentro da tag <FORM>. Conheça a função de cada um e como criá-los:

<INPUT>: esta é a tag para iniciar a criação de campos de dados. Há vários atributos que permitem a criação de diferentes campos de entrada de dados. Vejamos:

Campo de dados texto

Quando INPUT não apresenta atributos, assume-se TYPE=TEXT como padrão à formatação:

Listagem 12: Exemplo de input do tipo text

<FORM> 
Nome: <INPUT TYPE=TEXT NAME="Nome">
</FORM>

Ou apenas:

Listagem 13: Exemplo de input com tipo implícito

<FORM> 
Nome: <INPUT NAME="Nome">
</FORM>

Campo de dados de texto em formato senha

Entrada de texto na qual os caracteres são escondidos por asteriscos. É muito usado para entradas de senhas, como se pode ver no exemplo.

Listagem 14: Exemplo de input password

<FORM> 
Usuário: <INPUT TYPE=TEXT NAME=login><br> 
Senha: <INPUT TYPE=PASSWORD NAME="senha"> 
</FORM>

Atributo NAME

Ele é especialmente para que você dê um nome ao campo, ele não aparece na página, 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 usuário preencheu em cada campo. Por exemplo se você tem vários campos de texto, cada um para um tipo de infromação 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:

Listagem 15: Exemplo de uso do atributo name

<input type="text" name="coloque o nome do campo">

Atributo VALUE

Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser inserir dados, ele somente precisará apagar o que já estiver escrito.

Listagem 16: Exemplo de atributo value

<INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">

Atributo SIZE

Especifica o tamanho do espaço no vídeo para o campo do formulário. Só é válido para campos TEXT e PASSWORD. O valor padrão é 20.

Listagem 17: Input com atributo size definido

<FORM> 
Endereço: <INPUT TYPE=TEXT SIZE=35>
</FORM>

Atributo MAXLENGTH

É o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD.

Listagem 18: Atributo maxlength

<FORM>Dia do mês: 
<INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2> 
</FORM>

Apenas 2 caracteres serão lidos pelo formulário, não 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 não aparece no formulário para o visitante. Ele está lá no código, mas o visitante não pode vê-lo ou alterá-lo. Isso é importante para você incluir informações que achar necessárias, mas que não deseja que o visitante altere.

Listagem 19: Exemplo de uso de campo hidden

<FORM> 
<INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> 
</FORM>

Aqui o campo está escondido. O visitante não o vê, mas ele vai ser processado pelo formulário. Você pode incluí-lo sem problemas junto com os outros elementos. Por exemplo:

Listagem 20: Form com campo hidden

<FORM> 
Usuário: <INPUT TYPE=TEXT NAME=login><br> 
Senha: <INPUT TYPE=PASSWORD NAME="senha"> 
<INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> 
</FORM>

Múltipla escolha

Você também pode criar um campo onde o usuário só precisa selecionar as opções, sem digitar nada. Há dois tipos básicos de seleção:

CHECKBOX: insere um botão de escolha de valores para várias opções.

Listagem 21: Exemplos de checkboxes

<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 usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":

Listagem 22: Uso do atributo checked

<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vôlei <br> 
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol

Escolha única

RADIO: insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida.

Listagem 23: Campos radio

<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 usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":

Listagem 24: Atributo checked em radios

<INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br> 
<INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico

Botões de ação

Os botões são usados para executar ações dentro do formulário, como enviar os dados ou limpar os campos.

SUBMIT: apresenta o botão que causa o envio dos dados de entrada para o servidor.

Listagem 25: Uso de botão submit

<FORM> 
<INPUT TYPE=SUBMIT> 
</FORM>

É possível modificar a mensagem desse botão através do atributo VALUE.

Listagem 26: Alterando o texto do submit

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

RESET: restaura os valores iniciais das entradas de dados.

Listagem 27: Exemplo com botão reset

<FORM> 
<INPUT TYPE=RESET> 
</FORM>

Também é possível modificar a mensagem desse botão através do atributo VALUE.

Formulários - Parte 3

<SELECT>: apresenta uma lista de valores em um menu suspenso. Ótimo para criar escolhas que o usuário seleciona sem precisar digitar através de campos <OPTION>. Veja como fazer: .

Listagem 28: Exemplo de campo select

<SELECT NAME="sabor"> 
<OPTION>Abacaxi 
<OPTION>Creme 
<OPTION>Morango 
<OPTION>Chocolate 
</SELECT>

Atributo SELECTED: também é possível estabelecer uma escolha-padrão, através do atributo SELECTED.

Listagem 29: Uso do atributo selected

<SELECT NAME="sabor"> 
<OPTION>Abacaxi 
<OPTION SELECTED>Creme 
<OPTION>Morango 
<OPTION>Chocolate 
</SELECT>

Atributo SIZE: com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4).

<TEXTAREA> :abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial. É um campo onde as pessoas poderão digitar mais texto do que nos campos de texto que vimos na parte 2. Além disso, o usuário pode ver o texto que está digitando. A tag fica assim:

Listagem 30: Textarea básico

<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>

Repare que, no atributo "COLS", definimos o número de colunas para a largura do campo de texto e, em "ROWS", o número de linhas para o campo de texto. Se o usuário 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 página um som de fundo. Com isso, sempre que alguém acessar sua página, 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 são aqueles no formato MIDI (.MID), mas você também pode incluir sons do tipo WAVE (.WAV).

O Netscape e o Internet Explorer têm algumas diferenças em seu sistema e, por isso, em algumas versões do Netscape o som pode não tocar.

A tag deve ser <EMBED>. Veja o exemplo:

Listagem 31: Tag emed

<embed src="nome da música" autostart="true" loop=10>

• Em "nome da musica" você coloca o nome da música mid ou wav.
• Em "loop" você coloca o número de vezes que o som vai ser repetido.
• Em "autostart" você define se quer que a música comece a tocar sozinha (atributo TRUE), se você colocar "FALSE" o usuário terá que clicar no botão de "play"para ouvir a música

Se você quiser que ele fique se repetindo infinitamente, basta colocar "infinity" no lugar de um número. Não é necessário colocar "" neste caso.

Âncoras

Âncoras são links estabelecidos para certas partes de uma mesma página ou de outra página qualquer, por exemplo, se você quer que um link vá direto para um texto que está no meio de uma página sem o visitante ter que descer a página. Por exemplo, clicando aqui você salta automaticamente para o fim da página.

Para o funcionamento de uma âncora deve-se estabelecer dois comandos:

• Um que defina o lugar da página para onde se pretende "saltar" e
• Outro que identifique esse ponto de destino. - Links com âncoras para uma mesma página. Você pode fazer com que links saltem para determinados pontos de uma mesma página, facilitando a navegação. Veja como. Primeiro vamos definir o ponto de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:

Listagem 32: Sintaxe da tag âncora

<A NAME="Coloque o nome da ancora aqui"></A>

NAME: é um parâmetro 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 símbolo "#" 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 página

Agora digamos que você queira que o link vá para uma outra página e direto para um texto no final dela. Primeiro você deve incluir, na página de destino, a tag da âncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a página. Em seguida, na página que terá o link, você deve construir a tag assim:

Listagem 33: âncora para outra página

<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 página 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 página de destino.

Você pode incluir quantas âncoras quiser em sua página, mas lembre-se de que cada uma deve ter um nome diferente.

Cores Hexadecimais

A tabela abaixo apresenta os códigos de cores que podem ser utilizados em documentos HTML. As cores marcadas por um asterisco vermelho podem ser escritas no lugar dos códigos.

Temos também um infográfico bem legal sobre o código das cores html que vale a pena conferir e ter salvo para rápidas consultas.

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