+de+uma+p%C3%A1gina.png "Alterando a cor de fundo de um site"){kind=small}
No tutorial passado de HTML, explicamos o que é, para que serve e como usar a majestosa tag <body>, usada para abraçar todos os elementos visuais que serão exibidos para o usuário na tela do navegador.
Como fizemos, e vamos continuar fazendo durante todo o nosso curso online grátis de HTML, a regra aqui é prática total! Só ler a teoria, decorar tags como um robô e não ver as coisas acontecendo na tela é chato demais.
Para aprender programação de verdade, temos que pôr a mão na massa. E neste artigo, vamos dar vida ao seu site! Chega daquela tela branca de hospital: vamos ensinar como mudar a cor de fundo de uma página e desvendar a ciência dos códigos hexadecimais no Front-End.
As Cores em HTML e a Matemática Hexadecimal
Como definir cores no HTML? Resposta Direta: Na web, as cores são formadas pelo sistema RGB (Red, Green, Blue) e são escritas em códigos hexadecimais. Um código hexadecimal começa com o símbolo # seguido de 6 caracteres (números de 0 a 9 e letras de A a F), onde #000000 é preto (ausência de luz) e #FFFFFF é branco puro.
Obviamente, você já usou algum processador de texto, como o Word, ou brincou no Paint e Photoshop. Lá, você clica numa paletinha e a mágica acontece. Mas por trás dos panos (e no código HTML), o computador precisa de um endereço matemático exato para gerar essa cor no monitor.
Existem mais de 16 milhões de cores diferentes disponíveis para o seu site.
Para selecionar uma dessas cores, usamos um código de 6 dígitos que usa o sistema de contagem "Hexadecimal" (Hexa = 16). Diferente do nosso sistema decimal do dia a dia (que vai de 0 a 9), esse sistema tem 16 "números" disponíveis:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Veja os exemplos das cores puras mais clássicas da web:
- Preto Absoluto:
#000000 - Branco Neve:
#FFFFFF - Vermelho Puro:
#FF0000 - Verde Puro:
#00FF00 - Azul Puro:
#0000FF
🛠️ Curiosidade: Eu preciso decorar isso?
"E agora? Pensei que HTML era fácil! Vou ter que decorar 16 milhões de códigos?" Claro que não! Nem os desenvolvedores sêniores decoram isso. Nós usamos ferramentas de "Color Picker" (Seletores de Cores). Você pode consultar paletas completas na Tabela de Cores da Wikipédia ou simplesmente digitar "Color Picker" no Google.
O Atributo bgcolor: Como fazíamos antigamente (Atenção!)
Vamos fazer uma viagem no tempo. Nos primórdios da internet, lá nos anos 90 e início dos anos 2000, nós usávamos atributos de estilo direto nas tags HTML.
A sintaxe clássica e antiga para alterar o plano de fundo (background) era usar o atributo bgcolor dentro da tag <body>. Ficava exatamente assim:
<!-- Exemplo de código obsoleto (Não faça isso em projetos novos!) -->
<body bgcolor="#FF0000">
Este site tem o plano de fundo vermelho!
</body>Isso funcionava? Sim! Inclusive, se você testar hoje, a maioria dos navegadores ainda vai ler por questão de retrocompatibilidade. Mas existe um grande problema: o atributo bgcolor está obsoleto (deprecated) no HTML5.
O HTML foi criado para ser semântico (dizer o que as coisas são). Ele não foi feito para ser maquiador. Misturar o design (cores) junto com a estrutura (tags) cria o que chamamos de Spaghetti Code, deixando a manutenção do site um pesadelo e prejudicando severamente o seu SEO no Google.
Pare de escrever código que o Google odeia!
Aprender tags obsoletas é perda de tempo. O mercado exige HTML5 Semântico e CSS3 puro. Compilamos as melhores práticas profissionais, macetes de Front-End e projetos práticos em um único material para você estudar offline e evoluir de iniciante a Webmaster.
"Eu usava tags velhas achando que tava abafando. Essa apostila limpou meu código e me ajudou a entender de vez como separar o HTML do CSS. Valeu cada centavo!"
— Mariana, Desenvolvedora Front-End.
O Jeito Certo: Como mudar o Fundo usando CSS moderno (background-color)
Para não ser engolido pela evolução da Web, nós delegamos a tarefa das cores para o CSS (Cascading Style Sheets). O CSS é a linguagem de estilo que maquia o seu HTML.
Nós podemos aplicar CSS de várias formas, mas a maneira mais simples para iniciantes (o CSS Inline) é usar o atributo global style e chamar a propriedade background-color. Veja o código de um site moderno e profissional:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Aprendendo Cores - Programação Progressiva</title>
</head>
<!-- Chamamos o CSS dentro do atributo style da tag body -->
<body style="background-color: #2563eb;">
<h1 style="color: #ffffff;">Bem-vindo ao meu site Azul!</h1>
<p style="color: #e2e8f0;">Agora sim, estamos programando do jeito certo.</p>
</body>
</html>Ao salvar e abrir esse código no seu navegador, a renderização oficial que aparecerá na sua tela será exatamente esta:
Bem-vindo ao meu site Azul!
Agora sim, estamos criando sites do jeito certo.
Nomes por Extenso (Named Colors)
Se você quiser criar um protótipo rápido e estiver com preguiça de procurar os códigos hexadecimais, saiba que o HTML/CSS entende o nome das cores em inglês. São cerca de 140 cores nomeadas oficialmente que você pode usar.
Ao invés de digitar: style="background-color: #FF0000;"
Você pode digitar simplesmente: style="background-color: red;"
Exemplos de outras cores prontas para uso imediato: Green, Blue, Pink, Yellow, Black, Maroon, Tomato, Cyan.
💡 Exercício e Desafio: A Cores do Texto
Missão 1: Crie um "Site Restart". Deixe o fundo de uma cor absurdamente gritante (como yellow ou magenta) usando a técnica de CSS background-color.
Desafio Mestre: Antigamente, na mesma época do bgcolor, existia um atributo chamado text que alterava a cor das letras do site todo. Mas ele também "morreu". Apenas sabendo que a propriedade CSS que muda a cor das letras se chama apenas color (como mostramos no código verde acima), você seria capaz de criar um site que tenha o fundo inteiramente preto (#000000) e os textos totalmente brancos (#FFFFFF)? Teste no seu bloco de notas!
🎯 O Que Estudar a Seguir?
Dominar o plano de fundo é só o começo da jornada criativa. Para deixar suas páginas como sistemas de alto nível, siga para os próximos guias:
- COMO USAR IMAGENS DE FUNDO — Aprenda a colocar uma foto como plano de fundo da página.
- INTRODUÇÃO À FORMATAÇÃO DE TEXTO — Tags de negrito, itálico e marcação para deixar seu texto impecável.
- CURSO DE JAVASCRIPT PROGRESSIVO — Quer fazer o fundo do site piscar ou mudar de cor ao clicar em um botão? O JavaScript é quem dá essa inteligência!
❓ Perguntas Frequentes (FAQ)
Posso usar RGB ou RGBA ao invés de Hexadecimal?
rgb(255, 0, 0) para vermelho. A grande vantagem é que você pode usar o RGBA, onde a letra "A" (Alpha) adiciona opacidade (transparência) na cor. Por exemplo: rgba(255, 0, 0, 0.5) geraria um fundo vermelho 50% transparente.
Se o atributo bgcolor parou de ser usado, por que os sites velhos ainda funcionam?
Como colocar um efeito degradê (Gradiente) no fundo do site?
bgcolor só suportam cores chapadas (sólidas). Para criar um degradê moderno, você precisa usar a função linear-gradient() no CSS. Exemplo: background: linear-gradient(to right, red, blue); fará a cor do seu fundo transitar suavemente do vermelho na esquerda para o azul na direita.
