Insertando imágenes a las páginas web

Las imágenes pueden ser de gran ayuda para mostrar información en la página Web aparte de darle otra presentación. Para mostrar una imagen se utiliza el tag <img>.

 

Para el ejemplo que sigue a continuación, supongamos que tenemos la imagen mundo.jpg y se encuentra en el mismo directorio o carpeta que la página HTML.

 

Con la etiqueta <img> no nos alcanzaría para insertar una imagen, es necesario agregarle cierta información que ayudaría al navegador a mostrarla.

Cada información que le proporcionaríamos a la etiqueta sería un atributo de dicha etiqueta.

Por ejemplo, en esta etiqueta le pasaríamos dos atributos: uno de ellos sería width y el otro height, para indicarle el ancho y el alto de la imagen, respectivamente.

 

El atributo src indica el nombre de la imagen. El ancho y el alto no son estrictamente necesarios pero ayuda a mostrar más velozmente la página Web.

Puede ser también que el navegador no soporte la visualización de archivos gráficos; en ese caso se utiliza el atributo alt para brindar una pequeña descripción de lo que se quiere mostrar.


 

Podemos obtener esas imágenes de múltiples formas: de una cámara digital, de un texto escaneado o una imagen creada por algún programa específico como el Adobe PhotoShop.

Esas imágenes pueden estar en formato .JPG, .GIF o .PNG. Generalmente el formato .JPG es el mejor para fotografías y .GIF y .PNG son los más utilizados para gráficos que contengan líneas y textos.

 

Un problema muy habitual es que la mayoría de los servidores de hosting diferencian entre un nombre de archivo en minúscula y otro en mayúscula. Por lo tanto es conveniente que cuando definamos los nombres a los archivos los coloquemos en minúscula y así también cuando intentemos enlazarlos mediante el tag img.

 

Entre las nuevas etiquetas HTML5 que tenemos a nuestra disposición están las etiquetas <figure> y <figcaption>.Estas nuevas etiquetas nos permiten definir una mejor semántica a nuestro contenido dentro de un documento HTML5. La intención del elemento <figure> es que sea utilizado junto con el elemento <figcaption> y representa una unidad de contenido, que puede incluir (opcionalmente) una leyenda.

 



Compartir: