Imágenes HTML
Las imágenes pueden mejorar el diseño y la apariencia de una página
web.
Ejemplo
<img src="pic_trulli.jpg" alt="Italian Trulli">
Ejemplo
<img src="img_girl.jpg" alt="Girl in a jacket">
Ejemplo
<img src="img_chania.jpg" alt="Flowers in Chania">
Sintaxis de imágenes HTML
La <img>etiqueta HTML se utiliza para incrustar una imagen en una página
web.
Técnicamente, las imágenes no se insertan en una página web; las
imágenes están vinculadas a páginas web. La <img>etiqueta crea un espacio
de espera para la imagen de referencia.
La <img>etiqueta está vacía, solo contiene atributos y no tiene una etiqueta
de cierre.
La <img>etiqueta tiene dos atributos obligatorios:
src: especifica la ruta a la imagen
alt: especifica un texto alternativo para la imagen
Sintaxis
<img src="url" alt="alternatetext">
El atributo src
El srcatributo requerido especifica la ruta (URL) a la imagen.
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 ícono de enlace roto. El icono de enlace roto y el alttexto se
muestran si el navegador no puede encontrar la imagen.
Ejemplo
<img src="img_chania.jpg" alt="Flowers in Chania">
El atributo alt
El altatributo requerido proporciona un texto alternativo para una imagen,
si el usuario por algún motivo 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 valor del altatributo debe describir la imagen:
Ejemplo
<img src="img_chania.jpg" alt="Flowers in Chania">
Si un navegador no puede encontrar una imagen, mostrará el valor
del alt atributo:
Ejemplo
<img src="[Link]" alt="Flowers in Chania">
Sugerencia: un lector de pantalla es un programa de software que lee el
código HTML y permite al usuario "escuchar" el contenido. Los lectores de
pantalla son útiles para las personas con problemas de visión o de
aprendizaje.
Tamaño de la imagen: ancho y alto
Puede utilizar el styleatributo para especificar el ancho y el alto de una
imagen.
Ejemplo
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternativamente, puede usar los atributos widthy :height
Ejemplo
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
Los atributos widthy heightsiempre definen el ancho y el alto de la imagen
en píxeles.
Nota: Siempre especifique el ancho y el alto de una imagen. Si no se
especifican el ancho y el alto, la página web puede parpadear mientras se
carga la imagen.
¿Ancho y alto, o estilo?
Los atributos width, heighty styleson todos válidos en HTML.
Sin embargo, sugerimos usar el styleatributo. Evita que las hojas de estilo
cambien el tamaño de las imágenes:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="[Link]" alt="HTML5 Icon" width="128" height="128">
<img src="[Link]" 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 srcatributo:
Ejemplo
<img src="/images/[Link]" 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 URL
absoluta (completa) en el srcatributo:
Ejemplo
<img src="[Link]
alt="[Link]">
Notas sobre imágenes externas: las imágenes externas pueden estar
protegidas por derechos de autor. Si no obtiene permiso para usarlo, es
posible que esté violando las leyes de derechos de autor. Además, no
puede controlar imágenes externas; se pueden quitar o cambiar
repentinamente.
Imágenes animadas
HTML permite GIF animados:
Ejemplo
<img src="[Link]" alt="Computer
Man" style="width:48px;height:48px;">
Imagen como enlace
Para usar una imagen como enlace, coloque la <img>etiqueta dentro de
la <a> etiqueta:
Ejemplo
<a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Imagen flotante
Usa la propiedad CSS float para dejar que la imagen flote a la derecha o a
la izquierda de un texto:
Ejemplo
<p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="[Link]" 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, compatibles con
todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):
Abbreviatio File Format File Extension
n
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 <img>para definir una imagen
Use el srcatributo HTML para definir la URL de la imagen
Use el atributo HTML altpara definir un texto alternativo para una
imagen, si no se puede mostrar
Utilice el HTML widthy heightlos atributos o el CSS widthy height las
propiedades para definir el tamaño de la imagen.
Use la propiedad CSS floatpara dejar que la imagen flote hacia la
izquierda o hacia la derecha
Nota: La carga de imágenes grandes lleva tiempo y puede ralentizar su
página web. Usa las imágenes con cuidado.
Ejercicios HTML
Ejercicio:
Utilice los atributos de imagen HTML para establecer el tamaño de la imagen en
250 píxeles de ancho y 400 píxeles de alto.
<img src="[Link]" ="250" ="400">
Enviar respuesta "
Comience el ejercicio
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
Mapas de imágenes HTML
Con los mapas de imágenes HTML, puede crear áreas en las que se
puede hacer clic en una imagen.
Mapas de imágenes
La etiqueta HTML <map>define un mapa de imagen. Un mapa de imagen es
una imagen con áreas en las que se puede hacer clic. Las áreas se definen
con una o más <area>etiquetas.
Intente hacer clic en la computadora, el teléfono o la taza de café en la
imagen a continuación:
Ejemplo
Aquí está el código fuente HTML para el mapa de imagen de arriba:
<img src="[Link]" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href
="[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone" href=
"[Link]">
<area shape="circle" coords="337,300,44" alt="Coffee" href="c
[Link]">
</map>
¿Como funciona?
La idea detrás de un mapa de imagen es que debería poder realizar
diferentes acciones según el lugar de la imagen en el que haga clic.
Para crear un mapa de imagen, necesita una imagen y algún código HTML
que describa las áreas en las que se puede hacer clic.
La imagen
La imagen se inserta usando la <img>etiqueta. La única diferencia con otras
imágenes es que debes agregar un usemapatributo:
<img src="[Link]" alt="Workplace" usemap="#workmap">
El usemapvalor comienza con una etiqueta hash #seguida del nombre del
mapa de imagen y se usa para crear una relación entre la imagen y el
mapa de imagen.
Consejo: ¡Puedes usar cualquier imagen como mapa de imagen!
Crear mapa de imagen
Luego, agregue un <map>elemento.
El <map>elemento se utiliza para crear un mapa de imagen y se vincula a la
imagen mediante el name atributo requerido:
<map name="workmap">
El nameatributo debe tener el mismo valor que el atributo <img>de usemap.
Las áreas
Luego, agregue las áreas en las que se puede hacer clic.
Un área en la que se puede hacer clic se define mediante
un <area>elemento.
Forma
Debe definir la forma del área en la que se puede hacer clic y puede elegir
uno de estos valores:
rect- define una región rectangular
circle- define una región circular
poly- define una región poligonal
default- define toda la región
También debe definir algunas coordenadas para poder colocar el área en la
que se puede hacer clic en la imagen.
Forma = "rect"
Las coordenadas para shape="rect"vienen en pares, una para el eje x y otra
para el eje y.
Entonces, las coordenadas 34,44se ubican a 34 píxeles del margen
izquierdo y a 44 píxeles de la parte superior:
Las coordenadas 270,350se encuentran a 270 píxeles del margen izquierdo
y a 350 píxeles de la parte superior:
Ahora tenemos suficientes datos para crear un área rectangular en la que
se puede hacer clic:
Ejemplo
<area shape="rect" coords="34, 44, 270,
350" href="[Link]">
Esta es el área en la que se puede hacer clic y enviará al usuario a la
página "[Link]":
Forma = "círculo"
Para agregar un área circular, primero ubique las coordenadas del centro
del círculo:
337,300
Luego especifique el radio del círculo:
44píxeles
Ahora tiene suficientes datos para crear un área circular en la que se puede
hacer clic:
Ejemplo
<area shape="circle" coords="337, 300, 44" href="[Link]">
Esta es el área en la que se puede hacer clic y enviará al usuario a la
página "[Link]":
Forma = "poli"
El shape="poly"contiene varios puntos de coordenadas, lo que crea una
forma formada con líneas rectas (un polígono).
Esto se puede utilizar para crear cualquier forma.
¡Como tal vez una forma de croissant!
¿Cómo podemos hacer que el croissant de la imagen de abajo se convierta
en un enlace en el que se puede hacer clic?
Tenemos que encontrar las coordenadas x e y para todos los bordes del
croissant:
Las coordenadas vienen en pares, una para el eje x y otra para el eje y:
Ejemplo
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,
270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="
[Link]">
Esta es el área en la que se puede hacer clic y enviará al usuario a la
página "[Link]":
Mapa de imágenes y JavaScript
Un área en la que se puede hacer clic también puede activar una función de
JavaScript.
Agregue un clickevento al <area>elemento para ejecutar una función de
JavaScript:
Ejemplo
Aquí, usamos el atributo onclick para ejecutar una función de JavaScript
cuando se hace clic en el área:
<map name="workmap">
<area shape="circle" coords="337,300,44" href="[Link]" on
click="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Resumen del capítulo
Use el elemento HTML <map>para definir un mapa de imagen
Use el <area>elemento HTML para definir las áreas en las que se
puede hacer clic en el mapa de imagen
Use el usemapatributo HTML del <img>elemento para apuntar a un
mapa de imagen
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
Imágenes de fondo HTML
Se puede especificar una imagen de fondo para casi cualquier elemento
HTML.
Imagen de fondo en un elemento
HTML
Para agregar una imagen de fondo en un elemento HTML, use
el styleatributo HTML y la background-imagepropiedad CSS:
Ejemplo
Agregue una imagen de fondo en un elemento HTML:
<p style="background-image: url('img_girl.jpg');">
También puede especificar la imagen de fondo en el <style> elemento, en
la <head> sección:
Ejemplo
Especifique la imagen de fondo en el <style> elemento:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
Imagen de fondo en una página
Si desea que toda la página tenga una imagen de fondo, debe especificar la
imagen de fondo en el <body>elemento:
Ejemplo
Agregue una imagen de fondo para toda la página:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Repetición de fondo
Si la imagen de fondo es más pequeña que el elemento, la imagen se
repetirá, horizontal y verticalmente, hasta llegar al final del elemento:
Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Para evitar que la imagen de fondo se repita, establezca la background-
repeatpropiedad en no-repeat.
Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Portada de fondo
Si desea que la imagen de fondo cubra todo el elemento, puede establecer
la background-sizepropiedad en cover.
Además, para asegurarse de que todo el elemento esté siempre cubierto,
establezca la background-attachmentpropiedad enfixed:
De esta forma, la imagen de fondo cubrirá todo el elemento, sin estirarse
(la imagen mantendrá sus proporciones originales):
Ejemplo
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Estiramiento de fondo
Si desea que la imagen de fondo se estire para adaptarse a todo el
elemento, puede establecer la background-sizepropiedad en 100% 100%:
Intente cambiar el tamaño de la ventana del navegador y verá que la
imagen se estira, pero siempre cubre todo el elemento.
Ejemplo
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Elemento HTML <imagen>
El <picture>elemento HTML le permite mostrar diferentes imágenes
para diferentes dispositivos o tamaños de pantalla.
El elemento HTML <imagen>
El <picture>elemento HTML brinda a los desarrolladores web más
flexibilidad para especificar recursos de imagen.
El <picture>elemento contiene uno o más <source>elementos, cada uno
de los cuales hace referencia a diferentes imágenes a través
del srcset atributo. De esta manera, el navegador puede elegir la imagen
que mejor se adapte a la vista y/o dispositivo actual.
Cada <source>elemento tiene un mediaatributo que define cuándo la
imagen es la más adecuada.
Ejemplo
Mostrar diferentes imágenes para diferentes tamaños de pantalla:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Nota: Siempre especifique un <img>elemento como el último elemento
secundario del <picture>elemento. El <img>elemento es utilizado por
navegadores que no admiten el <picture>elemento, o si ninguna de
las <source>etiquetas coincide.
Cuándo usar el elemento de imagen
Hay dos propósitos principales para el <picture>elemento:
1. Ancho de banda
Si tiene una pantalla o dispositivo pequeño, no es necesario cargar un
archivo de imagen grande. El navegador utilizará el
primer <source> elemento con valores de atributo coincidentes e ignorará
cualquiera de los siguientes elementos.
2. Soporte de formato
Es posible que algunos navegadores o dispositivos no admitan todos los
formatos de imagen. Al usar el <picture>elemento, puede agregar
imágenes de todos los formatos, y el navegador usará el primer formato
que reconozca e ignorará cualquiera de los siguientes elementos.
Ejemplo
El navegador utilizará el primer formato de imagen que reconozca:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Nota: el navegador utilizará el primer <source>elemento con valores de
atributos coincidentes e ignorará los siguientes <source>elementos.
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