Insertar Imágenes en Páginas de Texto

En Internet hay múltiples sitios desde donde es posible descargar imágenes. Hay que tener en
cuenta que en muchos casos la utilización de dichas imágenes es sólo para uso personal. En
caso contrario, será necesario comprarlas o, utilizarlas indicando la Web o la empresa de donde
proceden.

Los sitios propuestos son a modo de ejemplo, su contenido puede cambiarse.

1. www.areas.net/colorvivo.htm

2. www.humano.ya.com/fotopolis

3. www.coolarchive.com/icons.cfm

Antes de ver cómo insertar imágenes en un documento html, vamos a conocer los tres formatos
de imágenes que se pueden utilizar.

imágenes JPEG imágenes GIF imágenes PNG imágenes BMP

Imágenes de tipo Imágenes de tipo Fue desarrollado para Es el formato propio

fotográfico, con dibujo o ilustración, solventar las del programa Microsoft
variedad de colores, con colores planos, deficiencias del Paint. Es un archivo de
contrastes suaves, etc. etc. formato GIF y permite mapa de bits, es decir,
almacenar imágenes un archivo de imagen
con una mayor de gráficos, con
profundidad de color y píxeles almacenados
otros importantes en forma de tabla de
datos. puntos que administra
los colores como
colores reales o
usando una paleta
indexada.
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

imágenes JPEG imágenes GIF imágenes PNG imágenes BMP

Para que pesen poco No se pueden Es un formato de No se pueden

se pueden comprimir, comprimir. compresión sin comprimir.
pero pierden calidad. pérdidas lo que aligera
el tamaño final del
archivo, manteniendo
su calidad.

No permite Permite transparencia. Permite colores No permite

transparencia. transparentes y transparencia.
transparencias
graduales.

Permite "entrelazado": Permite "entrelazado". La codificación de la La desventaja principal

a medida que se carga imagen: PNG8 es que el tamaño de
la imagen va pasando (análogo al GIF) o los archivos en bytes
de borrosa a nítida. PNG24 (24 bits de es muy grande, por lo
color) no es adoptado cual no es
por todos los recomendable su
navegadores, y aún utilización Web.
menos por las
versiones antiguas de
los mismos.

Observaciones:

A la vista de todo lo anterior, cuando integre imágenes en una página debería tener en cuenta lo
siguiente:

• Debe analizar detalladamente el uso de imágenes en la página. Debe fijarse en su

necesidad, resolución, tamaño, formato, etc. El objetivo es lograr que la página se cargue
lo más rápidamente posible.
• El tamaño del archivo de imagen depende de las dimensiones de la imagen y del número
de colores que la forman.

1
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

• Para colores puros con no más de 256 colores y gráficos muy simples use el formato GIF
o PNG.
• Para imágenes con más de 256 colores use el formato JPG o PNG24.
• Usar las imágenes con su tamaño real, evitando que sea el navegador el encargado de
reducirlas.
• No colocar demasiadas imágenes en una misma página. Si necesita mostrar un número
elevado de imágenes, lo mejor es usar una versión muy reducida de las mismas
(thumbnails o miniaturas) a modo de índice y enlazar con páginas individuales donde se
muestre cada imagen por separado.
• Al diseñar la estructura del sitio utilice una carpeta para las imágenes muy usadas a lo
largo de las diferentes páginas del sitio.
• Usar el atributo ALT en las imágenes, para facilitar la comprensión del contenido a los
usuarios y a los robots usados por los buscadores para indexar nuestra página.

Ejercicio

1. Antes de empezar

A partir de ahora irá añadiendo páginas e imágenes y necesitará guardarlas ordenadamente.

Para ordenar los archivos, en el disco duro de su PC cree una carpeta con el nombre
"homovidens". Dentro de esta carpeta cree otra con el nombre "imagenes". En ellas deberá ir
guardando y organizando todos los ejercicios, y le servirá para acostumbrarse a organizar todos
los materiales de un Proyecto.

Localice el archivo del ejercicio anterior en el disco duro y cópielo a la carpeta "homovidens", que
acaba de crear.

Para este ejercicio necesitará la foto "colegio.jpg". Descargue el archivo imagenes.zip, guarde y
descomprima la misma dentro de la carpeta homovidens que mencionamos anteriormente.

2. Insertar una imagen

Ya tiene guardadas una página Web y una imagen.

ƒ Abra el KompoZer.
ƒ Elija "Archivo" > "Abrir" y abra el documento creado en el ejercicio anterior.

Inserte, en la página “ejercicio1.html” la imagen “colegio.jpg”.

Para insertar una imagen podrá:

2
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

1) Pulsar el botón de la barra de formato .

2) O bien, elegir "Insertar" > "Imagen". Los items de este menú son:

Pestaña Ubicación:

• Ubicación de la imagen: aquí deberá escribir el nombre y ubicación del archivo de la

imagen o hacer clic en Elegir archivo... para buscar un archivo de imagen en la carpeta
imágenes.
• Texto Alternativo: como hemos mencionado anteriormente, aquí podrá introducir el texto
que se visualizará en lugar de la imagen original, por ejemplo, un título o una breve
descripción de la imagen.
• No usar texto alternativo: seleccione esta opción si la imagen no requiere un texto
alternativo o no quiere especificar uno.

Pestaña Dimensiones:

• Tamaño Real: seleccione esta opción para deshacer cualquier cambio hecho a las
dimensiones de la imagen y devolverle a ésta a su tamaño real.
• Tamaño personalizado: seleccione esta opción para especificar una nueva altura y
anchura, en píxeles o como porcentaje. Esta configuración no afecta al archivo original de
la imagen, sólo a la imagen insertada en la página.

3
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

Pestaña Apariencia:

• Espacios: especifique aquí la cantidad de espacio del contorno de la imagen o sea el

espacio entre la imagen y el texto cercano. También podrá colocar un borde negro sólido
en el contorno de la imagen, especificando la anchura en píxeles. Si no se quiere borde
coloque cero.
• Alinear el texto con la imagen: si coloca la imagen al lado de un texto, deberá
seleccionar esta opción para indicar cómo desea que se posicione el texto en relación con
la imagen.
• Mapa de imagen: haga clic en Eliminar para borrar cualquier configuración de mapa de
imagen. Hasta la versión actual, Kompozer no permite realizar el mapeo de imágenes de
forma simple, solo mediante los atributos correspondientes.

Pestaña Enlace:

• Puede colocar un link a otro html, una dirección de mail o una dirección de una página
Web.

• Mostrar el borde alrededor de la imagen con enlace: si se marca, aparecerá un borde

del color elegido para los enlaces en torno a la imagen.

Otras opciones:

Para aplicar atributos adicionales o eventos JavaScript, deberá hacer clic en Edición avanzada, lo
cual permite visualizar el editor avanzado de propiedades.

Entonces, para insertar la imagen “colegio.jpg”, seleccione el icono de la barra de

herramientas. En el menú que se despliega, escriba el nombre y ubicación del archivo de la
imagen o haga click en Select Image File... para buscar el archivo “colegio.jpg” en la carpeta
“imagenes” (que se encuentra dentro de la carpeta “homovidens”).

4
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

Haga clic en aceptar, la ventana se cerrará y la imagen aparecerá insertada en la posición en la

que había puesto el cursor.

Si desea alinear el texto a la derecha (o a la izquierda), debe modificar este aspecto en la

“Pestaña Apariencia” correspondiente a las “Propiedades de Imagen”. Para visualizarlo

nuevamente, con la imagen seleccionada, haga clic en el icono . Seleccione la “Pestaña

Apariencia” y el ítem “Alinear texto “ y seleccione la opción deseada.

5
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

3. Para editar las imágenes ya insertadas

Podrá cambiar el tamaño manualmente. Haga clic sobre la imagen de tal modo que aparezcan
en cada uno de sus extremos unos puntos blancos. Automáticamente, al situarnos encima de
ellos, el cursor se transforma en una flecha que nos indica la dirección hacia la que podemos tirar
para cambiar el tamaño de la imagen.

4. Colores/ Imágenes de fondo de una página

De la misma forma que podrá cambiar el color de un texto, también podrá cambiar el color de
fondo de una página.

Para realizar este ejercicio necesitará la imagen fondo1.gif.

Para cambiar el color de fondo elija "Formato" > " Colores y fondo de la pagina" > Usar colores
personalizados >Fondo.

6
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

Para poner una imagen de fondo: seleccione "Format" > "Colores y fondo de la página" > “Imagen
de fondo” y cliquee en el botón “Seleccionar archivo”. Seleccione la imagen “fondo1.gif”” y cliquee
“Aceptar”.

Como hemos visto antes, la primera ventana que se abre es en la que aparece la Web. Dentro de
la carpeta “imagenes” seleccione el archivo “fondo1.gif”, que es el que desea tener como fondo de
página.

Busquela imagen fondo1.gif ; luego se cliquee Aceptar.

Si la imagen es más pequeña que la zona de visualización de una página, la repite en forma de
mosaico ocupando toda la pantalla. Por eso las imágenes de fondo siempre hay que
seleccionarlas bien para que no dificulten la lectura del texto. Esto mismo que hemos descripto
para el fondo de la página sirve para el fondo de una tabla que pongamos en ella.

7
Creación Material Educativo Multimedia TELECOM - Profesores para el Futuro

Ahora sustituiremos esta imagen por otra, "fondo2.jpg".

Esta imagen ocupa toda la pantalla a lo ancho, pero apenas tiene alto. Debido a su forma
apaisada, sólo puede encajar situándose en "columna", es decir apilándose sobre si misma.

Para conseguir que el bloque de texto se desplace hacia la derecha y no cubra la imagen de la
izquierda seleccione todo el texto y haga click dos o tres veces sobre el botón de "sangría"