Links & Images

How to make your website actually go places and show things. (Without tears!)

Part 1

Links: The Web's "Get Me Outta Here" Button

The whole internet is basically a giant pile of links. Click one thing, go to another thing. It's like teleportation for bored people.

Links = Digital Doorways

A link (or "hyperlink" if you're fancy) is a clickable thing that takes you somewhere else. Text, buttons, images—if it's clickable and moves you, it's a link. The magic sauce? The <a> tag.


SEE Boring Example of Link
HTML 
<!-- The basic "I want out" link -->
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
    Click for free cookies! (Probably not)
</a>

<!-- Link to another page in your site -->
<a href="about.html">Learn about our tragic backstory</a>

<!-- Link that opens in a new tab (so you don't lose your place) -->
<a href="https://www.wikipedia.org" target="_blank">
    Wikipedia - for when you need to win an argument
</a>
1

href = "Hypertext REFerence" (AKA "Where To")

This is the address. It can be a full URL (https://...), a page in your site (about.html), or even an email (mailto:someone@example.com).

2

target="_blank" = "Open in New Tab, Please"

This makes the link open in a new tab. Use it when sending people away from your site so they can easily come back. It's good manners!

3

The Clickable Stuff

Whatever you put between <a> and </a> becomes clickable. Text, images, even a weird dancing GIF.

Watch Out For "Dead Links"

If your href points to nowhere (like "page_that_doesnt_exist.html"), you get the dreaded 404 error. It's like promising pizza and delivering broccoli.

Pro Tip: Link Text Should Make Sense

Don't use "click here" for everything. Use descriptive text like "Download the recipe" or "Read about cats wearing hats". Better for accessibility and Google!

Part 2

Images: Making Your Site Less Boring

Text is great and all, but sometimes you need pictures. Cats. Memes. Charts that nobody reads. Enter the <img> tag.

HTML 
<!-- Basic image that exists on the internet -->
<img src="https://placekitten.com/400/300" alt="A cute kitten">

<!-- Image from your project folder -->
<img src="images/my_cat.jpg" alt="My cat judging my code">

<!-- Image with width and height set -->
<img src="dog.jpg" alt="A happy dog" width="500" height="300">

src = "Source"

Where the image lives. URL or local file path. If the image is missing, you get a broken image icon. Sad!

alt = "Alternative Text"

Describes the image for screen readers and when images don't load. Also, Google reads it! "Fluffy cat wearing sunglasses" > "image123.jpg"

Width & Height

Set these so the browser reserves space while loading. Prevents your page from jumping around like it had too much coffee.

Images + Links = Super Combo

Wrap an image in an <a> tag to make it clickable! Great for thumbnails, logos, or that picture of your dog that deserves its own page.

<a href="big_cat_image.jpg">
    <img src="small_cat_image.jpg" alt="Click to see cat in HD">
</a>

Folder Navigation Magic

Lost in folder land? Use ../ to go UP one level. Like saying "Take me to my parent folder, please!"

Example: If you're in "folderA/page.html" and need "styles.css" in the parent folder: href="../styles.css"

Common Tears: Image Won't Show?

1. Check the file path. "images/cat.jpg" ≠ "Images/cat.jpg" (computers are picky).
2. Is the image actually in that folder?
3. Did you spell "src" right? Not "scr" or "source"?
Take a breath. You got this.

Part 3

Putting It All Together: A Mini-Project

Let's make a simple "Favorite Things" page. No crying allowed.


OUTPUT
HTML 
<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Things</title>
</head>
<body>
    <h1>Things I Like That Are On The Internet</h1>
    
    <p>Here's a <a href="https://www.unsplash.com" target="_blank">site with free photos</a> I use all the time.</p>
    
    <p>This is my favorite meme this week:</p>
    <img src="funny_meme.jpg" alt="Programming meme: It works on my machine" width="400">
    
    <p>
        <a href="next_lesson.html">
            <img src="next_button.png" alt="Go to next lesson">
        </a>
    </p>
    
    <p>Email me your favorites: <a href="mailto:me@example.com">me@example.com</a></p>
</body>
</html>

You Did It! No Tears!

You now know how to connect pages (links) and add pictures (images). That's like 40% of the web right there. Go make something! Break something! Fix something! The internet is your digital playground.

Remember: Every website you've ever used is just links and images arranged differently.

Now go practice before you forget. We believe in you.

"The web is just links connecting images of cats. Everything else is basically optional."

— Anonymous Developer (Probably holding a cat)

What You Actually Learned (No Fluff)

  • <a> = The "Get Me Outta Here" button. href says where, target says how.
  • <img> = The "Look At This!" tag. src is the picture, alt describes it for blind robots.
  • ../ = The "Oops, Wrong Folder" escape hatch. Use it to go up one level.
  • Clickable images = Wrap <img> in <a>. It's like giving a picture a secret doorway.