Curso HTML – Aula 07

Por Guilherme Farias em 06 de junho de 2010

Olá novamente leitores :)
Vamos dar inicio a mais uma aula de HTML, nesta nossa sexta aula vamos aprender a usar cores e entender as cores, então vamos lá!

Cores

As cores podem ser aplicadas em varias tags, no Titulo, parágrafo, tabela e outros. Para especificar a cor, você tem duas formas.

Constante
Usando o nome da cor em inglês: yellow, red, Green, blue, Gray, Dark Green, Light Blue, entre outros.

RGB
Outro método e também o mais usado é o código RGB, veja um exemplo de cor no sistema RGB: #224488

Nota: RGB (Red-Green-Blue ou Vermelho-Verde-Azul) é um sistema de referência para cores em monitores e TVs. Ele parte do fato de esses aparelhos gerarem as cores a partir dessas três cores. Assim, todas as cores possíveis são uma variação da mistura dessas três. Dosando a mistura de tais cores básicas, podemos obter todas as cores que o tubo pode mostrar. A ausência das três é o preto (#000000), e o total de todas é o branco (#FFFFFF)

Aplicando as cores
Vamos aplicar as cores em nossa página HTML. Antes disso vamos criar uma nova página, crie a página HTML

Para testar passo a passo, primeiro vamos criar um documento apenas com um Titulo H1, um Subtitulo H2 e um parágrafo com algumas palavras.
Sua página deve ficar assim:

<HTML>
<head>
</head>
<body>
<h1>Aula 7</h1>
<h2>Testando as cores</h2>
<p>Parágrafo para ter idéia de como vai ficar as cores dentro do parágrafo, escreva o que você quiser aqui.</p>
</body>
</HTML>

Salve a página HTML com o nome Cores.html e veja o resultado:

Repare que a cor padrão para os textos do HTML é preto e para o fundo é branco. vamos mudar a cor de fundo para cinza, e o texto para verde
A cor de fundo será alterada utilizando o parâmetro bgcolor e o texto pelo parâmetro text ambos pertencem a tag <Body>:

Faça as seguintes alterações:
<HTML>
<head>
</head>
<body bgcolor=”Gray” text=”Green”>
<h1>Aula 7</h1>
<h2>Testando as cores</h2>
<p>Parágrafo para ter idéia de como vai ficar as cores dentro do parágrafo, escreva o que você quiser aqui.</p>
</body>
</HTML>

Optei por utilizar as cores cinza e verde (Gray, Green em inglês) mais você pode usar a cor que desejar. O Resultado foi:

O parâmetro text define a cor padrão dos textos de toda a página, mas se quiser modificar apenas alguma parte do texto, é possível utilizar a tag <font> que funciona da seguinte forma:

<font color=”cor desejada”>Texto que será alterado</font>

Veja o exemplo:

<HTML>
<head>
</head>
<body bgcolor=”Gray” text=”Green”>
<h1>Aula 7</h1>
<h2><font color=”Black”>Testando as cores</font></h2>
<p>Parágrafo para ter idéia de como vai ficar as cores dentro do parágrafo, escreva o que você quiser aqui.</p>
</body>
</HTML>

Resultado:

Cores em RGB

O Ponto forte do RGB é que com ele podemos definir a cor exata que queremos e também optar por cores mais distintas.

Primeiro entenda o seguinte, a estrutura do RGB é composta de 6 dígitos.
#– — —
Nesses 6 dígitos, temos 2 dígitos que correspondem a cor Vermelha (Red) 2 dígitos que correspondem a cor Verde (Green) e 2 dígitos que correspondem a cor Azul (Blue) ou seja:
#RRGGBB
Quando menor o numero, menos cores estão sendo usadas, ou seja, mais escuro, quanto maior, mais cores, ou seja, mais claro. Os dígitos estão numa ordem de 12 números, daí o nome Hexadecimal. A ordem é: 1 2 3 4 5 6 7 8 9 A B C D E F

Exemplo: Vou colocar um texto máximo de verde eu o coloco com #00FF00
Texto com o máximo de verde
Exemplo2: texto com o Maximo de azul #0000FF
Texto com o máximo de azul

Vamos modificar as cores em inglês para cores no sistema RGB.

<HTML>
<head>
</head>
<body bgcolor=”#dddddd” text=”#555555″>
<h1>Aula 7</h1>
<h2><font color=”#557755″>Testando as cores</font></h2>
<p>Parágrafo para ter idéia de como vai ficar as cores dentro do parágrafo, escreva o que você quiser aqui.</p>
</body>
</HTML>

Note que no bgcolor e no text eu coloquei números iguais, então as cores vão está balanceadas, ou seja, vão ser tons de cinza, já no fontcolor a cor verde está em mais evidencia.

Resultado:

Repare que com o RGB você tem mais controle das cores, pois você pode especificar melhor.
O único problema é que as cores são definidas por um sistema hexadecimal, mas existem aplicativos que auxiliam para descobrir.

Escolhendo cores padrão para os Links
Esses atributos determinam as cores para Links não
visitados (LINK), Links já visitados (VLINK) e o Link no momento que ele é ativado
(ALINK). As cores devem ser dadas preferencialmente em valores hexadecimais.

Exemplo:
<BODY link=”#55DD55″ vlink=”AADDAA” alink=”55FF55″>

Adicione esse parâmetro ao <body> da sua página e crie 3 links para conferir o resultado das cores nos links

<HTML>
<head>
</head>
<body bgcolor=”#dddddd” text=”#555555″ link=”#55DD55″ vlink=”AADDAA” alink=”000000″>
<h1>Aula 7</h1>
<h2><font color=”#557755″>Testando as cores</font></h2>
<p>Parágrafo para ter idéia de como vai ficar as cores dentro do parágrafo, escreva o que você quiser aqui.</p>
<p><a href=”http://www.guiky.com.br”>Link 1</a><br/>
<a href=”http://www.guiky.com.br”>Link 2</a><br/>
<a href=”http://www.guiky.com.br”>Link 3</a></p>
</body>
</HTML>

Note que o Link 2 está sendo clicado no momento que foi tirada a imagem (ou seja, ele está ativo), o link 1 está dessa for porque já foi visitado, o link 3 é o que ainda não foi visitado ou seja, o “padrão”.

Descobrindo as cores RGB

Como eu citei anteriormente um grande problema que os usuários tem, é em descobrir o código hexadecimal para a cor escolhida.
Há vários programas que descobrem o código hexadecimal com base na cor escolhida, o DreamWeaver é um exemplo desse tipo de programa. A própria plataforma Blogger também conta com esse “conversor”. Mas se você não usa nem o Blogger, e nem tem o DreamWeaver, eu vou lhe mostrar um jeito fácil de descobrir usando o Paint e a Calculadora do Windows.

Primeiro abra o paint. Vá em cores, depois em editar cores e depois em cores personalizadas (caso seja usuário do XP ou do Vista) Escolha a cor que você deseja

(Estou utilizando o Paint do Windows 7, mas o Paint do XP e do Vista também tem essa opção)

Note que quando você escolhe a cor, em baixo diz a quantidade do RGB, porém está em sistema decimal, você terá que converter para hexadecimal, então, abra a calculadora do Windows.

Na calculadora do Windows, clique em EXIBIR, alterne o modo da calculadora para o modo científico (XP e Vista) ou modo programador (Win7).

Digite os números decimais, uma cor de cada vez. Agora converta os números decimais (16, 86, 32) para os Hexadecimais.
Exemplo: A quantidade de cor vermelha, foi 16 no decimal, o que corresponde a 10 no Hexadecimal.

No meu caso, as cores decimais, Vermelho 16, Verde 86, Azul 32. Tornaram-se Vermelho 10, Verde 56, Azul 20, ou seja: #105620

Agora que eu sei o código (#105620) eu já posso colocar no HTML.

Então é isso pessoal. A nossa sexta aula termina por aqui, até semana que vem galera :D

Veja as outras Aulas:

* Curso HTML – Aula 01
* Curso HTML – Aula 02
* Curso HTML – Aula 03
* Curso HTML – Aula 04
* Curso HTML – Aula 05
* Curso HTML – Aula 06
* Curso HTML – Aula 08
* Curso HTML – Aula 09

Comente!

Deixe uma resposta

O seu endereço de e-mail não será publicado.