3con14

  • Inicio
    • Tutoriales
  • Hard · Soft · S.O.
  • Ofimática Intermedia
  • Imagen Digital
  • Diseño Web
  • Prácticas
 
 
Curso 2021/2022 | 1º BACHILLERATO

 Tecnologías de la Información y la Comunicación | TIC-I 


  • Inicio
  • Tarea #06: Códigos de color HTML

Prácticas

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
Ejercicio 1: Captura colores

Ejercicio 1: Captura colores

Con el capturador PicPick termina el esquema de colores que aparece en la siguiente imagen:

colores codigo

Ejercicio 2: Crea tus colores

Ejercicio 2: Crea tus colores

  1. Abre el bloc de notas o mejor, Sublime Text
  2. Copia, tal cual, el código que aparece aquí.
  3. 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.

  • Anterior
  • Siguiente

Recursos

  • Capturador (PicPick)
  • Capturador (FastStone)
  • Capturador (ShareX)
  • Visor (Image Viewer)
  • Visor pdf (Acrobat)
  • Visor pdf (Sumatra)
  • Compresor (7zip)
  • Reproductor (VLC)
  • Ofimática (LibreOffice)

  • Editor Sublime Text: x32
  • Editor Visual S. Code · Ext
  • Editor Markdown: Dillinger
  • Editor online CodePen

  • Navegador Firefox
  • Navegador Chrome
  • Navegador Opera
  • Navegador Vivaldi
  • Navegador Brave

  • Filehippo
  • TinyPNG
  • Online-Convert

  • Drive (Google)
  • onDrive (Microsoft)
  • Dropbox

(cc) 3con14, esta obra está bajo licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Inicio
    • Tutoriales
  • Hard · Soft · S.O.
  • Ofimática Intermedia
  • Imagen Digital
  • Diseño Web
  • Prácticas