Los objetivos de la segunda lección son:
2.1 Insertar imágenes en un documento
2.2 Conocer las propiedades de la imagen
2.3 Actividad nº 2: Insertar imágenes
2.4 Conocer la etiqueta de imágenes en HTML
En esta lección vamos a incluir una imagen en nuestra página personal. Hay que señalar que la escasa velocidad de la Red en las conexiones normales impide que podamos incluir todas la imágenes que queramos en nuestras páginas, porque su inclusión retarda la visión de los documentos, así que tenemos que hacer un esfuerzo por incluir sólo las imágenes necesarias.
Los principales formatos de imágenes
que se utilizan en Internet son GIF y
JPG. El primero para imágenes con pocos
colores (hasta 256) y el segundo para fotografías de
millones de colores. Los archivos de imagen con extensión
GIF son adecuados para introducir gráficos,
imágenes pequeñas de navegación u otras
imágenes que no incluyan muchos colores; por ejemplo,
todas las imágenes de esta página son archivos GIF,
salvo el retrato del monstruo que veremos más abajo, que
es JPG. Los archivos GIF pueden tener
transparente el color del fondo, como ocurre con
la imagen de la pluma roja que encabeza la sección de
actividades de esta página. La ventaja de los archivos JPG
es que guardan una buena relación calidad-tamaño y
se pueden comprimir bastante sin perder aparentemente calidad.
Ambos formatos de imagen, además, pueden aparecer
paulatinamente en la página web sin necesidad de que el
navegador cargue del todo cada imagen antes de ser mostrada; en
los archivos GIF, esta característica se llama
entrelazado y en los archivos JPG,
progresivo.
Para introducir una imagen con FrontPage Express hay que pulsar
el botón correspondiente de la barra de herramientas: el
botón central de la siguiente imagen. También se
pueden insertar imágenes desde el menú
Insertar de la barra de menús.
Al instante aparece una ventana en la que hay que elegir la opción Desde archivo y escribir en el cuadro de texto la ruta y el nombre del archivo. Lo más cómodo es, sin embargo, pulsar el botón Examinar... y buscar el archivo en el disco duro.
También se pueden introducir imágenes de
fondo en el documento, que suelen ser archivos
pequeños de texturas que se repiten en todo el documento
en forma de mosaico. Se abusa demasiado de estos fondos como para
desaconsejar casi siempre su utilización en una
página web, pues suelen entorpecer la lectura del
contenido. Para incluir una imagen de fondo en FrontPage Express
hay que abrir el menú Formato y elegir la
opción Fondo...; en el cuadro de
diálogo que aparece señalamos la opción
Imagen de fondo y pulsamos el botón
Examinar... para buscar el archivo de imagen en
el disco duro.
Pero examinemos en la ventana de Propiedades de
imagen las posibilidades que tenemos de modificar la
imagen y su posición. A dicha ventana accederemos
simplemente haciendo doble clic sobre la imagen. Otra forma de
hacerla visible es marcando la imagen con el puntero del
ratón, apretando el botón derecho del ratón
y eligiendo la opción adecuada del menú emergente.
La ventana aparece abierta en la sección
General, donde se muestra el Origen de
imagen, es decir, la ubicación del archivo de
imagen en el disco duro; en este caso, el archivo
monstruo.jpg se encuentra dentro de la carpeta
imagenes, que a su vez está dentro de la
carpeta monstruo: imagenes/monstruo.jpg.
Más abajo vemos un cuadro de texto en el que está escrita la frase "Éste soy yo": es importante incluir una frase explicativa de la imagen, que mostrará el navegador en forma de etiqueta de fondo blanco cuando el usuario coloque el puntero del ratón encima de la imagen, o que se verá cuando el usuario inhabilite la posibilidad de ver imágenes en el navegador.
Ahora hacemos clic en la pestaña de Apariencia. Vamos a fijarnos en la sección de Diseño. Si queremos que la imagen tenga un borde negro, ponemos un número en Grosor del borde; cuanto mayor sea el número, más ancho será el grosor.
Gran importancia tienen los demás atributos de esta
sección, sobre todo cuando queremos colocar una imagen
dentro de un párrafo, que no es el caso en nuestra
página personal. No obstante, conviene señalar la
utilidad de estos atributos, que vamos a ilustrar con la imagen
del monstruo. Si abrimos el menú desplegable denominado
Alineación, aparece la siguiente lista:
Observemos el texto que está junto a las siguientes imágenes colocadas en una tabla. La posición del texto depende de la alineación de la imagen:
![]() |
![]() |
![]() |
También son importantes la alineación izquierda y la derecha, pues colocan la imagen a la izquierda o a la derecha de un párrafo, tal y como se muestra en el presente párrafo.
El espaciado horizontal y el vertical deja un hueco horizontal o vertical respecto a la imagen. En el primer retrato del monstruo el espaciado horizontal es de 5 píxeles; en el segundo, de 10; y en el tercero, de 15, debido a lo cual el texto se separa cada vez más de la imagen, y la imagen se separa cada vez más del lado izquierdo de la celda. El espaciado vertical es de 3 para las tres imágenes, y por ese motivo se separan 3 píxeles de la parte superior de la tabla.
La actividad
de esta lección consiste en incluir tres imágenes en nuestros
documentos. Estas imágenes se encuentran dentro de la carpeta imagenes,
que a su vez está en la carpeta monstruo, que el programa
de instalación ubica dentro de la carpeta principal de este curso. Naturalmente,
se pueden utilizar otras imágenes que tenga el usuario. Si se trabaja
desde Internet, se pueden copiar dichas imágenes al disco duro colocando
el puntero del ratón encima de la imagen, pulsando después el
botón derecho del ratón y finalmente eligiendo la opción
adecuada del menú emergente que aparece:
![]() monstruo.jpg |
![]() conpatas.gif |
![]() ojos.gif |
La imagen del Monstruo es de la ilustradora Helena Martínez,
a la que agradezco me permita utilizarla. Las otras dos imágenes, así
como las que aparecen en el archivo colec.htm, cuyos nombres
he modificado, las he extraído de la página www.halloween.com,
donde no aparecen los nombres de sus autores.
Los pasos que vamos a dar son los siguientes:
Si queremos ver cómo pueden quedar estas imágenes en el documento, pulsemos los siguientes botones:
Para completar esta actividad, vamos a colocar, de forma
provisional y sólo como prueba, la imagen del monstruo a
la izquierda del párrafo de la primera
sección (Profesión) y a la derecha
del párrafo de la segunda sección (Aficiones),
separándola algunos píxeles vertical y
horizontalmente respecto al texto de los párrafos.
Después de comprobar que las imágenes están
bien insertadas, las quitaremos.
En lenguaje HTML las imágenes se insertan con la etiqueta
<img>, que no tiene cierre. Si vemos el
código fuente de nuestra página personal,
observaremos que la etiqueta se completa de la siguiente
manera:
<img src="imagenes/monstruo.jpg" border="1" width="160"
height="113" alt="Éste soy yo">
Dentro de la etiqueta <img> hemos incluido varios atributos:
En las imágenes del monstruo incluidas en una tabla de este documento, el código fuente añade, además, los atributos correspondientes a la alineación y al espaciado horizontal y vertical:
Por último, la imagen del monstruo que aparece a la izquierda de un párrafo anterior, añade a la etiqueta <img> el atributo align="left". Si la imagen hubiera estado en la parte derecha del párrafo, el atributo sería align="right".