Por una Web con equidad...

Deja que tus ideas se vuelvan realidad a escala global, que tu horizonte laboral se extienda en un tiempo relativamente corto y con una inversión relativamente económica. En una emocionante y gratificante aventura por saber los lenguajes "de programación, ...", tan reales y útiles actualmente como un segundo idioma lo es a alguien "tradicionalmente" bilingüe. Con los contenidos temáticos que publicare, sobre HTML, CSS, Ruby, Java, PHP, SQL, C#, ... Novedades, noticias y tendencias.

lunes, 27 de febrero de 2017

Usos adicionales de una Imagen HTML, función y estética.

CONTINUACIÓN...

Usar una imagen como enlace

Para usar una imagen como enlace, simplemente anida la etiqueta <img> dentro de la etiqueta <a>:

<a href="tutorial.html">
 <img src="iconoHTML.gif" alt="animación con el icono de HTML" style="width:42px;height:42px;border:0;">
</a>

Nota: se añade “border:0;” para prevenir que IE9 (y versiones anteriores) muestren un borde alrededor de la imagen (cuando la imagen es un enlace).

Hacer que una imagen flote dentro de un texto

Usa la propiedad CSS float para permitir que una imagen flote (o en un sentido no muy preciso, que la imagen se muestre) ya sea a la izquierda o a la derecha dentro de un elemento:

<p>
<img src="sonriente.gif" alt="Cara sonriente" style="float:right;width:42px;height:42px;"> La imagen flotara a la derecha del texto.
</p>

<p>
<img src="sonriente.gif" alt="Cara sonriente" style="float:left;width:42px;height:42px;"> La imagen flotara a la izquierda del texto.
</p>

Dependiendo de la posición en donde insertes la imagen, entre el texto, y de la cantidad de texto que tenga el elemento que en este ejemplo es un párrafo, el uso de esta propiedad CSS se apreciara mejor.

Nota: El antiguo atributo HTML align fue desaprobado en la versión HTML4 y no es soportado por la versión HTML5…. Hablando de otro tema, el colocar una imagen entre una oración especifica no es igual a hacer lo que se trata en el tema, ni se visualizan del mismo modo.

Mapa de la imagen

Usa la etiqueta <map> para crear un mapa de la imagen. En un mapa se establece que aéreas de la imagen podrán ser cliqueadas.

El atributo name de la etiqueta <map> y el atributo usemap de la etiqueta <img> son los atributos asociados, que se usan para crear la relación entre la imagen y el mapa.

La etiqueta <map> contendrá un cierto número de etiquetas <area>, que son las que definen las áreas de la imagen encima de las cuales se puede hacer clic:

<img src="planetas.gif" alt="Planetas" usemap="#mapadeplanetas" style="width:145px;height:126px;">

<map name="mapadeplanetas">
 <area shape="rect" coords="0,0,82,126" alt="Sol" href="sol.htm">
 <area shape="circle" coords="90,58,3" alt="Mercurio" href="mercurio.htm">
 <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Expliquemos este ejemplo:

El atributo shape

Define que figura encierra mejor el área, es decir, la figura elegida no debe necesariamente igualar el perímetro del area.

El atributo coords

Define las coordenadas que se usaran para dibujar la figura elegida dentro del cuadrante con eje “y” invertido que representa la imagen:

<area figura="rectangulo" coordenadas="(primero la esquina superior izquierda) x,y, (segundo la esquina inferior derecha) x,y" ……>
<area figura="circulo" coordenadas="(primero el el punto central) x,y, (segundo el diámetro de la circunferencia) c" ……>

Resumen de lo aprendido

Usa el elemento HTML <img> para definifir una imagen
Usa el atributo HTML src para definir el URL de la imagen
Usa el atributo HTML alt para definir un texto alternativo para una imagen, para cuando esta no se muestre por alguna razón
Usa los atributos HTML width y height para definir el tamaño de la imagen
(alternativamente) Usa las propiedades CSS width y height para definir el tamaño de la imagen
Usa la propiedad CSS float para que la imagen flote
Usa el elemento HTML <map> para definir el mapa de una imagen
Usa el elemento HTML <area> para definir las areas cliqueables del mapa de una imagen
Usa el atributo usamap del elemento HTML <img> para referirte a un mapa de la imagen

Nota: cargar las imágenes lleva tiempo. Las imágenes grandes pueden ralentizar tu pagina. Usa las imágenes cuidadosamente.

fin de imágenes - expandido, a continuación mas temas...

Atributos básicos de una Imagen HTML, esta se enlaza no se inserta

Tutorial de HTML y principalmente su version 5

Imágenes expandido

Imagenes JPG

Imagenes GIF

Imagenes PNG

Sintaxis

En HTML, las imágenes se definen con la etiqueta <img>.

El elemento <img> es una elemento vacio, no tiene una etiqueta de final. Lo único que contiene, dentro de la etiqueta <a>, son atributos.

El atributo src especifica el URL (dirección web) de la imagen:

Ejemplo:

<!DOCTYPE html>
<html>
 <body>
  <h2>Una Montaña Espectacular</h2>
  <img src="foto_montaña.jpg" alt="Panorama montañoso" style="width:304px;height:228px;">
 </body>
</html>

El atributo alt

El atributo alt provee un texto alternativo para una imagen, si el usuario por alguna razón no puede visualizarla (a causa de una conexión lenta, un error en el atributo src, o si el usuario un lector de pantalla).

Si un navegador no puede encontrar una imagen, mostrara el valor del atributo alt:

El atributo alt se requiere para que una pagina web sea validada correctamente.

Lectores de pantalla

Un lector de pantalla es un programa software que lee el código HTML, convierte el texto, y hace posible que el usuario “escuche” el contenido. Los lectores de pantalla son útiles para personas ciegas, con problemas visuales, o sin capacidad de aprendizaje.

El tamaño de la imagen – ancho y alto

Puede usar el atributo style para especificar el ancho y el alto de una imagen.

Los valores se pueden especificar en pixeles, colocando px luego del valor:

Alternativamente, puedes usar los atributos width y height. Con estos, la medida por defecto es el pixel:

Nota: siempre especifica el ancho y el alto de una imagen. Si el ancho y el alto no se especifican, la pagina parpadeara (se reajustara) al cargar las imágenes.

Los atributos width y height, o el atributo style?

Ambas formas son validas en HTML5.

Sin embargo, te sugiero usar el atributo style. Esto previene que las hojas de estilo internas o las externas cambien el tamaño actual u original de las imágenes:

<!DOCTYPE html>
<html>
 <head>
  <style>
   img { 
    width:100%; 
   }
  </style>
 </head>
 <body>
  <img src="html5.gif" alt="Icono de HTML5" style="width:128px;height:128px;">
  <img src="html5.gif" alt="Icono de HTML5" width="128" height="128">
 </body>
</html>

Cuando las imágenes están dentro de otra carpeta

Si no se especifica lo contrario, el navegador espera encontrar dicha imagen en la misma carpeta en donde se encuentra la pagina web del momento.

Sin embargo, es común almacenar las imágenes en una subcarpeta. En tal caso, debes incluir el nombre de la carpeta en el atributo src:

Cuando las imágenes están en otro servidor.

Algunos sitios web almacenan sus imágenes en servidores de imágenes…

Pero lo importante en cuanto a este otro tema es que tienes acceso a imágenes de cualquier dirección web del mundo:

Podrás leer mas sobre las rutas de archivo en una sección posterior dedicada a las rutas de archivo en HTML.

Imágenes animadas

El estándar GIF es tanto para imágenes como para animaciones:

PARTE 2, a continuación...

viernes, 24 de febrero de 2017

Usa como Enlaces otros elementos HTML

Tutorial de HTML y principalmente su version 5

Enlaces HTML - expandido

CONTINUACIÓN...

Usar imágenes como si fuesen enlaces

Es común usar imágenes como enlaces:

<a href="tutorialHTML5.asp">
 <img src="sonriente.gif" alt="imagen que enlaza al tutorial de HTML5" style="width:42px;height:42px;border:0;">
</a>

Nota: border:0; se añade para prevenir que IE9 (y sus versiones anteriores) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).

Creando un marcapaginas

Los marcapaginas HTML se usan para permitirles a los lectores saltarse a partes específicas de una pagina Web.

Los marcapaginas pueden ser utiles si tu pagina web es muy extensa.

Para beneficarte de los marcapaginas en tu página, primero debes añadir el marcapaginas al elemento deseado, y luego crear un enlace que refiera hacia dicha señal o marcapaginas.

Cuando el enlace se cliquea, la pagina se desplazara a la locación que tiene el marcapaginas.

Ejemplo:

Primero, crea un marcapaginas utilizando el atributo id:

<h2 id="tips">Seccion con tips utiles para ti</h2>

Luego, crea un enlace que refiera hacia dicho marcapaginas, desde la misma pagina:

<a href="#tips">Dale un vistazo a la seccion de tips</a>

O, crea un enlace que te mande hasta el marcapaginas, desde otra pagina:

<a href="tutorialHTML5.html#tips"> Dale un vistazo a la seccion previa de tips</a>

Rutas ajenas a la página web actual

Las páginas externas pueden ser referenciadas con una URL absoluta o con una ruta relativa a la corriente o presente pagina web:

Este ejemplo usa una URL absoluta para enlazarse a una pagina web externa, es decir, un archivo HTML independiente, el cual puede o no estar almacenado localmente, aunque usar una URL absoluta en el primer caso no es algo que se aconseje, lo veremos luego:

<a href="http://www.ejemplo.com/html/tutorial.html">Tutorial HTML</a>
Este ejemplo se enlaza a una pagina web externa, es decir, un archivo HTML independiente, que está almacenado localmente, alojado en la carpeta “html” del presente sitio web, termino NO igual a “pagina web”, una página web se encuentra dentro de un sitio web, los dos son términos abstractos distintos, pero el segundo termino(sitio web), podríamos decir que se refiere a una configuración de hardware y software, que forma un servidor o computador dedicado, sobre la cual funciona o se establece un sitio web:

<a href="/html/tutorial.html">Tutorial HTML</a>

Para quien esté familiarizado a su disco duro, en el ejemplo de arriba se omite lo que va justo antes de “/html” a razón de que se entiende similar a “C:\html\tutorial.html”, en donde “C:” que es la raíz de todo, puede omitirse “\html\tutorial.html” y equivaldría al contenedor físico-lógico para las páginas web del servidor, es decir, vagamente hablando, equivaldría al sitio web mismo “www.ejemplo.com\html\tutorial.html”. No es lo mismo “html\tutorial.html” que “\html\tutorial.html”, lo veremos luego. Puedes sustituir las “\”s por “/”s a fin facilitar la comprensión.
Este ejemplo enlaza a una pagina web externa, es decir, un archivo HTML independiente, que está almacenado localmente, alojado en la misma carpeta en donde se encuentra la presente pagina web:

<a href="tutorial.html">Tutorial HTML</a>

Así que agrega algunos marcapaginas, y suma funcionalidad a tu pagina.

Podrás leer mas sobre las rutas de archivo en una sección posterior, dedicada a las rutas de archivo en HTML.

Resumen de lo aprendido

Usa el elemento <a>para definir un enlace
Usa el atributo href para definir la dirección del enlace
Usa el atributo target para definir en donde se abrirá el documento enlazado
Usa el elemento <img> adentro de un elemento <a>, para usar la imagen como un enlace
Usa el atributo id (id=“valor”) para definir marcapaginas en una pagina
Usa el atributo href (href=“#valor”) para enlazar hacia un marcapaginas

final de Enlaces HTML - expandido, a continuación mas temas...

Estiliza el Enlace HTML según su estado mas presentar lo enlazado

Tutorial de HTML y principalmente su version 5

Enlaces HTML

Los enlaces se hallan en casi todas las paginas web. Los enlaces le permiten a los usuarios hacerse camino de una pagina a otra, a base de clicks.

Hiperenlaces

Los enlaces HTML son hiperenlaces.

Puedes hacer click sobre un enlace y pasar a otro documento.

Cuando mueves el puntero encima de un enlace, el puntero se convertirá en una mano pequeña.

Nota: un enlace no tiene por que ser texto. Puede ser una imagen o cualquier otro elemento HTML.

Sintaxis

En HTML, los enlaces se definen con la etiqueta <a>:

<a href="url">texto del enlace</a>

Ejemplo:

<a href="http://www.ejemplo.com/html/">Visita nuestro tutorial de HTML</a>

El atributo href específica la dirección de destino (http://www.ejemplo.com/html/) del enlace.

El texto del enlace es la parte visible (Visita nuestro tutorial de HTML).

Hacer un clic encima del texto del enlace, te enviara a la dirección especificada.

Nota: sin un barra inclinada hacia adelante (/) colocada al final de una dirección que apunta a una subcarpeta (en el ejemplo, la carpeta llamada html), tu podrías generar dos peticiones al servidor (computador dedicado). Muchos servidores añadirán automáticamente una barra inclinada hacia delante a la dirección, y luego crearan una petición nueva.

Enlaces locales

El ejemplo de arriba usa una URL absoluta (una dirección web completa).

Un enlace local enlaza al mismo “sitio web” en donde se encuentra, y se especifica con una URL relativa (sin http://www. ...):

<a href="imagenes_html.asp">Hablemos de las imágenes en HTML</a>

Los colores HTML de los enlaces

Por defecto, un enlace se mostrara según lo siguiente, en todos los navegadores:

Un enlace no visitado esta azul y subrayado
Un enlace visitado esta purpura y subrayado
Un enlace activado esta rojo y subrayado, hasta soltar el clic

Tú puedes cambiar la apariencia por defecto de estos, aplicando estilos:

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}

a:visited {color:pink; background-color:transparent; text-decoration:none}

a:hover   {color:red; background-color:transparent; text-decoration:underline}

a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>

Expliquemos este ejemplo:

a:link

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia inicial.

a:visited

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia luego de ser visitado su enlace.

a:hover

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia cuando el puntero esta encima.

a:active

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia cuando se hace un clic encima o se mantiene presionado.

Todo esto con lenguaje CSS y dentro de un elemento HTML <style>.

El atributo target

El atributo target específica en donde se mostrara o abrirá el destino del enlace.

El atributo target puede tener uno de los siguientes valores:

_blank – el documento enlazado se abre en una ventana o pestaña nueva
_self – el documento enlazado se abre en la misma ventana/pestaña en donde el enlace fue cliqueado (esta viene por defecto)
_parent – el documento enlazado se abre en el cuadro o división que contiene a esta otra
_top – el documento enlazado se muestra o abre en la división o cuadro principal, que está en el tope de la jerarquía dentro de la ventana
El nombrededivision – el documento enlazado se abre en una división o cuadro que cuenta con un nombre

Este ejemplo abrirá el documento enlazado en una nueva ventana/pestaña del navegador:

<a href="http://www.ejemplo.com/" target="_blank">Visita el sitio web Ejemplo y vuélvete uno!</a>

Consejo: si tu pagina está confinada dentro de un subdivisión, tu puedes usar target=”_top” para sacarla de cuales quiera subdivisiones que existan dentro de la ventana del navegador:

<a href="http://www.ejemplo.com/html/" target="_top">Ya creamos un tutorial de HTML5!</a>

PARTE 2, a continuación...

Da Estilo al documento HTML entero con estas propiedades CSS, elementos y atributos html

Tutorial de HTML y principalmente su version 5

Estilos en HTML – con CSS

Dando estilo con CSS en HTML

CONTINUACIÓN...

Bordes CSS

La propiedad CSS border coloca un borde alrededor de un elemento HTML:

p {
 border: 1px solid powderblue;
}

Acolchado o relleno CSS

La propiedad CSS padding establece un relleno o acolchado (un espacio) entre el texto y el borde de un elemento:

p {
 border: 1px solid powderblue;
 padding: 30px;
}

Márgenes CSS

La propiedad CSS margin define un margen (otro espacio) luego de, fuera de, o exterior a el borde de un elemento:

p {
 border: 1px solid powderblue;
 margin: 50px;
}

El atributo id

Para aplicar un estilo específico a un elemento especial, añade el atributo id al elemento:

<p id="p01">Soy distinto</p>

Luego define un estilo para el elemento que tiene ese id específico:

#p01 {
 color: blue;
}

Nota: el id de un elemento debería ser único dentro de una página, de modo que el seleccionador de ids (#id (#p01, en el caso anterior)) se utilice para seleccionar ¡un único elemento!

El atributo class

Para aplicar un estilo a un tipo especial de elementos, añade un atributo class al elemento:

<p>Este es un parrafo.</p>
<p>Este es un párrafo.</p>

<p class="presunción">Ella y yo somos distintos</p>

<p>Este es un párrafo.</p>

<p class="presunción ">El y yo somos distintos</p>

Luego define un estilo para los elementos que pertenecen a esa clase especifica:

p.presunción {
 color: red;
}

Referencias externas

Las hojas de estilo externas pueden ser referenciadas con una URL absoluta o con una ruta relativa a la corriente o presente pagina web:

Este ejemplo usa una URL absoluta para enlazarse a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para más información, sino en un archivo propiamente CSS, el cual puede o no estar almacenado localmente, aunque usar una URL absoluta en el primer caso no es algo que se aconseje, lo veremos luego:

<link rel="stylesheet" href="http://www.ejemplo.com/html/estilos.css">
Este ejemplo se enlaza a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para mas información, sino en un archivo propiamente CSS que está almacenado localmente, alojada en la carpeta “css” del presente sitio web, termino NO igual a “pagina web”, una página web se encuentra dentro de un sitio web, los dos son términos abstractos distintos, pero el segundo termino(sitio web), podríamos decir que se refiere a una configuración de hardware y software, que forma un servidor o computador dedicado, sobre la cual funciona o se establece un sitio web:

<link rel="stylesheet" href="/css/estilos.css">

Para quien esté familiarizado a su disco duro, en el ejemplo de arriba se omite lo que va justo antes de “/css” a razón de que se entiende similar a “C:\css\estilos.css”, en donde “C:” que es la raíz de todo, puede omitirse “\css\estilos.css” y equivaldría al contenedor físico-lógico para las páginas web del servidor, es decir, vagamente hablando, equivaldría al sitio web mismo “www.ejemplo.com\css\estilos.css”. No es lo mismo “css\estilos.css” que “\css\estilos.css”, lo veremos luego. Puedes sustituir las “\”s por “/”s a fin facilitar la comprensión.
Este ejemplo enlaza a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para mas información, sino en un archivo propiamente CSS que está almacenado localmente, alojada en la misma carpeta en donde se encuentra la presente pagina web:

<link rel="stylesheet" href="estilos.css">

Podrás leer mas sobre las rutas de archivo en una sección posterior dedicada a las rutas de archivo en HTML.

Resumen de lo aprendido

Usa el atributo HTML style para la estilización en línea
Usa el elemento HTML <style> para definir código CSS interno, que no es en línea
Usa el elemento HTML <link> para referir un archivo CSS independiente y/o externo
Usa el elemento HTML <head> para anidar los elementos <style> y <link>
Usa la propiedad CSS color para los colores de texto
Usa la propiedad CSS font-family para los tipos de letra
Usa la propiedad CSS font-size para los tamaños de texto
Usa la propiedad CSS border para los bordes de los elementos
Usa la propiedad CSS padding para espaciar hacia dentro de los bordes de los elementos
Usa la propiedad CSS margin para espaciar hacia fuera de los bordes de los elementos

Etiquetas HTML relacionadas al estilo

Etiqueta	Descripción
<style>	Define información de estilo para un documento HTML
<link>	Define un enlace entre un documento HTML y un recurso externo tal, como una hoja de estilo

final de Estilos en HTML – con CSS, a continuación mas temas...

Aplica Estilo, a la letra por ejemplo, en HTML empleando codigo CSS

Tutorial de HTML y principalmente su version 5

Estilos en HTML – con CSS

Dando estilo con CSS en HTML

CSS significa Hojas de Estilo en Cascada.

CSS describe como se deben mostrar los elementos HTML en la pantalla, en el papel, o en otro medio.

CSS nos ahorra un montón de trabajo. Con este puedes controlar el diseño visual de varias páginas web con una sola instancia de este lenguaje de diseño grafico.

El código CSS puede ser añadido a los elementos HTML de 3 maneras:

En línea – al usar el atributo style en los elementos HTML
Interna – al usar un elemento <style> en la sección <head>
Externa – al usar un archivo CSS externo

Lo manera más común de añadir el código CSS, es desde archivos CSS independientes que contienen el código CSS o en otras palabras, los estilos para la pagina o páginas web. Sin embargo, acá usaremos la estilización interna y en línea, porque para una demostración resulta más fácil, y es más sencillo como para que lo intentes en esta guía de HTML (HTML5).

Aviso: podrás aprender mucho más sobre CSS en nuestra futura guía de CSS.

CSS en línea

Un código CSS en línea se usa para aplicar un estilo único a un elemento HTML individual.

Un código CSS en línea emplea el atributo style de un elemento HTML.

Este ejemplo establece el color del texto del elemento <h1> como azul:

<h1 style="color:blue;">
 Este es un encabezado azul
</h1>

CSS interno

Un código CSS interno se usa para definir un estilo para una pagina HTML individual.

Un código CSS interno se define en la sección <head> de una pagina HTML, dentro de un elemento <style>:

<!DOCTYPE html>
<html>
 <head>
  <style>
   body {background-color: powderblue;}
   h1   {color: blue;}
   p    {color: red;}
  </style>
 </head>

 <body>
  <h1>
   Este es un encabezado
  </h1>
  <p>
   Este es un parrafo.
  </p>
 </body>
</html>

CSS externo

Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.

Al usar una hoja de estilo externa, tú puedes cambiar la apariencia de todo un sitio web ¡con solo cambiar un archivo!

Para usar una hoja de estilo externa, añade un enlace hacia ella en la sección <head> de una página HTML:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="estilos.css">
 </head>
 <body>
 <h1>
  Este es un encabezado
 </h1>
 <p>
  Este es un parrafo.
 </p>
 </body>
</html>

Una hoja de estilo externa puede ser escrita en cualquier editor de texto. El archivo no debe contener ningún código HTML, y debe ser guardado con la extensión “.css”.

Abajo se muestra como luce el archivo CSS de arriba, “estilos.css”:


body {
 background-color: powderblue;
}

h1 {
 color: blue;
}

p {
 color: red;
}

Tipos de letra CSS

Estas 3 propiedades te permitiran estilizar tus fuentes (tipos de letra):

La propiedad CSS color define el color de texto que se usara.
La propiedad CSS font-family define el tipo de letra que se usara.
La propiedad CSS font-size define el tamaño de texto que se usara.

Ejemplo:

<!DOCTYPE html>
<html>
 <head>
  <style>
   h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
   }
   p  {
    color: red;
    font-family: courier;
    font-size: 160%;
   }
  </style>
 </head>
 <body>
  <h1>Este es un encabezado</h1>

  <p>Este es un parrafo.</p>
 </body>
</html>

PARTE 2, a continuación...

Los Colores en HTML

Tutorial de HTML y principalmente su version 5

Los Colores en HTML

En HTML, un color puede ser especificado mediante su nombre (el nombre del color), su valor RVA (RGB, en ingles), o su valor Hex (hexadecimal) compuesto.

Nombres de color

En HTML, un color puede ser especificado mediante su nombre (el nombre del color):

Color	Nombre (los nombres deben ser ingleses)
	Blue
	Orange
	Cyan
	Yellow
	Red

HTML soporta 140 nombres de color, estándares.

Valores RVA (RGB, en ingles)

En HTML, un color también puede ser especificado mediante su valor RVA (RGB, en ingles), valor que responde a esta fórmula: rva(rojo, verde, azul).

Cada parámetro (rojo, verde, y azul) puede tener un valor de 0 a 255, el cual indica la intensidad del color en donde se encuentra o el color que representa en la formula.

Por ejemplo: rva(255, 0, 0), se muestra como rojo, porque el rojo en la formula esta en su valor más alto (255) y los otros colores están en 0.

Para mostrar el color negro, todos los parámetros de color deben estar en 0, así: rva(0, 0, 0).

Para mostrar el color blanco, todos los parámetros de color deben estar en 255, así: rva(255, 255, 255).

Ejemplo:

Color	RVA (RGB, en ingles; solo entendera el ingles, no lo pongas en español)
	rgb(0,255,255)
	rgb(0,0,255)
	rgb(0,255,0)
	rgb(255,0,0)
	rgb(255,255,0)

Los varios tonos del color gris muchas veces se obtienen al usar valores iguales en las 3 fuentes de luz, es decir los parámetros de la formula:

Color	RVA (RGB, en ingles; solo entendera el ingles, no lo pongas en español)
	rgb(255,255,255)
	rgb(200,200,200)
	rgb(128,128,128)
	rgb(90,90,90)
	rgb(0,0,0)

Valores Hex (hexadecimales) compuestos

En HTML, un color también puede ser especificado mediante su valor Hex (hexadecimal) compuesto, que se especifica de la siguiente manera: # RRVVAA. En donde RR (rojo), VV (verde) y AA (azul) son, cada grupo, valores hexadecimales de 00 a FF (lo mismo que en el sistema decimal, de 0-255... es decir, los rangos inclusivos, son equivalentes de acuerdo a la conversión).

Por ejemplo, #FF0000 se muestra como rojo, porque el rojo está en su valor más alto (FF) y los otros colores están en su valor más bajo (00).

Color	Hex
	#00FF00
	#FFFF00
	#FF0000
	#00FFFF
	#0000FF

Los varios tonos del color gris muchas veces se obtienen al usar valores iguales en las 3 fuentes de luz, es decir los parámetros de la formula:

Color	Hex
	#000000
	#404040
	#808080
	#CCCCCC
	#FFFFFF