Imágenes HTML
- Página anterior Enlaces HTML
- Página siguiente Tablas HTML
Puedes mostrar imágenes en el documento utilizando HTML.
Ejemplo
- Insertar imagen
- Este ejemplo muestra cómo mostrar imágenes en una página web.
- Insertar imágenes desde diferentes ubicaciones
- Este ejemplo muestra cómo mostrar imágenes de otros directorios o servidores en una página web.
(Puedes encontrar más ejemplos en la parte inferior de esta página)
Etiqueta de imagen (<img>) y propiedad de origen (Src)
En HTML, la imagen se define mediante la etiqueta <img>.
<img> es una etiqueta vacía, lo que significa que solo contiene propiedades y no tiene etiqueta de cierre.
Para mostrar una imagen en la página, necesitas usar la propiedad de origen (src). src significa "fuente". El valor de la propiedad de origen es la dirección URL de la imagen.
La sintaxis para definir una imagen es:
<img src="url" />
La URL indica la ubicación de almacenamiento de la imagen. Si una imagen llamada "boat.gif" se encuentra en el directorio "images" de www.codew3c.com, su URL es http://www.codew3c.com/images/boat.gif.
El navegador muestra la imagen en el lugar donde aparece la etiqueta de imagen en el documento. Si colocas la etiqueta de imagen entre dos párrafos, el navegador mostrará primero el primer párrafo, luego la imagen y finalmente el segundo párrafo.
Reemplazar las propiedades de texto alternativo (Alt)
La propiedad alt se utiliza para definir una serie de textos alternativos preparados para la imagen. El valor del atributo de texto alternativo es definido por el usuario.
<img src="boat.gif" alt="Big Boat">
Cuando el navegador no puede cargar una imagen, el atributo de texto alternativo informa a los lectores de la información perdida. En este caso, el navegador mostrará este texto alternativo en lugar de la imagen. Es una buena práctica agregar atributos de texto alternativo a todas las imágenes en la página, lo que ayuda a mostrar mejor la información y es muy útil para aquellos que usan navegadores de texto puro.
Consideraciones básicas - Consejos útiles:
Si un archivo HTML contiene diez imágenes, se necesitan cargar once archivos para que la página se muestre correctamente. Cargar imágenes lleva tiempo, por lo que nuestra sugerencia es: usar imágenes con prudencia.
Más ejemplos
- Imagen de fondo
- Este ejemplo demuestra cómo agregar una imagen de fondo a una página HTML.
- Alinear la imagen
- Este ejemplo demuestra cómo alinear una imagen en el texto.
- Imágenes flotantes
- Este ejemplo demuestra cómo hacer que una imagen flote a la izquierda o derecha del párrafo.
- Ajustar el tamaño de la imagen
- Este ejemplo demuestra cómo ajustar el tamaño de una imagen.
- Mostrar texto alternativo para la imagen
- Este ejemplo demuestra cómo mostrar texto alternativo para una imagen. Cuando el navegador no puede cargar la imagen, el atributo de texto alternativo informa a los lectores de la información perdida. Es una buena práctica agregar atributos de texto alternativo a todas las imágenes en la página.
- Hacer un enlace de imagen
- Este ejemplo demuestra cómo usar una imagen como un enlace.
- Crear un mapa de imágenes
- Este ejemplo muestra cómo crear un mapa de imágenes con áreas clickeables. Cada área es un enlace.
- Convertir una imagen en un mapa de imágenes
- Este ejemplo muestra cómo configurar una imagen común como un mapa de imágenes.
Etiqueta de imagen
| Etiqueta | Descripción |
|---|---|
| <img> | Definir la imagen. |
| <map> | Definir el mapa de imágenes. |
| <area> | Definir el área clickeable en el mapa de imágenes. |
- Página anterior Enlaces HTML
- Página siguiente Tablas HTML
