Saltar al contenido principal
Codigo Heroe
Tarea anterior
Enlaces e imágenes4/15
A la lista de tareas
  1. 1. Qué es un enlace: la etiqueta a
  2. 2. Direcciones relativas
  3. 3. Direcciones absolutas
  4. 4. Enlaces a archivos
  5. 5. Enlaces a anclas
  6. 6. La etiqueta img: imágenes
  7. 7. Formatos de imagen: SVG
  8. 8. El formato JPEG
  9. 9. El formato PNG
  10. 10. El formato GIF
  11. 11. Dimensiones de una imagen
  12. 12. El atributo alt
  13. 13. Imágenes como enlaces
  14. 14. Las etiquetas figure y figcaption
  15. 15. Enlaces sin href y el atributo title
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Enlaces a archivos

Cupcake tiene una receta de galletas de pescado tan buena que decidimos compartirla con todo el mundo. La guardamos en formato PDF para que cualquiera pueda descargarla e imprimirla. Solo falta añadir un enlace al archivo.

Los enlaces pueden llevarnos a otras páginas o a otra parte de la misma página. También pueden apuntar a un archivo para descargarlo.

Si el navegador puede mostrar ese tipo de archivo, es posible que lo abra directamente en lugar de descargarlo. Esto ocurre, por ejemplo, con las imágenes y los archivos PDF.

Para indicar que queremos descargar el archivo, la etiqueta <a> dispone del atributo download.

<a href="file.pdf" download>El navegador me descargará en lugar de abrirme</a>
  • 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="index.html">Volver al inicio</a> </nav> </header> <main> <article> <h1>Día doce. A todos les gustan las galletas</h1> <p>Hoy Cupcake me pidió que compartiera la receta de <a>aquellas galletas de pescado</a> con todos sus clientes. Pero hay un problema: no tengo impresora y tampoco quiero gastar papel imprimiendo una receta para cada uno. Así que preparé un enlace para descargar el archivo.</p> <p> <!-- Envuelve este texto en un enlace --> Descargar </p> </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; } aside { margin: 20px 0; color: #c4c4c4; } a[href] { color: #0099ef; text-decoration-line: underline; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Después del primer clic, vuelve al ejercicio para continuar.

    1. Envuelve la palabra Descargar en un enlace con la dirección files/recipe.pdf.
    2. Haz clic en el enlace.
    3. Añade al enlace el atributo download.
    4. Haz clic en el enlace otra vez.
    Codigo Heroe

    © 2023-2026, codigoheroe.com