En el segundo capítulo: 'Nuestra primera página Web', aprendimos a insertar imágenes en una Web. Ahora empezaremos recordando brevemente aquel capítulo, para continuar con las distintas técnicas que nos ofrece el lenguaje HTML no sólo para incluir imágenes, sino para manejarlas, cambiar su apariencia o controlar su disposición respecto a los demás elementos de la página.
Insertando Imágenes
Recordemos que para insertar una imagen en una página Web era imprescindible guardarla en un archivo independiente del documento HTML. Dicho archivo podía contener la imagen en varios formatos, siendo los de mayor uso GIF y JPEG que pueden ser vistos con la práctica totalidad de navegadores. Cuando tenemos una imagen con estos formatos suelen tener la extensión .gif en el caso del formato GIF y .jpg o .jpeg en el caso de imágenes JPEG.
|
Algunas aplicaciones de retoque de imágenes guardan las imágenes GIF y JPEG con la extensión en mayúsculas (.GIF, .JPEG). Esta terminación es válida, pero los nombres de los archivos que contienen imágenes, igual que los de los documentos HTML, son sensibles a mayúsculas/minúsculas y por tanto .gif no es lo mismo que .GIF con lo que al referirnos al archivo debemos escribir su nombre y terminación respetando las mayúsculas y minúsculas. Si las hemos confundido cuando probemos las páginas en el ordenador local probablemente funcionen, pero dejarán de hacerlo cuando las publiquemos, es decir, cuando las pongamos en el servidor Web. |
|
El formato de una imagen es el código usado para almacenarla en un archivo. Los formatos simples simplemente guardan una tabla con el color de cada punto de pantalla (pixel) de la imagen. Sin embargo si guardamos una imagen grande con este formato ocupará demasiado. Por esta razón se crearon formatos más complicados basados en complejas fórmulas matemáticas, que consiguen reducir el tamaño de la imagen. GIF y JPEG son ejemplos de estos formatos. Los navegadores usan la extensión (los tres/cuatro últimos caracteres tras un punto) de los archivos para averiguar el formato en que están codificadas, si cambiamos manualmente esa extensión no tendrán esa información y la imagen no podrá ser visualizada. |
Es importante resaltar cambiando la extensión de una imagen no cambiamos el formato de dicha imagen, pero podemos dejarla inútil.
Más adelante trataremos a fondo estos dos formatos y comentaremos cuando es conveniente usar uno u otro.
Una vez tenemos la imagen en un archivo aparte (por ejemplo img.gif) con el formato adecuado insertamos la imagen usando la etiqueta IMG de la siguiente manera:
Como ya comentamos, esta etiqueta consta de una única instrucción. Pero aunque sólo vimos uno de sus atributos, SRC, contiene muchos más que iremos estudiando a lo largo del capítulo.
Pero antes de comenzar a ver nuevos conceptos...
Imágenes y texto
Cuando insertamos una imagen ésta se sitúa justo en el lugar donde está la etiqueta IMG independientemente de si hay texto alrededor o no, por esta razón este tipo de imágenes reciben el nombre de imágenes en línea o imágenes inline. Usando esta característica podíamos insertar imágenes pequeñas como si fuesen parte de un párrafo.
Si queremos insertar una imagen en el interior de un elemento de nivel de bloque, pongamos por ejemplo un encabezado, no tendremos más que poner la etiqueta en el interior de ese elemento (entre las instrucciones de inicio y fin). Si no lo hiciéramos así, después de la imagen se produciría un salto de línea antes del encabezado. Para entender esto mejor podemos fijarnos en la figura 5.8 y comparar entre los siguientes códigos:
<img src="imagenes/chistera.gif">
<h2>LA CHISTERA-Humor y magia</h2>
<h2>
<img src="imagenes/chistera.gif">LA CHISTERA-Humor y magia</h2>
|
que nos resultarán familiares de la primera práctica.
Como vemos, en el primer caso la instrucción de inicio del encabezado, <h2>, provocará una salto de línea y el efecto no será el deseado. En el siguiente caso hemos incluido la etiqueta IMG dentro del encabezado, es decir, estamos diciendo al navegador algo así: 'el encabezado consta de esta imagen y este texto'. En este caso, como resulta totalmente lógico, el resultado es el deseado.
Aún así el ejemplo anterior no resuelve todos los problemas que podrían plantearse al insertar imágenes. Como ya vimos en un ejemplo del capítulo 2 (fig. 2.9), que ahora reproducimos en la figura 5.9 cuando las imágenes son pequeñas pueden incluirse junto con el texto sin problemas, pero ¿qué ocurre si queremos insertar una imagen de dimensiones mayores? Podemos usar el método anterior, pero entonces obtendríamos resultados como el de la figura 5.10, que sin duda no es el deseado y provoca que el texto sea difícilmente legible.
Una opción para solucionar este problema es provocar un salto de línea antes y después de la imagen, tal y como hacíamos en la práctica 2 para las imágenes de la página de presentación. Podemos usar diversas etiquetas para conseguir los saltos de línea: P, CENTER, BLOCKQUOTE, BR, etc. por ejemplo:
<p>
<img src="montanas.html">
</p>
<center>
<img src="montanas.html">
</center>
|
Sin embargo no siempre nos conformamos con esto. Habitualmente lo que queremos es que la imagen se inserte junto con el texto y que este se sitúe alrededor suyo, tal y como vemos en periódicos u otras publicaciones. De esta forma podríamos conseguir el efecto de la figura 5.11. Afortunadamente es posible conseguir ese efecto usando las capacidades de alineamiento de imágenes del HTML.
