Imágenes JPG
imágenes GIF
Imágenes PNG
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Inténtalo tú mismo " Siempre especificar el ancho y la altura de una imagen. Si no se especifican la anchura y la altura, la página parpadeará mientras se carga la imagen.
Imágenes HTML Sintaxis
En HTML, las imágenes se definen con el <img> etiqueta.
La <img> tag está vacío, contiene atributos solamente, y no tiene una etiqueta de cierre.
El src atributo especifica la dirección URL (web address) de la imagen:
<img src=" url " alt=" some_text ">El alt Atributo
El alt atributo especifica un texto alternativo para una imagen, si la imagen no se puede visualizar.
El alt atributo proporciona información alternativa para una imagen si un usuario por alguna razón no puede verla (debido a la conexión lenta, un error en la src atributo, o si el usuario utiliza un lector de pantalla).
Si un navegador no puede encontrar una imagen, se mostrará el texto alternativo:
Ejemplo
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Inténtalo tú mismo " El alt se requiere atributo. Una página web no se valida correctamente sin ella.
Los lectores de pantalla HTML
Un lector de pantalla es un programa de software que puede leer lo que se visualiza en una pantalla.
Los lectores de pantalla son útiles para las personas que son ciegas, con discapacidad visual o discapacidad de aprendizaje.
Los lectores de pantalla pueden leer el alt atributo.
Tamaño de imagen - Ancho y Altura
Se puede utilizar el style atributo para especificar el ancho y la altura de una imagen.
Los valores se especifican en píxeles (use px after the value) :
Ejemplo
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Inténtalo tú mismo " Como alternativa, puede utilizar width y la height atributos. En este caso, los valores se especifican en píxeles por defecto:
Anchura y Altura o estilo?
Tanto la anchura, la altura y los atributos de estilo son válidos en el último estándar HTML5.
Le recomendamos que utilice el style atributo. Evita que las hojas de estilos de cambiar el tamaño original de las imágenes:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Inténtalo tú mismo " Imágenes en otra carpeta
Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web.
Sin embargo, es común para almacenar las imágenes en una subcarpeta. A continuación, debe incluir el nombre de la carpeta en la src atributo:
Ejemplo
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Inténtalo tú mismo " Imágenes en otro servidor
Algunos sitios web almacenan sus imágenes en servidores de imágenes.
En realidad, se puede acceder a las imágenes desde cualquier dirección web en el mundo:
Las imágenes animadas
El estándar GIF permite que las imágenes animadas:
Ejemplo
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Inténtalo tú mismo " Tenga en cuenta que la sintaxis de la inserción de imágenes animadas no es diferente de las imágenes no animadas.
El uso de una imagen como un enlace
Para usar una imagen como un enlace, basta con anidar el <img> etiqueta en el interior del <a> etiqueta:
Ejemplo
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Inténtalo tú mismo " Añadir "border:0;" para evitar que IE9 (and earlier) muestre un borde alrededor de la imagen.
Floating imagen
Utilice la propiedad CSS flotador para dejar flotar imagen.
La imagen puede flotar hacia la derecha o hacia la izquierda de un texto:
Ejemplo
<p>
<img src="smiley.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="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Inténtalo tú mismo " Los mapas de imagen
Utilice el <map> etiqueta para definir una imagen-mapa. En una imagen de mapa es una imagen con áreas se puede hacer clic.
El name atributo de la <map> etiqueta está asociada con el <img> 's atributo usemap y crea una relación entre la imagen y el mapa.
La <map> etiqueta contiene un número de <area> etiquetas, que define las áreas se puede hacer clic en la imagen de mapa de:
Ejemplo
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Inténtalo tú mismo " Resumen del capítulo
- Utilice el código HTML <img> elemento para definir una imagen
- Utilice el código HTML src atributo para definir la URL de la imagen
- Utilice el código HTML alt atributo para definir un texto alternativo para una imagen, si no se puede mostrar
- Utilice el código HTML width y la height los atributos para definir el tamaño de la imagen
- Usa los CSS width y height propiedades para definir el tamaño de la imagen (alternatively)
- Utilizar el CSS float propiedad a dejar flotar la imagen
- Utilice el código HTML <map> elemento para definir una imagen de mapa de
- Utilice el código HTML <area> elemento para definir las zonas se puede hacer clic en la imagen de mapa de
- Utilice el código HTML <img> elemento 's usemap atribuir a apuntar a una imagen de mapa de
Carga de imágenes lleva tiempo. Las imágenes grandes pueden ralentizar su página. Utilizar imágenes cuidadosamente.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
HTML etiquetas de imagen
| Etiqueta | Descripción |
|---|---|
| <img> | Define una imagen |
| <map> | Define una imagen de mapa de |
| <area> | Define un área seleccionable dentro de una imagen de mapa de |