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
1 | <TABLE BORDER=valor da espessura> ... </TABLE> |
Listagem 2: Sintaxe de uso dos atributos width e height
1 | <TABLE BORDER=valor da borda WIDTH="valor da largura"> |
| Linha 1, Coluna 1 | Linha 1, Coluna 2 |
| Linha 2, Coluna 1 | Linha 3, Coluna 2 |
<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
1 2 3 4 5 6 7 8 9 10 | <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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
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 |
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
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
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
1 2 3 4 5 6 7 8 9 10 11 | <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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!--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
1 2 3 4 | <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
1 | <a href="apresenta2.html" target="principal">Exemplo</a> |
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
1 | <FORM ACTION="URL_de_script" METHOD=método>...</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.
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
1 2 3 | <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"></FORM> |
Listagem 13: Exemplo de input com tipo implícito
1 2 3 | <FORM> Nome: <INPUT NAME="Nome"></FORM> |
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
1 2 3 4 | <FORM> Usuário: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> </FORM> |
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
1 | <input type="text" name="coloque o nome do campo"> |
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
1 | <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome"> |
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
1 2 3 | <FORM> Endereço: <INPUT TYPE=TEXT SIZE=35></FORM> |
É 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
1 2 3 | <FORM>Dia do mês: <INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2> </FORM> |
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
1 2 3 | <FORM> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> |
Listagem 20: Form com campo hidden
1 2 3 4 5 | <FORM> Usuário: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> |
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
1 2 | <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br > <INPUT TYPE=CHECKBOX NAME=esporte VALUE="bocha">Bocha |
Listagem 22: Uso do atributo checked
1 2 | <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vôlei <br> <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol |
RADIO: insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida.
Listagem 23: Campos radio
1 2 | <INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br> <INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional |
Listagem 24: Atributo checked em radios
1 2 | <INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br> <INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico |
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
1 2 3 | <FORM> <INPUT TYPE=SUBMIT> </FORM> |
Listagem 26: Alterando o texto do submit
1 2 3 | <FORM> <INPUT TYPE=SUBMIT VALUE="Envia mensagem"> </FORM> |
Listagem 27: Exemplo com botão reset
1 2 3 | <FORM> <INPUT TYPE=RESET> </FORM> |
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
1 2 3 4 5 6 | <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> |
Listagem 29: Uso do atributo selected
1 2 3 4 5 6 | <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> |
<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
1 | <TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA> |
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
1 | <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
Â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á:
1 | <A NAME="Coloque o nome da ancora aqui"></A> |
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
1 | <a href="nome-do-lugar-a-ser-levado#nome da ancora">Texto</a> |
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 |
Nenhum comentário:
Postar um comentário