El elemento de imagen/Image configura gráficos en una página web. Estos gráficos pueden ser fotografías, pancartas, logotipos de empresas, botones de navegación, etc. Estás limitado solo por tu creatividad e imaginación.

El elemento de imagen es un elemento vacío y no está codificado como un par de etiquetas de apertura y cierre. El siguiente ejemplo de código configura una imagen llamada logo.gif, que se encuentra en la misma carpeta que la página web:

<img src="logo.gif" height="200" width="500" alt="HTML desde Cero">
  • El atributo src especifica el nombre de archivo de la imagen.
  • El atributo alt proporciona un reemplazo de texto, típicamente una descripción de texto, de la imagen.
  • El navegador reserva la cantidad correcta de espacio para tu imagen si utiliza los atributos de altura y anchura con valores iguales o aproximadamente al tamaño de la imagen.

Proporcione valores precisos para la altura y el ancho de la imagen para conservar la relación de aspecto de la imagen, que es la relación proporcional entre el ancho y la altura de una imagen. El navegador puede sesgar o distorsionar la imagen si proporciona valores inexactos para la altura y/o el ancho de la imagen.

Lista de atributos img HTML

La siguiente tabla enumera los atributos de la etiqueta img y sus valores. Los atributos de uso común se muestran en negrita.

AtributosValores
alignright, left (predeterminado), top, middle, bottom; obsoleto: us la propiedad CSS float o position en su lugar
altFrase de texto que describe la imagen.
borderTamaño del borde de la imagen en píxeles; border = “0” evita que se muestre el borde de un hipervínculo de imagen; obsoleto: usa la propiedad border CSS en su lugar
heightAltura de la imagen en píxeles.
hspaceCantidad de espacio, en píxeles, que está en blanco a la izquierda y derecha de la imagen; obsoleto— usa la propiedad padding CSS en su lugar
idNombre del texto: alfanumérico, que comienza con una letra, sin espacios; el valor debe ser único y no se debe utilizar para otros valores de identificación en el mismo documento de la página web
longdescURL de un recurso que contiene una descripción accesible de una imagen compleja
nameNombre del texto: alfanumérico, que comienza con una letra, sin espacios; este atributo nombra a la imagen para que se pueda acceder fácilmente a ella mediante lenguajes de script del lado del cliente, como JavaScript; obsoleto: usa el atributo id
srcLa URL o nombre de archivo de la imagen.
srcsetNuevo atributo HTML 5.1 que admite la visualización del navegador de imágenes sensibles.
titleUna frase de texto que contiene información orientativa sobre la imagen; normalmente más descriptiva que el texto alternativo.
vspaceCantidad de espacio, en píxeles, que está en blanco encima y debajo de la imagen; obsoleto usar la propiedad padding CSS en su lugar
widthAncho de imagen en píxeles.

Observa que varios atributos en la Tabla están marcados como obsoletos. Aunque están obsoletos en HTML5, siguen siendo válidos en XHTML, por lo que los verás codificados en las páginas web existentes. Mientras trabajas en este curso, usarás CSS para volver a crear las funciones de estos atributos ahora obsoletos.

Accesibilidad e Imágenes

Utiliza el atributo alt para proporcionar accesibilidad. El atributo alt configura una descripción de texto alternativo de la imagen. Este texto alternativo es utilizado por el navegador de dos maneras. El navegador mostrará el texto alternativo en el área de la imagen antes de descargar y mostrar el gráfico. Algunos navegadores también mostrarán el texto alternativo como información sobre herramientas cada vez que un visitante de la página web coloque el cursor del mouse sobre el área de la imagen. Las aplicaciones como los lectores de pantalla leerán el texto en el atributo alt en voz alta. Un navegador móvil puede mostrar el texto alternativo en lugar de la imagen.

Los navegadores estándar como Internet Explorer y Safari no son el único tipo de aplicación o agente de usuario que puede acceder a tu sitio web. Los principales motores de búsqueda ejecutan programas llamados arañas o robots; Estos programas indexan y categorizan sitios web. No pueden procesar texto dentro de las imágenes, pero algunos procesan el valor de los atributos alt en las etiquetas de imagen.

El W3C recomienda que el texto alternativo no tenga más de 100 caracteres. Evita usar el nombre del archivo o palabras como imagen y gráfico como el valor del atributo alt. En su lugar, usa una frase breve que describa la imagen.

Hipervínculos de imagen

Escribir el código para hacer que una imagen funcione como un hipervínculo es muy fácil. Para crear un enlace de imagen, todo lo que necesitas hacer es rodear tu etiqueta img con etiquetas de anclaje. Por ejemplo, para colocar un enlace alrededor de una imagen llamada inicio.gif, usa el siguiente código:

<a href="index.html"><img src="inicio.gif" height="19" width="85"
alt="Inicio"></a>

Un enlace de imagen en miniatura es una imagen pequeña configurada como un enlace de imagen con un valor de atributo href que apunta a otro archivo de imagen en lugar de a una página web. Por ejemplo,

<a href="atardecer.jpg"><img src="demo.jpg" height="100" width="100"
alt="ver una puesta de sol muy grande"></a>

Ejemplo

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" 
alt="Un perro negro, marrón y blanco con un pañuelo.">
img {
  display: block;
  max-width: 100%;
}
Eiqueta IMAGEN (img)
5 (100%) 10 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Etiqueta VIDEO HTML5 con ejemplo

Etiqueta VIDEO

El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad ...
Leer Más
Etiqueta AUDIO HTML5 con ejemplo

Etiqueta AUDIO

El nuevo elemento audio de HTML5 soporta la reproducción nativa de archivos de audio en el navegador sin la necesidad ...
Leer Más
Etiqueta EMBED HTML5 con ejemplos

Etiqueta EMBED

El elemento embed es un elemento autónomo, o vacío (no se utiliza etiqueta de cierre), cuyo propósito es proporcionar un ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS