Hoy empezaremos a estudiar un poco sobre colores en html, vamos agregando forma a nuestra web.
nota: es importante resaltar que la siguiente es la forma antigua de dar colores a una web, mezclando el diseño con el html, aprenderemos esto para conocer un poco sobre diseño, ya en html 5 no se utiliza mas este método ya que ahora se utiliza diseño por css, este será un tema que veremos mas adelante. Pero muchas web todavía siguen utilizando este viejo método y es importante conocerlo.
Los colores se forman a partir de tres básicos, que son el rojo, verde y azul. Variando cuanto ponemos de cada uno de ellos formaremos toda la gama de colores. ¿Recuerdan cuando eran pequeños y en la primaria les enseñaban a mezclar colores para generar nuevos?, bien eso mismo hace.
si ponemos:
30% de rojo
80% de verde
y 15% de azul, tendremos un nuevo color.
ejemplo si queremos formar el blanco pondremos:
0% de rojo
0% de verde
0% de azul
y si queremos formar el negro pondremos:
100% de rojo
100% de verde
100% de azul.
Pero como indicaremos estos porcentajes?, para ello utilizaremos 2 caracteres hexadecimal. primero veremos un poco de sistemas numéricos.
El sistema decimal es un sistema numérico formado por 10 símbolos: 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9. es el que comúnmente utilizamos para representar cantidades y estamos mas acostumbrados a realizar operaciones matemática.
El hexadecimal (base 16) es un sistema numérico formado por 16 símbolos:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e y f. Este es uno de los mas usados en informática aparte del sistema binario.
Retomando un poco del tema anterior, decíamos que para representar el porcentaje de los colores se hacían con 2 caracteres hexadecimal, en cada posición puede haber 16 posibilidades así que tenemos: 16*16=256. podemos colocar del:
00 para indicar el 0%
al ff para indicar el 100%
en números decimales tenemos del 0 al 255.
nota: si este tema te confunde un poco te dejare un poco de tranquilidad, no es necesario aprenderse los colores de memoria, ni es necesario entender como se conforma el código para diseñar una web. Pero para aquellos curiosos que les gusta aprender un poco mas y ir siempre mas allá para entenderlo todo, esto le será de mucha utilidad para entender que significa los códigos de colores.
nota2: y para aquellos curiosos les cuento que con las combinaciones de los 6 caracteres hexadecimal se forman 16777216 colores.
Veamos ahora un poco mas de colores:
para conformar el color rojo se representa como #FF0000, porque tiene toda la intensidad de rojo y nada de verde y azul.
Recordemos que los 2 primeros caracteres indican el porcentaje de rojo, los segundos el porcentaje de verde, y los 2 últimos el porcentaje de azul.
Los colores básicos son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Se agrega el símbolo de número al inicio (#) para indicar que lo siguiente es un código hexadecimal de color.
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Para hacer un color más oscuro, reduce la intensidad del componente, dejando los otros dos iguales. Así, el rojo (#FF0000) se hace más oscuro así: #CC0000, #990000, #660000, #330000 etc
ya aprendimos como definir un color, pero...¿cómo ponerlo en acción?.
Recordemos que aprendimos lo que es un atributo de una etiqueta html, ejemplo cuando vimos la etiqueta <a> aprendimos que con la propiedad href podemos indicar la ruta en la cual irá ese link. Practicamente todas las etiquetas tienen atributos aunque no los usemos aún, los iremos descubriendo de apoco.
Hoy trabajaremos con la etiqueta body, la que usamos para definir el cuerpo del html. esta etiqueta tiene 2 atributos que nos interesa analizar:
bgcolor="color": este atributo establece un color de fondo para la página.
text="color": en este atributo podemos indicar el color del texto que tendrá nuestra web.
ya con estos 2 podemos definir el color de fondo, y el color de texto que puede ser de esta forma:
<body bgcolor="#ff0000" text="#00ff00">
ejercicio:
mirando el código anterior, definir que color tiene de fondo y que color tiene el texto, sin ejecutarlo. para ver el resultado pegarlo en un código html y probarlo.
nota: además de el código hexadecimal también se puede utilizar el nombre del color en inglés. por ejemplo:
<body bgcolor="#ffff99" text="green">
¡Hasta la próxima clase!.
No hay comentarios:
Publicar un comentario