Las Imágenes pueden mejorar el Diseño y la Apariencia de una Página Web. Al principio, las Páginas Web sólo eran texto y resultaba más bien aburrido. Afortunadamente, no pasó mucho tiempo, antes de que se añadiera la capacidad de insertar/incrustar Imágenes en los Documentos HTML.
Hay otros tipos de Etiquetas HTML, para insertar, Elementos Multimedia, pero vamos a empezar por lo básico y después iremos avanzando.
Sintaxis de Imágenes en HTML
La Etiqueta HTML <img>, se utiliza para incrustar una Imagen en una Página Web.
Técnicamente, las Imágenes, no se insertan/incrustan en una Página Web. Las Imágenes están vinculadas a una Dirección de una Páginas Web (URL, acrónimo del inglés, Uniform Resource Locator, o Localizador de Recursos Uniforme). La Etiqueta <img> crea un espacio de almacenamiento para la Imagen a la que se hace referencia.
La Etiqueta <img> está vacía, es decir, contiene solo Atributos y no tiene una Etiqueta de Cierre.
La Etiqueta <img> tiene dos Atributos , aunque, los dos no son obligatorios:
- El Atributo «src», que especifica la Ruta a la Imagen.
- El Atributo «alt», que especifica un Texto Alternativo para la Imagen.
Sintaxis de la Etiqueta img
<img src=»url» alt=»alternatetext»>
El Atributo «src»
El Atributo «src» es de uso obligatorio y especifica la Ruta a la Imagen (URL).
Ejemplo
<img src=»nombre_del_archivo_de_la_imagen.jpg» alt=»Texto Alternativo de la Imagen»>
Si el Navegador (Browser) no puede localizar el Archivo de la Imagen (Siguiendo la Ruta indicada en el Atributo «src»), entonces se mostrará un Ícono de Enlace Roto y el Texto Alternativo que esté configurado en el Atributo «alt».
El Atributo «alt»
El Atributo «alt» proporciona un Texto Alternativo para una Imagen, si el usuario/visitante, por algún motivo, no puede verla: debido a una Conexión Lenta, un Error en el Atributo «src» o si el usuario/visitante, usa un Lector de Pantalla).
El Valor del Atributo «alt» debería configurarse para describir la Imagen: El SEO sería bastante importante desde un punto de vista de Posicionamiento Web y del Marketing Online.
Ejemplo
<img src=»nombre_del_archivo_de_la_imagen.jpg» alt=»Texto Alternativo de la Imagen»>
Si un Navegador (Browser) no puede encontrar una Imagen, según la Dirección URL (O la Ruta) configurada, mostrará el Valor del Atributo «alt».
Tamaño de Imagen (Ancho y Alto de la Imagen)
