 |
11.- Imágenes
Para insertar imágenes, el código HTML utiliza la etiqueta <img> con sus correspondientes parámetros que son los que se enumeran a continuación:
- src = "nombre de la imagen" (p. ej.: <img scr="mifoto.jpg">
- alt = "Texto" Este parámetro muestra un texto alternativo cuando pasamos el ratón por encima de la imagen.
- align = Indica como se alineará el texto con respecto a la imagen. Se puede alinear el texto con la parte superior de la imagen (top), con la parte central (middle), o con la inferior (bottom). También puede quedar la imagen a la derecha (right) del texto, rodeándolo, o a la izquierda (left).
- border = Indica si lleva borde y su anchura.
- height = Indica el alto de la imagen. Admite valores en puntos o en porcentaje.
- width = Indica el ancho de la imagen. Admite valores en puntos o en porcentaje.
- hspace = Indica el margen horizontal de la imagen con respecto al texto que le sigue o precede.
- vspace = Indica el margen vertical de la imagen con respecto al texto que le sigue o precede.
- lowsrc = "nombre de la imagen" Este atributo permite especificar una imagen auxiliar, que se abre en primer lugar, mientras carga la imagen definitiva. Se suelen usan imágenes de menor resolución, para que el usuario disponga de ellas cuanto antes. También se puede usar para logar ciertos efectos (muy simples) de animación. Este parametro no es reconocido por la totalidad de los navegadores.
Ejercicio 7:
Guarda una imagen cualquiera en la misma carpeta en la que guardarás tu archivo HTML. (Puedes guardar la imagen en cualquier carpeta, pero entonces deberás tener mucho cuidado a la hora de indicar la ruta).
Inserta el siguiente código dentro de la etiqueta <body></body>. En los dos primeros ejemplos vemos las diferencias de tamaño de la imagen especificadas por los atributos width (anchura) y height (altura)
| Código en el editor de textos |
En el navegador |
<img src="surf.jpg" width="139" height="89"/>
|
 |
| <img src="surf.jpg" width="196" height="125"/> |
|
|
En los siguientes ejemplos se aprecia la diferencia de alineación del texto con respecto a la imagen. Observa el uso del atributo align, con sus correspondientes valores top, middle y bottom.
| Código en el editor de textos |
En el navegador |
| <img src="surf.jpg" width="139" height="89" align="top"/> |
Alineación del texto arriba de la imagen |
| <img src="surf.jpg" width="139" height="89" align="middle"/> |
Alineación del texto en el medio de la imagen |
| <img src="surf.jpg" width="139" height="89" align="bottom"/> |
Alineación del texto abajo de la imagen |
Como sin duda habrás apreciado, la imagen y el texto están excesivamente juntos. Esto se puede mejorar usando los parámetros vspace y hspace.
| Código en el editor de textos |
En el navegador |
| <img src="surf.jpg" width="139" height="89" align="middle" hspace="15"/> |
Surf en el Pacífico |
El siguiente ejemplo muestra la imagen con borde de 4 puntos.
| Código en el editor de textos |
En el navegador |
| <img src="surf.jpg" width="139" height="89" align="middle" hspace="15" border="4"/> |
Surf en el Pacífico |
Haz todos los cambios que creas necesarios hasta que consigas práctica. Prueba con textos más largos para ver las alineaciones de texto envolvente con los parámetros align=right y align=left. |
|
| |
|
|
Crea tu web Tutorial HTML Trucos HTML Trucos Dreamweaver