Como fizemos, e vamos continuar fazemos, durante todo nosso curso online grátis de HTML, vamos dar exemplos práticos de código, afinal, só ler teoria não é muito legal.
Para aprender, temos que realmente por a mão na massa, escrever códigos HTML e criar sites.
Neste tutorial, vamos ensinar como mudar a cor de fundo de um site, e falaremos mais da relação das cores com o HTML.
+de+uma+p%C3%A1gina.png "Alterando a cor de fundo de um site com o atributo \"bgcolor\" da tag body"){kind=small}
As cores em HTML
Obviamente você já usou algum processador de texto, como o Microsoft Word, ou de desenho, como Paint ou Photoshop.Esses, e uma infinidade de outros programas e serviços possuem um esquema de cores, onde o usuário pode definir a cor de um texto, figura etc.
Da mesma maneira, essas cores também existem em sites em HTML, onde podemos alterar a cor de texto, links e de fundo (que é o que vamos fazer neste tutorial de HTML).
Existem 16 milhões de cores diferentes.
Para selecionar uma dessas cores, vamos usar um código de 6 números. Esses números, porém, são hexadecimais.
Ou seja, cada um deles varia de 0 até F (diferente dos números decimais, que variam de 0 até 9).
O nome 'hexa' quer dizer 16, pois esse sistema de contagem possui 16 números: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Para representar uma cor, colocamos o símbolo # antes desses 6 números. Exemplos de cores:
Preto: #000000
Branco: #FFFFFF
Vermelho: #FF0000
Verde: #00FF00
Azul: #0000FF
"E agora, tenho que decorar? Pensei que tivessem dito que HTML era fácil!!", pode pensar o caro leitor.
Obviamente, ninguém vai sair decorando as cores por aí, para isso existem as Tabelas de Cores.
Aqui você poderá encontrar uma tabela com diversas cores e tonalidades:
http://en.wikipedia.org/wiki/Web_colors
O atributo bgcolor - Como mudar a cor do plano de fundo (background) de um site
Se lembrar bem, dissemos que a tag <body> vai definir as características do corpo de um site, das coisas que serão visíveis e acessíveis ao usuário.
Ora, a cor de um plano de fundo faz parte do corpo de uma página, pois será exibida para o usuário.
Portanto, para alterar a cor de fundo de um site, devemos alterar algum atributo da tag body.
E esse atributo é o bgcolor (background color).
A sintaxe do uso do atributo bgcolor na tag body é:
<body bgcolor="COR"> </body>
E no lugar de COR, colocamos o código hexadecimal da cor.
Por exemplo, vamos criar um site que tenha o fundo vermelho.
Checando a tabela de cores, é fácil ver que o código da cor vermelha é: #FF0000
Portanto, um site com fundo vermelho seria:
<!DOCTYPE html> <html> <head> <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title> <meta name="description" content="Como alterar a cor do plano de fundo de um site em HTML"> </head> <body bgcolor="FF0000"> Este site tem o plano de fundo vermelho! </body> </html>Se salvar o código com a extensão .htm ou .html e rodar, verá que o site que você criou terá o fundo vermelho.
Simples, não?
E além de simples, o atributo "bgcolor" é bem útil e poderoso, pois podemos usar para alterar a fonte de diversas outras coisas, como tabelas, textos etc.
Veremos mais sobre isso no decorrer de nosso curso de HTML.
Alterando a cor de fundo usando o nome das cores
Visando facilitar nossa vida, é possível definir cores no atributo bgcolor através do nome das cores, ao invés de códigos hexadecimais. Obviamente, não existe 16 milhões de nomes de cores diferentes, por isso essa maneira de definir uma cor só serve para as cores mais usadas.Volte na URL das tabelas de cores e note que há nomes para algumas cores:
http://en.wikipedia.org/wiki/Web_colors
O exemplo de código passado teria o mesmo efeito se fizéssemos:
<body bgcolor="Red">
Exemplos de outros nomes que você poderá usar:
Green, Blue, Pink, Yellow, Black, Maroon etc
Bem mais prático, não?
Exercício de HTML
Crie um site restart. Ou seja, um bem colorido.
Escolha uma cor de doer na vista.
Desafio de HTML
Existe um atributo da tag <body> chamado 'text', que como o próprio nome pode sugerir, altera a cor do texto de uma página do site.
Vamos ensinar a alterar a cor dos textos em um próximo tutorial de HTML de nosso curso.
Mas apenas sabendo do nome desse atributo e com a dica de que seu uso é parecido com o do atributo bgcolor, você seria capaz de criar um site cujo plano de fundo fosse preto e a cor do texto branca?
8 comentários:
HHUHUHUHU consegui de primeira
levando em conta que mais de um comando se da por um espaço na tag body apenas coloquei text:FFFF
Muito boa esta aula, eu consegui cumprir o desafio e usei o atributo text na tag body. não vou dizer como para não atrapalhar o desafio dos meus colegas.
Obrigado equipe HTML progressivo
Obrigado
Tem como colocar duas cores de fundo do site ?
Qual o comando para fazer um rodapé para colocar informações?
Como alterar a cor somente do cabeçalho e do rodapé?
Não consegui 😓
Vc tem que criar uma TAG em css para poder mudar cor tamanho e outros
Postar um comentário