Imágenes, botones y enlaces

Añade una imagen con HTML.

Las imágenes se incorporan mediante la etiqueta img.

A diferencia de muchas otras etiquetas HTML, img no necesita una etiqueta de cierre.

Aquí encontramos dos atributos importantes:

src indica dónde se encuentra el archivo de imagen.

alt proporciona una alternativa textual adecuada cuando la imagen transmite información.

Organiza tus imágenes.

Cuando una web empieza a crecer, conviene organizar los archivos en carpetas.

Podemos crear una carpeta llamada:

images

La estructura del proyecto podría quedar así:

mi-primera-web/
├── index.html
├── styles.css
└── images/
└── escritorio.jpg

Entonces, desde `index.html`, la imagen se cargaría con:

Las rutas deben coincidir exactamente con el nombre y la ubicación de los archivos.

El atributo alt.

El atributo alt no debería utilizarse como una lista de palabras clave.

Su función principal es proporcionar una alternativa textual cuando la imagen aporta información y no puede percibirse visualmente.

Por ejemplo:

Si una imagen es puramente decorativa y no aporta información, puede utilizarse un alt vacío:

Haz que las imágenes sean responsive.

Ya vimos esta regla en la lección anterior:

img {
max-width: 100%;
height: auto;
}

Con ella evitamos que una imagen sea más ancha que el espacio disponible.

También podemos controlar cómo ocupa un contenedor:

.project-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

object-fit: cover permite rellenar el espacio manteniendo las proporciones, aunque parte de la imagen pueda quedar recortada.

Crea enlaces entre tus páginas.

Ya conocemos la etiqueta a.

Para abrir otra página de nuestro propio sitio podemos escribir:

<a href="servicios.html">Ver servicios</a>

Y para volver al inicio:

<a href="index.html">Inicio</a>

Cuando crees varias páginas, revisa siempre que el nombre escrito en `href` coincida exactamente con el archivo real. Un nombre incorrecto puede provocar un error 404 al publicar.

Crea enlaces hacia una sección.

También podemos navegar dentro de la misma página.

Primero añadimos un identificador:

<section id="servicios">
<h2>Servicios</h2>
</section>

Después podemos enlazarlo:

<a href="#servicios">Ver servicios</a>

Al pulsar el enlace, el navegador llevará al visitante hasta esa sección.

Enlaces hacia otras webs.

También podemos enlazar una página externa:

<a href="https://ejemplo.com">
Visitar página
</a>

Si necesitas abrirla en otra pestaña:

<a
  href="https://ejemplo.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Visitar página
</a>

No todos los enlaces externos necesitan abrir una pestaña nueva. Utilízalo cuando tenga sentido para la experiencia del visitante.

Un botón puede ser un enlace.

En muchas páginas veremos elementos que visualmente parecen botones, pero realmente son enlaces.

<a href="contacto.html" class="button">
Cuéntame tu proyecto
</a>

CSS controla su apariencia:

.button {
  display: inline-block;
  padding: 14px 24px;
  background: #222222;
  color: #ffffff;
  text-decoration: none;
}

Si el elemento lleva al usuario a otra página o ubicación, normalmente utilizamos un enlace. El elemento button se utiliza para acciones, como enviar un formulario o activar una función.

Añade estados hover y focus.

Es útil indicar visualmente que un elemento puede utilizarse.

.button:hover {
opacity: 0.8;
}

También debemos considerar la navegación mediante teclado:

.button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}

El estado focus-visible ayuda a mostrar qué elemento interactivo está seleccionado mediante navegación por teclado.

Utiliza textos de enlace claros.

El texto de un enlace debería ayudar a entender qué ocurrirá al pulsarlo.

MENOS CLARO

Haz clic aquí

No explica por sí mismo cuál es el destino del enlace.

MÁS CLARO

Ver servicios

Comunica directamente qué encontrará el visitante.

Crea una sección visual completa.

Podemos combinar una imagen, contenido y una llamada a la acción:

<section class="project">

  <img
    src="images/proyecto-web.jpg"
    alt="Vista de un proyecto de diseño web"
  >

  <h2>Proyecto destacado</h2>

  <p>
    Una página sencilla, clara y responsive.
  </p>

  <a href="#" class="button">
    Ver proyecto
  </a>

</section>

Esta combinación aparece constantemente en páginas profesionales: contenido visual, contexto y una acción clara.

Optimiza tus imágenes antes de subirlas.

Una imagen puede verse perfectamente y, aun así, perjudicar la velocidad de una página si su archivo es innecesariamente pesado.

Utiliza dimensiones adecuadas al uso real.

Comprime las imágenes antes de publicarlas.

Utiliza formatos modernos cuando sea apropiado.

Utiliza nombres de archivo descriptivos.

Por ejemplo, es mejor:

proyecto-diseno-web.jpg

que:

IMG_847293.jpg

RESUMEN

Lo que has aprendido.

Las imágenes se añaden con la etiqueta img.
src indica la ubicación del archivo.
alt proporciona una alternativa textual cuando corresponde.
Las imágenes deben adaptarse a diferentes pantallas.
Los enlaces internos conectan páginas de una misma web.
Los identificadores permiten enlazar secciones.
También podemos crear enlaces externos.
Un enlace puede diseñarse visualmente como botón.
Los botones y enlaces tienen funciones diferentes.
Los estados hover y focus mejoran la interacción.
El texto de los enlaces debe ser descriptivo.
Las imágenes deben optimizarse antes de publicarse.

PONLO EN PRÁCTICA

Completa el contenido de tu web.

Abre el proyecto que has construido durante las lecciones anteriores.

Crea una carpeta llamada images.
Añade al menos una imagen.
Escribe un alt adecuado.
Comprueba que la imagen sea responsive.
Añade un enlace hacia una sección de tu página.
Añade un enlace hacia otra página HTML.
Convierte una llamada a la acción en botón visual.
Añade un estado hover.
Comprueba la navegación mediante teclado.
Revisa que todas las rutas funcionen.

Prueba todos tus enlaces antes de continuar. Una web puede verse muy bien, pero un enlace roto perjudica inmediatamente la experiencia del visitante.

Añade imágenes, botones y enlaces.