Sintaxis de la etiqueta <img>
Para incrustar una imagen en una página se utiliza la etiqueta <img>, la cual no requiere un cierre.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2024/04/09/22/28/trees-8686902_1280.jpg" alt="Árboles" class="img-fluid">
...
El atributo SRC
El atributo src especifica la ruta donde se encuentra la imagen.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2024/09/03/08/56/dairy-cattle-9018750_1280.jpg" alt="Ganado" class="img-fluid">
El atributo ALT
El atributo alt proporciona un texto alternativo para la imagen, útil en caso de que la imagen no cargue.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2024/08/06/10/43/wine-8949009_1280.jpg" alt="Botella de vino" class="img-fluid">
Tamaño de la imagen
Para definir el tamaño de la imagen, puedes usar los atributos `width` y `height` o definirlo mediante CSS.
En el ejemplo tenemos una imagen de 500px de ancho por 600px de alto
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2023/06/22/06/53/beautiful-girl-8080757_1280.jpg" alt="Chica" style="width:500px;height:600px;">
Imágenes flotantes
Las imágenes flotantes permiten que el texto se ajuste a su alrededor. Para lograrlo, utilizamos la propiedad float de CSS.
Este es un ejemplo de imagen flotante a la derecha. El texto se ajusta a su alrededor para ilustrar la funcionalidad de la propiedad float.
Este es un texto dentro de la caja. La imagen estará a la derecha.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2019/12/21/10/41/penguins-4710224_1280.jpg" alt="Pingüino" style="float-end; width:250px; height:250px;">
<p>Este es un ejemplo de imagen flotante a la derecha...</p>
Las imágenes flotantes permiten que el texto se ajuste a su alrededor. Para lograrlo, utilizamos la propiedad float de CSS.
Este es un ejemplo de imagen flotante a la derecha. El texto se ajusta a su alrededor para ilustrar la funcionalidad de la propiedad float.
Este es un texto dentro de la caja. La imagen estará a la izquierda.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2019/12/21/10/41/penguins-4710224_1280.jpg" alt="Pingüino" style="float-start; width:250px; height:250px;">
<p>Este es un ejemplo de imagen flotante a la derecha...</p>
Alineación de imágenes
En esta sección aprenderás a alinear imágenes utilizando HTML. Puedes alinear imágenes a la izquierda, al centro y a la derecha utilizando el atributo `align` y estilos CSS.
Alineación a la Izquierda
Para alinear una imagen a la izquierda, podemos usar el atributo HTML `align` con el valor `left`. Esto posicionará la imagen a la izquierda, permitiendo que el texto fluya a su alrededor.
Esta imagen está alineada a la izquierda. El texto fluye a su alrededor.
Código del ejemplo
<div style="border: 2px solid; padding: 20px;">
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg" alt="Gato"
align="left" style="width: 300px; height: 300px; margin-right: 15px;">
<p>Esta imagen está alineada a la izquierda. El texto fluye a su alrededor.</p>
</div>
Alineación al Centro
Para centrar una imagen, podemos usar el atributo HTML `align` con el valor `center`. Esto centrará la imagen dentro del contenedor.
Esta imagen está alineada al centro.
Código del ejemplo
<div style="text-align: center; border: 2px solid; padding: 20px;">
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg" alt="Gato"
align="center" style="width: 300px; height: 300px;">
<p>Esta imagen está alineada al centro.</p>
Alineación a la Derecha
Para alinear una imagen a la derecha, utilizamos el atributo HTML `align` con el valor `right`. Esto posicionará la imagen a la derecha, permitiendo que el texto fluya a su alrededor.
Esta imagen está alineada a la derecha. El texto fluye a su alrededor.
Código del ejemplo
<div style="border: 2px solid; padding: 20px;">
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg" alt="Gato"
align="right" style="width: 300px; height: 300px; margin-left: 15px;">
<p>Esta imagen está alineada a la derecha. El texto fluye a su alrededor.</p>
</div>
Imágenes responsivas
En HTML, para hacer que una imagen sea completamente flexible y se ajuste a cualquier tamaño de pantalla, puedes usar el atributo CSS `max-width` con el valor `100%` y `height: auto`.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2019/01/20/03/17/garnet-ghost-town-montana-3943047_1280.jpg"
alt="Montaña" style="max-width: 100%; height: auto;">
Formatos de imagen en la web
Los formatos de imagen más comunes son JPG, PNG, SVG y WebP. Cada uno tiene diferentes ventajas según el tipo de imagen y la optimización deseada.
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2024/02/06/07/05/ai-generated-8556247_1280.png" alt="Arquitectura" class="img-fluid">
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias