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
Los principales
formatos de imágenes
que se utilizan en Internet son GIF,
JPG y PNG.
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 incluir gráficos,
iconos pequeñas de navegación u otras
imágenes que no incluyan muchos colores. 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. Las imágenes PNG
son
parecidas a las GIF, pero tienen más colores, y también pueden tener
transparencias; el problema que presentan es que algunos navegadores
antiguos no las reconocen.
En esta lección vamos a incluir imágenes en
la página web del Monstruo. Antes de incorporar una imagen en
nuestra página web debemos considerar lo siguiente:
Para introducir una
imagen con Kompozer hay que pulsar
el botón correspondiente de la barra de herramientas o elegimos el menú
Insertar -> Imagen... Al
instante aparece la siguiente ventana con un formulario y varias
secciones en distintas pestañas que nos muestran las propiedades
de la imagen:
Aquí tenemos tres campos de texto, dentro de la pestaña Ubicación, que debemos rellenar:
En la pestaña Dimensiones, vemos las medidas de la imagen, que no debemos cambiar de su tamaño real, porque si aumentamos sus dimensiones, perderá calidad, y si las reducimos, seguirá pesando igual que el tamaño real; por lo cual es mejor insertarla con el tamaño final que queremos que tenga.
La tercera pestaña es la Apariencia de la imagen y resulta muy importante:
Debajo
En el centro
Arriba
![]()
Las otras dos posiciones son: fluir por la izquierda y por la derecha si colocamos la imagen a la derecha o a la izquierda del párrafo respectivamente, porque lo que fluye a una lado u otro es el texto.
Para ilustrar el espaciado a derecha e izquierda, podemos ver que en el primer retrato del monstruo de la tabla superior el espaciado horizontal (izquierda y derecha) 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 (arriba y abajo) es de 3 para las tres imágenes, y por ese motivo se separan 3 píxeles de la parte superior de la tabla.
Por último, en la pestaña Enlace podemos incluir una dirección URL que enlace la imagen.
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,
ubicada 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".