El marcado incorrecto de una imagen ocasiona la
falta de semántica en el proyecto, así como especificaciones con fallas en el
documento CSS. Por lo tanto, detallaremos los pasos necesarios para el uso de
la etiqueta img.
A fin de identificar gráficos de una página web correctamente, usaremos la etiqueta img en un documento HTML, según las
recomendaciones oficiales de este lenguaje de marcado.
Al ingresar a una página web, encontramos imágenes utilizadas por
su creador para captar la vista del usuario y, tal vez, para explicar mejor un
tema específico. Las mismas son marcadas en el documento HTML, con etiquetas de
este lenguaje. El navegador interpreta la etiqueta de imagen de forma lineal,
es decir, dentro de la caja de su contenedor, sin embargo, mediante diferentes
propiedades es posible modificar la presentación.
La instrucción utilizada en HTML
para agregar imágenes se conforma por los siguientes elementos:
- Img para indicar al navegador web, la posición exacta de la página donde mostrará una imagen.
- Src para describir la ubicación de la imagen. Es una abreviatura
de source; en español significa
fuente.
- Comillas
para delimitar el nombre de la imagen y la extensión indicadora de su formato.
- Ancla de
cierre para finalizar la instrucción.
Es importante cononocer que en el
lenguaje XHTML, por ser más estricto, se agrega la barra y luego el ancla.
061-01_1103_ilu01. Creación de la etiqueta
img
Para identificar el funcionamiento
de la etiqueta, es necesario seguir los siguientes pasos, a fin de asegurar la
visualización correcta de la imagen por parte del usuario:
- Crear la
carpeta del proyecto; en este ejemplo, artículos.
- Anexar en
la carpeta el documento HTML y, junto a este, la imagen con un nombre referente
a su contenido.
- Definir en
el documento HTML el elemento img, explicado
anteriormente.
- Especificar
dentro del atributo src, el nombre de
la imagen definido previamente, usuario.jpg.
En la vista del usuario siguiente se
muestra la imagen agregada. Existen casos en los cuales es necesario bajar con
la barra lateral para ver la imagen, debido a su visualización con el tamaño
original, cuando solo especificamos img y
src.
061-01_1103_ilu02. Visualización de la
etiqueta img
Ahora bien, si ubicados la carpeta
del proyecto eliminamos la imagen, y dejamos solo el documento HTML, al
ejecutar nuevamente en el navegador web Google
Chrome, observamos cómo en la ubicación de la imagen sale un recuadro dividido,
para indicar una imagen con falla. Es necesario tener precaución con este
ejemplo, y agregar en la carpeta del proyecto, todas las imágenes indicadas en
el documento HTML. De lo contrario, ser más precisos cuando definamos la
ubicación dentro de las comillas.
061-01_1103_ilu03. Visualización de la
etiqueta img con error
Keynotes
- El navegador interpreta la etiqueta de
imagen de forma lineal, es decir, dentro de la caja de su contenedor. Sin
embargo, mediante diferentes propiedades es posible modificar la presentación.
- La instrucción utilizada en HTML para
agregar imágenes se conforma por los siguientes elementos: Img para indicar, al navegador web,
la posición exacta de la página para mostrar una imagen. Src para describir la ubicación de la imagen. Es una abreviatura de
source; en español significa
“fuente”.
- Existen casos en los cuales es necesario
bajar con la barra lateral para ver la imagen, debido a su visualización con el
tamaño original, cuando solo especificamos img
y src.
- Es necesario agregar, en la carpeta del
proyecto, todas las imágenes indicadas en un documento HTML. De lo contrario,
debemos ser más precisos cuando definamos la ubicación dentro de las comillas.
RetoAgrega la etiqueta img en un documento HTML, define el nombre del mismo como prueba01, y sigue las recomendaciones
oficiales de este lenguaje.
¡Comparte el resultado del reto en tu vBox, y pide a tus compañeros comentar
sus impresiones!
Tiempo disponible: entre 15 y 30 minutos.
CierreCon el uso de la etiqueta img en un documento HTML, según las recomendaciones oficiales de
este lenguaje, marcamos correctamente una imagen y a la vez, agregamos sentido
semántico al proyecto. Exponemos eficientemente gráficos en una página web. La paciencia y la organización son
indispensables para el marcado correcto de imágenes,
