Como estudiar en el SENA Virtual

Como Insertar Imágenes Con HTML

Las páginas Web además de mostrar texto, son capaces de desplegar imágenes que han de ser creadas en cualquiera de los formatos aceptados: GIF, JPG o PNG. Una imagen con extensión BMP, CDR, PCX o cualquier otro formato diferente no será exhibida en el explorador y en su lugar se mostrará uno de los siguientes iconos, dependiendo del navegador que se tenga: Una imagen puede ubicarse en cualquier parte de la página, incluso puede ocupar el lugar de un carácter. Para insertar imágenes lo único que se necesita conocer es la ruta y el nombre del archivo que la contiene. La etiqueta (IMG) junto con su atributo SRC ="ruta" permiten mostrar una imagen:

(IMG SRC ="logo.gif")


El ejemplo anterior mostrará la imagen logo.gif ubicada en el mismo directorio donde reside la página web. Si por el contrario la imagen se encuentra en otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La ruta tiene las mismas características ya definidas en el aparte dedicado a “Ubicación de Archivos” de éste módulo. Por ejemplo,

SRC=”Imágenes/logo.gif” mostrará la imagen logo.gif, ubicada bajo el subdirectorio Imágenes. La etiqueta (IMG) cuenta además de SRC con otros atributos que controlan la manera como se desplegarán las imágenes:

ALT ="Texto alternativo" Permite definir un texto que aparecerá en caso de que la imagen por alguna razón no pueda ser mostrada, o cuando se desplaza el puntero del ratón sobre la imagen ya desplegada. HEIGHT = ”XX” y WIDTH = ”XX” Medida en píxeles del alto y ancho de la imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que de esta manera el navegador conozca el tamaño de la imagen antes de descargarla. Con ellos podemos controlar además el tamaño original de una imagen. Si por ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 píxeles, sea mostrada a la mitad de su tamaño en el navegador, basta con escribir una de las tres líneas siguientes, siendo más recomendada la tercera:

(IMG SRC=“NombreDeLaImagen.gif” HEIGHT=“60”)
(IMG SRC=“NombreDeLaImagen.gif” WIDTH=“60”)
(IMG SRC=“NombreDeLaImagen.gif” WIDTH=“60” HEIGHT=“60”)

Si deseas incluir alineación a la imagen, es decir que aparezca en el centro solo es colocar la opción ALING= “Center”, a la derecha solo es colocar la opción ALING= “Right” o por defecto aparece a la izquierda.
No Olvides reemplazar los paréntesis por los signos <>.

Éxitos.