IMÁGENES

Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.
 
ETIQUETA <IMG>
 
Todas las páginas Web acostumbran a tener un cierto número de imágenes,
que permiten mejorar su apariencia, o dotarla de una mayor información visual.
Para insertar una imagen es necesario insertar la etiqueta:

<img>

Dicha etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="Gatito.jpg">

Donde:
- Gatito.gif es el nombre de la imagen
 - imagenes, es el directorio donde se encuentra la imagen y que se
encuentra en el mismo directorio que el documento actual (referencia relativa al
documento).

Para trabajar de una forma más sencilla y ordenada, es recomendable que

todos los documentos html se encuentren en un mismo directorio, y que dentro de
este directorio existan diferentes carpetas para agrupar otros objetos, como
puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a
almacenar archivos de audio, etc.

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc.
Pero no todos estos formatos son adecuados para una Web, debido a que pueden
ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser
imágenes de menor calidad que las imágenes BMP, son más recomendables debido a
que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con

grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con
gran frecuencia, ya que permiten definir transparencias y animación.
Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones
de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se
utilizan más para fotos.

Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en

algunos navegadores. Este es el caso de las imágenes BMP y PNG.

Puedes cambiar el formato de las imágenes mediante la utilización de algún

programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop,
Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción,
exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin
perder en calidad (siempre que la imagen se adecue al formato).

Dependiendo del programa utilizado existirá una mayor o menor cantidad de

opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas,
como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el
programa Paint de Windows.
TEXTO ALTERNATIVO
 

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede
ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con
una X roja en su lugar, junto con el nombre de la imagen.

Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca

el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada libro.gif, con el
texto alternativo Imagen libro, para ello insertamos el siguiente código:

<img src="gatito2.jpg " alt="Imagen libro" >

Pero hemos cometido un error, ya que dicha imagen no se encuentra en el

mismo directorio que el documento actual, sino que se encuentra dentro de la
carpeta imágenes. En lugar de la imagen se mostrará lo siguiente:

 
El texto alternativo se muestra también al situar el puntero sobre la
imagen. Si sitúas el puntero sobre la imagen durante unos segundos, verás como
aparece el texto Imagen libro.
 El texto alternativo es muy útil a la hora de diseñar páginas más asequibles
a los invidentes ya que los programas lectores son capaces de leer el texto
alternativo.
BORDE DE UNA IMAGEN

En general, al visualizar una página en un navegador las imágenes aparecen sin

ningún borde alrededor, pero es posible establecer uno a través del atributo
border.

El atributo border puede tomar valores numéricos, que indican el grosor en

píxeles del borde.

Por ejemplo, para insertar la siguiente imagen con borde:

Habría que escribir:

<img src="gatitos3.jpg" border="4" >

Hay que tener en cuenta que el borde de la imagen siempre será de color
negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde
será el color establecido para los vínculos.
Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:

Habría que escribir:

<a href="gatito4.jpg" target ="_blank" >

<img src="gatito4.jpg" border="4" >
</a>

Si se desea establecer un vínculo sobre una imagen y no se desea que se

muestre el borde (que por su color indica que existe dicho vínculo), es necesario
establecer border="0".
 
TAMAÑO DE UNA IMAGEN
 

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño
original, pero por diversos motivos puede interesarnos modificar dicho tamaño.
 A través de los atributos width (anchura) y height (altura) puede
modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica
directamente sobre el archivo de imagen, sino que lo que varía es la visualización de
la imagen en el navegador.

El valor que pueden tomar los atributos width y height ha de ser un número,
acompañado de % cuando se desee que sea en porcentaje con respecto a la página.
Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122
píxeles de anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles
de altura:

Habría que escribir:

<img src="gatito6.jpg" width="200" height="80">

Al modificar el tamaño de la imagen a través de estos atributos es muy

probable que la imagen resultante no sea de buena calidad, en comparación de cómo
podría quedar modificándola desde un editor externo, como Fireworks.
 
ALINEACIÓN DE UNA IMAGEN
 
La alineación de las imágenes se establece a través del atributo align. Este
atributo indica la alineación de las imágenes con respecto a la línea de texto en la
que se encuentran.

Los valores del atributo align pueden ser los siguientes:

ValorSignificadoabsbottominferior absolutaabsmiddlemedio absolutabaselinelínea de

basebottominferiorleftizquierdamiddlemediorightderechatexttoptexto
superiortopsuperior 

El resultado de aplicar uno u otro valor puede tener el mismo resultado, como
ocurre con baseline y bottom, o con los valores texttop y top.

Para alinear el texto con la imagen podríamos podriamos probar los siguientes
ejemplos:

Este es un ejemplo <img scr="logo_libros .jpg" align="middle"> de alineación de

una imagen con el texto.

Este es un ejemplo <img src="logo_libro.jpg" align="top" border="4"> de

lineación de una imagen con el texto.

……ETC… puedes probar con diferentes atributos.

Este tipo de alineación la recomendamos cuando es una imagen pequeña que

queremos fundir con la línea de texto sin que por ello cree una separación
demasiado grande entre la línea donde se encuentra la imagen y las líneas superior
y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un
botón, etc...

Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla
a la derecha ni a la izquierda sino colocarla en un bloque aparte). O también es
buena idea crear tablas e insertarlas en celdas.
EJERCICIOS

1.- Busca una imagen colócala en la carpeta donde se encuentra tu documento Web
y realiza las siguientes pruebas vistas a lo largo del tema:

<html>

<head>

<title> EJEMPLOS VARIOS 2</title>

<body
text="blue">

<!-- EJEMPLO 1//--><br><br>1.IMAGEN EXISTE<br><br>

<div align="center">

<img src="LOGO_LIBRO.JPG" alt="Imagen libro" >

</div>

<!-- EJEMPLO 2//--><br><br>2.IMAGEN NO EXISTE<br><br>

<img src="libro.gif" alt="Imagen libro" >

<!-- EJEMPLO 3//--><br><br>3.IMAGEN CON BORDE <br><br>

<img src="logo_libro.jpg" border="4" >

<!-- EJEMPLO 4//--><br><br>4.IMAGEN CON BORDE Y VINCULO<br><br>

<a href="http://www.casadelibro.com" target ="_blank" >

<img src="logo_libro.jpg" border="4" >
</a>

<!-- EJEMPLO 5//--><br><br>5.IMAGEN CON BORDE 0 Y VINCULO<br><br>

<a href="http://www.casadelibro.com" target ="_blank" >

<img src="logo_libro.jpg" border="0" >
</a>

<!-- EJEMPLO 6//--><br><br>6.MODIFICANDO EL TAMAÑO <br><br>

<img src="logo_libro.jpg" width="200" height="80">

<!-- EJEMPLO 7/--><br><br>7.TEXTO E IMAGENES ALINEACION <br><br>

Este es un ejemplo <img src="logo_libro.jpg" border="4"> de

alineación de
una imagen con el texto.
<!-- EJEMPLO 8/--><br><br>8.TEXTO E IMAGENES ALINEACION middle
<br><br>

Este es un ejemplo <img src="logo_libro.jpg" align="middle"

border="4"> de
lineación de una imagen con el texto.

<!-- EJEMPLO 9/--><br><br>9.TEXTO E IMAGENES ALINEACION

absmiddle<br><br>

Este es un ejemplo <img src="logo_libro.jpg" align="absmiddle"

border="4"> de
lineación de una imagen con el texto.

<!-- EJEMPLO 10/--><br><br>10.TEXTO E IMAGENES ALINEACION baseline

<br><br>

Este es un ejemplo <img src="logo_libro.jpg" align="baseline"

border="4"> de
lineación de una imagen con el texto.

<!-- EJEMPLO 11/--><br><br>11.TEXTO E IMAGENES ALINEACION top

<br><br>

Este es un ejemplo <img src="logo_libro.jpg" align="top" border="4">

de
lineación de una imagen con el texto.

<!-- EJEMPLO 12/--><br><br>12.TEXTO E IMAGENES ALINEACION left

<br><br>

Este es un ejemplo <img src="logo_libro.jpg" align="left" border="4">

de
lineación de una imagen con el texto.

<!-- EJEMPLO 13/--><br><br>13.TEXTO E IMAGENES ALINEACION right

<br><br>

Este es un ejemplo <img src="logo_libro.jpg" align="right"

border="4"> de
lineación de una imagen con el texto.

</body>
</html>
EJERCICIO PROPUESTO

1.- Crea una carpeta Imágenes en tu directorio (donde se encuentra tu página

Web).
- Descarga de Internet varias Imágenes y guárdalas en la carpeta.
- Crea un documento html e inserta varias imágenes aplica diferentes opciones
con sus atributos

- Bordes, tamaño, alineación con el texto

- Posiciona el texto en la pagina, centrandola, alineandola a izda…..
- Añade un hipervínculo a otra página a la imagen.