COMPUTER APPLICATIONS

TECHNOLOGY

HTML – SUPPLEMENTARY WORKBOOK TO ATP

UPDATED AS FROM 2023
GRADE 10
 Page 2 of 19

Contents

Introduction to HTML ............................................................................................................................. 3

For the educator: ................................................................................................................................ 3
For the Learner: .................................................................................................................................. 4
What is a Web page? .............................................................................................................................. 4
What are Hyperlinks?.............................................................................................................................. 4
What is a Website? ................................................................................................................................. 4
What is a URL? ........................................................................................................................................ 4
What is HTML? ........................................................................................................................................ 5
What is an HTML Editor? ........................................................................................................................ 5
HTML Syntax (order of tags) ................................................................................................................... 6
Opening tag and closing tag .................................................................................................................... 7
Basic document tags ............................................................................................................................... 7
Basic structure of an HTML page ........................................................................................................ 7
Attributes as a concept ........................................................................................................................... 9
Body background colour ....................................................................................................................... 10
Tips on how to create a good website .................................................................................................. 11
A good website should be designed as follow: ................................................................................. 11
Using colour ...................................................................................................................................... 12
Plain text and text formatting ............................................................................................................... 13
Text elements.................................................................................................................................... 13
Text formatting ................................................................................................................................. 14
Working with fonts ............................................................................................................................... 16
Nesting .............................................................................................................................................. 16
You should now be able to answer the following questions ................................................................ 19

Gr 10 - HTML
 Page 3 of 19

Introduction to HTML
For the educator:
Basic HTML content has been moved from Grade 11 CAT to Gr 10 CAT to
alleviate the pressure in Grade 11

The following table is an extract from the Grade 10 ATP giving guidance on
the number of hours you are expected to spend on teaching HTML in Grade
10 as well as when.

It is advised you leave HTML for week 8 in Term 3, allowing you to teach all
the other applications that will be examined and used in the Grade 10 PAT
first. HTML will only be assessed in Term 4. You can add an assessment
activity to the final End Year Examination of approximately 10 marks. Note
that HTML should also be assessed in theory tests. Informal assessments
should also take place during teaching and learning activities.

In Grade 10 HTML is only introduced and the content is very basic as there is
only one week allocated for HTML. As an educator you may give learners
additional tasks to re-inforce concepts.

ATP – TERM 3 – Content to be covered

Week 8
(5 days)

Solution Development:

HTML / Web design

(Practical and theory)
(±1 week / 4 hours)

HTML / Web design

● Reinforce the concepts:
▪ Websites, web pages, hyperlinks and URLs
● What is HTML?
● What is an HTML editor?
● HTML syntax/order of tags
● Basic HTML tags: Opening tag and closing tag
● Plain text and text formatting
● Attributes as a concept
● Font tag, face, color & size attribute
● Width & size of (hr/)
● Body background color
● Structure and design of a simple HTML page

2 Tasks: 2 Practical

Gr 10 - HTML
 Page 4 of 19

For the Learner:

The Internet is the International network connecting computers and people
all around the world.

The World Wide Web (also known as the WWW) on the other hand, is what
most people think about when they talk about the Internet. The WWW is
actually all the web pages, pictures, videos and other online content that
can be accessed through the Internet by making use of a web browser.

In this unit you will learn more about the basic structure of a Web page and
you will be introduced to terminology we use when we describe the Internet
and WWW.

You will also learn about HTML and how you can use it to create websites.
You will also discuss what makes a website a good website.

What is a Web page?

A web page is a document created with specific software and codes. Web pages are
made up of text, pictures, audio clips, video clips and animations. Web pages can be
viewed by making use of a web browser (also a program) like Google Chrome.

What are Hyperlinks?

Web pages can be linked to each other by using hyperlinks. When you click on a
hyperlink it can take you to another document or to a place in the document you are
viewing.

What is a Website?
A website is usually a collection of web pages that are linked (making use of
hyperlinks) to each other and that contains specific information and that have a
similar design and look.

In Grade 10 you will only work on one Web page. In Grade 11 you will learn how to
link Web pages to create a Website.

What is a URL?
A URL is the website’s address. It is basically the unique place on the WWW where
the website is kept, sort of like your house or school’s street address. The website
pages can be viewed by using a website address called a uniform resource locator
(URL). e.g. https://en.wikipedia.org/wiki/Main_Page

Gr 10 - HTML
 Page 5 of 19

What is HTML?
Before we explain what HTML is,
you need to do the following:

Open Google and right click. Select

“View page source”. These codes
you are viewing now is what HTML
is all about.

Every website uses HTML. It is the

basic language used to create all the websites you have ever viewed on the WWW.

HTML stands for HyperText Markup Language.

● HyperText refers to the fact that HTML

allows you to click on links on the web page so you
can move from one place to another in a web page
(hyperlinks).

Markup Language simply means that words/text is

marked with codes to indicate what they must look
like when viewed on the browsers like google
chrome.

What is an HTML Editor?

An HTML editor is a program used to help make writing HTML easier. We will refer
to Notepad++ as our HTML editor as it is commonly used for writing HTML.
Notepad++ can be downloaded for free by using this link: https://notepad-plus-
plus.org/downloads/

Other examples of free text editors that could be used are, for example, Brackets
and Atom. There are many other HTML editors such as Adobe DreamWeaver,
KompoZer and Microsoft Expression Web available. These allow you to design web
pages without using HTML. In CAT you are expected to write the HTML yourself.

Gr 10 - HTML
 Page 6 of 19

Once you have downloaded Notepad++

you must open the program.

(Notepad is a program that comes

standard with the Windows Operating
System and can also be used to write
HTML).

We prefer using Notepad ++ as it is colour

coded and therefore easier to use.

Figure 3: Notepad++ Window

To save web pages in Notepad++, you must change the format from *.txt to *.html.
Do this as follow: Click on File then Save As

15 .1 Introduction to HTML

Give the file a Name

Select Hyper Text Markup

Language form the dropdown list.

Gr 10 - HTML
 Page 7 of 19

HTML Syntax (order of tags)

● Syntax is rules indicating how tags should be used and in which order.
● If the syntax of a tag is incorrect your website might not display correctly.
● The syntax also helps you define where something starts and ends.

Opening tag and closing tag

Before you can learn about the different tags, you need to understand the structure
of a tag.

● Most HTML tags come in pairs, the first one is known as the opening tag
and the second one is the closing tag.
● Tags are enclosed by angle brackets and the opening and closing tags look
the same. The only difference is that the closing tag has an added forward
slash (/) after the first angled bracket e.g.
o <p1>Closing and opening tags are cool</p1>
o The green tag above is the opening tag and the red tag is the closing
tag.
● You will also learn about a few tags that do not have a specific closing tag. In
grade 10 we will only look at two of these types of tags. (drawing a line across
the page and entering on to a new line)

Pairs of tags with content between them such as the example above, are referred to
as elements.

Basic document tags

In CAT you will be learning an earlier version of HTML. This will prepare you well to
move to the newer version if you need to.

The basic document tags are used to set up the structure of a web page. They will all
appear on every web page which you create using HTML.

In order to build a website, you will need to know what the different HTML tags do so
that you can give web browsers the correct instructions on how and what to display
and in which order to display it for your website.

Examples of basic tags are: <html>, <head>, <body>

Basic structure of an HTML page

<html> </html> Tells the browser that this is an HTML page.

Gr 10 - HTML
 Page 8 of 19

<head> </head> This element contains key words about the document.

<title> </title> Specifies a title for the document displayed on the

browser tab.

<body> </body> Indicates the body/content of the web page.

Practical Guided Activity 1

(Your teacher will demonstrate while you do the activity at the same time).2

Open a blank Notepad ++ document and type in the following basic structure tags:

<html>

<head>

<title>

Gr 10 This is not a tag but text that will appear on the screen

</title>

</head>

<body>

Notes on HTML This is not a tag but text that will appear on the screen

<body>

</html>

Save (follow the instructions of your teacher) this web page as Gr10HTML.html.

Note the following:

o Tags that display text, images, backgrounds and videos on the web page are
all found between the <body> </body> tags.
o The Web page is opened with <html> and closed with </html>

Now look for where you have saved the document and double click on it. It should
open in a Web browser like Google Chrome. (You will not be able to open it in a
browser if you have not saved the file as a *.html file.)

Gr 10 - HTML
 Page 9 of 19

Your teacher will show you how to view your Web page and your Notepad program
at the same time on the screen by splitting the screen in half. You must remember
to save the changes in Notepad (ctrl + S) and then to update the Web page (ctrl + 5)
to view any changes you make.

Figure 5 Viewing your document in Notepad++ and in the Browser at the same time

Attributes as a concept
An attribute is made up of two parts:

o The attribute name

<body bgcolor = “green”>

o The attribute values

Note the following:

o Attributes are ONLY added to opening tags.

o Attribute values should be enclosed in quotes.
o Sometimes attribute values use American spelling, for example color (not
colour).

Gr 10 - HTML
 Page 10 of 19

Body background colour

The web page you created in the Guided Activity 1 had a white background colour.

There is a useful attribute that can be used to change the background colour of your
web page. This attribute is added to the opening <body> tag.

See the example below:

AT<body bgcolor = “green”> You can use any valid colour name

In Grade 11 you will learn how to add an image as a background to your webpage.

Practical Guided Activity 2

1. Open the html document you saved as Gr10HTML.html in Notepad ++
2. Changes the background colour of the page to any colour of your choice.
(Choose your background colour carefully. People must always be able to
read the text on the page.)
3. Save the changes (shortcut to save: Ctrl + S) or click on the save button.
4. Update the Web page and see if it now has a colour background.

Figure 6: Click on the blue disk to save - Note the red disk image indicates that you need to save changes

Figure 7: Color Attribute added to the Web page

Gr 10 - HTML
 Page 11 of 19

Practical Guided Activity 3

Study the screenshot of a web page below carefully.

1. Open a new file in Notepad++.

2. Save the file as GA3.html.
3. Add the basic document tags to create a web page.
4. The text “GA3” must appear on the browser tab.
5. Using the screenshot as a guide, add tags and attributes to the body to create
a web page which is the same as the one in the screenshot.
a. The background colour of the page should be pink.
b. Add the text as displayed on the screenshot
6. Save your work regularly and preview it in a browser as you are working.

Tips on how to create a good website

Websites have many purposes ranging from providing information to
entertainment to e-commerce. You can have the most beautifully designed website
in the world, but if it does not provide the information people are looking for quickly
and easily, it will not be a good website. This is why good website design is
important.

A good website should be designed as follow:

o It must be easy to navigate (consistent placing of links – no broken links)
o It must be easy to read and (good selection of colour contrast, lists, tables)
o It must be good to look at (relevant to its purpose and updated, readable font
sizes, headings, relevant text and images)
o Plan in advance you page layout and how you will arrange content on it.
Don’t place content randomly. People read from left to right and from top to
bottom. Important information should be where people naturally look first
o Consider the spacing of the website. Using empty space (or negative space)
balances out the page and draws the eye to the most important content. A lot
of negative space also makes things look elegant and clean.
o Each page on the website must look like it belongs with the rest. You should
carry specific design elements (like colour, logos and font) through to all the
pages.

Gr 10 - HTML
 Page 12 of 19

Remember to never plagiarise from another source.

Something to know:

For a look at how website design has changed since the dawn of the internet age, A
Look Back at 20+Years of Website Design has several good examples:

https://blog.hubspot.com/marketing/look-back-20-years-website-design

Using colour
Colour is important in web design. Colour draws the eye and makes
important things stand out. Colours should be used to enhance the purpose of
your website. Information must be clear and easy to read.

Colours need to be chosen for the background of the page, important

information and body text. If the website is providing information about a
company or business the colours of the company logo could be used.

If you are designing a website, the colours used should be consistent across
different pages. Don’t choose a different background colour for each page on
your site.

Gr 10 - HTML
 Page 13 of 19

Plain text and text formatting

Text elements
Text elements are used to display all text on your web page.

<p> </p> Displays a paragraph of text. A line is left open after each
paragraph. Most text on a web page is displayed using <p> tags.

<br /> This is a line break tag. It displays the next line of text on a new line but
without a space above it. This tag is one of the few tags that does not come
in pairs. The closing tag forms part of the opening tag.

<hr/> This tag displays a horizontal line. (hr stands for horizontal rule.) This
tag is used to separate sections of your web page or underneath heading tags
to make them stand out more. This tag also does not come in pairs as is
never used to display text.

● There are attributes that can be used for the horizontal lines’
appearance. The attributes are added to the <hr /> tag.
● Browsers display a hollow line which can be difficult to see.
o Use the size=”3” attribute to edit the size of the line
o Use the width=”50%” OR width=”80” attribute to change
the line width
o Use the color=”red” attribute to change the colour of the
line.

Practical Guided Activity 4

1. Type the code as seen in the image below in Notepad++. Make use of the
TAB key to indent your code correctly.
2. Save the file as text.html.
3. Open the file text.html in a web browser.
4. Your browser display should look like the figure below.

Figure 8: Activity adding paragraphs and lines

Gr 10 - HTML
 Page 14 of 19

Practical Guided Activity 5

1. Open the Web page you saved as text.html in Activity 4 and add
attributes to the horizontal line.
2. Change the width to: 50%
3. Save and update the browser window to see the changes.
4. Change the colour to: blue
5. Save and update the browser window to see the changes.
6. Change the size to: 10
7. Save and update the browser window to see the changes.
8. Resize your browser window. Note that the line where the width is given
as a percentage change size according to the width of the screen.

Figure 9: Adding attributes to the horizontal line

Text formatting
There are tags that are used to make parts of a paragraph stand out. These
tags are explained in the table below:

TAG FUNCTION

<b> </b> Used to display text in bold.

<i> </i> Used to display text in italics.

<u> </u> Used to underline text

These tags are often used inside a pair of <p> </p> and are applied to
important word or words that need to be emphasised.

Gr 10 - HTML
 Page 15 of 19

Practical Guided Activity 6

Open the file text.html which you saved in Guided Activity 5, in Notepad++.

Make the following changes to the HTML code:

1. Display your Name and Surname in bold.

2. Display the words “opening” and “closing” in italics.
3. Underline all occurrences of the word “paragraph”.
4. Save the text.html file and update the browser view of the page.
5. Your web page should now look like this:

Note the following:

Leaving a closing tag out can cause your web page to display in unexpected
ways.

In Notepad++ if you click on an opening tag it should be highlighted with a

coloured background. The closing tag should also be highlighted at the same
time. If the opening tag is not highlighted, then you know that the closing tag
is missing.

Gr 10 - HTML
 Page 16 of 19

Working with fonts

The appearance of text can also be improved by using a different font, font size or
font colour. Changing the font requires the use of a new tag, the <font> </font> tag.
This tag has its own attributes.

The attributes that can be used with the <font> tag are shown in the table below:

Attribute FUNCTION Example of how these

attributes are used in
the opening tag

face Used to change the font type. <font face=”Arial”>

Any valid font name such as Arial or

Comic Sans MS changes the font that
is displayed.

color Used to change the font colour. <font color=”red”>

Any valid colour name such as red,

blue or green. Displays the text in a
different colour to the default black.

size Used to change the font size. Values <font size=”4”>

ranging from 1 to 6.

Nesting
The font tag is written inside the <p> tags. This is known as nesting. Look at
the following example:

● <p><font color = “red”>Paragraph text</font></p>

● This combination of tags and attributes will display the paragraph text with
a red colour. Notice that the tag which is opened first (<p>) is closed last
(</p>).

Gr 10 - HTML
 Page 17 of 19

Practical Guided Activity 7

Do the following activity to get a better understanding of how to use the <font>
tag.

1. Type the following code in Notepad++ and save the file as fonts.html.

<html>

<head>

<title>

Fonts

</title>

</head>

<body bgcolor=”red”>

<p>

<font face=”Gigi” color=”white” size=”5”>

HTML is a <b>Hyper Text Markup Language</b> and it

allows you to create web pages in a text editor.
<u>Notepad++</u> is an example of a text editor.

</font>

</p>

</body>

</html>

2. View the file in a web browser.

3. Your web page should look like this:

Gr 10 - HTML
 Page 18 of 19

Note the following:

● If your page does not display correctly, return to Notepad++ and

correct your errors.
● The colour attribute must be spelled correctly as color
● A list of valid HTML colour names can be found on the W3 Schools
website: https://www.w3schools.com/colors/colors_names.asp
● More than one attribute can be used in the same font tag. It is not
necessary to have a new <font> tag for each attribute. The order in
which the attributes are added does not matter.
● It is a good idea to save your file after each step. View what you have
done in a browser to check that you have not made any mistakes.

Written Activity 1
Study the following code:

<html>

<head>

<title>Information</title>

</head>

<body>

<font face=”Elephant”>My Name</font>

<hr/>

<p> <i>All about me!<i> is my website that will tell you more about my
life.</p>

<p><font colour=”red”>I will tell you more about my <b>hobbies</b> and

favourite subjects.</font></p>

</body>

Based on the code, answer the following questions in your own words.

1. What is the title of the page? (1)

2. How many paragraphs are there on the page? (1)
3. What word will appear in bold? (1)
4. What closing tag was left out completely? (1)
5. Are there any lines of code that appear in the body section? (1)
6. Name two attributes used in the web page. (2)
7. Why does the last paragraph not appear in a red font colour? (1)
8. Why does most of the text appear in italics? (1)

Gr 10 - HTML
 Page 19 of 19

Written Activity 2
Answer the questions below:

1. Name four things which make a badly designed website? (4)

2. Why should you not plagiarise when you create a website? (2)
3. What do the letters HTML stand for? (4)
4. Give an example of Nesting in HTML code. (2)
5. Give an example of a Tag that does not have a separate closing tag. (1)

You should now be able to answer the following questions

Can you:

1. Describe what HTML is and what it is used for.

2. Discuss what an HTML editor is.
3. Explain what is meant by referring to HTML syntax.
4. Write or type out the structure of a simple HTML page.
5. Identify and explain the use basic HTML tags.
6. Identify and explain the use of basic text tags.
7. Identify and use some basic attributes
8. Give advice on good website design.

PRINCIPLES OF WEB DESIGN

CHAPTER

16

Gr 10 - HTML