¿Qué son las etiquetas de imagen HTML?
El siguiente artículo proporcionará un resumen de las etiquetas de imagen HTML. Sé que es un cliché, pero permítanme comenzar diciendo que una imagen vale más que mil palabras. En el caso de las páginas web, es especialmente cierto. Una imagen puede venderle al visitante su idea, impresionar a alguien para que compre su producto y puede ayudar a que una página web se vea mucho mejor. En esta guía, veremos cómo podemos agregar IMG a las páginas web y alinearlas correctamente junto con agregar enlaces a ellas.
Agregar imágenes a páginas web
Puede agregar IMG a una página HTML utilizando el etiqueta en el documento HTML, aquí está la sintaxis:
Aquí, el IMG le dice al navegador que la etiqueta se trata de agregar un IMG al documento y el "src =" especifica desde dónde descargar la imagen.
Ejemplo de una página con una imagen
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Aquí está la salida del código:
Un hecho interesante sobre estas páginas HTML es que cuando usa la etiqueta IMG, la imagen no se inserta en dicha página web, sino que crea un espacio de retención donde la imagen se coloca una vez que se descarga.
Soporte del navegador y compatibilidad con atributos
Como es de esperar, todos los navegadores modernos admiten imágenes y el uso de etiquetas IMG. A veces, los navegadores móviles cambiarán el tamaño de la imagen para que se ajuste a la pantalla si la imagen no está configurada como sensible.
Cuando se trata de compatibilidad de atributos con HTML 4.01 y HTML5 más reciente, la mayoría de las etiquetas funcionarán, excepto para alinear, borde, hspace y vspace que simplemente no son compatibles con este último.
Imágenes como enlace:
Habrá momentos en que deseará que una imagen funcione como un enlace a otra página. Puede hacerlo agregando la etiqueta IMG dentro de la etiqueta.
Establecer una imagen como fondo de una página web
Puede asignar una imagen como imagen de fondo de una página web utilizando la propiedad CSS de imagen de fondo en el elemento Cuerpo de la página.
Imagen de fondo
Establecer una imagen para flotar en el navegador
Podemos usar la propiedad CSS "flotante" para configurar una imagen para que flote dentro de cualquier parte de la ventana del navegador. Echemos un vistazo a un ejemplo que lo ayudará a comprender.
Aquí, la imagen del automóvil flotará al lado derecho del texto.
Aquí, la imagen del automóvil flotará hacia el lado izquierdo del texto.
Atributos de la etiqueta de imagen
Los siguientes son los atributos de una etiqueta de imagen.
1) alinear
Valores posibles: superior, inferior, medio, izquierdo o derecho.
El atributo de encendido se usa para especificar la alineación de una imagen en la página web.
2) Alt
Tipo de valor: texto
Alt se utiliza para especificar el texto alternativo de una imagen de una página web. En los casos en que no es posible mostrar un IMG, el navegador muestra este texto al usuario. Los motores de búsqueda como Google y Bing utilizan este texto alternativo para mostrar resultados en la Búsqueda de imágenes.
3) frontera
Tipo de valor: píxeles
Se utiliza para crear un borde de grosor definido por el usuario alrededor de la imagen. No funciona en HTML5.
4) Origen cruzado
Tipo de valor: credenciales de uso anónimo
Este atributo se utiliza cuando queremos especificar cómo se deben tratar las fotos de origen cruzado. Esto se usa principalmente en casos en los que se utilizan elementos de lienzo de aplicaciones web JavaScript.
5) altura
Tipo de valor: porcentajes o píxeles
Obviamente, este se usa para denotar la altura de la imagen en la página web HTML.
6) hspace
Tipo de valor: píxeles
Sin soporte en HTML5, el atributo hspace se usa para especificar en píxeles cuánto espacio en blanco se agregará a la izquierda y derecha de la imagen insertada.
7) ismap
Tipo de valor: URL de una página
ismap utilizamos para definir dicha imagen como un mapa de imagen del lado del servidor. Cuando el usuario hace clic (o toca) dentro de la imagen, los navegadores envían las coordenadas del clic (o toque) al servidor web como una URL.
8) Longdesc
Tipo de valor: URL
Longdesc se usa para dar una descripción detallada de una imagen mediante el uso de una URL. La URL utilizada en el atributo se utiliza como la descripción de la imagen.
9) src
Tipo de valor: URL
src significa fuente y se usa para especificar la dirección desde la cual el navegador recuperará la imagen, esta URL se puede aplicar a una imagen dentro de un directorio en el mismo servidor y también puede almacenar una imagen en un servidor de terceros con Un nombre de dominio diferente.
10) mapa de uso
Tipo de valor: #mapname
El atributo usemap se usa para definir la imagen para un mapa de imagen del lado del cliente. Un mapa de uso siempre se usa con etiquetas HTML de mapa y área.
11) vspace
Tipo de valor: píxeles
Sin soporte en HTML5, el atributo Vspace se usa para establecer el número de píxeles que se utilizarán como espacios en blanco en la parte superior e inferior de la imagen en la página web.
12) ancho
Tipo de valor: píxeles
Tal como sugiere su nombre, el atributo ancho se usa para especificar el ancho de una imagen dentro de la página web HTML.
Conclusión: etiquetas de imagen HTML
Ahora que hemos echado un vistazo a cómo se agregan las imágenes en las páginas HTML y cómo establecer sus atributos, podemos crear páginas web de aspecto atractivo en un proyecto web.
Además de simplemente agregar un toque visual a una página web, las imágenes son valiosas porque también ayudan en la optimización de motores de búsqueda. Agregar etiquetas alt y descripciones adecuadas a las imágenes ayuda a los motores de búsqueda a comprender mejor el contenido de una página web y a mejorar la clasificación de una página web en muchos casos.
Artículos recomendados
Esta es una guía para las etiquetas de imagen HTML. Aquí discutimos los atributos de la etiqueta de imagen junto con el soporte del navegador y la compatibilidad con los atributos. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Una guía simple para los comandos HTML
- Introducción a lo que es XHTML?
- Tutoriales sobre atributos HTML
- Aplicaciones y usos principales de HTML
- Diferentes estilos de lista en HTML
- Marcos HTML
- Bloques HTML