Select a topic across a two year cycle

Recommended any combination of three topics per year.
Choose a combination of units that suits your students and context.

JAN DEC

Cycle two (Year 10)

Cycle one (Year 9)

Jan Jun Dec

Cycle two (Year 10)

Jan Jun Dec

Overview

This unit introduces students to key layers of webpage development that represent content, structure and presentation. Students develop simple webpages employing hypertext markup language (HTML) for the structure of webpage content, as well as Cascading Style Sheets (CSS) for styling. They explore aesthetics in modern webpage design, and accessibility for diverse audiences.

Optionally, students learn how to integrate JavaScript programming for more advanced webpage behaviour.

By the end of Year 10 students develop and modify innovative digital solutions, decompose real-world problems, and critically evaluate alternative solutions against stakeholder elicited user stories. They acquire, interpret and model complex data with databases and represent documents as content, structure and presentation. They use advanced features of digital tools to create interactive content, and to plan, collaborate on and manage agile projects.

  • name and describe the layers of web development and identify components of webpages as belonging to them
  • understand how the separation of content, structure and presentation helps create viable webpages
  • create simple webpages using basic elements of HTML and CSS
  • apply contemporary web development practices for functionality, accessibility, usability and aesthetics
  • optionally, apply JavaScript to imbue webpages with useful behaviour.

HTML and CSS are neither general-purpose programming languages nor object-oriented programming languages.

The optional topic JavaScript in a webpage is recommended for students studying the JavaScript language rather than the Python language, since webpage elements (for example, images, text and links) provide a graphical user interface for JavaScript. However, the JavaScript pathway in the Years 9-10 Programming unit ensures provision of JavaScript programming activities with appropriate complexity.

Webpage designImage

Assessment

A rubric can focus on one specific criterion related to a content description as in this example focusing on students’ knowledge and skills related to webpages and use of CSS. Use this example as a starting point to assess students' knowledge and skills.

A relevant question to pose is ‘Why is content separated from presentation?’

This type of question allows students to draw on their knowledge and understanding and present their ideas using relevant examples.

Achievement standard

Students acquire, interpret and model complex data with databases and represent documents as content, structure and presentation.

 

Use this resource, Rubric example, for further assessment advice that incorporates elements of design and project management. Modify the example to suit your students and context.

1 (limited) 2 (basic) 3 (proficient) 4 (advanced)
Webpage design: Separating style from content with guidance describes the purpose of CSS describes the purpose of CSS with a relevant example describes the purpose of CSS with a relevant example and explains how this enhances webpage design describes the purpose of CSS with a relevant example and explains how this enhances webpage design. Explains how this practice enables efficient updates of content
Webpage design: applies knowledge of CSS with guidance applies CSS styles to a given webpage applies CSS styles to a given webpage designs and applies CSS code to their own webpages applies knowledge of CSS to their own original webpages and demonstrates different designs using identical content

Unit sequence

This topic offers 3 sequential units and an optional 4th unit

What makes a webpage?

What is this about?

Students discover these three layers of web development and practise recognising them in actual websites. They develop an appreciation for why this separation is important for creating viable webpages. They are briefly introduced to the types of coding that underlie HTML, CSS and JavaScript.

Content description

Represent documents online as content (text), structure (markup) and presentation (styling) and explain why such representations are important AC9TDI10K02 

 

This sequence enables students to:

  • describe the three layers of webpages: content and structure, presentation and behaviour
  • separate websites into their constituent components and identify these as belonging to the different layers
  • outline how each layer is independently designed and manipulated
  • explain how the three layers can combine and align to make good webpages.

Resources to include

Resources to introduce

Resources to develop and consolidate learning

Resources to extend and integrate learning

Further reading and professional learning

HTML and CSS

What is this about?

This topic takes a deeper dive into how the content and structure and presentation layers are achieved using hypertext markup language (HTML) and Cascading Style Sheets (CSS). Students are introduced to the markup languages of HTML and CSS, working with both to create simple webpages.

Content description

Represent documents online as content (text), structure (markup) and presentation (styling) and explain why such representations are important AC9TDI10K02

Design and prototype the user experience of a digital system AC9TDI10P07

This sequence enables students to:

  • explain what HTML is, its basic components and syntax, and how it defines the content and structure layer of a webpage
  • explain what CSS is, its basic components and syntax, and how it defines the presentation layer of a webpage
  • apply HTML and CSS in tandem to create simple webpages.

Supplementary information

HTML and CSS are markup languages. They are neither general-purpose programming languages nor object-oriented programming languages.

Resources to include

Resources to introduce

Resources to develop and consolidate learning

Resources to extend and integrate learning

Further reading and professional learning

Designing a webpage for everyone

What is this about?

Students explore simple accessibility standards, tools and features in webpages, together capable of covering a large subset of people with accessibility needs.

Incorporating accessibility features into webpages is a shared responsibility and an expectation for web designers and developers, with benefits for everyone. A large number of circumstances may prevent a user from being able to properly access, operate and understand webpages. These include issues relating to hardware (for example, old legacy devices), software (for example, different browsers), networks (for example, limited internet bandwidth), individual disability or impairment (for example, hearing, vision or mobility) and environmental circumstances (for example, sunlight glare or being in a loud environment).

Content description

Represent documents online as content (text), structure (markup) and presentation (styling) and explain why such representations are important AC9TDI10K02

Design and prototype the user experience of a digital system AC9TDI10P07

Select and use emerging digital tools and advanced features to create and communicate interactive content for a diverse audience AC9TDI10P11

This sequence enables students to:

  • understand the various factors that may negatively affect an internet user’s experience of a webpage
  • appreciate the need for and benefits of providing equitable access to digital information for diverse audiences
  • use their web design skills in ways that incorporate accessibility for a diverse audience of internet users.

Resources to include

Resources to introduce

Resources to develop and consolidate learning

Resources to extend and integrate learning

Further reading and professional learning

JavaScript in a webpage (optional)

What is this about?

Modern websites often incorporate elements that are interactive or responsive to user input, and interact with data sources. This functionality is achieved through the use of web programming languages – such as JavaScript – that allow for the implementation of algorithms, decisions, repetition, functions and data structures.

In this topic students explore how webpage elements (for example, images, text and links) become a graphical user interface for JavaScript, with this language adding ‘behaviour’ on top of the content, structure and presentation layers of webpages. JavaScript as a pure language is covered thoroughly in the Years 9-10 Programming unit.

Content description

Represent documents online as content (text), structure (markup) and presentation (styling) and explain why such representations are important AC9TDI10K02

Design algorithms involving logical operators and represent them as flowcharts and pseudocode AC9TDI10P05

Validate algorithms and programs by comparing their output against a range of test cases AC9TDI10P06

Design and prototype the user experience of a digital system AC9TDI10P07

Implement, modify and debug modular programs, applying selected algorithms and data structures, including in an object-oriented programming language AC9TDI10P09

 

This sequence enables students to:

  • explain JavaScript's basic components and syntax and how it creates the behaviour layer of a webpage
  • understand and apply some features of JavaScript to add interactivity and other behaviour elements to a webpage.

Supplementary information

This optional topic is not a full introduction to JavaScript, general-purpose programming or object-oriented programming. It does not cover the breadth of the skills and concepts available in the Years 9-10  Programming unit, which caters to Python and JavaScript.

Resources to include

Resources to introduce

Resources to develop and consolidate learning

Resources to extend and integrate learning

Further reading and professional learning