Imágenes

El lenguaje Html tiene una etiqueta específica para incluir imágenes en un documento: la etiqueta <img>. Tiene atributos para definir cómo debe mostrarse la imagen y su comportamiento, y no existe etiqueta de cierre.

Aunque hay muchos formatos de imagen, en la web sólo se usan tres:

Atributos de <img>






Ejemplos:



<!-- imagen sola -->


<img src="libros.gif" width="48" height="47"  alt="libros">


libros



<!-- imagen sola con dimensiones cambiadas -->


<img src="libros.gif" width="88" height="66"  alt="libros">


libros



<!-- imagen dentro de un enlace -->


Con borde: <a href="https://es.wikipedia.org/wiki/Libro">


<img src="libros.gif" width="48" height="47" alt="libros"></a>


&nbsp; Sin borde: <a href="https://es.wikipedia.org/wiki/Libro">


<img src="libros.gif" width="48" height="47" alt="libros" border="0"></a>


&nbsp; Con borde más grueso: <a href="https://es.wikipedia.org/wiki/Libro">


<img src="libros.gif" width="48" height="47" alt="libros" border="5"></a>


Con borde: libros   Sin borde: libros   Con borde más grueso: libros



<!-- imagen animada con transparencia -->


<table border="0" align="center" cellspacing="20"><tr>


<td bgcolor="aqua"><img src="pez.gif" width="208" height="99" alt="pez"></td>


<td bgcolor="lime"><img src="pez.gif" width="208" height="99" alt="otro pez"></td>


</tr></table>


pez otro pez



<!-- imagen alineada a la derecha del resto -->


<table width="530" align="center"><tr><td>


<img src="galax.jpg" width="300" height="233" hspace="8" alt="Galaxia" align="right">


Texto de prueba para ver cómo se alinea una imagen cuando está junto a un texto


y etcetera etc., un texto o cualquier cosa en línea como otra imagen:


<img src="libros.gif" width="24" height="24" alt="libritos" align="middle">


y más texto seguido y a continuación...


<br><img src="pez.gif" width="208" height="99" title="pejcao">


</td></tr></table>


Galaxia Texto de prueba para ver cómo se alinea una imagen cuando está junto a un texto y etcetera etc., un texto o cualquier cosa en línea como otra imagen: libritos y más texto seguido y a continuación...