Primeros pasos con HTML – Lección 6 – Imágenes

11/05/2025, by Ivan

Las imágenes en un sitio web son un elemento muy importante; sin ellas, el sitio se vería gris y poco atractivo. Las imágenes se utilizan para embellecer el sitio, para galerías de fotos y simplemente para agregar imágenes.

Las imágenes se insertan con la etiqueta IMG (nota que no escribimos image por completo, solo img). La etiqueta IMG es una etiqueta única, es decir, no tiene una etiqueta de cierre, como <img />.

El atributo principal de la etiqueta IMG es el atributo src. Funciona de manera similar a href en los enlaces; en el atributo src, debemos colocar la ruta de la imagen. La ruta, al igual que en los enlaces, puede ser relativa o absoluta.

Este es el código de nuestro archivo index.html:

<html>
  <head>
    <title>Mi primer documento HTML</title>
  </head>
  <body>  
    <h1>Mi primer documento HTML</h1>
    <p>
      <a href="files/file.html">Enlace al segundo documento</a>
    </p>
  </body>
</html>

Ahora vamos a crear una carpeta llamada images junto a este archivo. En la carpeta images, vamos a copiar el archivo de la imagen. Supongamos que el nombre de la imagen es image.jpg. Ahora vamos a insertar la etiqueta img en el texto de index.html.

<html>
  <head>
    <title>Mi primer documento HTML</title>
  </head>
  <body>  
    <h1>Mi primer documento HTML</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Enlace al segundo documento</a>
    </p>
  </body>
</html>

Ahora que hemos insertado la etiqueta, vamos a escribir la ruta de la imagen. Vamos a escribir una ruta relativa, comenzando con ./

./

Ahora añadimos el nombre de la carpeta en la que está la imagen:

./images/

Y luego escribimos el nombre del archivo:

./images/image.jpg

Ahora insertamos esta ruta en el atributo src.

<html>
  <head>
    <title>Mi primer documento HTML</title>
  </head>
  <body>  
    <h1>Mi primer documento HTML</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Enlace al segundo documento</a>
    </p>
  </body>
</html>

Ahora la imagen se muestra en su tamaño original, pero podemos cambiar su tamaño con los atributos de altura y anchura.

El atributo de ancho de la etiqueta img es width. El atributo de altura es height. Podemos especificar solo el ancho de la imagen, solo la altura, o ambos simultáneamente. Por ejemplo:

<html>
  <head>
    <title>Mi primer documento HTML</title>
  </head>
  <body>  
    <h1>Mi primer documento HTML</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Enlace al segundo documento</a>
    </p>
  </body>
</html>

O solo la altura:

<html>
  <head>
    <title>Mi primer documento HTML</title>
  </head>
  <body>  
    <h1>Mi primer documento HTML</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Enlace al segundo documento</a>
    </p>
  </body>
</html>

Si defines tanto la altura como el ancho al mismo tiempo, asegúrate de que la proporción entre la altura y el ancho sea la misma que la del archivo de imagen original. Si no, distorsionarás la imagen en la página.

<html>
  <head>
    <title>Mi primer documento HTML</title>
  </head>
  <body>  
    <h1>Mi primer documento HTML</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Enlace al segundo documento</a>
    </p>
  </body>
</html>

Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs

Primeros pasos con HTML – Lección 6 – Imágenes