HTML Academy
Absolute addresses
Links and images4/17
Back to the list of tasks
  • 1. What is a link? The a tag
  • 2. Relative addresses
  • 3. Absolute addresses
  • 4. Links to files
  • 5. An in-page link
  • 6. The img tag for images
  • 7. Image formats, SVG format
  • 8. JPEG format
  • 9. PNG format
  • 10. GIF format
  • 11. Image dimensions
  • 12. alt attribute
  • 13. Image link
  • 14. The figure and figcaption tags for illustrations and captions
  • 15. Links without href and the title attribute
  • 16. Summary of “Links and Images”
  • 17. Test: Cat tours travel agency gallery
An in-page link
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Links to files

Many links allow us to reach other pages or places on the page. However, you can link to anything that has its own URL, which could be a file such as an image, video, PDF or audio file. In this case, when you click on the link to the file, your browser may offer to download it.

If the browser can display that file type, it may open the file directly instead of downloading it. This is common with images and PDF files. What happens when you follow a file link depends on the file type and browser settings.

Add the download attribute to <a> to ask the browser to download the file instead of displaying it.

<a href="file.pdf" download>Download this PDF instead of opening it</a>

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="index.html">Return to home</a> </nav> </header> <main> <article> <h1>Day Twelve. Everyone loves cookies</h1> <p>Today, Muffin asked me to make the recipe <a>for those fish cookies</a> accessible to all of his customers. But as luck would have it, I don’t have a printer, and I don’t want to waste paper printing out the recipe for everyone. I had to create a link to download the file.</p> <p> <!-- Format this text as a link --> Download </p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </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; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0

    After following the Download link, use Return back in the mini-browser to return to this page before adding the download attribute.

    1. Format the word Download as a link with the address files/recipe.pdf.
    2. Follow the Download link.
    3. Add the attribute download to the link.
    4. Follow the link again.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2026

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.