TUTORIAL HTML: 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)
|
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.
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.
El siguiente ejemplo muestra la imagen con borde de 4 puntos.
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.
