8. IMÁGENES.

   

    8. Imágenes.

     La etiqueta para introducir una imagen en nuestra página es  <img src="nombredelaimagen.jpg">  (src de source en inglés  fuente u origen de la imagen y .jpg será el formato de la imagen). Podemos utilizar cualquier tipo de archivo: .gif , .png , … (NO VALDRÁ EL FORMATO .WEB)

     La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que se encuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada  imagenes , pues bien, la etiqueta sería  <img src="imaenesg/nombre.gif">

     Veamos un ejemplo. Este sería el código:

y el resultado:

     8.1. Atributos de la imagen width y height.

     Es muy importante introducir las medidas de la imagen (las podemos averiguar desde un programa gráfico como PhotoShop) dentro de la etiqueta <img>. De esta manera cuando el navegador va recorriendo la página reserva el espacio justo para la imagen y, el resto de la página se va cargando sin problemas mientra s se acaba de cargar la imagen. Las medidas las podemos cambiar con los atributos: width ="valor del ancho de la imagen" y height ="valor del alto de la imagen". En nuestro ejemplo la imagen puede tener 150 de ancho y 230 de alto. Veámoslo:

siendo el resultado:

     8.2. Colocar una imagen como fondo de la página.

     Simplemente tenemos que colocar dentro de la etiqueta  <body>  el atributo  background  con el nombre y/o dirección de la imagen que queremos colocar. Supongamos que quiero colocar una imagen denominada  claro1.gif  que está dentro de la carpeta  imagenes .

siendo el resultado:

Ejercicio 8. Imágenes.

     Realiza una página web lo más parecida a la que te muestro a continuación. IMPORTANTE: la imagen de las patatas fritas que nos descargemos debe de tener el formato .jpg, .gif o .png (esto lo podemos comprobar situándonos encima de la imagen en cuestión, dándole al botón derecho del ratón y a acontinuación en propiedades. Hay veremos el tipo de formato de la imagen) y debemos guardarla en el mismo sistio del ordenador (preferiblemente el ESCRITORIO) donde guardemos el archivo Ejercicio8.html. El código sería algo así: <img src="patatasfritas.jpg"> si el nombre de la imagen es patatasfritas y su formato es .jpg

     Para ver la solución del ejercicio 8, escribe el código que te facilitará el profesor:

Contraseña: