Ejemplo
<img src="pic_trulli.jpg" alt="Italian Trulli">Ejemplo
<img src="img_.jpg" alt="img">Ejemplo
<img src="img_pg" alt="Flowers">Sintaxis de imágenes HTML
La etiqueta HTML se utiliza para incrustar una imagen en una página web.
<img>Las imágenes no se insertan técnicamente en una página web; las imágenes están vinculadas a páginas web. La etiqueta crea un espacio de retención para la imagen a la que se hace referencia.<img>
La etiqueta está vacía, contiene solo atributos y no tiene una etiqueta de cierre.<img>
La etiqueta tiene dos atributos obligatorios:<img>
- src: especifica la ruta de acceso a la imagen
- ALT: especifica un texto alternativo para la imagen
Sintaxis
<img src="url" alt="alternatetext">El atributo src
El atributo requerido especifica la ruta de acceso (URL) a la imagen.src
Nota: Cuando se carga una página web, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrese de que la imagen realmente permanezca en el mismo lugar en relación con la página web, de lo contrario sus visitantes obtendrán un icono de enlace roto. El icono de enlace roto y el texto se muestran si el navegador no puede encontrar la imagen.alt
Ejemplo
<img src="img_.jpg" alt="Flowers">El atributo alt
El atributo requerido 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 utiliza un lector de pantalla).
altEl valor del atributo debe describir la imagen:alt
Ejemplo
<img src="img_.jpg" alt="Flowers">Si un navegador no puede encontrar una imagen, mostrará el valor del atributo:alt
Ejemplo
<img src="wrongname.gif" alt="Flowers">Tamaño de la imagen- Ancho y alto
Puede utilizar el atributo para especificar el ancho y el alto de una imagen.styleEjemplo
<img src="img_.jpg" alt="img" style="width:500px;height:600px;">Alternativamente, puede utilizar los atributos y:widthheight
Ejemplo
<img src="img_.jpg" alt="img" width="500" height="600">Los atributos y siempre definen el ancho y el alto de la imagen en píxeles.widthheight
¿Ancho y alto, o estilo?
Los atributos , y , son válidos en HTML.widthheightstyleSin embargo, sugerimos usar el atributo. Evita que las hojas de estilos cambien el tamaño de las imágenes:style
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>Imágenes en otra carpeta
Si tiene sus imágenes en una subcarpeta, debe incluir el nombre de la carpeta en el atributo:srcEjemplo
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">Imágenes en otro servidor/sitio web
Algunos sitios web apuntan a una imagen en otro servidor.Para apuntar a una imagen en otro servidor, debe especificar una dirección URL absoluta (completa) en el atributo:
srcEjemplo
<img src="https:/todoinfoinfo.blogspot.com/images/todoinfoinfo_green.jpg" alt="todoinfoinfo.blogspot.com">Imágenes animadas
HTML permite GIF animados:Ejemplo
<img src="programming.gif" alt="Computer" style="width:48px;height:48px;">Imagen como enlace
Para usar una imagen como enlace, coloque la etiqueta dentro de la etiqueta:<img><a>Ejemplo
<a href="default.asp">
<img src="smile.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>Imagen flotante
Utilice la propiedad CSS para permitir que la imagen flote a la derecha o a la izquierda de un texto:
floatEjemplo
<p><img src="smile.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smile.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>Formatos de imagen comunes
Estos son los tipos de archivos de imagen más comunes, que son compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):- AbbreviationFile FormatFile Extension
- APNG Animated Portable Network Graphics .apng
- GIF Graphics Interchange Format .gif
- ICO Microsoft Icon .ico, .cur
- JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
- PNG Portable Network Graphics .png
- SVG Scalable Vector Graphics .svg
Resumen del capítulo
- Usar el elemento HTML para definir una imagen
<img> - Usar el atributo HTML para definir la URL de la imagen
src - Utilice el atributo HTML para definir un texto alternativo para una imagen, si no se puede mostrar
alt - Utilice el HTML y los atributos o el CSS y las propiedades para definir el tamaño de la imagen
widthheightwidthheight - Utilice la propiedad CSS para permitir que la imagen flote hacia la izquierda o hacia la derecha
float
Etiquetas de imagen HTML
Tag Description- <img> Defines an image
- <map> Defines an image map
- <area> Defines a clickable area inside an image map
- <picture> Defines a container for multiple image resources
