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.