Curso HTML: Imágenes
Las imágenes utilizadas en una página web pueden ser de dos tipos: de contenido o de decoración. En el primer caso, si la imagen pertenece al contenido y tema tratado en esa página, debería incluirse mediante una etiqueta HTML <img>.
El tag básico para colocar una imagen es “img“. Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación.
El atributo “src” es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src=”x”>, siendo “x” la dirección o la url dónde se encuentra situada la foto.
La foto podemos alinearla en la página como queramos mediante “align“, utilizando los atributos “left” para alinearla a la izquierda, “right” para alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla abajo y “middle” para alinearla al centro.
También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo “alt” y lo escribiríamos de la siguiente manera: alt= “x”, siendo “x” la descripción que le gente leerá al pasar el ratón por encima.
Debemos aclarar que no con todos los navegadores podemos ver el “alt” de manera visual. Hay algunos que no lo representan.
Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen.
Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: “border“. Después solo tendrás que definir cuál quieres que sea el grosor del borde.
Código
<img src=»html/imagenes/escapedigital.jpg» alt=»Este es el ejemplo de un texto alternativo» width=»400″ height=»300″>
Responsive
Para hacer una imagen responsive adaptada al tamaño de su contenedor, tan solo tienes que añadir el siguiente atributo a la etiqueta img: style=”max-width:100%;width:auto;height:auto;”. Con esto conseguirás que la imagen se adapte a los diferentes cambios en el tamaño de pantalla.
img src="html/imagenes/escapedigital.jpg" style="max-width:100%;width:auto;height:auto;">
Si quieres recibir artículos como este en tu móvil únete al Canal de Escape Digital en Telegram o en Twitter
