This post is ONLY applicable to DBE CAPS CAT students. It is not suitable for Cambridge students.
Even though HTML is an entirely new skill for most students, there is no reason the HTML questions should not become a place to score high marks in your PAT and assessments — and have some fun in the process! Here is some practical advice for tackling the HTML section of the CAT syllabus.
In this post:
Required knowledge:
The ability to create, edit & save a text file.
1. Introduction
HTML is simple. All you need is a text editor and a browser — both of which are free. Download Notepad++ here… Be sure to get the best out of Notepad++ by setting it up correctly — read the post Coding HTML with Notepad++ to learn how.
2. Resources
Be sure to grab a copy of the NSC HTML Tag sheet (updated in 2021) that is used in every formal assessment, but don’t rely on it entirely as you may be asked questions in your theory paper where you will not have it on hand. With some practice, you will soon memorise all the different HTML tags and attributes. And don’t stop there: there are loads of additional related skills that you can learn — real-world skills that could lead you to a career in web development!
3. Discipline
You need to work in an orderly, disciplined fashion and always use syntax that is 100% correct. Open a tag, close the tag, and then add the content between the tags. You can set Notepad++ up to automatically close your tags — see the post: Coding HTML with Notepad++. Keep your code neat and use TAB stops to indent your lines of HTML to make it easier to read and understand:
<html> <head> <title>MisterFoxOnline</title> </head> <body> <p>Indent your code neatly to make it easier to read!</p> <table> <thead> <tr> <td colspan="2">Table heading</td> </tr> </thead> <tbody> <tr> <td>Row 1</td><td>Information</td> </tr> <tr> <td>Row 2</td><td>Information</td> </tr> <tr> <td>Row 3</td><td>Information</td> </tr> </tbody> </table> </body> </html>
Remember that white space between a closing tag and the subsequent opening tag is ignored (for example, after a </p> and before the next <p> tag) when the browser renders your HTML code; it is used purely to make your code easier to read and edit. When viewed in the browser:
<!-- This line of code: --> <h1>Here is my heading</h1><p>Here is my paragraph.</p><p>Here is my next paragraph.</p> <!-- will look exactly the same in the browser as these lines of code: --> <h1>Here is my heading</h1> <p>Here is my paragraph.</p> <p>Here is my next paragraph.</p>
4. Test early, test often
Test early, test often. Every time you write some code or make even the smallest change to your code, be sure to test it in your browser. The sooner you identify any errors the easier it is to fix them. Keep that page you are working on open in your browser and press the f5 key to reload the page in the browser.
5. Practice
Use Codepen to practice your skills, share your work and view other coders’ work online. Search w3schools.com for tutorials and everything HTML.
See the Pen Hello World! by David Fox (@foxbeefly) on CodePen.
6. Next steps
Get coding now with the “Hello World!” with HTML tutorial!