Actualizado el 14-01-2007
versión para imprimir
Como insertar imágenes en la página
La etiqueta de imagen y sus atributos
Insertar imágenes en nuestra página es muy fácil (siempre que tengamos esas imagenes, claro). Prueba a guardar esta imagen en tu disco duro (pulsa con el botón derecho del ratón sobre la imagen, y escoge la opción guardar imagen). Y escribe en tu página:
<img src="imagenes/Pic4.gif" width="168" height="180" alt="mi héroe" >
donde, si has indicado la ruta correcta a la imagen, obtendrias mi personaje
favorito:
Veamos como lo hemos hecho:
<img src=
La etiqueta para insertar una imagen es img. A diferencia de
las etiquetas que hemos visto hasta ahora, no es una etiqueta doble, no lleva pareja de cierre.
Con el atributo src indicamos el
origen (source), es decir, el directorio donde está guardada la foto. Recuerda por favor lo que ya hemos dicho sobre las URLs: puedes indicar el camino a la imagen de forma absoluta o relativa. En este caso decimos al navegador que busque la imagen en un directorio llamado "imagenes"
width="168" y height="180"
son atributos que sirven para indicar la anchura y altura que ocupa la foto, en este caso 168*180. Los tamaños están indicados en pixels, pero no hace falta especificar la unidad de medida. ¿que como conseguimos este dato? muy fácil, existen muchos programas que nos ayudan. Los editores gratuitos arachnophilia o Html-kit hacen el cálculo automáticamente. O sencillamente busca en tu disco duro el archivo gráfico, haz click derecho sobre él y selecciona propiedades, donde veras las dimensiones de la imagen.
Especificar la anchura y altura no es imprescindible. Si no lo hacemos, en navegador las calculará por nosotros. Sin embargo la ventaja de hacerlo es que el navegador al llegar al punto donde debe insertar la imagen, reserva ya el espacio necesario y sigue cargando el resto de la página. Por el contrario si no dispone de los
datos, interrumpe la carga de la página mientras descarga la imagen y calcula el
tamaño, siguiendo despues con el resto. Por ello si ya proporcionamos nosotros anchura y altura, aceleramos la descarga y representación de la página.
Existen muchos tipos de archivos gráfico. No todos valen para internet, y de los que valen, quédate de momento con estos tres tipos de archivos: jpg (o jpeg), png , y gif.
alt="mi héroe" nos permite incluir una descripción en texto, que será utilizada por los navegadores cuando no puedan mostrar la imagen: navegadores solo texto, como el lynx, o navegadores que tengan deshabilitada la opción de abrir gráficos ... o navegadores que en ese concreto momento no puedan acceder a la imagen. Es tambien util para personas con discapacidades. Este atributo es obligatorio.
¿Y que es lo que pasa si indicamos unas medidas incorrectas? pues que el navegador distorsiona la imagen hasta adaptarla a las medidas indicadas
<img src="imagenes/Pic4.gif" width="230" height="180" alt="mi héroe, mas gordo" >
Aqui puedes ver a nuestro héroe bastante mas gordo.
Alineando la imagen...
Quizás te hayas dado cuenta de que el navegador, si no tiene otras instrucciones, y la imagen no está inserta en un párrafo de texto, la alinea a la izquierda (primera aparicion de nuestro héroe), y si está dentro de un texto, alinea dicho texto coincidiendo con el borde inferior de la imágen. Con el atributo align [en desuso !] podemos cambiar esto, especificando la colocación de la imagen respecto del texto:
<img src="imagenes/Pic4.gif" align="right" width="168" height="180" alt="derecha" >
La imagen se alinea a la derecha del texto, aunque lo hayamos escrito a su
izquierda y derecha. Veamoslo:
Itriprem, equidoquadius quadi alebi tonapat.
Rhism rasp agara an bitepant po elepsont. Gaquideus in vamalam melegant. Maculam
in bupem stigocrotis. Quorasp est. Eledr nusp mesem uno napratis pso fepsotis.
Rhesch lonapri, drepl tupiem oma lasni ascriplo. Drasm scrugitrus opsascront,
ibo brih celus tedetronis
<img src="imagenes/Pic4.gif" align="left" width="168" height="180" alt="mi héroe" >
Otro ejemplo: Aqui decimos que la imagen se situe a la izquierda, el
texto a la derecha. Venga mas texto para demostrarlo:
Prop enatri, post
hinudrus ahe decaspius avonat. Ofasn est. Itorh mespam spo demepius denetrant.
Putr ucospa ehabratis, sci opist osnaquid pohatis. Othithem arupas, trut
tholofiem lus quidoselus cupont. Amedr otocriem, iprel equidaquora pet
isaquadeus momubatis. Ostip schilarius, acril pilebrus bun renacrus
quorirotront. Vepl est. Olequor uhipius, gapr pepal ip ogequorius ischorhanis.
Estop gopi eci ogesteus odetrant.
insertando align="top" en la etiqueta, el texto se alinea con la parte
superior del gráfico. Las siguientes lineas abajo:Lavi itu lip pesa pa
scripisus est. Ocros iscroquorem maprant, sti ofoth abothem aredro. Etopi, liceb
ta espitrus notascotis. Sceg est. Latrius in omibr apemas.
insertando align="middle" en la etiqueta, el texto se alinea en el
centro del gráfico. Las siguientes lineas abajo: Sirhus ip ema afopam ta
plegotrius est. Emosch sepl acidriem in pirumanis ate amesonis. Losi schat mut
mamurhius melospat.
insertando align="bottom" en la
etiqueta, el texto se alinea en la base del gráfico: Muluquoram pset quide
alonam oposnont. Bren cinam dra gasmius stotiquoras. Osmom est. Snicr onascreus,
plosc umesti ta nudi pespont. Raquid venapriem, crof ifabrius am gufi
iquidiplant.
Como verás, las posibilidades son bastante pobretonas. Por eso es frecuente acudir a un truco: incluir tanto el gráfico como el texto dentro de tablas. Pero eso será objeto de siguientes lecciones
Alineando imagenes ... con estilo
Como align ha sido marcado como elemento en desuso si se utiliza con ciertas etiquetas, entre ellas img, hemos de acudir de nuevo a las hojas de estilo en cascada para alinear nuestras imágenes.
Aunque existen varias formas de hacerlo, quizás la mas versátil sea convertir la imagen en objeto flotante con float:
<img src="imagenes/Pic4.gif" style="float:right" width="168" height="180" alt="derecha" >
La imagen se alinea a la derecha del texto, aunque lo hayamos escrito a su
izquierda y derecha. Veamoslo:
Itriprem, equidoquadius quadi alebi tonapat.
Rhism rasp agara an bitepant po elepsont. Gaquideus in vamalam melegant. Maculam
in bupem stigocrotis. Quorasp est. Eledr nusp mesem uno napratis pso fepsotis.
Rhesch lonapri, drepl tupiem oma lasni ascriplo. Drasm scrugitrus opsascront,
ibo brih celus tedetronis
<img src="imagenes/Pic4.gif" style="float:left" width="168" height="180" alt="mi héroe" >
Otro ejemplo: Aqui decimos que la imagen se situe a la izquierda, el
texto a la derecha. Venga mas texto para demostrarlo:
Prop enatri, post
hinudrus ahe decaspius avonat. Ofasn est. Itorh mespam spo demepius denetrant.
Putr ucospa ehabratis, sci opist osnaquid pohatis. Othithem arupas, trut
tholofiem lus quidoselus cupont. Amedr otocriem, iprel equidaquora pet
isaquadeus momubatis. Ostip schilarius, acril pilebrus bun renacrus
quorirotront. Vepl est. Olequor uhipius, gapr pepal ip ogequorius ischorhanis.
Estop gopi eci ogesteus odetrant.