HTML (Lenguaje de marcas, 8ª parte): Imágenes y color en el WWW

Aprenderemos cómo especificar un determinado color de entre 16 millones posibles y ponerlo como fondo de la página, o como color del texto. También veremos como manipular imágenes cambiando su tamaño o poniendo texto a su alrededor. Después se verá como controlar los bordes y tamaño de las imágenes. Veremos como poner un texto alternativo a la imagen, crear imágenes con varias zonas activas (imágenes mapa) y cómo emplear GIFs animados. Al terminar seremos unos expertos en el arte de las imágenes y el color en el WWW.

Hasta ahora hemos aprendido a crear páginas WEB compuestas por texto, encabezados, diferentes estilos, e incluso a enlazar varias páginas entre sí. También hemos aprendido a insertar imágenes de una manera sencilla en una página. Sin embargo todavía podemos aprender mucho más aprovechar todas las capacidades que nos ofrece el lenguaje HTML para convertir nuestra página en una obra de arte gráfico.

El diseño con programas de creación de imágenes y de retoque fotográfico está fuertemente ligado a la creación de páginas Web. Más aún cuando nuestro objetivo será, no sólo crear una página atractiva, sino de calidad técnica y que cargue en poco tiempo para no provocar esperas excesivas a a los visitantes. La manera de conseguir este objetivo será un buen conocimiento del lenguaje HTML y de todas sus posibilidades, y por ello dedicaremos un buen número de páginas a este tema, empezando por los siguientes temas:

  • Imágenes y colores de fondo: Extensiones de la etiqueta <BODY>
  • Imágenes inline: La etiqueta <IMG>
  • Alineamiento de imágenes.
  • Texto que envuelve a las imágenes
  • Cómo controlar el tamaño de las imágenes

Usando color en el WWW.

Existen diversas etiquetas y atributos en HTML que permiten cambiar el color de los elementos de una página o incluso el color del fondo de esta. Pero antes de ver estas etiquetas es necesario explicar algunas cosas sobre como usar el color en las páginas Web.

En el tercer capítulo ya adelantamos, cuando aprendimos a dar color al texto, que existían dos métodos para indicar el color, estos métodos son:

  • Usar un número hexadecimal que identifica a ese color, por ejemplo #FF0000 ser refiere al color rojo.
  • Usar uno de los nombres (en inglés) predeterminados por los navegadores para los colores más usados, por ejemplo para poner, al igual que antes, el color rojo usaríamos: ’red’.

Por supuesto para el programador es mucho más sencillo aprenderse los nombres de los colores en inglés que no un código hexadecimal que nos resulta mucho más extraño. Sin embargo usar nombre de colores tiene algunas limitaciones. Por un lado sólo abarca unos pocos colores y por otro tiene el inconveniente de que no todos los navegadores son capaces de entenderlos, mientras que sí entienden el código hexadecimal. Aun así podemos encontrar 16 colores que son entendidos por gran parte de los navegadores y por supuesto también Netscape Navigator™ y Explorer™ que son los más usados.

Aunque los nombres asignados a estos 16 colores son ampliamente aceptados en realidad existen muchos más, pero su uso no es recomendado ya que sólo Netscape los soporta. Entre estos otros colores están indigo, ivory, khaki y muchos más.

El segundo método, basado en usar el código hexadecimal asociado al color no es tan complicado como puede parecer en un principio. Y tiene dos grandes ventajas sobre usar nombres:

  • Lo entienden todos los navegadores.
  • Puedes indicar más de 16 millones de colores.

Para construir el código de un color se usa un método que podemos comparar con el de un pintor con una paleta de tan sólo tiene 3 colores y los mezcla para conseguir el resto de los que necesita para pintar un cuadro. En el código usado por el lenguaje HTML estos tres colores son el rojo, el verde y el azul, es decir, se usa la paleta RGB (Red, Green, Blue). Para crear todos los colores se usan mezclas de estos en distintas cantidades. Estas cantidades se indican con un número del 0 al 255, correspondiendo el 255 a la máxima cantidad de color posible. Si ponemos cero de todos los colores obtendremos el color negro, si ponemos 255 de todos obtendremos el blanco. Para crear amarillo, por ejemplo, podemos mezclar 255 de rojo, 255 de verde y nada de azul; y si en vez de poner 255 de rojo y verde ponemos 230 de cada obtendremos un amarillo más oscuro.

Sin embargo todavía queda una complicación y es que el número tendremos que ponerlo en hexadecimal.

Nota

Un código hexadecimal está basada en una numeración que está compuesta por 16 símbolos en lugar de 10 como el sistema decimal. Estos 16 símbolos son 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B (11), C (12), D (13), E (14) y F (15). Por ejemplo, el siguiente número, el 16, se escribe en hexadecimal: ’10’, mientras que el número hexadecimal ’1F’se corresponde con el 31 decimal.

Usando el código hexadecimal podemos indicar la cantidad de color del 0 al 255 con sólo dos dígitos (del 0 al FF), y una vez que nos hemos acostumbrado no resulta tan complicado.

Para proseguir vamos a fijarnos en los códigos, como vemos todos empiezan por el símbolo sostenido o almohadilla: ’#’. Posteriormente siguen 6 números (siempre deben ser seis) en hexadecimal. Los dos primeros corresponden a la cantidad de rojo (RR), los siguientes a la cantidad de verde (GG) y los siguientes a la cantidad de azul (BB). Es decir la estructura general es:

#RRGGBB

De ahora en adelante usaremos la cadena ’#RRGGBB’ para indicar un código de color en hexadecimal y debemos tener en cuenta que puede ser sustituido también por un nombre de color.

Examinemos alguno de los códigos anteriores, por ejemplo el usado para obtener verde azulado (Teal). Este código indica que el color no tiene nada (0) de rojo, 128 unidades (80 en hexadecimal) de verde y otras tantas de azul. Con lo que obtenemos el tono deseado.

Cómo cambiar la apariencia de una página.

Una vez conocemos a la perfección la manera de insertar colores ya podemos empezar a aprovechar las posibilidades que nos ofrece el lenguaje HTML para controlar la apariencia de una página Web. Como primera aplicación práctica aprenderemos a cambiar el color del fondo, luego cambiaremos el color del texto y por último crearemos el efecto más impactante de todos, pondremos un imagen de fondo.

Color de fondo.

Para cambiar el color de fondo de nuestras páginas usaremos un nuevo atributo de la, ya conocida, etiqueta BODY.

El nuevo atributo se llama BGCOLOR y debe ser añadido a la etiqueta BODY existente:

<body bgcolor=”#RRGGBB”>

Por ejemplo para crear una página con el fondo de color azul podemos usar:

<body bgcolor=”#0000FF”>

O bien:

<body bgcolor=”Blue”>

Color del texto y Links.

Igual que se puede cambiar el color del fondo de la página se puede cambiar el color de su texto. Para ello se usan cuatro nuevos atributos de la etiqueta BODY. Lo primero que deberemos hacer es pensar en el color y el código de este, y una vez lo tengamos cambiaremos el color del texto usando:

  • TEXT , Sirve para controlar el color que tendrá el texto normal de la página, es decir todo aquel que no sea un enlace hipertexto. Su valor por defecto es negro.
  • LINK, Permite cambiar el color con el que son mostrados los enlaces hipertexto o links de la página. Su valor por defecto es azul.
  • VLINK, Permite cambiar el color por defecto de los links visitados (Visited LINK). Los links visitados de una página son aquellos que ya hemos seleccionado alguna vez. El valor por defecto de estos enlaces es morado.
  • ALINK, Sirve para controlar el color de los enlaces activos (Active LINK). El significado de enlace activo varía en función del navegador. Para Netscape™ un enlace activo es aquel sobre el que se ha pulsado con el ratón pero todavía no se ha soltado. El color por defecto de los links activos es el rojo.

Imágenes de fondo:

Las posibilidades que nos ofrece el lenguaje HTML para cambiar la apariencia de una página no se limitan a cambiar los colores, también se pueden poner imágenes ya sean dibujos o fotos como fondo de una página. Las imágenes deberán estar en formato GIF o JPEG al igual que las imágenes normales

Para incluir una imagen de fondo deberemos usar el atributo BACKGROUND de la etiqueta BODY. Como habrá podido comprobar el lector a estas alturas dentro de esta etiqueta se engloban todos los parámetros que cambian las características globales de la Web, es decir aquellas que afectan a toda la página. 

El funcionamiento de BACKGROUND es idéntico al del atributo SRC de la etiqueta IMG, esto es, deberemos indicar como valor el nombre de la imagen, junto con su ruta de directorios (path) si es necesario o bien la dirección completa de Internet (URL) si no se encuentra en nuestro sitio Web.

Un Saludo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s