English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Las páginas web coloridas y variadas que vemos hoy en día son debido al uso de imágenes. En el pasado, todas las páginas web en la red eran de texto puro, muy monótonas. Por lo tanto, podemos ver la importancia de las imágenes en el diseño de páginas web. Se pueden insertar imágenes en las páginas html, y los formatos de imágenes más comunes en las páginas web son jpg, png, gif, etc.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guía básica(oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>Probar aquí ‹/›
Insertar imagen
Este ejemplo muestra cómo mostrar imágenes en una página web.
Insertar imágenes desde diferentes ubicaciones
Este ejemplo muestra cómo mostrar imágenes en una página web desde otros directorios o servidores.
(Puede encontrar más ejemplos en la parte inferior de esta página.)
En HTML, las imágenes se definen mediante la etiqueta <img>.
<img> es una etiqueta vacía, lo que significa que solo contiene propiedades y no tiene etiqueta de cierre.
Para mostrar una imagen en la página, debe usar la propiedad de origen (src). src significa "fuente". El valor de la propiedad de origen es la dirección URL de la imagen.
La sintaxis para definir una imagen es:
<img src="url" alt="some_text">
La URL indica la ubicación de almacenamiento de la imagen. Si la imagen "default.jpg" se encuentra en www.w3en el directorio de imágenes de codebox.com, su URL será https://es.oldtoolbag.com/run/html/default.jpg.
El navegador muestra la imagen en el lugar donde se encuentra la etiqueta de imagen en el documento. Si coloca la etiqueta de imagen entre dos párrafos, el navegador mostrará primero el primer párrafo, luego la imagen y finalmente el segundo párrafo.
El atributo alt se utiliza para definir una serie de textos alternativos preparados.
El valor del atributo de texto alternativo es definido por el usuario.
<img src="boat.gif" alt="Big Boat">
Cuando el navegador no puede cargar la imagen, el atributo de texto alternativo informa al lector de la información perdida. En este caso, el navegador mostrará este texto alternativo en lugar de la imagen. Es una buena costumbre agregar atributos de texto alternativo a todas las imágenes de la página, lo que ayuda a mostrar mejor la información y es muy útil para aquellos que utilizan navegadores de texto puro.
height (altura) y width (anchura) se utilizan para establecer la altura y anchura de la imagen.
El valor predeterminado de la unidad de los atributos es píxeles:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" alt="228">
Consejo: Es una buena costumbre especificar la altura y anchura de una imagen. Si se especifican las dimensiones de la imagen, la página se cargará con las dimensiones especificadas. Si no se especifican las dimensiones de la imagen, puede que se rompa el diseño general de la página al cargar la página.
Atención: Si un archivo HTML contiene diez imágenes, entonces para mostrar correctamente esta página, se necesita cargar 11 un archivo. Cargar imágenes lleva tiempo, por lo que nuestra sugerencia es: usar con prudencia imágenes.
Atención: Al cargar la página, tenga cuidado con la ruta de la imagen insertada en la página. Si no se configura correctamente la ubicación de la imagen, el navegador no puede cargar la imagen y la etiqueta de imagen mostrará una imagen rota.
Alinear imágenes
Este ejemplo demuestra cómo alinear una imagen en el texto.
Imágenes flotantes
Este ejemplo demuestra cómo hacer que la imagen flote a la izquierda o derecha del párrafo.
Configurar el enlace de la imagen
Este ejemplo demuestra cómo usar una imagen como un enlace.
Crear un mapa de imágenes
Este ejemplo muestra cómo crear un mapa de imágenes con áreas que pueden ser clicadas. Cada una de estas áreas es un enlace.
| Etiqueta | Descripción |
| img | Definir una imagen |
| map | Definir un mapa de imágenes |
| area | Definir áreas clicables en un mapa de imágenes |