Uso de la etiqueta img en HTML – Masterhacks Blog

Uso de la etiqueta img en HTML

En el lenguaje HTML se usa la etiqueta <img> para la inserción de cualquier tipo de imagen en el documento web.

La sintaxis de esta etiqueta es:
<img src=»imagen.jpg» />

De esta forma se inserta la imagen que se encuentre en la carpeta raíz o donde esté el documento en el que se está trabajando, pero si por ejemplo la imagen está en una carpeta, se tiene que poner la ruta completa, por ejemplo:

<img src=»imagenes/logo.jpg» />

Si estamos trabajando en una carpeta y la imagen se encuentra en la raíz, entonces utilizamos dos puntos (..):

<img src=»../logo.jpg» />

Esta etiqueta no tiene otra de cierre, es decir, </img> no existe, en lugar de esto, se deja un espacio después del último atributo y se coloca la diagonal; <img src=»imagen.gif» />

Los atributos más usados en esta etiqueta son los de tamaño; width y height, su sintaxis es:

<img src=»imagen.jpg» width=»100px» height=»100px» />

De esta manera se puede modificar el tamaño de la imagen. Pero los valores deben ser proporcionales a los originales para que la imagen no se distorsione demasiado.

También se puede usar el atributo border para dar un borde a la imagen;

<img src=»imagen.png» border=»2″ />

Si se quiere poner una descripción corta, que salga al pasar el cursor sobre la imagen, se utiliza el atributo title;

<img src=»imagen.jpg» title=»Descripcion» />

Estos son los atributos más utilizados, se pueden combinar etiquetas para que al dar clic en la imagen nos lleve a alguna página o cosas parecidas, pero eso lo veremos en otros tutoriales.

Gracias por apoyar el libre conocimiento con tu donación!
Bitcoin: bc1q4sw9260twfcxatj8mjp7358cyvrf8whzlelyhj
Ethereum: 0xFb93D2a3c9d1A0b83EE629c2dE1725BCa192e581
Litecoin: LbFduJmHvQXcpCnwfUT7aJ4DYoWSL3iQw8
Dogecoin: D7QQVqNR5rk215A4zd2gyzV9P2bLQtZHFV
Transferencia bancaria en México:
Cuenta CLABE: 646180224401848086 Nombre: Masterhacks LATAM Banco: STP

Unete a nuestros grupos:
WhatsApp: https://chat.whatsapp.com/C8fqiz3aDDc58VRRd1vdrb
Telegram: https://t.me/masterhacks_net
Canal de WhatsApp https://whatsapp.com/channel/0029VaBBLCn5vKAH9NOWCl3K

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *