Ejemplo de Cómo Colocar Imágenes Con HTML
¿Te has preguntado cómo se colocan imágenes tan atractivas en las páginas web que visitas? Hoy vamos a resolver ese misterio. En este artículo, exploraremos cómo colocar imágenes en tu página web usando HTML.
Contenido del artículo
Uso de la etiqueta <img>
Para agregar una imagen a una página web en HTML, se utiliza la etiqueta <img>. Esta etiqueta es autocerrada, lo que significa que no requiere una etiqueta de cierre. Aquí está la sintaxis básica de cómo se usa:
<img src="ruta_de_la_imagen.jpg">
En este código, ruta_de_la_imagen.jpg es la ubicación de la imagen que se desea mostrar.
Atributos de la etiqueta <img>
La etiqueta <img> puede mejorarse con el uso de varios atributos, como alt y title.
El atributo alt se utiliza para proporcionar una descripción textual de la imagen, lo que es útil para la accesibilidad web. Si la imagen no puede ser cargada por alguna razón, el texto alternativo se mostrará en su lugar.
El atributo title se utiliza para proporcionar información adicional sobre la imagen. Este texto aparecerá cuando el usuario pase el cursor sobre la imagen.
<img src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen" title="Información de la imagen">
Dimensionado de las imágenes
Se pueden definir el ancho y la altura de la imagen utilizando los atributos width y height respectivamente.
<img src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen" title="Información de la imagen" width="500" height="600">
Es importante mantener la proporción original de la imagen para evitar la distorsión.
Ruta de la imagen
La ruta de la imagen puede ser absoluta o relativa. Una ruta absoluta es una URL completa como:
https://www.ejemplode.com/design/v3/images/logo.png
Mientras que una ruta relativa es la ruta a un archivo dentro de las carpetas del sitio web.
/design/v3/images/logo.png
Si la imagen está en el mismo directorio que el archivo HTML, simplemente se puede utilizar el nombre del archivo de la imagen. Por ejemplo:
<img src="logo.png">
Si la imagen está dentro de una carpeta en el directorio, se debe incluir el nombre de la carpeta en la ruta.
<img src="/carpeta/logo.jpg">
Formatos aceptados de imágenes en HTML
JPEG o JPG: Este formato es ideal para fotografías o imágenes con muchos colores. El formato JPEG utiliza un algoritmo de compresión que reduce el tamaño del archivo, pero puede provocar una pérdida de calidad en las imágenes.
PNG: El formato PNG es ideal para imágenes con áreas de color sólido y alta claridad, como logotipos o gráficos. Este formato también admite transparencias.
GIF: El formato GIF se utiliza principalmente para imágenes animadas, pero también puede utilizarse para imágenes estáticas. Al igual que el PNG, también admite transparencias y colores sólidos, pero está limitado a una paleta de 256 colores.
SVG: SVG o Gráficos Vectoriales Escalables son un formato de imagen que utiliza XML para describir gráficos bidimensionales. A diferencia de los formatos anteriores, las imágenes SVG son imágenes vectoriales, lo que significa que puedes escalarlas a cualquier tamaño sin perder calidad. Son ideales para iconos, logotipos y otros gráficos que necesitan ser escalados.
Ejemplo de página HTML con imagen
<!DOCTYPE html><html><head> <title>Página con imágen</title></head><body> <h1>Bienvenido</h1> <p>Aquí está el logo de ejemplode.com:</p> <img src="https://www.ejemplode.com/design/v3/images/logo.png" alt="Una imagen" title="Una imagen" width="500" height="600"></body></html>
En este ejemplo, la imagen logo.png está en una ruta absoluta dentro del servidor de la página ejemplode.com.
¿Cómo citar? & Del Moral, M. (s.f.). Ejemplo de Cómo Colocar Imágenes Con HTML.Ejemplo de. Recuperado el 31 de Agosto de 2023 de https://www.ejemplode.com/17-html/81-ejemplo_de_como_colocar_imagenes_con_html.html
Últimos 10 comentarios
Con el tag EMBED, sí se consigue insertar imagen externa, pero cuando pinchas en la foto no te permite dirigirla a la página que quiero.
¿Hay alguna solución para eso?