Pintando la Web: El Uso del Color

¡Hola, Maker! Has aprendido a crear el esqueleto de tu página, a organizar los textos y a estructurar datos en tablas. Ahora llegó el momento más divertido: ¡darle vida y personalidad usando colores! Hoy descubriremos cómo pintar textos, fondos y bordes como un profesional.

1. ¿Cómo le pedimos un color a la computadora? 🎨

En el mundo de las ICT y el diseño web, no solo le decimos "azul" o "rojo" al navegador. Tenemos tres formas mágicas de elegir el tono exacto para nuestra pantalla:

• Por su nombre en inglés (Color Keywords): Es la forma más fácil. Si quieres rojo, escribes red; si quieres azul, escribes blue. ¡Hay más de 140 nombres válidos!
• Por su código Hexadecimal (HEX): Es una clave secreta que empieza con un numeral (#) seguido de 6 letras o números. Por ejemplo, el naranja de nuestra marca Andrés Erira es #e67e22.
• Por su mezcla RGB: Funciona igual que las témperas en el colegio. Le dices a la computadora cuánta cantidad de Rojo (Red), Verde (Green) y Azul (Blue) quieres mezclar, usando números del 0 al 255. Ejemplo: rgb(230, 126, 34).

2. Pintando Textos y Fondos (El atributo style)

Para aplicar color, usamos nuestro viejo amigo el atributo style="". Dentro de las comillas usaremos dos propiedades clave:

• color: Sirve exclusivamente para cambiar el color de las letras (Texto).
• background-color: Cambia el color de la caja o el fondo del elemento.

Ejemplos sencillos para tu cuaderno de código:

<h2 style="color: red;">Este es un título de color rojo brillante</h2>

<p style="color: #e67e22;">Este párrafo usa el código HEX naranja de Mentor Maker.</p>

<div style="background-color: rgb(44, 62, 80); color: white; padding: 15px;">
    Esta es una caja con fondo azul oscuro y texto blanco para que se lea perfecto.
</div>

3. ¡Subiendo de nivel! Colores en las Tablas 📊

¿Recuerdas el taller de las tablas? Podemos pintar filas enteras (<tr>), celdas individuales (<td>) e incluso ponerle color a las líneas divisorias (bordes) para resaltar alertas técnicas o datos de sensores.

Mira cómo se programa una tabla colorida:

<table style="border: 3px solid #e67e22; border-collapse: collapse; width: 100%;">
    <thead>
        <!-- Pintamos todo el encabezado de gris oscuro -->
        <tr style="background-color: #2c3e50; color: white;">
            <th>Sensor Robótico</th>
            <th>Estado en Vivo</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ultrasonido Arduino</td>
            <!-- Pintamos solo esta celda de verde porque todo está bien -->
            <td style="background-color: #2ecc71; color: white; font-weight: bold;">ACTIVO</td>
        </tr>
    </tbody>
</table>

Resultado visual en la pantalla de tus alumnos: