| Artículos | 01 FEB 1998

Imágenes en una Página Web

Tags: Histórico
Curso Básico de HTML (II)
Jaime de Yraolagoitia.

Los tres objetos fundamentales de una página Web son texto, imágenes y enlaces (links). El texto y las imágenes muestran la información que se quiere ofrecer, mientras que los enlaces o hiperenlaces permiten saltar a otra página Web. Este mes nos centramos en las imágenes, dejando texto y enlaces para una próxima entrega.

Imágenes GIF y JPEG

Las imágenes son uno de los recursos más utilizados en las páginas Web. Una de las tareas más habituales al crear una página Web será incluir una imagen. Los dos formatos gráficos más utilizados para las páginas Web de Internet son GIF y JPEG, que ofrecen una calidad suficiente a la vez que comprimen el archivo para que su tamaño sea lo más pequeño posible (lo que significa que tardarán poco tiempo en transferirse desde el servidor Web a su ordenador). Desde el punto de vista del usuario es indiferente utilizar uno u otro formato, pero GIF sólo puede trabajar con imágenes de 8 bits (es decir, un máximo de 256 colores), mientras que JPEG soporta imágenes de 24 bits (hasta 16,7 millones de colores). Por ello, se suele utilizar JPEG para las fotografías que necesitan muchos colores y GIF para diseños pequeños creados por el usuario, donde no se suelen sobrepasar los 256 colores. Ambos formatos utilizan fórmulas de compresión para reducir al máximo el tamaño de la imagen.

Tanto FrontPage Express como Composer sólo pueden generar páginas Web con imágenes en formato GIF o JPEG. Sin embargo, el usuario puede seleccionar imágenes en otros formatos diferentes y el propio programa se encarga de realizar la conversión de formato de forma automática (Composer acepta imágenes BMP, mientras que FrontPage Express reconoce los formatos BMP, TIFF, WMF, RAS, EPS, PCX y TGA).

En Composer el nuevo archivo se crea automáticamente con el mismo nombre y en la misma localización del disco que el archivo original, mientras que en FrontPage Express no se realiza la conversión hasta que se guarda la página, momento en el que se le pregunta al usuario cómo quiere llamar al programa y dónde desea guardarlo.

Para añadir una imagen, sitúe el cursor en la posición de la página Web donde desea insertar la imagen, abra el menú Insertar y elija el comando Imagen. En ambos programas aparece una ventana y se coloca el cursor en un campo de texto para que escriba la posición y el nombre del archivo de imagen. Puede pulsar el botón Examinar (en FrontPage Express) o el botón Seleccionar archivo (en Composer) para elegir el archivo en una unidad y carpeta del disco, pero no es recomendable hacer esto, pues se crea una referencia a la imagen mediante una trayectoria absoluta (tipo file:///D:/Imagenes/Imagen.gif). Como se comentó en el artículo del mes pasado, es muy recomendable haber guardado previamente en una determinada carpeta del disco tanto la página que está creando como las imágenes que desea incluir en dicha página. Si ha seguido este consejo, puede escribir directamente en el campo adecuado el nombre del archivo de imagen sin incluir la trayectoria, por ejemplo, Imagen.gif. De esta forma se crea una referencia relativa que funcionará siempre que el archivo de imagen esté almacenado en la misma carpeta que el archivo de la página Web. Si trabaja con Composer, escoge el botón Seleccionar archivo y selecciona una imagen que está localizada en la misma carpeta que la página Web, Composer crea una referencia absoluta y es tarea suya borrar la trayectoria y dejar únicamente el nombre del archivo.

Al finalizar, aparece la imagen dentro de la página Web. Si quiere cambiar su tamaño, haga clic sobre ella y modifique directamente el tamaño. También puede cambiarla de posición y trasladarla a cualquier otra parte de la página Web. Las restantes características de la imagen se configuran desde sus propiedades, tal como se explica a continuación. Aunque se ofrece la posibilidad, en la mayoría de los casos no resulta interesante usar una imagen que reside en una determinada dirección de Internet, pues su página Web dependerá de la disponibilidad de esa imagen (y del servidor donde se guarda). En estos casos, es más conveniente leer la página en el navegador, activar la opción para guardar la imagen en disco y utilizarla posteriormente como un archivo normal ?por supuesto, si se tiene permiso para ello y no se está violando ningún copyright?.

Propiedades de una imagen

Una vez creada una imagen, se pueden controlar sus propiedades haciendo clic sobre ella, abriendo su menú contextual (clic con el botón secundario) y seleccionando el comando Propiedades de la imagen. La ventana de propiedades difiere según el programa utilizado, aunque las opciones son prácticamente las mismas, pues no en vano los editores Web lo único que hacen es presentar al usuario controles Windows que según los valores escogidos se convierten en unas determinadas etiquetas (instrucciones) HTML. La figura 1 muestra la ventana de propiedades en Netscape Composer, mientras que la figura 2 muestra las propiedades de una imagen en FrontPage Express.

Referencia. La referencia a la imagen ya la hemos comentado y como puede ver en ambas figuras aparece únicamente el nombre del archivo (Asterix.gif y Chica.gif) sin ninguna trayectoria absoluta.

Tamaño. El tamaño de la imagen es un aspecto importante. Por defecto, cuando se añade una imagen a una página Web se asume su tamaño original, medido en pixels (puntos de pantalla). Si usted cambia ese tamaño, se modificará automáticamente el valor del tamaño en las propiedades de la imagen. Sin embargo, hay una cuestión que ha de tener en cuenta. Cuando otros usuarios vean su página Web pueden utilizar un navegador con diferentes tamaños, a 800 x 600, a 640 x 480 o, incluso, que no ocupe toda la pantalla. Si usted especifica un tamaño en pixels, la imagen ocupará siempre el mismo espacio, independientemente del tamaño del navegador cuando se lea la página. Pero si quiere que cambie el tamaño de la imagen según el tamaño del navegador, tiene que especificar el tamaño de la imagen no en pixels, sino en un porcentaje de la ventana. Por ejemplo, si indica que el tamaño de la imagen es el 75% de la ventana, si el usuario que lee esa página Web disminuye el tamaño de su navegador, disminuirá la imagen de forma correspondiente. Ambos programas permiten restaurar la imagen a su tamaño original (en Composer hay que pulsar el botón Tamaño original, mientras que en FrontPage Express hay que desactivar la casilla Especificar tamaño).

Alineación. La alineación de las imágenes respecto al texto resulta fundamental para dotar a la página de mayor atractivo. Por defecto, si se introduce una imagen en mitad de un párrafo, la imagen queda alineada respecto a la línea base de la línea del párrafo en la que se encuentra. Cuando se trata de imágenes con una altura muy pequeña, se pueden usar las opciones para alinear la imagen según dicha línea base, pero en la mayoría de las ocasiones el usuario deseará que todo un párrafo de texto rodee la imagen, como se muestra en la figura 3. En Composer esto se logra eligiendo uno de los dos botones que aparecen en el extremo derecho de la fila de botones de alineación. Es importante señalar que al activar alguno de estos dos botones, usted no verá ningún cambio en la pantalla de Composer. Para comprobar que efectivamente, se ha asumido la nueva alineación, pulse el botón Publicar de la barra de herramientas de Composer, que se encarga de activar el navegador Netscape con la página que está creando para que pueda ver su aspecto. En el caso de FrontPage Express, seleccione la ficha Apariencia (figura 2), abra la lista desplegable Alineación y seleccione el valor Izquierda o Derecha según dónde desea colocar la imagen rodeada de texto.

Espacio alrededor de la imagen. En muchas ocasiones, por ejemplo, cuando hay texto rodeando una imagen, resulta necesario marcar un espacio alrededor de la imagen para que quede en blanc

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información