Unit Overview Target year group: Year 9 Projected Duration: 8 double-lessons This scheme of work is designed to give learners an introduction to the main languages involved in web development. Learners will begin by gaining an understanding of the hardware and protocols involved with networking before developing their own websites using HTML, CSS and JavaScript.
Relevant Prior Knowledge Assessment
Learners may be familiar with the basic use of HTML Assessment is based on the Progression Pathways Assessment and CSS from the Web Awareness topic in year 7. Framework from Computing at School.
Pathway: Communication & Networks
New Language for Learning Level 5
Hub TCP/IP Understands how to construct static web pages using
Switch Client-server model HTML and CSS. Router HTML Protocol CSS Level 6
SMTP JavaScript Knows the names of hardware and protocols
IMAP Tags associated with networking computer systems. POP Form FTP Validation Pathway: Information Technology Designs criteria to critically evaluate the quality of Level 5
Resources solutions. Uses the criteria to identify improvements and make Teacher’s PowerPoint appropriate refinements to the solution. Designs criteria for users to evaluate the quality of Homework Level 6
solutions. Uses the feedback from the users to identify Analysis of three different websites, identifying and improvements and can make appropriate refinements explaining: to the solution. Ideas you would like to incorporate in your own site. Design & layout Support and Extension Multimedia features Less able learners should be able to access most lessons although Interactive features the rate of progress may be slower than that of other learners. Teachers may exceed the projected duration if they feel this would Cross-Curricular Links be more suitable for the classes they are teaching and provide examples to assist with written tasks. Teachers may wish to omit Literacy: lesson 7 (validation) with less able learners. Written explanations of hardware and protocols involved in networking. A range of extension activities have been embedded into a number Written analysis of three existing websites. of the lessons to enable more able learners to be pushed within their Evaluation of own website created. skills and knowledge. More able learners should be frequently encouraged to find and incorporate additional features in their websites using w3schools to help.
Unit 9.2 Web Development
PAGE 1 Learning Objective: Lesson 1 Understand the hardware components Activities: required for networking computers and Introduce learning objective. recognise the protocols required for Explain and discuss the hardware and protocols required for accessing communication. networks and The Internet. Learners should research the different protocols and provide a definition of Learning Outcomes: each from techterms.com. GOOD: Identify and explain each of the Explain how the client-server model works. hardware components, bullet points to Learners write the answers to the questions on today’s learning into a Word explain each protocol. document. BETTER: Clear description of each Plenary: Go through the answers to the questions as a class. networking protocol. Extension: BEST: Labelled diagram of the client- Learners should create a labelled diagram to explain how the client-server server model. model works.
Learning Objective: Lesson 2 Know how to use the basic structures of HTML Activities: and CSS. Introduce learning objective. Explain what HTML and CSS are used for in relation to web design. Learning Outcomes(over two lessons): Learners should create the basic structure for their web page using HTML. GOOD: Webpage set up with some basic Discuss the potential topic for websites to be developed. content set using HTML and colours set Learners should add the relevant HTML to add some content to their first web using CSS. page. BETTER: Picture and hyperlink added to Explain the structure of CSS. web page. Learners add a CSS document to set the colours to be used in their web site. BEST: Own fonts selected using CSS with Set homework project. Google Fonts. Extension: Add a picture and hyperlink using HTML. Change the font using Google fonts and CSS.
Learning Objective: Lesson 3 Recognise how to style different areas of Activities: HTML using <div> tags. Introduce learning objective. Explain how <div> tags are used to create specific areas of HTML and how Learning Outcomes: this can be formatted with CSS. GOOD: Separate section of web page Learners add the relevant <div> tags and CSS to format a separate area of created using <div> tags. their webpage. BETTER: Apply different formatting to the Learners should continue adding relevant content to their web page. <div> box to make it stand out from the Extension: rest of the page. Use w3schools.com to independently add a suitable border to the <div> box. BEST: Independently add a border to the box using w3schools.com to help.
Learning Objective: Lesson 4 Know how to add additional pages to a Activities: website. Introduce learning objective. Explain and demonstrate how to add a new page to the website. Learning Outcomes: Learners should add at least one other relevant information page along with GOOD: One extra page of information a blank ‘form’ page to use later. created along with a blank ‘form’ page. Plenary: Learners should swap computers with the person next to them and BETTER: Additional extra page of use a sticky note to give feedback on the website in the form of WWW and information added to the site. EBI. BEST: All extra pages have a range of content and demonstrate a variety of HTML features.
Unit 9.2 Web Development
PAGE 2 Learning Objective: Lesson 5 Understand how pages are linked together Activities: and recognise how to make a navigation bar Introduce learning objective. more visibly appealing with CSS. Explain how to use lists to organise a group of hyperlinks on a page. Learners create a list of links to the other pages in their site. Learning Outcomes: Explain and demonstrate how to make the list look better using CSS. GOOD: A list of hyperlinks leading to the Learners add the relevant CSS to make their list of links look like a navigation additional pages in the site. bar. BETTER: Change the appearance of the Learners should continue developing all of their pages and add their list using CSS so it appears as a navigation bar to each page. horizontal bar. BEST: Apply suitable CSS formatting to create a visually appealing navigation bar.
Learning Objective: Lesson 6 Understand what is meant by a ‘form’ and be Activities: able to use appropriate HTML tags to add this Introduce learning objective. to a website. Explain how to structure a user input form using HTML. Learners develop their own input form on their ‘sign-up’ page. Learning Outcomes: Learners should continue developing the rest of their website once the input GOOD: Basic form added for users to form is complete. enter information. BETTER: Form page matches the same style as the rest of the website. BEST: Form is laid out in a way that looks presentable and suitable for the audience.
Learning Objective: Lesson 7 Understand how JavaScript is structured and Activities: be able to apply basic JavaScript validation to Introduce learning objective. a web form. Explain what JavaScript is used for and explain what the term validation means. Learning Outcomes: Learners set up a new JavaScript document and attach this to their form page. GOOD: Add JavaScript to apply a presence Explain the different types of validation and introduce how JavaScript can be check for each input box in the form. used to apply presence check validation. BETTER: Add JavaScript to check the Learners should add JavaScript to apply a presence check to their form. length of the phone number. Introduce validation for checking the length and range of data. BEST: Add JavaScript to check the range Learners should add JavaScript to their form page to check the length and for the age. range of data entered.
Learning Objective: Lesson 8 Understand how to thoroughly test a website Activities: and be able to use this structure to inform a Introduce learning objective. detailed evaluation. Explain how a test table works and how it can be used to test the websites. Learners create a test table and use this to test all areas of their websites. Learning Outcomes: Explain what is meant by ‘Success Criteria’, discuss sensible criteria that apply GOOD: Complete a test table and basic to the websites created. evaluation of the website. Learners should write a detailed evaluation of their website. BETTER: Detailed test table covering all areas of the site, success criteria devised and website evaluated against this. BEST: Improvements made to website and fully documented within the evaluation.
