Imágenes en HTML: Aprende a insertar y dar estilo con src, alt y tamaño

Introducción

Las imágenes son una parte fundamental de las páginas web modernas, ya que hacen que el contenido sea más atractivo y visualmente interesante. En HTML, las imágenes se insertan en un documento mediante la etiqueta <img>. Esta etiqueta es muy potente y cuenta con varios atributos para controlar el origen, el tamaño y la accesibilidad de la imagen.

En este laboratorio, aprenderás a mostrar una imagen en una página web. Comenzarás insertando una imagen básica y, progresivamente, añadirás atributos para proporcionar texto alternativo, establecer sus dimensiones, añadir una información sobre herramientas (tooltip) y, finalmente, convertirla en un enlace clicable.

El entorno ya viene preconfigurado con un archivo index.html y un archivo de imagen llamado labex.svg en el directorio ~/project. También hay un servidor web en ejecución, por lo que puedes previsualizar tus cambios en tiempo real en la pestaña "Web 8080".

Insertar la etiqueta img con el atributo src para el origen de la imagen

En este paso, aprenderás a añadir una imagen a tu página HTML. La etiqueta <img> se utiliza para insertar una imagen. Es una etiqueta vacía, lo que significa que no tiene una etiqueta de cierre. El atributo más importante de la etiqueta <img> es src, que especifica la ruta de la imagen que deseas mostrar.

Primero, abre el archivo index.html ubicado en el directorio ~/project usando el explorador de archivos a la izquierda.

Ahora, añade la etiqueta <img> dentro de la sección <body>, justo debajo del comentario . Establece el atributo src en labex.svg, que es el archivo de imagen proporcionado en el directorio de tu proyecto.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

Después de añadir el código, guarda el archivo. Para ver el resultado, cambia a la pestaña Web 8080 en la barra superior del entorno de laboratorio. Deberías ver el logotipo de LabEx mostrado en la página.

img tag

Añadir el atributo alt para la descripción de la imagen

En este paso, añadirás el atributo alt a tu etiqueta <img>. El atributo alt proporciona un texto alternativo para una imagen. Este texto se muestra si la imagen no se puede cargar por alguna razón. Más importante aún, es utilizado por los lectores de pantalla para describir la imagen a usuarios con discapacidad visual, haciendo que tu sitio web sea más accesible.

Modifica la etiqueta <img> en tu archivo index.html para incluir un atributo alt. Un buen texto alt debe ser una descripción concisa de la imagen.

<img src="labex.svg" alt="LabEx Logo" />

Tu archivo index.html completo debería verse ahora así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

Guarda el archivo. No verás cambios visuales en la pestaña Web 8080 porque la imagen se está cargando correctamente. Sin embargo, añadir el atributo alt es una práctica recomendada fundamental para el desarrollo web.

Establecer los atributos width y height para el tamaño de la imagen

En este paso, aprenderás a controlar el tamaño de tu imagen utilizando los atributos width y height. Por defecto, un navegador muestra una imagen en sus dimensiones originales. Especificar el width y el height te permite cambiar el tamaño de la imagen y ayuda al navegador a reservar la cantidad correcta de espacio para ella antes de que se cargue, evitando que el diseño de la página se desplace.

Vamos a establecer el ancho de nuestra imagen en 200 píxeles y la altura en 50 píxeles. Añade los atributos width y height a tu etiqueta <img> en index.html.

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

El archivo index.html completo será ahora:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

Guarda el archivo y cambia a la pestaña Web 8080. Notarás que la imagen ha cambiado de tamaño a las dimensiones que especificaste.

Usar el atributo title para la información sobre herramientas de la imagen

En este paso, añadirás un atributo title a la etiqueta <img>. El atributo title proporciona información adicional sobre un elemento. Para las imágenes, esta información se muestra normalmente como una pequeña etiqueta emergente (tooltip) cuando el usuario pasa el ratón sobre la imagen.

Vamos a añadir un título a nuestra imagen para dar a los usuarios una pista sobre lo que sucederá si hacen clic en ella (lo cual implementaremos en el siguiente paso). Añade el atributo title a tu etiqueta <img> en index.html.

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

Tu archivo index.html debería contener ahora el siguiente código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

Guarda el archivo y actualiza la pestaña Web 8080. Ahora, mueve el cursor del ratón sobre la imagen. Debería aparecer un pequeño cuadro con el texto "Go to LabEx Homepage".

title attribute

Envolver la etiqueta img en una etiqueta a para crear un enlace de imagen clicable

En este paso final, harás que la imagen sea un enlace clicable. Para ello, debes envolver la etiqueta <img> dentro de una etiqueta de anclaje <a>. La etiqueta <a> define un hipervínculo, y su atributo href especifica la URL de la página a la que dirige el enlace.

Envuelve tu etiqueta <img> existente con una etiqueta <a>. Establece el atributo href de la etiqueta <a> en https://labex.io.

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

Tu archivo index.html final se verá así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

Guarda el archivo y ve a la pestaña Web 8080. Notarás que el cursor del ratón cambia a un puntero cuando pasas el ratón sobre la imagen, lo que indica que es un enlace. Al hacer clic en la imagen, se intentará navegar a la página de inicio de LabEx.

Resumen

¡Felicidades por completar el laboratorio! Has aprendido con éxito cómo trabajar con imágenes en HTML.

En este laboratorio, has cubierto los siguientes conceptos clave:

Insertar una imagen usando la etiqueta <img>.
Especificar el origen de la imagen con el atributo src.
Proporcionar texto alternativo para la accesibilidad con el atributo alt.
Controlar las dimensiones de la imagen con los atributos width y height.
Añadir una información sobre herramientas (tooltip) con el atributo title.
Convertir una imagen en un enlace clicable envolviéndola en una etiqueta <a>.

Estas son habilidades esenciales para crear páginas web ricas e interactivas. Ahora puedes añadir y gestionar imágenes con confianza en tus futuros proyectos HTML.