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. Link to the file
  • 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, demonstrative material
  • 15. Links with a blank href, 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

Link to the file

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.

However, if the browser is able to process files of this type, the contents of the file will open directly in the browser. This occurs most frequently with images. But lately, browsers have learned how to open PDF files and many other file types.

In order to prevent files from being opened directly in the browser, the <a> tag has the download attribute, which helps in particular with downloading the file.

<a href="file.pdf" download>The browser downloads me, but it will not attempt to read me</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
    1. Format the word Download as a link with the address files/recipe.pdf.
    2. Follow the link and then go back.
    3. Add the attribute download to the link.
    4. Follow the link again.

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

    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.