| 2002 a 2006 |
Ángel
R. Puente Pérez |
 |
 |
 |
La etiqueta para introducir una imagen en nuestra página es <img src="nombre.gif"> (src de source en inglés fuente u origen de la imagen) y siendo nombre el nombre que tiene la imagen y .gif su formato.
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 imag, pues bien, la etiqueta sería <img src="imag/nombre.gif">
Veamos un ejemplo:
En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imágenes más habituales en internet). La imagen se denomina riglos2.jpg
<html> <head> <title> Imágenes 1 </title> </head> <body> <center> <img src="imag/riglos2.jpg"> </center> </body> </html |
14.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 se acaba de cargar la imagen. En nuestro caso la imagen tiene 150 de ancho y 230 de alto. Escribiríamos:
<html>
<head>
<title>
Imágenes 2
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg"
width="150" height="230">
</center>
</body>
</html>
|
Es otro atributo que se coloca por varios motivos, el principal es que aquellas personas que visiten nuestra página sin descargarse las imágenes (habitual en los que tienen una mala conexión y no desean eternas descargas) tengan, al menos, una orientación del contenido de la misma. Debe ser una descripción corta del tema de la imagen. Se introduce con la cadena alt="descripción de la imagen" y, al ser un atributo, se coloca como los dos anteriores, dentro de la etiqueta <img>.
<html>
<head>
<title>
Imágenes 3
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg"
width="150" height="230"
alt="Mallos de Riglos (Huesca)">
</center>
</body>
</html>
|
Cuando el visitante (si navega con el Internet Explorer) se acerque con el cursor a la imagen, aparecerá un rectángulo con el texto alternativo:
|
Nota: El hecho de que aparezca el texto alternativo al acercarnos con el cursor a la imagen, es una desviación del Explorer. Existe otro atributo para que esto se produzca independientemente del navegador que empleemos. Es el atributo title. |
Y cuando navegue sin bajarse las imágenes se verá así:
14.3.- 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 imag. El código será el siguiente:
<html> <head> <title> Imagen como fondo de página </title> </head> <body background="imag/claro1.gif"> <center> <h2> Esta página tiene una imagen de fondo. </h2> </center> </body> </html> |
|
|
|
| 2002 a 2006 |
Ángel
R. Puente Pérez |
