Skip to content
Chapter 03 of 07 · 2 lessons · ~18 min

Links and Images

Links connect your pages; images make them come alive. You'll learn file paths, link types, and how to add images that load fast and work for everyone.

YOUR PROGRESS0%
/ Lessons in this chapter
06
How to Add Links in HTML How to link to other pages, websites, email addresses and phone numbers. Coming soon
07
How to Add Images in HTML How to add images that load fast and work for everyone. Coming soon

Chapter practice task

Add a menu and an image gallery to your site

  1. Add a simple menu at the top of index.html and about.html linking to both pages.
  2. Add a mailto: link with your email and a tel: link with your phone number.
  3. Put a few of your images in the images folder and show them as a small gallery with width, height and alt text.
  4. Link one external site you trust and open it in a new tab with rel=”noopener”.
  5. Click every link to check that none of them lead to a 404 page.

By the end of this chapter

  • You understand absolute and relative paths
  • You can add images with proper alt text, width and height
  • You know which image format to choose and how to keep files small

Quick answers for this chapter

Why is my image not showing?

It’s almost always the path. Check the folder name, the exact spelling and capital letters, and the file extension.

Do external links hurt SEO?

No. Linking to helpful, trustworthy sources is normal and good for readers.

JPG, PNG or WebP?

WebP for most photos and graphics, PNG when you need transparency and sharp edges, JPG as a safe fallback.