Tarea #06: Códigos de color HTML

Material necesario para realizar la tarea:

El capturador de pantalla PicPick
El bloc de notas de windows o este editor de código: Sublime Text: x32 - x64
Enlaces: htmlcolorcodes | Teoría del color | Códigos de color

Los colores en páginas web (CSS) pueden especificarse utilizando uno cualquiera de estos métodos:

Escribiendo el color en notación hexadecimal, por ejemplo, el rojo se escribe #FF0000
Escribiendo el color en notación RGB (sigla en inglés de red, green, blue, en español «rojo, verde y azul») por ejemplo, el rojo se escribe rgb(255,0,0)
Escribiendo el color en notación RGBA (A = canal alpha) por ejemplo, el rojo se escribe rgba(255,0,0,1)
Escribiendo el color en notación HSL (del inglés Hue, Saturation, Lightness – Matiz, Saturación, Luminosidad) por ejemplo, el rojo se escribe hsl(0,100%,50%)
Escribiendo el color en notación HSLA (A = canal alpha) por ejemplo, el rojo se escribe hsla(0,100%,50%,1)
Escribiendo el color con su nombre en inglés, por ejemplo, el rojo se escribe red

Abre el bloc de notas o mejor, Sublime Text
Copia, tal cual, el código que aparece aquí.
Guarda el archivo con el nombre: colores_web.html y visualizalo así con un navegador.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Colores Web</title>
        <style>
            body { 
                background: #555555;
            }
            .bloque {
                display   : flex;
                flex-wrap : wrap;
            }
            div .caja {
                width           : 100px;
                height          : 100px;
                display         : flex;
                justify-content : center;
                align-items     : center;
                font-size       : 4em;
                margin          : 10px;
            }
            .c1 { background: #ff0000; color: #000000; }
            .c2 { background: #00ff00; color: #000000; }
            .c3 { background: #0000ff; color: #000000; }
        </style>
    </head>
    <body>
        <h1>Colores HTML para la Web</h1>
        <div class="bloque">
            <div class="caja c1">A</div>
            <div class="caja c2">B</div>
            <div class="caja c3">C</div>
        </div>
    </body>
</html>

El ejercicio consiste en:

Crear nuevo texto y cambiar el color de la letra (para eso debes utilizar la propiedad color)
Crear nuevos rectángulos y cambiar su color de fondo (utiliza la propiedad background)
Si quieres, puedes cambiar el color de fondo de la página (body)
Debes utilizar, al menos, estos 16 colores, tanto para el texto como para los rectángulos.
También puedes utilizar esta tabla o esta otra con distintas unidades.
Esta herramienta online te puede ayudar a crear tus propios colores

Guarda el archivo del ejercicio 1 con el nombre: esquema_color.png, y el archivo del ejercicio 2 con el nombre colores_web.html en la carpeta correspondiente, más tarde entregarás esta tarea en el aula virtual.

Prácticas

Tarea #06: Códigos de color HTML

Los colores en páginas web (CSS) pueden especificarse utilizando uno cualquiera de estos métodos:

Ejercicio 1: Captura colores

Ejercicio 2: Crea tus colores