Teoría
Teoría

Enlaces sin href y el atributo title

Las páginas de las fotos tienen enlaces a la imagen anterior y a la siguiente. Pero ¿qué hacemos con el enlace a la siguiente cuando estamos en la última foto? Podemos eliminarlo por completo o hacer algo distinto.

La etiqueta <a> también puede usarse sin dirección, es decir, sin el atributo href. Así representa un enlace que no está activo, pero que podría estarlo en otras circunstancias. Por ejemplo, al pasar de la última foto a otra en medio de la galería. También se usa para indicar la página actual:

<nav>
  <ul>
    <li><a>Página 1</a></li>
    <li><a href="2">Página 2</a></li>
    <li><a href="3">Página 3</a></li>
  </ul>
</nav>

Si quitamos el atributo href, conviene explicar por qué el enlace no tiene dirección. También podemos aclarar el destino de un enlace poco evidente o de una imagen que funciona como enlace. El atributo title permite añadir una indicación. Por ejemplo:

<a title="¿Atrás? ¡Esta es la primera foto!">Anterior</a>

La indicación aparece al mantener el cursor sobre el enlace durante un momento. Úsala como ayuda adicional: la información necesaria para entender el enlace también debe estar visible.

Ahora completemos la navegación de la última página de la galería.

Cuando termines, puedes descargar el archivo ZIP con el sitio que construimos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="day-15.html">Volver a la entrada</a> </nav> </header> <main> <article> <figure> <img src="files/keks-3.jpg" width="486" height="315" alt="Cupcake"> <figcaption>Cupcake nos felicita por nuestros grandes avances.</figcaption> </figure> <nav class="pagination"> <a href="photo-2.html">< Anterior</a>  <a href="#">Siguiente ></a> </nav> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } a[href] { color: #0099ef; text-decoration-line: underline; } figure { margin-left: 0; margin-right: 0; } figure img { vertical-align: middle; border: 8px solid rgb(202, 224, 248); } figcaption { width: 502px; padding-bottom: 8px; font-size: 12px; letter-spacing: 0.02em; font-style: italic; text-align: center; background-color: rgb(202, 224, 248); } .pagination a { display: inline-block; margin-right: 30px; margin-bottom: 15px; } .pagination { text-align: center; }

ObjetivosRealizado

Elimina el atributo href del enlace Siguiente.
Añádele un atributo title con el texto No hay más fotos en la galería.