Control de colores
Este es un documento de ejemplo de control de color. El texto es gris claro sobre negro, y los links son amarillos al principio, azul-verde cuando son activados, y verdes después de haber sido utilizados.
Todo son atributos del elemento <BODY>. Se escribe así:
<BODY BGCOLOR="#000000" FGCOLOR="#00FF00" TEXT="#F0F0F0"
LINK="#FFFF00" VLINK="22AA22" ALINK="#0077FF">
¿Por qué hay que usar códigos?
Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a nuestra máquina.
Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene tu teclado y algunos más que no están en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadamente, no son siempre las mismas, y varían de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si las escribimos directamente desde el teclado.
Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente.
Por ejemplo, nuestra denostada en medio mundo "Ñ" se escribirá:
Ñ o bien Ñ Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto (mayúsculas y minúsculas), los números y unos pocos signos, como el punto, la coma, el guión y algunos otros. A este conjunto de caracteres, común para todos los sistemas, se le denomina código
ASCII, y desde luego hay que codificar todas las letras acentuadas, eñes, cedillas, etc., etc.
En el índice encontrarás una tabla con todos los caracteres, también están las letras, pero éstas sólo te serán útiles en caso de necesitar escribir textos un tanto raros.
Como puedes ver, la tabla tiene una columna con el carácter deseado seguida de su código numérico en base decimal, una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el código numérico. En algunos casos especiales que se verán más adelante, habrá que escribir los códigos numéricos en base hexadecimal (la calculadora de Windows tiene un conversor).
Generalmente, se pueden escribir directamente desde teclado todos los que no tienen alias en la tabla, los que sí tienen normalmente darán problemas en sistemas diferentes al que se ha utilizado para escribir el documento. Si lo que escribes en HTML tienes la seguridad de que sólo va a ser utilizado como ficheros locales en máquinas similares a la tuya, no será necesario complicarse la vida; pero si tus páginas van a residir en un servidor WWW, cualquier tipo de máquina podrá acceder a ellas, y su aspecto no será el adecuado en algunas.
Existen multitud de editores especiales para escribir HTML, y la mayoría de ellos tienen herramientas para convertir de forma automática los caracteres especiales a su correspondiente código. También hay paquetes de "macros" para hacer lo mismo con procesadores de texto como Word o Word Perfect.
Tabla de códigos de caracteres
Actualmente existen muchos más, con códigos de 4 dígitos, como el euro. Estos son algunos de los más utilizados.
| Caracter |
Código |
Descripción |
Alias |
| ! |
! |
Cerrar exclamación |
-- |
| " |
" |
Dobles comillas |
-- |
| # |
# |
Signo de número |
-- |
| $ |
$ |
Dólar |
-- |
| % |
% |
Tanto por ciento |
-- |
| ‰ |
‰ |
Tanto por mil |
-- |
| & |
& |
Ampersand |
amp |
| ' |
' |
Apóstrofe |
-- |
| ( |
( |
Cerrar paréntesis |
-- |
| ) |
) |
Abrir paréntesis |
-- |
| * |
* |
Asterisco |
-- |
| + |
+ |
Signo más |
-- |
| , |
, |
Coma |
-- |
| - |
- |
Guión |
-- |
| . |
. |
Punto |
-- |
| / |
/ |
Barra de división |
-- |
| 0 - 9 |
0 - 9 |
Dígitos del al 0-9 |
-- |
| : |
: |
Dos puntos |
-- |
| ; |
; |
Punto y coma |
-- |
| < |
< |
Menor |
-- |
| < |
< |
Menor |
lt |
| = |
= |
Igual |
-- |
| > |
> |
Mayor |
-- |
| > |
> |
Mayor |
gt |
| ? |
? |
Cerrar interrogación |
-- |
| @ |
@ |
Arroba |
-- |
| A - Z |
A - Z |
Letras A-Z |
-- |
| [ |
[ |
Cerrar corchete (izquierdo) |
-- |
|
\ |
Barra inversa |
-- |
| ] |
] |
Abrir corchete |
-- |
| ^ |
^ |
Circunflejo |
-- |
| _ |
_ |
Subrayado |
-- |
| ` |
` |
Acento agudo |
-- |
| a - z |
a - z |
Letras a-z |
-- |
| { |
{ |
Abrir llave |
-- |
| | |
| |
Barra vertical |
-- |
| } |
} |
Cerrar llave |
-- |
| ~ |
~ |
Tilde |
-- |
| |
  |
Espacio sin separación |
nbsp |
| ¡ |
¡ |
Abrir exclamación |
iexcl |
| ¢ |
¢ |
Centavo |
cent |
| £ |
£ |
Libra Esterlina |
pound |
| ¤ |
¤ |
Signo de divisa general |
curren |
| ¥ |
¥ |
Yen |
yen |
| ¦ |
¦ |
Barra vertical partida (pipe) |
brvbar |
| § |
§ |
Sección |
sect |
| ¨ |
¨ |
Diéresis |
uml |
| © |
© |
Copyright |
copy |
| ª |
ª |
Doña |
ordf |
| « |
« |
Abrir comillas francesas |
laquo |
| ¬ |
¬ |
No (símbolo lógico) |
not |
| |
­ |
Guión débil |
shy |
| ® |
® |
Registrado |
reg |
| ¯ |
¯ |
Macrón |
macr |
| ° |
° |
Grados |
deg |
| ± |
± |
Más-menos |
plusmn |
| ² |
² |
Dos superíndice |
sup2 |
| ³ |
³ |
Tres superíndice |
sup3 |
| ´ |
´ |
Acento agudo |
acute |
| µ |
µ |
Micro |
micro |
| ¶ |
¶ |
Fin de párrafo |
para |
| · |
· |
Punto medio |
middot |
| ¸ |
¸ |
Cedilla |
cedil |
| ¹ |
¹ |
Uno superíndice |
sup1 |
| º |
º |
Género masculino |
ordm |
| » |
» |
Cerrar comillas francesas |
raquo |
| ¼ |
¼ |
Un cuarto |
frac14 |
| ½ |
½ |
Un medio |
frac12 |
| ¾ |
¾ |
Tres cuartos |
frac34 |
| ⅛ |
⅛ |
Un octavo |
-- |
| ⅜ |
⅜ |
Tres octavos |
-- |
| ⅝ |
⅝ |
Cinco octavos |
-- |
| ⅞ |
⅞ |
Siete octavos |
-- |
| ¿ |
¿ |
Abrir interrogación |
iquest |
| À |
À |
A mayúscula, acento grave |
Agrave |
| Á |
Á |
A mayúscula, acento agudo |
Aacute |
| Â |
 |
A mayúscula, acento circunflejo |
Acirc |
| Ã |
à |
A mayúscula, tilde |
Atilde |
| Ä |
Ä |
A mayúscula, diéresis |
Auml |
| Å |
Å |
A mayúscula, anillo |
Aring |
| Æ |
Æ |
AE mayúscula |
AElig |
| Ç |
Ç |
C cedilla mayúscula |
Ccedil |
| È |
È |
E mayúscula, acento grave |
Egrave |
| É |
É |
E mayúscula, acento agudo |
Eacute |
| Ê |
Ê |
E mayúscula, acento circunflejo |
Ecirc |
| Ë |
Ë |
E mayúscula, diéresis |
Euml |
| Ì |
Ì |
I mayúscula, acento grave |
Igrave |
| Í |
Í |
I mayúscula, acento agudo |
Iacute |
| Î |
Î |
I mayúscula, acento circunflejo |
Icirc |
| Ï |
Ï |
I mayúscula, diéresis |
Iuml |
| Ð |
Ð |
Eth mayúscula |
ETH |
| Ñ |
Ñ |
Eñe mayúscula |
Ntilde |
| Ò |
Ò |
O mayúscula, acento grave |
Ograve |
| Ó |
Ó |
O mayúscula, acento agudo |
Oacute |
| Ô |
Ô |
O mayúscula, acento circunflejo |
Ocirc |
| Õ |
Õ |
O mayúscula, tilde |
Otilde |
| Ö |
Ö |
O mayúscula, diéresis |
Ouml |
| × |
× |
Signo de multiplicación |
times |
| Ø |
Ø |
O barrada mayúscula |
Oslash |
| Ù |
Ù |
U mayúscula, acento grave |
Ugrave |
| Ú |
Ú |
U mayúscula, acento agudo |
Uacute |
| Û |
Û |
U mayúscula, acento circunflejo |
Ucirc |
| Ü |
Ü |
U mayúscula, diéresis |
Uuml |
| Ý |
Ý |
Y mayúscula, acento agudo |
Yacute |
| Þ |
Þ |
THORN mayúscula |
THORN |
| ß |
ß |
Beta minúscula |
szlig |
| à |
à |
a minúscula, acento grave |
agrave |
| á |
á |
a minúscula, acento agudo |
aacute |
| â |
â |
a minúscula, acento circunflejo |
acirc |
| ã |
ã |
a minúscula, tilde |
atilde |
| ä |
ä |
a minúscula, diéresis |
auml |
| å |
å |
a minúscula, anillo |
aring |
| æ |
æ |
ae mínuscula |
aelig |
| ç |
ç |
c cedilla minúscula |
ccedil |
| è |
è |
e minúscula, acento grave |
egrave |
| é |
é |
e minúscula, acento agudo |
eacute |
| ê |
ê |
e minúscula, acento circunflejo |
ecirc |
| ë |
ë |
e minúscula, diéresis |
euml |
| ì |
ì |
i minúscula, acento grave |
igrave |
| í |
í |
i minúscula, acento agudo |
iacute |
| î |
î |
i minúscula, acento circunflejo |
icirc |
| ï |
ï |
i minúscula, diéresis |
iuml |
| ð |
ð |
eth minúscula |
eth |
| ñ |
ñ |
eñe minúscula |
ntilde |
| ò |
ò |
o minúscula, acento grave |
ograve |
| ó |
ó |
o minúscula, acento agudo |
oacute |
| ô |
ô |
o minúscula, acento circunflejo |
ocirc |
| õ |
õ |
o minúscula, tilde |
otilde |
| ö |
ö |
o minúscula, diéresis |
ouml |
| ÷ |
÷ |
Signo de división |
divide |
| ø |
ø |
o barrada minúscula |
oslash |
| ù |
ù |
u minúscula, acento grave |
ugrave |
| ú |
ú |
u minúscula, acento agudo |
uacute |
| û |
û |
u minúscula, acento circunflejo |
ucirc |
| ü |
ü |
u minúscula, diéresis |
uuml |
| ý |
ý |
y minúscula, acento agudo |
yacute |
| þ |
þ |
thorn minúscula |
thorn |
| ÿ |
ÿ |
y minúscula, diéresis |
yuml |
| € |
€ |
Euro |
euro |
| ≠ |
≠ |
Distinto de |
ne |
| ≤ |
≤ |
Menor o igual que |
le |
| ≥ |
≥ |
Mayor o igual que |
ge |
| √ |
√ |
Radical |
radic |
| Ω |
Ω |
Omega |
-- |
| ↑ |
↑ |
Flecha arriba |
uarr |
| ↓ |
↓ |
Flecha abajo |
darr |
| ← |
← |
Flecha izquierda |
larr |
| → |
→ |
Flecha derecha |
rarr |
| ↔ |
↔ |
Flecha izq-der |
harr |
| № |
№ |
Nº |
-- |
| ▲ |
▲ |
Flecha ar |
-- |
| ► |
► |
Flecha de |
-- |
| ▼ |
▼ |
Flecha ab |
-- |
| ◄ |
◄ |
Flecha iz |
-- |
| ■ |
■ |
Cuadrado lleno |
-- |
| □ |
□ |
Cuadrdo vacio |
-- |
| ▪ |
▪ |
Mini cuadrado lleno |
-- |
| ▫ |
▫ |
Mini cuadrado vacio |
-- |
| ● |
● |
Punto lleno |
-- |
| ○ |
○ |
Punto vacio |
-- |
| ◊ |
◊ |
Rombo vacio |
loz |
Creación de enlaces (links)
El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama
hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que está leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dónde está el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee está repartido por medio mundo, o en un plano más modesto, el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo.
Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).
Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la estética en algunos casos, se puede parametrizar con una instrucción de estilo.
Se escribirá:
<
A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.
Y se vería así: Link de prueba
Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instrucción de estilo. Así:
<
A HREF="http://www.miservidor.es/mifichero.htm" style="color:red; text-decoration:none";> Link de prueba </A>. Y se vería así:
Link de prueba (Esto puede que no funcione en algunos navegadores antiguos)
El elemento <A> tiene dos atributos: HREF y NAME.
En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.
Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una máquina a otra, si el enlace es para otra página de nuestro propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm según proceda.
Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>, pero también puede hacerse con una imagen cualquiera, que iría en lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al índice desde una bola roja, se escribe:
Ir al índice <A HREF="indice.htm">
<img src="bolaroja.gif"> </A>. Y este sería el resultado:
Ir al índice 
Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los gráficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede resultar poco estético. Esto también tiene solución, pero aquí se hace en la instrucción de la imagen:
Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif"
border=0> </A>. Y este sería el resultado:
Ir al índice
El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas o con alguna otra diferencia, eso es un nombre de máquina y sería interpretado como OTRA máquina. Esto es aplicable a todos los parámetros: servicio (http://) servidor (www.miservidor.es) y fichero (mifichero.htm).
Estas precauciones son ineludibles en el caso de servidores montados en máquinas con sistema operativo UNIX. En el caso de que el servidor resida en una máquina con Windows NT o Windows 95/98, es indiferente. Si no se sabe el sistema que tiene la máquina, es mejor atenerse a la forma UNIX.
Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :
| Servicio |
Descripción |
Ejemplo |
Efecto |
| http:// |
Servicios WWW |
<A HREF="http://www.uv.es/"> WWW</A> |
WWW |
| ftp:// |
Servicios FTP |
<A HREF="ftp://ftp.uv.es/">FTP</A> |
FTP |
| news:// |
Servicios NEWS |
<A HREF="news://news.uv.es/">NEWS</A> |
NEWS |
| mailto:// |
Servicios E-mail |
<A HREF="mailto:jac@uv.es/">E-mail</A> |
E-mail |
| file:///C| |
Fichero local |
<A HREF="indice.htm/">Fichero</A> |
Fichero |
Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:
<A HREF="indice.htm"
TARGET="Ventana-2"> </A> Esta instrucción mostrará la página
indice.htm pero con
otra ventana del visualizador, es decir tendremos lanzado el visualizador
2 veces.
Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la página llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente:
<A HREF="indice.htm"
TARGET="_parent"> </A> Existen otros valores para TARGET:
TARGET="_blank": Para que el enlace se muestre en una nueva ventana vacía. También puede darse un nombre cualquiera con el mismo efecto.
TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto).
TARGET="_top": El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe.
Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará desde la primera línea del mismo.
El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.
Se escribirá así:
En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>
En el documento destino: <A NAME="punto1"></A> NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así:
Dentro del documento activo En la línea de partida:
<A HREF="#punto1">Ir al punto 1</A> En la línea de destino <A NAME="punto1"></A> Por ejemplo, si haces "clik"
aquí con el ratón, saltarás al principio de esta página.
Como habrás visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instrucción: <A HREF="mailto:jac@uv.es">Enviar e-mail</A>. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la dirección deseada ya escrita. Si además quieres que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir así:
<A HREF="mailto:jac@uv.es?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A>
Con los links, al igual que con los formularios, es posible moverse usando la tecla de tabulación, para conseguir que el enfoque salte de un link a otro en un cierto orden. Para ello se utiliza el atributo
tabindex. Por ejemplo, pulsa la tecla "Tab":
Tablas Imágenes Body
Como puedes ver, los saltos en esta línea se han producido siguiendo la numeración indicada por los disintos tabindex, al resto de links se llega por orden de escritura. Se escribe:
<A HREF="tablas.htm" tabindex="2">Tablas</A>
<A HREF="imagen1.htm" tabindex="3">Imágenes</A>
<A HREF="body.htm" tabindex="1">Body</A>
Esto solamente funciona con versiones recientes de navegadores. Otro atributo reciente de los links es title que permite escribir una descripción del link sin necesidad de pulsar en él, simplemente poniendo encima el puntero del ratón. Por ejemplo:
<A HREF="tablas.htm" title="Saltar a la sección de tablas">Tablas</A>
Se obtiene: Tablas
Debes saber que...
- El texto que pongas después del símbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no esté repetido en el mismo documento de destino.
- Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentará en pantalla la última línea del mismo.
- Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y después tienes que mover los ficheros por cualquier razón, tendrás que modificar todas las direcciones.
- Si al hacer un link, después del nombre de la máquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (página inicial) de ese directorio. Generalmente (aunque depende de la configuración del servidor) el fichero inicial de un directorio suele ser index.htm o default.htm
- Si un servidor no tiene definida página inicial, simplemente nos mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
- Si después de la dirección de la máquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrará un simple listado de los ficheros y directorios que éste contenga si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
- No sólo puedes montar el link sobre un texto, también puedes hacerlo sobre una imagen cualquiera. Es decir, después del link y antes de </A> puedes poner lo que quieras.
- El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que puedas huye de crear páginas muy largas. Crea cuantas necesites, con buena estructura y enlázalas con cuantos links sean precisos.
- Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionará.
- Si continuas deseando poner direcciones absolutas con ficheros locales, tendrá que ser así file:///C:/MIDIRECTORIO/mifichero.htm
- Después de C (que puede ser A, B, D o la unidad de disco que quieras) fíjate en que las barras que separan los directorios y ficheros son barras a la derecha.
Insertar imágenes
Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes.
Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGTH BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR.
Las imágenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el navegador. La diferencia entre estos dos formatos es su nivel de compresión. En efecto, el JPG tiene una compresión mucho mayor que el GIF, por lo que suele ser el formato más utilizado en el mundo web, donde siempre se debe perseguir que las páginas sean lo más ligeras posible. Por contra, cuanta mayor compresión tenga un gráfico menor calidad se consigue, pero para usos generales el JPG es perfectamente válido. Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no verás el texto junto con la imagen, y por tanto no podrás imprimir la página compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeños programas que permiten llamar a aplicaciones específicas ejecutándose como ventanas del navegador. Un ejemplo muy común son los ficheros .pdf.
Algunos navegadores no son capaces de tratar imágenes, o aunque el navegador sí pueda, tal vez el cliente esté navegando en modo solo texto, es decir, sin ver las imágenes, lo que permite moverse más rápido. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por la W3.
Veamos ejemplos del uso de <IMG>:
Imagen alineada a la izquierda (por defecto)
<IMG SRC="sugeren.gif">texto texto texto texto
texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen con un texto alternativo
Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador (sólo es posible con Netscape).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
Imagen alineada a la izquierda.Texto alineado arriba
<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado abajo
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado al centro
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto envolviendo la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR>
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen
<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>
| texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto |
|
Imagen redimensionada a más.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto al doble: 272x92.
Imagen redimensionada a menos.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23
Consideraciones sobre WIDTH y HEIGTH
Estos dos atributos, además de para variar el tamaño de un gráfico, también pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que no se pretende alterar las dimensiones del gráfico. Y te preguntarás que finalidad tiene esto. La razón estriba en cómo funcionan los navegadores. Cuando el navegador solicita una página y comienza a recibirla, lo primero que hace es leer la cabecera, a continuación lee el código del BODY y por último carga las imágenes que contenga la página haciendo nuevas conexiones al servidor para cada una de ellas.
Esta forma de trabajar tiene como consecuencia, que si en el código del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen, cuando éstas lleguen en el último paso de la carga de la página, el texto ya estará compuesto, pero al no saber el tamaño de las imágenes, no se habrá reservado el espacio adecuado para insertarlas, por lo que todo el texto será desplazado hacia abajo, con la consiguiente pérdida del formato original de la página, ya que el navegador no va a recomponer el texto que ya estaba escrito.
Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacíos forzados.
texto texto texto texto texto texto texzto texto texto texto texto texto
<IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto
texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Usar una imagen como punto de montaje de un link
texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto.
Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe:
.... IMG SRC="sugeren.gif" BORDER=0 >
Ahora que ya sabes cómo manejar las imágenes, veamos algunos efectos especiales algo más complicados.
Mapeado de una imagen para usarla como direccionador
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
Si mueves el ratón por encima de la imagen, verás que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos números que cambian según muevas el ratón. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Verás las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el gráfico. Como ya habrás supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un menú direccionador, lo que necesitamos es que algún elemento convierta esas coordenadas en una dirección del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme número de direcciones, teóricamente tantas como pares de coordenadas tiene la imagen. En la práctica serán menos, ya que andar intentando atinar en el punto 11,32, por ejemplo, es un poco engorroso.
Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas generan un fichero con todas las direcciones. Algo así:
rect http://miservidor.es/mifichero1.htm 12,35
rect http://miservidor.es/mifichero2.htm 90,42
rect http://miservidor.es/mifichero3.htm 112,46
Este podría ser el aspecto del fichero del ejemplo, el llamado
mimapa. El parámetro
rect significa rectángulo, y nos indica que la imagen ha sido troceada en rectángulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. También podría ser en círculos (
circ) o polígonos (
poly). Ahora veamos el resto de instrucciones del ejemplo:
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
La primera parte
A HREF ya la conocemos, es un link. Después viene un directorio:
cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente sólo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado
imagemap (según el sistema puede ser otro) que es un programa que se encarga de leer tu fichero
mimapa, capturar las coordenas que señale el puntero del ratón y servir la dirección que tiene asociada, con lo que acabamos obteniendo un link normal. Ya por último, aparece
ISMAP que es el que convierte una simple imagen en una potente herramienta.
Sólo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el administrador del sitema.
Todo esto es suponiendo que el servidor está en una máquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrás que ver las instrucciones concretas del programa servidor. La forma de montar el mapa puede variar de un programa servidor a otro, pero la base de funcionamiento es siempre la misma.
Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es operar con los elementos de formularios. En el índice encontrarás información sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una acción.
Pero, una vez más, Netscape ha propuesto una solución mucho más simple: que sea el propio visualizador quien haga las veces de programa conversor. En efecto, un recurso tan bueno como los mapas, no debe depender de tener tu máquina en red y de que haya un servidor http que te atienda. Además, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete. Para ello ha implementado el elemento
MAP que acompañará a IMG.
Por ejemplo, en la siguiente imagen, la mitad izquierda nos envía a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratón horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, verás como cambia el nombre del link.
Se escribe así:
<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#nombre1">
Aunque se comprende a simple vista, analicémoslo:
En primer lugar tenemos el elemento MAP, que lo que está haciendo es definir un mapa de coordenadas. Va acompañado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podría haber más de uno en la misma página, y evidentemente, sus nombres no deberán repetirse.
A continuación tenemos el atributo AREA que define las áreas de la imagen. El parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly.
El parámetro COORDS fácilmente se adivina que indica las coordenadas del área, en este caso vértice superior izquierdo e inferior derecho, respectivamente.
HREF ya sabemos lo que hace: indica un link con una página, pero esta vez no va acompañando al elemento <A>, digamos que es un atributo prestado. Hay un área por cada link definido. Si un área no queremos que tenga link se definirá con NOHREF.
IMG SRC también son conocidos: hacen que se visualice la imagen.
Y por fin, USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fíjate en que nombre1, (el nombre del mapa) va precedido del símbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia está en la misma página que la instrucción IMG. Podría estar en otra, y en ese caso el símbolo tendría que estar después del nombre de la página. Por ejemplo: otrapagina.htm#nombre1
Como ya se ha dicho más arriba, hay tres figuras geométricas definibles para las áreas: rect, circle y poly. El rectángulo ya lo conocemos; consiste en parejas de coordenadas que indican los vértices superior izquierdo e inferior derecho respectivamente del área. Para el cículo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde está el centro del cículo, y r es el radio del círculo medido en puntos. Para los polígonos (poly) se necesitan tantas parejas de coordenadas como vértices tenga el polígono, procurando que la última pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el gráfico como área de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.
Imágenes de fondo
El fondo (background) de este documento es una imagen en formato GIF.
Es un atributo del elemento <BODY>
Se escribe así:
<BODY BACKGROUND="yellow_r.gif">
Y es compatible con todos los demás atributos de este elemento.
Algunos ejemplos de imágenes en listas
Se escriben todas igual, sólo hay que cambiar el nombre de los gráficos:
<DL>
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
</DL>
- Linea de texto
- Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Linea de texto - Linea de texto
Gráficos animados
Una nueva propiedad de algunos visualizadores es la posibilidad de presentar gráficos con animación. No hay que confundir los gráficos animados en formato GIF con los "movies" o vídeos en formato MPG que no son tratados directamente por el visualizador, sino por una herramienta auxiliar que hay que definirle.
Los visualizadores suelen presentar correctamente los formatos GIF y JPG. Netscape ha implementado la posibilidad de mostrar un tipo de gráfico tipo GIF que incluye en su interior una secuencia, que junto con instrucciones de repetición (loop), espera (wait) y controles de cabecera permiten reproducir una animación. La diferencia de tamaño entre un GIF animado y un MPG es considerable. Evidentemente, las animaciones GIF tienen peor resolución que las MPG, y sólo están pensadas para fines sencillos.
La forma de incluir una imagen animada en el documento es la misma que una imagen fija. No se requiere ningun tipo de programa ni script, todo está definido en la propia imagen. Existen en la red en forma de shareware programas para hacer ficheros de imágenes animadas. Su construcción es muy sencilla: sólo necesitas tener la serie de imágenes que quieres animar e ir ensamblándolas con algún programa al efecto, definir el tiempo entre imagen, el ciclo de repetición... y listo.
Los visualizadores que no soportan este efecto, lo que hacen es presentar solamente la primera o la última de las imágenes de la secuencia. Hay que tener esto presente, y no comenzar o terminar las secuencias con, por ejemplo, una imagen vacía.
Aquí tienes dos ejemplos sencillos de GIF animado:
Una bola que corre.
Una carta que se mete en un sobre.
Para representarlos en la página se utiliza el mismo elemento HTML de los gráficos normales: <IMG SRC="migrafico.gif">
