Dominando la incorporación de imágenes en HTML

Introducción

La etiqueta HTML <img> se utiliza para incrustar imágenes en páginas web. Es una etiqueta vacía, lo que significa que no tiene una etiqueta de cierre. El atributo src es obligatorio y especifica la ruta o URL de la imagen. Otros atributos opcionales incluyen alt, title, height, width, etc. En este laboratorio, aprenderá a usar la etiqueta HTML <img> para insertar imágenes en páginas web.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL 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/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/head_elems -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/charset -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/layout -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/doc_flow -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/multimedia -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/img_maps -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/inter_elems -.-> lab-70777{{"Incorporación de imágenes en HTML"}} html/custom_attr -.-> lab-70777{{"Incorporación de imágenes en HTML"}} end

Configura tu proyecto

El primer paso es crear un nuevo directorio llamado "html-img-tag-lab" y dentro de él crear un archivo llamado "index.html". Abre el archivo en tu editor de código y agrega el siguiente código a la sección <head>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Agrega una imagen a tu página web

Para agregar una imagen a tu página web, necesitarás un archivo de imagen. Para este ejemplo, supongamos que tienes una imagen llamada "logo.png" en una carpeta llamada "images" en tu directorio raíz. Para agregar esta imagen a tu página web usando la etiqueta <img>, agrega el siguiente código a la sección <body>:

<img src="images/logo.png" alt="Logo" />

En este código, el atributo src especifica la ruta al archivo de imagen. El atributo alt proporciona texto alternativo que se muestra si la imagen no se puede cargar por alguna razón.

Agrega atributos adicionales a tu imagen

Puedes agregar varios atributos adicionales a tu imagen para controlar su apariencia y comportamiento. Aquí hay un ejemplo que muestra cómo usar algunos de los atributos más comunes:

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

En este código, los atributos width y height controlan el tamaño de la imagen. El atributo title proporciona un mensaje emergente cuando el usuario pasa el cursor del mouse sobre la imagen.

Usa un mapa de imágenes

Un mapa de imágenes es una imagen que tiene áreas clicables definidas, o "zonas calientes", que enlazan a diferentes destinos. Para crear un mapa de imágenes, debes definir las coordenadas de cada zona caliente y la URL a la que enlaza. Aquí hay un ejemplo de un mapa de imágenes:

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

En este código, el atributo usemap especifica el nombre del mapa, que se define usando la etiqueta <map>. Cada etiqueta <area> define una zona caliente especificando su forma (por ejemplo, "rect" para rectangular), sus coordenadas y la URL a la que enlaza.

Agrega una imagen como fondo

También puedes usar una imagen como fondo de un elemento HTML, como el cuerpo de tu página web. Aquí hay un ejemplo:

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

En este código, la propiedad background-image especifica la ruta al archivo de imagen, y la propiedad background-repeat la establece para que no se repita. La propiedad background-size escala la imagen para cubrir todo el fondo.

Resumen

¡Felicidades! Has aprendido con éxito cómo usar la etiqueta <img> de HTML para agregar imágenes a tus páginas web. También has aprendido cómo usar varios atributos comunes para controlar el tamaño y la apariencia de tus imágenes, y cómo crear un mapa de imágenes y usar una imagen como fondo.