Planning a mini website
Lesson details
Learning outcome
I can design an accessible and user-friendly three-page website with clear layout and navigation.
Key learning points
- Effective design of a webpage considers usability, readability, accessibility.
- A website is a collection of web pages hyperlinked together.
- Website design creation focuses on the layout of pages and the navigation between them.
- Effective implementation of a web site design includes an organised file structure for the resources on each page.
Keywords
Website - a collection of web pages around a common theme
Readability - how easy it is to read and understand text
Accessibility - consideration of design so that what is created is usable by everyone
Common misconception
Users don't ever see the underlying file structure of a website, so it's organisation is unimportant.
Organisation of resources can make the creation and maintainence of websites an easier task. The quicker a developer of website can find the component parts, the less time will be wasted when changes need to be made.
Teacher tip
Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Equipment
Pupils will need access to a device with HTML editing software. Examples in this lesson use the RPF Code Editor https://oak.link/html-editor
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.What is the language used to define and structure content on webpages?
Q2.What is HTML used for?
Q3.What is a webpage?
Q4.What does the alt attribute in HTML do?
Q5.What is accessibility in web design?
Q6.What is the difference between ordered and unordered lists in HTML?
Assessment exit quiz
6 Questions
Q1.Match each term to its definition.
how easy it is to read and understand text
ensures websites are usable by everyone
connects the pages of a website
helps developers find resources efficiently
Q2.Why is file organisation important in website creation?
Q3.What connects the pages of a website together?
Q4.What should an effective website design prioritise?
Q5.What HTML tag is used to define a paragraph of text?
Q6.What HTML tag is used to create a hyperlink?
To help you plan your 11 computer science lesson on: Planning a mini website, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 11 computer science lesson on: Planning a mini website, download all teaching resources for free and adapt to suit your pupils' needs.
The starter quiz will activate and check your pupils' prior knowledge, with versions available both with and without answers in PDF format.
We use learning cycles to break down learning into key concepts or ideas linked to the learning outcome. Each learning cycle features explanations with checks for understanding and practice tasks with feedback. All of this is found in our slide decks, ready for you to download and edit. The practice tasks are also available as printable worksheets and some lessons have additional materials with extra material you might need for teaching the lesson.
The assessment exit quiz will test your pupils' understanding of the key learning points.
Our video is a tool for planning, showing how other teachers might teach the lesson, offering helpful tips, modelled explanations and inspiration for your own delivery in the classroom. Plus, you can set it as homework or revision for pupils and keep their learning on track by sharing an online pupil version of this lesson.
Explore more key stage 4 computer science lessons from the HTML programming project unit, dive into the full secondary computer science curriculum, or learn more about lesson planning.