Discover how the web is built. Pupils will learn how web pages are designed, structured, and presented with HTML mark-up and CSS exercises. They’ll add tags, images, and links to bring their web pages to life.
HTML can be accessed through the dropdown menu of the navigation bar or through the Learn, Create, Glossary links on the Coding Home page.
The Learn Home page provides an overview of the scope and sequence of Levels around specific topics. Each Level is comprised of a series of Lessons. These Levels and Lessons can be navigated through the left-hand menu or by scrolling through the list of lessons.
Each lesson in HTML creates a self-guided experience for pupils through a series of scaffolded tasks. Lessons always begin with an Introduction to the concept as the first step.
As pupils progress through each Lesson, they are introduced to coding concepts and vocabulary in the Solve steps. Hands-on tasks are provided to allow pupils to practice using text to code. These tasks support the development of computational thinking skills such as logic and sequencing. Each Lesson's step includes three sections:
- Instructions: Written explanation of the task(s) for this Lesson step that appear in the top half of the screen. Specific vocabulary may include a link to pop-up definitions.
- Code: Space where pupils will add and manipulate coding elements. When pupils have finished a task or created their own code, they select Run code to test.
- Display: Code that is correct will display the results in this panel. Errors in coding will appear at the top of the panel.
A final step for a lesson might be Build. This step offers a creative opportunity for pupils to apply everything learned in the lesson. Pupils make decisions about how to use the coding elements provided.
Debugging and Test Your Skills Lessons are provided at the end of most Levels to allow pupils additional practice in applying what they have learned in previous Lessons. Debugging Lessons give pupils the opportunity to practice using their coding knowledge to fix errors.
Test Your Skills Lessons allow pupils to apply their learning through a series of steps that include specific coding challenges.
HTML Lesson Supports
Supports are provided for most HTML Lessons. Each Lesson includes multiple Help Videos. These videos provide a tutorial to support pupils as they progress through each step. The Help Videos can be accessed from each step of the Lesson. *Note: Help Videos are not included in Debugging and Test Your Skills Lessons.
Teachers can access a Lesson Plan that is connected to each Lesson. Lesson Plans can be found on the Introduction step of each Lesson or from the list of all Lessons on the HTML Home page. *Note: Lesson Plans are not included in Debugging and Test Your Skills Lessons. Lesson Plans are downloadable, printable pdfs that include learning objectives, success criteria, key vocabulary, key questions, and strategies to support pupils as they move through the steps of the Lesson.
The opportunity to free code and develop an app is provided through Create. Selecting Create from the HTML Home page allows pupils to develop an app outside of any restrictions or structure provided in the Learn lessons.
By selecting New App, pupils are directed to a Free Code space that allows them to practice using all they have learned through the HTML Lessons. The left-hand panel provides space for pupils to enter code. Their code can be downloaded to be worked on offline. Code can also be uploaded to the left-hand panel. Run code validates the code that pupils have entered. Code that is correct will display the results in this panel. Errors in coding will appear at the top of the panel.
Selecting the Glossary from the HTML dropdown menu or Home page provides access to an interactive menu of vocabulary terms specific to that coding language. Glossary terms are presented in a scrollable alphabetical list that provides each term and its meaning. A navigable grid of letters allows you to jump to any section of the list by selecting a letter. Only letters that have associated Glossary terms can be selected.
Additionally, Glossary terms are included in Lessons and are identified as interactive through their colour and underlining.
Selecting a Glossary term within a Lesson generates a pop-up definition at point-of-use.