Imágenes HTML: Aprende a Incrustar y Estilizar con src, alt y tamaño

Introducción

Las imágenes son una parte fundamental de las páginas web modernas, haciendo que el contenido sea más atractivo y visualmente agradable. En HTML, las imágenes se incrustan en un documento utilizando la etiqueta <img>. Esta etiqueta es potente y viene con varios atributos para controlar la fuente, el tamaño y la accesibilidad de la imagen.

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

El entorno ha sido preconfigurado con un archivo index.html y un archivo de imagen llamado labex.svg en el directorio ~/project. También se está ejecutando un servidor web, por lo que puede previsualizar sus cambios en tiempo real en la pestaña "Web 8080".

Insertar etiqueta img con atributo src para la fuente de la imagen

En este paso, aprenderá a agregar una imagen a su página HTML. La etiqueta <img> se utiliza para incrustar 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 a la imagen que desea mostrar.

Primero, abra el archivo index.html ubicado en el directorio ~/project utilizando el explorador de archivos de la izquierda.

Ahora, agregue la etiqueta <img> dentro de la sección <body>, justo debajo del comentario . Establezca el atributo src en labex.svg, que es el archivo de imagen proporcionado en su directorio de 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 agregar el código, guarde el archivo. Para ver el resultado, cambie a la pestaña Web 8080 en la barra superior del entorno de laboratorio. Debería ver el logo de LabEx mostrado en la página.

img tag

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

En este paso, agregará el atributo alt a su etiqueta <img>. El atributo alt proporciona 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 su sitio web más accesible.

Modifique la etiqueta <img> en su 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" />

Su 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>

Guarde el archivo. No verá ningún cambio visual en la pestaña Web 8080 porque la imagen se está cargando correctamente. Sin embargo, agregar el atributo alt es una práctica recomendada crucial para el desarrollo web.

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

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

Vamos a establecer el ancho de nuestra imagen en 200 píxeles y la altura en 50 píxeles. Agregue los atributos width y height a su 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>

Guarde el archivo y cambie a la pestaña Web 8080. Notará que la imagen se ha redimensionado a las dimensiones que especificó.

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

En este paso, agregará 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 típicamente como un tooltip (consejo emergente) cuando un usuario pasa el cursor del 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). Agregue el atributo title a su etiqueta <img> en index.html.

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

Su archivo index.html ahora debería contener 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>

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

title attribute

Envuelve la imagen en una etiqueta 'a' para crear un enlace de imagen clickeable

En este paso final, convertirá la imagen en un enlace clicable. Para hacer esto, necesita 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 va el enlace.

Envolva su etiqueta <img> existente con una etiqueta <a>. Establezca 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>

Su 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>

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

Resumen

¡Felicitaciones por completar el laboratorio! Ha aprendido con éxito a trabajar con imágenes en HTML.

En este laboratorio, ha cubierto los siguientes conceptos clave:

Incrustar una imagen usando la etiqueta <img>.
Especificar la fuente 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 un tooltip (consejo emergente) 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 puede añadir y gestionar imágenes con confianza en sus futuros proyectos HTML.