CREACIÓN DE PÁGINAS WEB CON KOMPOzER

2. Imágenes

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

2.1. Insertar imágenes en un documento

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:

  1. Las imágenes no deben ser grandes por regla general. Si las reducimos, nos daremos cuenta de que sirven igualmente. Hay que reducirlas con un programa de retoque fotográfico (GIMP e Irfanview son buenos) hasta una anchura máxima de unos 500 píxeles. Si son más anchas, no se verán bien en monitores antiguos de baja resolución.
  2. No hay que cargar un documento con muchas imágenes, porque la página tarda en cargarse y porque puede ser molesto para el lector.
  3. Las imágenes deben ilustrar los contenidos, es decir, no se deben poner de adorno. Y además, contribuyen a estructurar los contenidos si las situamos en lugares adecuados. 
  4. Las imágenes no deben colocarse dentro de un párrafo si las líneas quedan demasiado cortas, pues dificultan la lectura del texto. Es mejor colocarlas centradas en el documento.

2.2. Propiedades de la imagen

 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:

Insertar imagen

Aquí tenemos tres campos de texto, dentro de la pestaña Ubicación, que debemos rellenar:

  1. Ubicación de la imagen: para incluir una imagen en el documento la buscamos en nuestro disco duro pulsando el icono de la carpeta que está en la parte derecha del campo de texto. En nuestro curso, tenemos la carpeta imagenes dentro de la carpeta principal, donde guardamos las imágenes, por eso aparece su nombre en el campo de texto seguida de una barra y del nombre del archivo: imagenes/monstruo.jpg.
  2. Título emergente: es el texto que aparece dentro de una etiqueta de color cuando ponemos el cursor del ratón encima de la imagen. Sirve para describir la imagen.
  3. Texto alternativo: es una descripción de la imagen que sirve para que los buscadores la clasifiquen y para que las pesonas que no ven las imágenes puedan saber de qué trata.

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:

Apariencia de la imagen

  1. Los espacios son los huecos en blanco que debe dejar la imagen en sus márgenes, y se miden en píxeles. Son recomendables para separar las imágenes de los párrafos o de las líneas de texto. También podemos añadir un borde de color negro para la imagen. 
  2. Hay varias formas de alinear el texto con la imagen, que Komposer reduce a cinco según se coloquen respecto al texto. aquí podemos ver gráficamente las tres primeras:
Monstruito Debajo Monstruito En el centro MonstruitoArriba

Monstruito

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.

Actividad 2.3. Actividad nº 2: Insertar imágenes

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:

Imagen

monstruo.jpg

Imagen

conpatas.gif

Imagen

ojos.gif

Imagen 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:

  1. La imagen del Monstruo la vamos a incluir debajo del subtítulo y centrada. Además, debe llevar un borde fino y el texto alternativo "Éste soy yo", u otro que sea significativo.
  2. También vamos a incluir otras dos imágenes en un nuevo archivo, que más adelante enlazaremos con la página principal y que vamos a llamar coleccion.htm, pues el monstruo va a guardar en él su colección de imágenes recogidas en sus viajes por Internet. El documento irá encabezado por la frase: "Mi colección de imágenes" y en él insertaremos dos de las imágenes que atesora el Monstruo: conpatas.gif y ojos.gif. Las imágenes las colocaremos una debajo de otra centradas en el documento.
  3. Después le pondremos un fondo negro a la página abriendo el menú emergente con el botón derecho del ratón y eligiendo Propiedades de página. Se abrirá una ventana de diálogo y haremos un clic en la sección Fondo. Allí cambiaremos el color blanco del fondo por uno negro abriendo el menú desplegable correspondiente. Probablemente tengamos que cambiar el color del texto del título por uno claro para que se distinga con el fondo negro.
  4. Finalmente, guardaremos este archivo junto a nuestro archivo index.html y le pondremos como título interno la frase "Mi colección de imágenes".
  5. Además, incorporaremos la imagen del Monstruo en la parte inferior del documento y la centraremos; ya veremos más adelante el motivo de su inclusión en ese lugar. Vamos a reducir esta imagen, y para ello la marcamos con un clic del ratón y arrastramos los tiradores de los bordes.

Si queremos ver cómo pueden quedar estas imágenes en el documento, pulsemos los siguientes botones:

Página con imagen

Colección de imágenes

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.

2.4. La etiqueta de imágenes en HTML

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".


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3