Directorate: Curriculum FET

SUBJECT / GRADE Computer Applications Technology Grade 12

TERM AND WEEK Term 1 Week 4
TOPIC Solution Development: HTML (carried over from grade 11)
AIM OF LESSON This lesson will give you an opportunity to understand the scope of content that will introduce the Hypertext Markup Language,
used for creating webpages of a website, and lay the foundation for your preparation to successfully answer the HTML question
(Question 6) in an NSC CAT practical paper.
RESOURCES Paper-based resources Digital resources
Gr 11 DBE Practical Textbook; Unit 15 (p. 216 – 232) Links on the WCED ePortal OR
(Use school issued textbook for the same content) The E-RESOURCES below has the actual URL to the websites
st
INTRODUCTION In the 21 century, people find it hard to imagine a world without computers and the internet. With the mother’s milk,
everyone seems to develop the ability to use a web browser on a variety of platforms. From mobile to desktop, we use web
browsers to search for information, read up on current events, watch videos, and even manage files. The web sites we go to
present information in a way that we can understand and navigate. These websites were created using several nifty
technologies that still use HTML in one form or the other in order to bootstrap themselves and take effect.
CONCEPTS AND • Reinforce the concepts of CAN YOU…
SKILLS o Websites;
o webpages; • give specific names of applications that allow
o hyperlinks and URLs. you to view websites on the internet?
• HTML syntax: • explain step by step how to get to a specific
o Basic HTML tags: website?
▪ opening tags; • identify some features that webpages have in
▪ closing tags. common with word processing documents?
o HTML comments;
• Structure and design of a simple HTML page

ACTIVITIES / Activity 1
ASSESSMENT You may remember that the World Wide Web consists of many websites that are hosted on a great number of computers
around the globe. The WWW is just one of many applications of the internet and computer networks. (Mitchell, 2020) A
website usually consists of several webpages that have links to one another as well as the other websites elsewhere on the
internet.
Figure 1: The internet and World Wide Web (Mitchell, 2020)

When you want to see a webpage from any of such websites, you will most likely need a web browser like Chrome, Edge or
Firefox. Each of the browsers will provide you with a URL bar where you can enter a web address for the webpage you want to
see. You could guess that URL is the term for a web address and it stands for a Uniform Resource Locator, which can loosely be
rephrased as Standard Way Webpages Are Found.
An example of a URL where this very lesson can be found is https://wcedeportal.co.za/categories/learning-material
• Follow the URL above using your browser and find the download link for this lesson.
• Explain the difference between email and web addresses.
Activity 2
Webpages often organise content, e.g., text and images, in a way similar to word processing documents. The webpages may
feature headings, paragraphs, lists, and more. Also, jumping from a place in the document to another using the links (or
hyperlinks, if we have to use the term), is possible without breaking a sweat.
For webpages though, if we want to CREATE them, you will need to be able to write HTML (Hypertext Markup Language) code.
So, how can you get a glimpse of how HTML code looks like on a real example?

Page 2 of 5
 • Either on the same website https://wcedeportal.co.za or https://google.com, place your mouse over the webpage, right
click for the popup menu, then click on “View page source”.
• Based on what you see, explain what you think is happening in the HTML code by finding places in the code that “make
sense” at this stage. If ANYTHING does, you are better than most. ☺
Activity 3
In order to be good at HTML, you need to remember these basics:
• A webpage constists of elements (parts) that are written as HTML tags
• Most tags come in pairs:
o The opening tag
o The closing tag
• The tags for different elements usually hug ☺ (encapsulate) one another
Do the following to get a better idea of the basics:
• Imagine an onion, and pay special attention to the onion rings:

Figure 2: Red onion (image from qualityfood.ae)

• Now let’s cut another one in half and zoom in to see how the pairs of tags hug
one another as if they were part of an onion:

Figure 3: Onion cut in half (image from nature.com)

Page 3 of 5
 • If the picture of the onion with the HTML code over it is starting to make sense, see the following T-shirt (so cool!) that
describes the basic structure of an HTML document (a webpage) in a different way:

Figure 4: Web designer T-shirt (image from walmart.com)

Activity 4
To create an empty webpage, do the following:
• create an empty text file and rename its extension to HTML, e.g., index.txt → index.html
• edit the index.html in Notepad++ (or Notepad) by adding the code that follows:
<html>
<head>

</head>
<body>

</body>
</html>
• Save the file index.html and open it in your web browser. (You should be able to see a blank HTML page.
Congratulations!)
Activity 5
Of course, the webpage comes alive only after you can display something to the user viewing your website. In order to do so,
remember the following:
Page 4 of 5
 • The tags for the title of the webpage that must be displayed in the browser tab will go between the HEAD tags.
• Anything else (headings, paragraphs, lists, etc.) will go between the BODY tags.
• Whenever you do NOT want anything to appear on the page, you can use the special comment tags:
<!-- this text will not appear -->
With this in mind, create a new HTML document do the following actions (use https://www.w3schools.com/html/ when you
need to look up the information on the tags you will need):
• Add a webpage title that will be displayed in the browser tab.
• Change the background colour of the webpage.
• Add a heading of your choice.
• Add a horisontal rule (line across your webpage).
• Add two paragraphs with any short text.
• Add a comment between the paragraphs such that the comment text of your choice will not display when viewed in the
browser.
• Change the font of a specific word.
• Make that word bold and italic at the same time.
CONSOLIDATION In this lesson you learned the basics of HTML. This will enable you to write more complex code later this year in the lessons that
follow.
NOTE: The questions given with the activities above are used for consolidation purposes.
VALUES Laying the foundations for a democratic and open society. (Where HTML coding skills are an enabling factor of sharing your
views with the world.)
E-RESOURCES TML Tutorial. (n.d.). Retrieved from W3C Schools: https://www.w3schools.com/html/
Mitchell, B. (2020, February 2). WWW: World Wide Web. Retrieved from Lifewire.com: https://www.lifewire.com/history-of-
world-wide-web-816583

Page 5 of 5