[ Turorial ] HTML Avançado
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 </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 não é 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
- 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 um elemento da tabela
Veja como fica a tag para a criação 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
Agora veja a mesma tabela sem bordas (border=0):
Coluna 1 Coluna 2
- Atributos COLSPAN e ROWSPAN
É possível dividir colunas e linhas, através 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>três linhas</TD></TR>
</TABLE>
Resultado:
Colunas 1 e 2 3 linhas juntas
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 o fundo 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:
<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
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:
<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
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. Veja:
Coluna 1Coluna 2
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 a seguinte tag:
<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 </head> 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 </head> e antes da tag <body>. Confira os tipos mais comuns de divisões que você pode fazer. Você poderá fazer o download dos arquivos de exemplos neste tutorial.
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:
<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".
<HTML>
<HEAD>
<TITLE>Coloque o Título aqui</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="coluna1.html">
<FRAME SRC="coluna2.html" NAME=principal>
</FRAMESET>
</HTML>
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:
<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.
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 vão servir para que você possa ter uma idéia e uma base para o início da construção de suas páginas 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 diretório. Abrindo o arquivo "principal.html" você vê o exemplo, os outros arquivos são os frames que você poderá editar com tudo aquilo que você está aprendendo aqui.
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.
<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:
<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 são escondidos por asteriscos. É muito usado para entradas de senhas, como se pode ver no exemplo.
<FORM>
Usuário: <INPUT TYPE=TEXT NAME=login><br>
Senha: <INPUT TYPE=PASSWORD NAME="senha">
</FORM>
Resultado:
Usuário:
Senha:
- 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:
<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 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.
Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">
Resultado:
Nome:
- Atributo SIZE
- 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.
<FORM>
Endereço: <INPUT TYPE=TEXT SIZE=35>
</FORM>
Endereço:
- Atributo MAXLENGTH
- MAXLENGTH
É o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD.
<FORM>Dia do mês:
<INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2>
</FORM>
Resultado:
Dia do mês:
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.
Veja um exemplo:
<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:
<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.
<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":
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vôlei <br>
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol
Resultado:
Esportes que você pratica:
Futebol
Vôlei
Natação
Basquete
Tênis
Bocha
- Escolha única
- RADIO
Insere um botão de escolha de valores para uma opção, 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 usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":
<INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br>
<INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico
Resultado:
Seu time do coração:
Palmeiras Internacional Cruzeiro
- 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.
<FORM>
<INPUT TYPE=SUBMIT>
</FORM>
Resultado:
É possível modificar a mensagem desse botão através 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:
É possível modificar a mensagem desse botão através do atributo VALUE
<FORM>
<INPUT TYPE=RESET VALUE="Apaga tudo!">
</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: .
<SELECT NAME="sabor">
<OPTION>Abacaxi
<OPTION>Creme
<OPTION>Morango
<OPTION>Chocolate
</SELECT>
Resultado:
Abacaxi Creme Morango Chocolate
- Atributo SELECTED
Também é possível estabelecer uma escolha-padrão, através 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 serão mostrados (no exemplo, SIZE=4):
Abacaxi Creme Morango Chocolate - <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:
<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>
Resultado:
Deixe seu comentário
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:
<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 "</embed>" 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á:
<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:
<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.
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 </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 não é 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 1, coluna 2 |
| linha 2, coluna 1 | linha 2, 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 um elemento da tabela
Veja como fica a tag para a criação 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
É possível dividir colunas e linhas, através 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>três 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 | |
| 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 o fundo 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:
<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 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:
<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 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. Veja:
Coluna 1Coluna 2
| linha1, coluna 1 | linha 1, coluna 2 |
| linha 2, coluna 1 | linha 2, coluna 2 |
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 a seguinte tag:
<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 </head> 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 </head> e antes da tag <body>. Confira os tipos mais comuns de divisões 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> |
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:
<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".
<HTML>
<HEAD>
<TITLE>Coloque o Título aqui</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="coluna1.html">
<FRAME SRC="coluna2.html" NAME=principal>
</FRAMESET>
</HTML>
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:
<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.
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 vão servir para que você possa ter uma idéia e uma base para o início da construção de suas páginas 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 diretório. Abrindo o arquivo "principal.html" você vê o exemplo, os outros arquivos são 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 |
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.
<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:
<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 são escondidos por asteriscos. É muito usado para entradas de senhas, como se pode ver no exemplo.
<FORM>
Usuário: <INPUT TYPE=TEXT NAME=login><br>
Senha: <INPUT TYPE=PASSWORD NAME="senha">
</FORM>
Resultado:
Usuário:
Senha:
- 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:
<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 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.
Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">
Resultado:
Nome:
- Atributo SIZE
- 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.
<FORM>
Endereço: <INPUT TYPE=TEXT SIZE=35>
</FORM>
Endereço:
- Atributo MAXLENGTH
- MAXLENGTH
É o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD.
<FORM>Dia do mês:
<INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2>
</FORM>
Resultado:
Dia do mês:
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.
Veja um exemplo:
<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:
<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.
<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":
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vôlei <br>
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol
Resultado:
Esportes que você pratica:
Futebol
Vôlei
Natação
Basquete
Tênis
Bocha
- Escolha única
- RADIO
Insere um botão de escolha de valores para uma opção, 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 usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":
<INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br>
<INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico
Resultado:
Seu time do coração:
Palmeiras Internacional Cruzeiro
- 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.
<FORM>
<INPUT TYPE=SUBMIT>
</FORM>
Resultado:
É possível modificar a mensagem desse botão através 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:
É possível modificar a mensagem desse botão através do atributo VALUE
<FORM>
<INPUT TYPE=RESET VALUE="Apaga tudo!">
</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: .
<SELECT NAME="sabor">
<OPTION>Abacaxi
<OPTION>Creme
<OPTION>Morango
<OPTION>Chocolate
</SELECT>
Resultado:
Abacaxi Creme Morango Chocolate
- Atributo SELECTED
Também é possível estabelecer uma escolha-padrão, através 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 serão mostrados (no exemplo, SIZE=4):
Abacaxi Creme Morango Chocolate - <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:
<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>
Resultado:
Deixe seu comentário
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:
<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 "</embed>" 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á:
<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:
<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.
| 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