-
Las imágenes se definen usando la etiqueta
<img>. -
Esta es una etiqueta vacía, sólo contiene atributos y no tiene una etiqueta de cierre.
-
El atributo src especifica la URL de la imagen.
<img src="https://kikopalomares.com/kikopalomares.jpg">
El atributo alt proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).
El atributo alt es obligatorio ponerlo, si no, la estructura del HTML será incorrecta.
<img src="https://kikopalomares.com/kikopalomares.jpg" alt="Imagen de Kiko">
Se puede usar el atributo style y especificar ahí el ancho (width) y el alto (height).
<img src="https://kikopalomares.com/kikopalomares.jpg" style="width:150px;height:70px;">
O se pueden usar los atributos width y height (siempre en píxeles)
<img src="https://kikopalomares.com/kikopalomares.jpg" width="150" height="70">
Todos son atributos válidos, pero te recomiendo que si tienes que usar uno que sea style. Porque si hay una hoja de estilos CSS que modifique también el tamaño los atributos width y height no afectarán, en cambio el style sí.
<style>
img{
width: 100%;
}
</style>
<img src="https://kikopalomares.com/kikopalomares.jpg" width="150" height="70">
<img src="https://kikopalomares.com/kikopalomares.jpg" style="width:150px;height:70px">
Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web.
Sin embargo, es común guardar las imágenes en una subcarpeta.
<img src="/img/kiko.png" alt="Kiko">
Algunas web almacenan sus imágenes en servidores de imágenes.
<img src="https://kikopalomares.com/img/kiko.png" alt="Kiko">
HTML también permite la visualización de imágenes animadas en el formato GIF.
<img src="https://media.giphy.com/media/vohOR29F78sGk/giphy.gif">
Para usar una imagen como si fuese un enlace tan sólo hay que poner la imagen dentro de la etiqueta de enlace <a>.
border: 0; se agrega para evitar que IE9 (y anteriores) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).
<a href="https://kikopalomares.com" style="border:0;">
<img src="https://kikopalomares.com/kikopalomares.jpg" alt="Kiko">
</a>
Usando la propiedad de CSS float se pueden poner imágenes a la izquierda o derecha de un texto.
<p>
<img src="https://kikopalomares.com/kikopalomares.jpg" alt="Kiko" width="100" style="float:right">
Esto es un párrafo y a la derecha de este hay una imagen flotante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et dui volutpat libero euismod egestas. Mauris sed leo eget ante tempor rutrum. Morbi gravida ipsum quis nibh malesuada aliquet. Phasellus ac tristique elit. Praesent ac ex at nunc viverra cursus.
</p>
<br><br>
<p>
<img src="https://kikopalomares.com/kikopalomares.jpg" alt="Kiko" width="100" style="float:left">
Esto es un párrafo y a la izquierda de este hay una imagen flotante. Quisque vestibulum ornare sagittis. Nunc aliquam lorem a nisi blandit, a dapibus nibh viverra. Pellentesque lacus tortor, cursus vel lectus eu, suscipit sollicitudin magna. Duis turpis libero, fringilla ac rutrum in, egestas vel neque. Etiam pulvinar tellus ut felis fermentum, in lobortis mi lacinia. In hac habitasse platea dictumst.
</p>
<img>para definir una imagen- El atributo src para definir la URL de la imagen
- El atributo alt HTML para definir un texto alternativo
- Los atributos width y height para definir el tamaño de la imagen
- Propiedades de width y height de CSS para definir el tamaño de la imagen
- Propiedad float de CSS para dejar que la imagen “flote” a un lado u otro.
