Utilizando la ![]()
etiqueta
En el código HTML de una página web, puede agregar una imagen usando el etiqueta. En el
etiqueta, necesita especificar cuatro atributos:
- Src : el atributo de origen indica la ubicación de la imagen. Puede usar una ruta relativa si la imagen está en el mismo servidor que su sitio, pero las imágenes de otro sitio requieren rutas absolutas.
- Alt : el atributo de texto alternativo es una descripción escrita de la imagen.
- Ancho - El ancho de la imagen.
- Altura - La altura de la imagen.
Un atributo opcional es Borde, que le permite especificar un borde alrededor de la imagen. El atributo de borde se define en tamaño de píxel. Por ejemplo, usando border = 1 en el etiqueta significa que el borde alrededor de la imagen tendría 1 píxel de ancho.
Nota: el atributo Borde ha quedado obsoleto en HTML5 y no se admite.
Ejemplos
Los siguientes ejemplos muestran el HTML real utilizado para agregar la imagen en la parte superior de esta página. Pueden insertarse en cualquier parte del cuerpo de su página. El primero tiene una URL más corta porque la imagen se almacena en nuestro servidor; El segundo es cómo se vincularía a nuestra imagen.
Ejemplo uno
Ejemplo dos
¿Qué formatos de imagen puedo usar en una página web?
Los formatos de imagen más comunes que se utilizan para fotos, fotos, logotipos y otras imágenes son JPEG, GIF y PNG. Es posible que otros formatos de imagen que no son ampliamente compatibles, como BMP, no funcionen en todos los navegadores.
¿Necesito citas sobre atributos en la etiqueta img?
Sí. Aunque los navegadores de hoy en día generalmente pueden corregir cualquier error con comillas faltantes alrededor de un valor de atributo, siempre debe tener comillas alrededor de un valor de atributo para evitar errores.