Insertar y dar estilo a imágenes en HTML

Introducción

En este laboratorio, aprenderás cómo insertar y dar estilo a imágenes de manera efectiva en HTML utilizando diversas técnicas y atributos. El laboratorio cubre habilidades esenciales, como agregar imágenes básicas con fuente y texto alternativo, establecer dimensiones fijas de las imágenes, alinear imágenes y crear tooltips (información emergente) informativas. Siguiendo las instrucciones paso a paso, adquirirás experiencia práctica en la manipulación de elementos de imagen para mejorar el diseño de la página web y la experiencia del usuario.

A través de la práctica práctica, explorarás diferentes atributos HTML como src, alt, width, height y title para controlar la presentación y accesibilidad de las imágenes. Estas habilidades son fundamentales para los desarrolladores web que buscan crear páginas web visualmente atractivas y receptivas con imágenes adecuadamente integradas y con estilo.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/para_br -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/layout -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/multimedia -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/img_maps -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/embed_media -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/inter_elems -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} html/custom_attr -.-> lab-452362{{"Insertar y dar estilo a imágenes en HTML"}} end

Agregar una imagen básica con los atributos src y alt

En este paso, aprenderás cómo agregar imágenes básicas a una página HTML utilizando la etiqueta <img> y sus atributos esenciales. Las imágenes son una parte crucial del diseño web, ya que ayudan a hacer las páginas web más atractivas visualmente e informativas.

Primero, creemos un archivo HTML para trabajar. Abre el WebIDE y crea un nuevo archivo llamado images.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- We'll add our images here -->
  </body>
</html>

La etiqueta <img> es una etiqueta auto-cerrada que se utiliza para incrustar imágenes en un documento HTML. Tiene dos atributos críticos:

src (fuente): Especifica la ruta al archivo de imagen.
alt (texto alternativo): Proporciona una descripción de texto de la imagen.

Agreguemos una imagen a nuestro archivo HTML:

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

El atributo src apunta a la URL de la imagen, y el atributo alt proporciona una descripción que:

Se muestra si la imagen no se carga correctamente.
Ayuda a los lectores de pantalla a describir la imagen para usuarios con discapacidad visual.
Mejora el SEO (Search Engine Optimization, optimización para motores de búsqueda) al proporcionar contexto a los motores de búsqueda.

Guarda el archivo y ábrelo en un navegador web para ver la imagen.

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

Establecer dimensiones fijas de imagen con ancho y alto

En este paso, aprenderás cómo controlar el tamaño de las imágenes utilizando los atributos width (ancho) y height (alto) en HTML. Estos atributos te permiten especificar las dimensiones exactas de una imagen, lo que puede ayudar a mejorar el diseño de la página y el rendimiento de carga.

Abre el archivo images.html que creaste en el paso anterior. Modificaremos la imagen existente y agregaremos algunas más para demostrar diferentes técnicas de ajuste de tamaño.

HTML proporciona dos atributos para establecer las dimensiones de una imagen:

width: Establece el ancho de la imagen en píxeles.
height: Establece la altura de la imagen en píxeles.

Actualicemos la imagen anterior y agreguemos algunos nuevos ejemplos:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- Original image with fixed dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- Another image with different dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- Image with only width specified -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

Puntos clave sobre las dimensiones de las imágenes:

Las dimensiones se especifican en píxeles.
Puedes establecer el ancho, la altura o ambos.
Si solo se especifica una dimensión, la imagen se escala proporcionalmente.
Establecer las dimensiones ayuda a evitar cambios en el diseño de la página mientras se cargan las imágenes.

La salida de ejemplo en un navegador web mostrará tres imágenes de diferentes tamaños.

Alinear imágenes utilizando el atributo align (obsoleto)

En este paso, aprenderás sobre el atributo align (alineación), que está obsoleto, para posicionar imágenes en HTML. Aunque el diseño web moderno utiliza CSS para el diseño, es importante entender este método histórico de alineación de imágenes.

Abre el archivo images.html de los pasos anteriores y modifícalo para demostrar diferentes alineaciones de imágenes:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- Left-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      This text will flow around the left-aligned image.
    </p>

    <p>
      <!-- Right-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      This text will flow around the right-aligned image.
    </p>

    <p>
      <!-- Center-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      This text is aligned with the middle of the image.
    </p>
  </body>
</html>

El atributo align admite tres valores principales:

left: Alinea la imagen a la izquierda, con el texto fluyendo alrededor de ella.
right: Alinea la imagen a la derecha, con el texto fluyendo alrededor de ella.
middle: Alinea la imagen verticalmente con la línea base del texto.

Notas importantes:

El atributo align está obsoleto en HTML5.
El diseño web moderno utiliza float o flexbox de CSS para el diseño.
Este atributo se mantiene para una comprensión histórica.

La salida de ejemplo mostrará imágenes posicionadas de manera diferente dentro de los párrafos.

Nota: La ventana de diálogo de Labby puede ocultar la imagen alineada a la derecha.

En este paso, aprenderás cómo utilizar el atributo title para agregar información de tooltip (información emergente) a las imágenes. Los tooltips proporcionan contexto o descripción adicional cuando un usuario pasa el cursor sobre un elemento.

Abre el archivo images.html de los pasos anteriores y modifícalo para demostrar el uso de tooltips:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- Image with a simple tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- Image with a more descriptive tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- Multiple images with different tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

Puntos clave sobre el atributo title:

Proporciona información adicional cuando se pasa el cursor sobre una imagen.
Funciona con imágenes, texto y la mayoría de los elementos HTML.
Ayuda a mejorar la experiencia del usuario al dar contexto.
Se muestra en un pequeño cuadro emergente cuando el mouse pasa sobre el elemento.

Cuando pases el cursor sobre estas imágenes en un navegador web, verás aparecer el texto del tooltip.

Resumen

En este laboratorio, los participantes aprendieron cómo trabajar de manera efectiva con imágenes en HTML al dominar técnicas clave para la incrustación y el estilo de imágenes. El laboratorio cubrió habilidades esenciales, como agregar imágenes utilizando la etiqueta <img> con atributos críticos como src y alt, que garantizan la correcta visualización y accesibilidad de las imágenes. Los aprendices exploraron métodos para controlar las dimensiones de las imágenes a través de los atributos width y height, comprendiendo cómo estas configuraciones afectan el diseño y el rendimiento de la página.

Los ejercicios prácticos guiaron a los estudiantes a través de diversas técnicas de manipulación de imágenes, incluyendo establecer tamaños fijos de imágenes, agregar información de tooltip con el atributo title y experimentar con diferentes estrategias de alineación de imágenes. Al trabajar de primera mano con elementos de imagen HTML, los participantes obtuvieron valiosos conocimientos sobre cómo crear diseños de páginas web visualmente atractivos y receptivos.