6.4 Building A Webpage: Adding Weblinks

Welcome to Lesson 6.1 – Creating Weblinks in HTML and CSS

Today you will learn how to add clickable links to your website using HTML, and make them look cool with CSS.

Step 1: What Is a Hyperlink?
A hyperlink is a bit of text (or a button) you can click to go somewhere else — like a game or a different website.

Step 2: Try It Out!
Here’s how to make a link in HTML:
<a href="https://scratch.mit.edu/projects/12345678">Play My Game!</a>

Change the link to your own Scratch game. Then test it in your browser — click it and see if it works.

Step 3: Make It Look Awesome with CSS
Now let’s style your link so it looks nice. Add this to your CSS file:

a {color: #4CAF50; text-decoration: none;}
a:hover {color: #45a049; text-decoration: underline;}
This makes your link green and underlined when you hover over it.

Step 4: Add It to Your Site
Make a new section on your website called "My Games" and add your link there.

Example:
<h2>My Scratch Projects</h2> <p>Click below to play!</p> <a href="https://scratch.mit.edu/projects/12345678">Play My Maze Game</a>
Step 5: Check Your Work
Does the link work?
Does it look the way you want?
Is the CSS applied correctly?
Did you spell everything right?
If something doesn’t work, try checking for little mistakes like a missing quote or a typo.
Want a Challenge?
Turn your links into buttons!
Add this to your CSS:
a.button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: #005f6b;
}
Then write your link like this:
<a href="https://scratch.mit.edu/projects/12345678" class="button">🎮 Play Game 1</a>

Finished Early?
Make a little game gallery with links to 2 or 3 Scratch games. Use fun emojis or try out new colours for your buttons.
Well done!
Now you know how to make awesome links on your website. Show them off to a friend or teacher!