HTML ā€“ Your First Webpage
beginner20 XP

Links & Images ā€“ Connecting the Web!

Add clickable links to other pages and display images ā€” the two features that make the web feel like magic!

Links & Images ā€” The Web's Superpowers! šŸ”—šŸ–¼ļø

Two things make the web special: you can click to go anywhere and you can show pictures. Let's learn both!

Hyperlinks ā€” Clicking Between Pages

The <a> tag creates a clickable link:

HTML
<a href="https://www.youtube.com">Go to YouTube!</a>
  • a stands for anchor
  • href means "hypertext reference" ā€” where the link goes
  • The text between the tags is what you click

Types of Links

HTML
<!-- Link to another website -->
<a href="https://www.google.com">Google</a>

<!-- Link to another page on YOUR site -->
<a href="about.html">About Me</a>

<!-- Open in a NEW tab (target="_blank") -->
<a href="https://www.roblox.com" target="_blank">Play Roblox šŸŽ®</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Me</a>

Images ā€” Showing Pictures!

The <img> tag shows an image:

HTML
<img src="cat.jpg" alt="A fluffy orange cat" width="300">

āš ļø <img> is a self-closing tag ā€” it has NO closing tag!

| Attribute | Meaning | |-----------|---------| | src | Where the image file is (filename or URL) | | alt | Text description (used by screen readers + shows if image fails) | | width | How wide to display the image (in pixels) |

Images from the Internet

HTML
<!-- Use any image URL from the web -->
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Camponotus_flavomarginatus_ant.jpg" 
     alt="A macro photo of an ant" 
     width="400">

Clickable Image Link!

You can combine <a> and <img> ā€” click the image and it goes somewhere:

HTML
<a href="https://www.nasa.gov">
  <img src="rocket.jpg" alt="A rocket launching" width="200">
</a>

šŸš€ Build a Favourite Things Page!

HTML
<!DOCTYPE html>
<html>
  <head><title>My Favourite Things</title></head>
  <body>
    <h1>Things I Love! ā¤ļø</h1>
    
    <h2>My Favourite Website</h2>
    <a href="https://www.youtube.com" target="_blank">
      Click here for YouTube! šŸŽ¬
    </a>
    
    <h2>My Favourite Animal</h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Dog_Breeds.jpg" 
         alt="Cute dogs" width="300">
    <p>Dogs are the best! šŸ¶</p>
  </body>
</html>

Quick check

01/3

Which attribute tells a link WHERE to go?