Al principio las páginas web no eran como lo conocemos. Cuando no existían los navegadores, la manera de presentar información de manera remota era con texto como lo podemos ver en muchos sistemas operativos en sus terminales o similares.
Cuando aparecen los navegadores como los conocemos hoy fue a mediados de los 90 del siglo pasado y permitió con su desarrollo insertar más cosas que sólo texto. Una de esas inserciones fueron las imágenes.
Veamos la sintaxis básica para poner una imagen en nuestro archivo HTML:
<img src="Ubicación de la imagen">
Éste es el resultado:
src signfica source o recurso. Es importante saberlo porque no sólo se utiliza en el elemento imagen, se usa en muchos otros para mandar a llamar recursos diferentes, no sólo imágenes.
Vemos una imagen con su tamaño original. Es probable que la imagen que te apareció ocupó más espacio de lo que esperabas o muy pequeño. Esto se debe a que sólo hemos dado al atributo src la ubicación de la imagen.
Más adelante vamos a ver cómo presentar la imagen con un tamaño diferente.
Lo que me gustaría mostrar es la manera en que el navegador puede presentar la imagen en modo texto. Aunque no lo creas, muchos acceden a sitios web desde software con base texto. Además de ello, las tecnologías recientes como los dispositivos tipo Alexa, al leer un sitio web, al no poder leer la imagen, nosotros podemos darle una descripción a la imagen para que estos dispositivos le sea fácil de describir al usuario.
Escribamos la siguiente línea en nuestro archivo HTML:
<img src="Ubicación de la imagen" alt="Descripción de la imagen">
Éste es el resultado:
Agregamos el atributo alt que significa Alternativo es decir que, si la imagen no aparece, será el texto el que se presentará en pantalla.
En algunos navegadores al pasar el cursos sobre la imagen, aparece el texto alternativo.
Esto era una gran herramienta cuando la velocidad del intenet era de 32 kbits por segundo. Es muy raro que falle la impresión de la imagen ahora con velocidades de internte arriba de los 100,000 kbits por segundo en promedio.
Es incómodo ver una imagen de un tamaño muy grande o muy pequeño. Para tener el tamaño de la imagen igualada en la mayoría de los navegadores web necesitamos agregar dos atributos más como se muestra en la siguiente línea:
<img src="Ubicación de la imagen" alt="texto alternativo" width="150" height="150">
Éste es el resultado:
Los atributos que agregamos son:
width que significa ancho
height que significa altura
Los valores que le damos a éstos atributos son en pixeles. No se escribe de manera explícicta como sí en otros atributos o propiedades pero de manera nativa en HTML el pixel es lo que se utiliza para hacer la referencia al tamaño del contenido.
Poner una imagen como Link
Hasta el momento son todas las cosas que podemos hacer con el elemento Imagen
