Lesson 6.1 Inspect, HTML & CSS
HyperText Mark-up Language
Cascading Style Sheets
Aim:
Today you will "inspect" a website and look at some examples of HTML & CSS code. You will start to explore using HTML code to build your own website.
 |
Key vocabulary Website, web page, browser, media, Hypertext Markup Language (HTML) |
Be Inspired:
Check out the home page of The Klein Academy. What are the features of this website? Have you ever "inspected" Mrs. Klein's website?
Check It Out:
Have you ever wondered how a website is created?
Do Your Best:
Today you will use your code.org account to start to build your own website:
You will explore using HTML to create different sized headings and paragraphs.
You will need to use the following HTML code:
<h1> The Klein Academy for ICT </h1>
What happens when you change h1 to h2?
What happens when you change h1 to p?
 |
| Do you ever get the feeling you're being watched? |
Extension Task:
Ready for a challenge? Have a look at the style.css section:
Finally:
Websites are not programmed. The code isn’t run like a set of instructions, instead your browser (Chrome, Firefox, Safari, etc.) reads the ‘markup’ or code, which tells it how to display the web page on your screen — what things look like, where they are, etc.Games:
Year 6 Computing – Lesson Plan
Topic: Creating Weblinks in HTML & CSS
Lesson Duration: 60 minutes
Previous Knowledge: Students have already created websites using HTML & CSS with styled text, images, and multiple pages.
Today’s Focus: Adding weblinks to showcase previously built Scratch projects.
Learning Objective (LO):
To understand how to add functional hyperlinks to a website using HTML and CSS.
Success Criteria:
I can use the <a> tag in HTML to create a hyperlink.
I can style my hyperlink using CSS.
I can test my hyperlink to ensure it works correctly.
I can explain how to debug my code if something goes wrong.
Resources Needed:
Computers with internet access
Students’ existing website files
Links to each student’s Scratch projects
Example/exemplar website with hyperlinks
Projector/screen for demonstration
Printed mini reference cards (HTML <a> tag syntax & CSS link styling)
Lesson Outline:
1. Starter (5-10 mins):
Recap Quiz:
Quick 5-question Kahoot/Quizizz or verbal Q&A:
What tag is used to add an image in HTML?
How do we style an element using CSS?
What should every webpage start with?
How do you link an external CSS file?
What did we learn in last week’s lesson?
Inspiring Exemplar Demo:
Show a finished student-style website that includes links to Scratch games (hosted on Scratch). Point out:
The use of <a href="...">
The link styling (hover effect, colour, etc.)
How it adds functionality and professionalism to the website.
2. Main Teaching (15-20 mins):
Modelling – Step-by-Step Tutorial: Project on screen as you code alongside:
Basic Link Syntax (HTML):
html
Copy
Edit
<a href="https://scratch.mit.edu/projects/yourprojectid">Play My Game</a>
Styling the Link (CSS):
css
Copy
Edit
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
color: #45a049;
text-decoration: underline;
}
Best Practices:
Always test your links.
Use meaningful link text.
Open external links in a new tab (introduce target="_blank" optionally).
Guided Practice: Students follow along, adding links to their own Scratch projects in a new "Projects" or "Games" section of their site.
3. Independent Task (20 mins):
Student Task:
Add a hyperlink (or more) to at least one Scratch project.
Add basic CSS styling to the link.
Use a browser to test the link.
Carry out a mini-debugging task (peer or self-check):
Does the link go to the correct page?
Is it styled properly?
Does it work on click?
Mini Checklist for Debugging:
Check for typos in the URL.
Make sure the <a> tag is properly closed.
Check that CSS selectors are correct.
4. Extension Task (for early finishers):
Create a small gallery page with links to multiple Scratch games.
Use a button-style design for each link using CSS:
css
Copy
Edit
a.button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border-radius: 8px;
display: inline-block;
}
a.button:hover {
background-color: #005f6b;
}
Add hover effects and icons using emojis or inline SVG.
Plenary (5-10 mins):
Class Discussion:
What did you learn today?
What was tricky about adding links?
Why do we test and debug?
Showcase:
Choose 2–3 volunteers to show their project links working.
Assessment Opportunities:
Observation during guided practice.
Questioning during modelling and plenary.
Review of students’ websites for correct link usage and styling.
Completion of debugging checklist.
