Exploring CAT:

Grade 11
The title is a field that is used in the header.
The title will be covered by the front cover image.
Exploring CAT: Grade 11
 Exploring CAT: Grade 11

Copyright © 2020
First Edition 2020
All rights reserved

Further copies of this book and the books in this series may be ordered from [email protected]
purchased online at www.funworks.co.za.
Exploring IT series also available at www.funworks.co.za.

Other books in the exploring CAT series:

Grade 10
• Exploring CAT: Grade 10
Grade 11
• Exploring CAT: Grade 11
Grade 12 (2021)
• Exploring CAT: Grade 12

Acknowledgements
The front cover and illustrations were inspired by the creative genius of Caroline Hills.
Thanks to Kiara White for her incredible front cover design of both the Exploring IT and Exploring CAT
series.
Thanks to Funworks publishers for assistance with editing this book.

Dedications
Dedicated to my family Leah, Gil, Ewan, Ariel, Joshua, Deena, Michael, Jason, Chantel, Ethan, Dylan,
Russel, Edana, Keagan, Lorraine, Aubrey, Lisa, Mandy, Sharon, Ricky, Tanya, Shirley and Vida with
all my Love.
Gary Blieden
For Andy, Robyn and Zachary – Love you to the moon and back, a thousand times, Mom.
Lyneth Crighton

Packages with Versions

• Windows 10 Version 1909

• Office 365 Version 1912
• Microsoft Office 365 Products are equivalent to Microsoft Office 2019 Products
Exploring CAT: Grade 11

PLEASE NOTE – THE ORDER OF THIS BOOK

WILL CHANGE. HTML WILL MOVE TO
LEARNING UNIT 8. LEARNING UNIT 1
(HARDWARE) AND LEARNING UNIT 2
(SOFTWARE) WILL REMAIN IN THE SAME
PLACE.
 Exploring CAT: Grade 11

Table of Contents
Learning Unit 1 Hardware .................................................... 1
1.1 Types of Computers...............................................................................................................1
1.1.1 Microcontrollers ..............................................................................................................1
1.1.2 Servers ...........................................................................................................................1
1.2 Mobile Computers ..................................................................................................................2
1.2.1 Types of Mobile Computers ............................................................................................2
1.2.2 Generic Features of Mobile Computers ..........................................................................3
1.2.3 Limitations of Mobile Computers .....................................................................................3
1.3 Small Office / Home Office .....................................................................................................4
1.4 The Computer Motherboard ...................................................................................................5
1.5 ROM Chips ............................................................................................................................6
1.5.1 Types of ROM ................................................................................................................6
1.6 RAM Chips ............................................................................................................................6
1.6.1 Types of RAM .................................................................................................................7
1.7 The Central Processing Unit ..................................................................................................7
1.7.1 Components of the CPU .................................................................................................8
1.7.2 The Machine Cycle .........................................................................................................9
1.7.3 Cache Memory ...............................................................................................................9
1.8 Expansion Ports and Slots ...................................................................................................10
1.8.1 SATA Ports ...................................................................................................................10
1.8.2 Non-Volatile Memory Express.......................................................................................11
1.8.3 M.2 Format ...................................................................................................................11
1.8.4 Graphic Cards ..............................................................................................................11
1.9 The Power Supply Unit (PSU) ..............................................................................................12
CHECKPOINT 1 .........................................................................................................................12
1.10 Input Devices .......................................................................................................................13
1.10.1 Scanners ......................................................................................................................13
1.10.2 Digital Cameras ............................................................................................................14
1.10.3 Biometric Input ..............................................................................................................15
1.10.4 Handheld Input Devices ................................................................................................17
CHECKPOINT 2 .........................................................................................................................19
1.11 Output Devices ....................................................................................................................20
1.11.1 Monitor Display .............................................................................................................20
1.11.2 Monitor Ports ................................................................................................................20
1.11.3 3D Printers....................................................................................................................21
1.12 Devices for Physically Challenged Users .............................................................................22
1.12.1 Input Devices for People with Disabilities ......................................................................22
1.12.2 Output Devices for People with Disabilities ...................................................................25
1.13 Storage Devices ..................................................................................................................25
1.13.1 Secure Digital (SD) Cards .............................................................................................25
1.13.2 Hard Disk Drive (HDD)..................................................................................................26
1.13.3 Solid State Drives (SSD)...............................................................................................26
1.13.4 Network Attached Storage (NAS) ................................................................................27
1.14 Online Cloud storage ...........................................................................................................27
CHECKPOINT 3 .........................................................................................................................28
1.15 The Boot Process ................................................................................................................29
1.16 Troubleshooting Basic Hardware Problems .........................................................................30
CHECKPOINT 4 .........................................................................................................................32

Learning Unit 2 Software ................................................... 33

2.1. Operating Systems ..............................................................................................................33
2.1.1 Functions of an Operating System (OS) .......................................................................33
2.1.2 Examples of Operating Systems ...................................................................................33
2.1.3 Installing Hardware .......................................................................................................33

i
Exploring CAT: Grade 11

2.1.4 Virtual Memory ............................................................................................................. 34

2.1.5 Disk Cache ................................................................................................................... 35
2.1.6 Spooling and Buffering ................................................................................................. 35
2.2 Windows 10 Graphical User Interface (GUI) ........................................................................ 36
2.2.1 Task View .................................................................................................................... 36
2.2.2 Action Centre ............................................................................................................... 36
ACTIVITY 1 ................................................................................................................................ 38
2.2.3 Windows 10 Settings .................................................................................................... 38
Quick Reference A – Windows 10 Settings .................................................................................... 38
ACTIVITY 2 ................................................................................................................................ 40
ACTIVITY 3 ................................................................................................................................ 41
2.2.3 Troubleshooting Basic Operating System Problems ........................................................ 42
CHECKPOINT 1......................................................................................................................... 43
2.3 Management of Files and Folders ....................................................................................... 44
2.3.1 File Explorer ................................................................................................................. 44
Quick Reference B – File Explorer – View and Search .................................................................. 44
ACTIVITY 4 ................................................................................................................................ 45
2.3.2 Properties of Files ........................................................................................................ 47
ACTIVITY 5 ................................................................................................................................ 47
2.3.3 Compressing and Extracting Files and Folders ............................................................ 48
ACTIVITY 6 ................................................................................................................................ 48
2.3.4 Sharing of Files ............................................................................................................ 48
Quick Reference C – File Explorer - Share .................................................................................... 48
EXERCISE 1 .............................................................................................................................. 49
EXERCISE 2 .............................................................................................................................. 49
2.4 Backing up and Archiving Files............................................................................................ 50
2.4.1 Backup ......................................................................................................................... 50
2.4.2 Archives ....................................................................................................................... 50
CHECKPOINT 2......................................................................................................................... 50
2.5 Application Software............................................................................................................ 50
2.5.1 Software Licensing models........................................................................................... 50
2.5.2 Basic System Minimum and Recommended Requirements ......................................... 51
2.5.3 Full or Custom Installation ............................................................................................ 52
2.5.4 Installing Application Software ...................................................................................... 52
ACTIVITY 7 ................................................................................................................................ 52
2.5.5 Compatibility issues...................................................................................................... 54
2.5.6 Versions, patches and service packs............................................................................ 54
2.5.7 Updating or Upgrading Software .................................................................................. 55
2.5.8 Uninstalling Application Software ................................................................................. 55
CHECKPOINT 3......................................................................................................................... 55
2.6 Utility Programs ................................................................................................................... 56
Quick Reference D – Windows 10 Utility Programs ....................................................................... 56
2.7 Software for People with Disabilities .................................................................................... 57
2.7.1 Screen Readers ........................................................................................................... 57
2.7.2 Voice Recognition Software ......................................................................................... 57
2.7.3 Predictive Text ............................................................................................................. 58
2.7.4 Sticky Keys.................................................................................................................. 58
CHECKPOINT 4......................................................................................................................... 59

Learning Unit 3 HTML Coding ........................................... 60

3.1 Understanding Webpages and Websites ............................................................................. 60
3.2 HTML Structure ................................................................................................................... 61
3.2.1 HTML Editors ............................................................................................................... 61
ACTIVITY 1 ................................................................................................................................ 62
ACTIVITY 2 ................................................................................................................................ 62
3.2.2 Viewing a Webpage ..................................................................................................... 62
ACTIVITY 3 ................................................................................................................................ 62
3.3 Basic HTML Tags ................................................................................................................ 65

ii
 Exploring CAT: Grade 11

Quick Reference A – HTML Basic Tags .........................................................................................65

ACTIVITY 4 ................................................................................................................................66
3.4 Adding HTML Text Tags ......................................................................................................67
Quick Reference B – HTML Text Tags ...........................................................................................67
ACTIVITY 5 ................................................................................................................................68
3.5 Adding HTML List Tags .......................................................................................................70
Quick Reference C – HTML List Tags ............................................................................................70
ACTIVITY 6 ................................................................................................................................71
ACTIVITY 7 ................................................................................................................................73
ACTIVITY 8 ................................................................................................................................75
CHECK POINT 1 ........................................................................................................................76
EXERCISE 1 ..............................................................................................................................77
3.6 Adding HTML Image Tags ...................................................................................................77
Quick Reference D – HTML Image Tags ........................................................................................78
ACTIVITY 9 ................................................................................................................................79
ACTIVITY 10 ..............................................................................................................................80
CHECKPOINT 2 .........................................................................................................................81
EXERCISE 2 ..............................................................................................................................82
3.7 Adding HTML Link Tags ......................................................................................................85
Quick Reference E – HTML Link Tags ...........................................................................................85
ACTIVITY 11 ..............................................................................................................................85
CHECKPOINT 3 .........................................................................................................................87
EXERCISE 3 ..............................................................................................................................87
EXERCISE 4 ..............................................................................................................................88
3.8 Debugging HTML Code .......................................................................................................89
3.8.1 Common HTML bugs ....................................................................................................90
3.8.2 Strategies for debugging HTML code............................................................................90
ACTIVITY 12 ..............................................................................................................................90
ACTIVITY 13 ..............................................................................................................................91
ACTIVITY 14 ..............................................................................................................................92
EXERCISE 5 ..............................................................................................................................96

iii
Exploring CAT: Grade 11

Learning Unit 1 Hardware

1.1 Types of Computers
1.1.1 Microcontrollers
A microcontroller is an integrated circuit that provides a specific
operation usually in an embedded system (a system that is part
of a larger system). A typical microcontroller includes a
processor, memory and programmable Input/Output (I/O) pins
which can connect to peripherals. The simplest microcontrollers
are found in everyday appliances, such as ovens, refrigerators,
televisions and lawn-watering systems. They are also common in
photocopiers, scanners, printers, smart meters, wearable
devices, ATMs, mobile devices and security systems.
https://hackernoon.com/fpgas-socs-microcontrollers-a-quick-rundown-of-iot-devices-c5a25c7290c6

Systems On a Chip (SOC) such as Raspberry PI and Arduino board

include a microprocessor and have ports such as USB and
Ethernet. The board may provide a SD card slot to store the
operating system and applications.

https://neotronics.co.za/image/cache/catalog/uno%20R3-528x528.JPG

1.1.2 Servers
A server is a central computer in a network that contains collections of
data and programs. They provide services such as printing, email,
connections to the Internet to users. Servers are more powerful than PCs
and typically have dual power supplies, RAID disk systems, multiple
CPUs and a large amount of memory. Examples of servers are print
servers, file servers and email servers.

https://i.dell.com/is/image/DellContent//content/dam/global-site-
design/product_images/dell_enterprise_products/enterprise_systems/poweredge/poweredge_vrtx/pdp/enterprise-poweredge-vrtx-
rf-pdp.jpg?fmt=jpg&wid=400&hei=400&fit=constrain,1&qlt=85

Learning Unit 1 Hardware Page 1

 Exploring CAT: Grade 11

1.2 Mobile Computers

Mobile computing is technology that allows the
transmission of data, voice and video via a
computer or any other wireless enabled device
without having to be connected to a physical
link.

Photo by William Iven on Unsplash

1.2.1 Types of Mobile Computers

Mobile computers are categorised as follows:

1.2.1.1 Laptops/Notebooks/Netbooks
Laptop computers, notebooks and netbooks are similar in that they use the same basic parts: a
screen and a keyboard connected by hinges. Their main difference is their size. These devices are
battery powered, portable and connect wirelessly to the Internet or provide an Ethernet port to
connect to a network using a cable.

1.2.1.2 Smartphones, Phablets and Tablets

Mobile devices that performs many of the functions of both a phone and a computer, this is called
convergence of functions. Phablets is the name given for large screen smartphones. Smartphone
and tablet devices usually have a touchscreen interface, Internet access, and an operating system
capable of running downloaded apps. Smartphones can also make telephone calls.

1.2.1.3 Wearable Computers

A wearable computer is any small technological device capable of storing and processing data that
can be worn on the body. Examples include:

• Smart watches e.g. Apple Watch - a wearable device that resembles and functions as a
wristwatch. In addition to telling time, a wearer can make and answer phone calls from a
connected smartphone, read or dictate email and text messages, listen to music and perform
other tasks often handled by a smartphone.
• Head mounted display e.g. Google glass – a wearable device that resembles a pair of
eyeglasses. These glasses can be operated by voice command; display a map for driving
directions; have a Global Positioning System (GPS); a camera and a microphone. A wearer can
connect with others via video calls, send pictures and video clips, check their email, post to
Facebook and Twitter and more.
• Fitness trackers e.g. Fitbit - a wearable device that resembles a wristwatch. Sports watches
have GPS to log the distance and time of the wearer’s workout, record the wearer’s heart rate,
pace and calories burned.
• Sports’ tracking systems e.g. Adidas miCoach Elite System - The sensor is fitted inside the
athlete’s clothing, the series of sensors and GPS tracker the wearer’s heart rate, distance,
speed, power, acceleration and, if required, position on the field. This data is then wirelessly
transmitted to a central computer and sent to an iPad where coaches and trainers can analyze
the information.

Page 2 Learning Unit 1 Hardware

Exploring CAT: Grade 11

https://store.storeimages.cdn-apple.com/4982/as- https://lh3.googleusercontent.com/Qvp46ZPEQuOXHwxDeSn
images.apple.com/is/MWUQ2_VW_34FR+watch-44-alum- R6452OC0TDGF4TXchQoEBrHSBUZ56KR02DiT-
silver-nc-5s_VW_34FR_WF_CO?wid=750&hei=712&fmt=p- npQ_ivN9xkkUGcYs1y49l9r6-Hklzln2ILZ91jyIMgOvgiQ=s1440
jpg&qlt=80&op_usm=0.5,0.5&.v=1572037927131,15693656376
70

https://www.fitbit.com/content/assets/alta-
101/images/00_hero.jpg https://www.youtube.com/watch?v=oV_lPcXkm0c&feature=yo
utu.be

1.2.2 Generic Features of Mobile Computers

Mobile devices are portable, battery powered, have wireless computing and communication features
that can be used in remote or mobile environments. Their generic features are as follows:

• Portability: the ability for a user to easily move the device to different environments. This
means that devices are usually lightweight, compact and have a battery that powers the device
for several hours.
• Connectivity: the ability for the devices to be wirelessly connected.
• Interactivity: a user can easily share data and collaborate with other users.
• Individuality: a user can adapt their mobile computing to their individual needs.

1.2.3 Limitations of Mobile Computers

• Life Cycle: Devices can generally not be upgraded and have a short life cycle before a new
device with better features is available.
• Power: Mobile devices rely on battery power and the availability of charging points. Batteries
usually have a limited lifecycle are usually expensive to replace.
• Human interface with device: Small screens and keyboards may make devices hard to use.
• Security Issues: Device portability makes them easy targets for theft or loss. For example, they
are easier to steal or lose than desktops.
• Cost: In South Africa devices and data roaming services can be expensive.
• Connection speed: Internet access is generally slower than direct cable access.
• Transmission interferences: Weather, geography and some building materials can interfere
with signal reception.

Learning Unit 1 Hardware Page 3

 Exploring CAT: Grade 11

1.3 Small Office / Home Office

A Small Office / Home Office (SOHO) is a term that refers to the small or home office business
environment. SOHO is characterised by:

• A small size of office space.

• In some cases, the workspace is designated space in the business owner’s home.
• Businesses consisting up to 10 people.

http://londonsys.com/files/resized/158129/678;370;8aea8f8fa4826a0b289a024ccf5918e657538ede.jpg

http://www.bizpenguin.com/wp-content/uploads/2013/09/coworking.jpg

Page 4 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.4 The Computer Motherboard

The motherboard is a large piece of plastic upon which all the components and connections that
make up the computer, are mounted. The motherboard has a little quartz crystal clock mounted on it
which creates a set of regular electrical pulses. The computer uses these pulses to synchronise all
the operations of the components and devices connected to it.

Ethernet LAN port

VGA port

HDMI port

USB 2.0 Ports Slot

USB Type C port

Headphone Output

Microphone Input

CMOS Backup
Battery

ROM & BIOS

PCI Slot

Processor Socket

CPU Fan & Heat

sink mounting point

DDR SDRAM
(DDR4) Memory
Slots

SATA Ports

https://noteboox.de/ASUS-P10S-WS-S1151-C236-/-DVI-HDMI-DP-/-2xGBL-/-M2-Motherboard-Intel-Socket-1151-Core-i-EN

Learning Unit 1 Hardware Page 5

 Exploring CAT: Grade 11

1.5 ROM Chips

Read Only Memory (ROM) chips are used for
permanently storing information. It is the memory
containing the instructions that the computer uses when
the computer boots up, before the operating system
loads. In a computer, the instructions are read from the
program store in the ROM, called the Basic Input Output
System (BIOS).
https://www.techpowerup.com/img/09-06-16/9a.jpg

The uniquie characteristics of ROM are:

• Data stored in these chips is non-volatile, which

means that the data is not lost even if the computer
does not have power.
• Data stored in these chips either unchangable or requires a special operation to change.

1.5.1 Types of ROM

• On a standard Read Only Memory (ROM) chip, the data cannot be reprogrammed or rewritten.
If the data needs to be updated, the chip must be removed and replaced with a new one.
• Programmable Read Only Memory (PROM) chips can be bought inexpensively and coded by
with a special tool called a PROM programmer or PROM burner.
• Erasable Programmable Read Only Memory (EPROM) chips can be reprogrammed many
times. The chip must be removed from the motherboard and all the data must be completely
erased before the new data can be stored on the chip using a special tool called a PROM
programmer or PROM burner.
• Electrically Erasable Programmable Read Only Memory (EEPROM) chips do not have to be
removed from the motherboard to be rewritten and the entire chip does not have to be
completely erased to change a specific portion of the data stored on it. Changing the data does
not require any special tools.

1.6 RAM Chips

Random Access Memory (RAM) memory modules are found in desktop and laptop computers;
tablets, smartphones and other devices, such as printers.
The characteristics of RAM are:

• Data stored in these chips is volatile, which means that the data is only stored while the device
is turned on. When the device is powered down, data stored on RAM is erased.
• A Dual In-Line Memory Module (DIMM) is a small circuit board that holds RAM memory chips
on the motherboard.
• In tablets and smartphones, RAM is typically integrated and therefore cannot be removed and
upgraded.
• The amount of RAM a computer has impacts the speed of the computer’s processing ability.
With more RAM, the less the CPU must read data from slower secondary memory (storage
device), allowing the computer to process instructions faster.
• RAM capacity is measured in gigabytes (GB) and its speed is measured in Mega Hetz (MHz) or
Giga Hertz (GHz).
• When a device is restarted, the operating system and applications are loaded into the RAM,
followed by their associated data. For example, the Word Processor application and the user's
document. This explains why restarting a computer can fix problems.

Page 6 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.6.1 Types of RAM

Static Random Access Memory (SRAM) retains its data as long as there is power. Dynamic Random
Access Memory (DRAM) requires that the memory must be constantly refreshed or it will lose its
contents. DRAM is often referred to as DDR SDRAM:

https://freepngimg.com/png/72594-ram-ibm-flash-system-parts-memory-rom

• Synchronous DRAM (SDRAM) “synchronizes” the memory speed with CPU clock speed.
SDRAM avoids any delay caused by refreshing the memory, by synchronising the refresh when
there is no request for data.

• Single Data Rate Synchronous DRAM (SDR SDRAM) processes one read and one write
instruction per clock cycle.

• Double Data Rate Synchronous DRAM (DDR SDRAM) processes two read and two write
instructions per clock cycle. Each upgrade to DDR SDRAM runs at higher clock speeds, has
greater memory capacity and lower power consumption: DDR2, DDR3 and DDR4.

• Graphics Double Data Rate Synchronous DRAM (GDDR SDRAM) is specifically designed for
video graphics rendering. Each upgrade to GDDR SDRAM has improved performance and
lower power consumption: GDDR2 SDRAM, GDDR3 SDRAM, GDDR4 SDRAM, and GDDR5
SDRAM.

SRAM DRAM
Used mostly for cache memory. Used mostly for standard memory.
Uses capacitors to store data. Capacitors need
Uses transistors to store data.
to be refreshed.
Larger in physical size than DRAM. Smaller in physical size than SRAM.
Faster reading and writing to memory than Slower reading and writing to memory than
DRAM. SRAM.
More expensive than DRAM. Cheaper than SRAM.
Requires a constant power supply, which means
DRAM uses less power.
SRAM.
Products using SRAM: Products using DRAM:
• CPU cache (e.g. L1, L2, L3) • System memory
• Hard drive buffer/cache • Video graphics memory
• Digital-to-analogue converters (DACs) on
video cards

1.7 The Central Processing Unit

The Central Processing Unit (CPU) is the computer component that is responsible for interpreting and
executing the instructions it receives from hardware and software. The CPU is the “brains” of the
computer. Modern CPU chips contain more than one core. Each core is a separate processor that
can process its own set of instructions and data.

Learning Unit 1 Hardware Page 7

 Exploring CAT: Grade 11

Intel and AMD manufacturer processors for desktops, laptops,

and servers; while Apple, NVIDIA, and Qualcomm manufacture
processors for smartphones and tablets.
CPUs are small and square and contain multiple metallic
connectors or pins on the underside. The CPU is inserted
directly into the CPU socket, pin side down, on the
motherboard.
The speed at which the CPU can execute instructions is known
as the processing power or speed of the CPU and is given in
units of gigahertz (GHz)
https://freepngimg.com/png/34178-cpu-processor-transparent-background

1.7.1 Components of the CPU

CPU - Processor
Cache L1 Registers

Control Unit

Arithmetic
Logic Unit

• The Control Unit (CU) extracts instructions from memory; decodes and executes instructions,
calling on the ALU when necessary.
• The Arithmetic Logic Unit (ALU) is a digital circuit that performs arithmetic and logical
operations.
• The Registers are used by the CPU to store the current instruction. Registers are different to
the RAM of the computer which stores ALL the applications and data that the user has loaded.
Registers are made out of SRAM, which is much faster than RAM, made out of DRAM. Each
instruction (which is part of an application), with its data, sent to the CPU one by one and is
stored in the registers.
• Cache Memory (L1), also made out of SRAM, is used by the CPU to store the set of instructions
and data that will be needed by the CPU. Instead of the CPU accessing slower RAM, the CPU
can access the faster L1 cache reducing the delay each time instructions and data need to be
fetched from RAM.

Page 8 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.7.2 The Machine Cycle

The Machine Cycle is the cycle that the CPU follows to process each instruction one by one. The
machine cycle has four steps: fetch; decode; execute and store.

Hard Drive / RAM (Primary Memory)

Instruction 1
Solid Stated Instruction 2
Drive Instruction 3
Instruction 4
Instruction n
Instruction 1
Instruction 2
Instruction 3 Motherboard
Instruction 4
Instruction n Cache L3 CPU - Processor
Cache L1 Registers
Cache L2
Control Unit

Arithmetic
Logic Unit

• FETCH the program instruction: The next instruction is fetched from cache or RAM.
• DECODE the program instruction: The instruction is decoded by the CU into a form the ALU
can understand.
• EXECUTE the program instruction: The instruction is carried out by the ALU.
• STORE the result: The processed data from the executed instruction is stored in the registers
or RAM.

1.7.3 Cache Memory

Cache Memory is high-speed SRAM that is placed between the CPU and RAM.
The characteristics of cache are:

• Cache memory can be accessed faster than RAM, therefore cache memory increases a
computer's performance.
• Cache memory is used to store program instructions and data that are used repeatedly in the
operation of programs or information that the CPU is likely to need next.
• Cache memory has a very small capacity, which is measure in kilobytes (KB) or Megabytes
(MB).
Cache is organized in different levels according to its proximity to the processor core:

• Level 1 (L1), built into the CPU and runs at the same clock speed as the CPU. It is the most
expensive of cache memory and has a very small capacity (about 32KB). L1 is private cache
for each core. L1 is SRAM.

Learning Unit 1 Hardware Page 9

 Exploring CAT: Grade 11

• Level 2 (L2), is built into the CPU, although not as close to the core as L1 cache. L2 is less
expensive and has a larger capacity (about 256 KB) that L1 cache. L2 is private cache for
each core.
• Level 3 (L3), a separate chip on the motherboard between the CPU and RAM. L3 cache is
cache that is shared between cores and has a much large capacity (about 2 MB).
The easiest way to consider the different levels of cache is to consider each type as a kind of “half-
way house” for the data on the transfer from RAM to the CPU. The closer to the CPU it is, the faster
and more expensive it is.
The concept of caching is often used in computer, the idea of using a faster device that is faster than
a slower device to speed up access to data is used in disk cache, web cache and browser cache.

1.8 Expansion Ports and Slots

A slot is mounted directly onto the motherboard and allows a user to connect a board or card
(sometimes called a daughter board) directly onto the motherboard. This is classified as an internal
connection. When a user inserts a new card, they must first switch the computer off to avoid causing
any damage.
A port is an external connection and allows a user to connect a device on the outside of the computer
case. This port then connects to the motherboard through either a card mounted in a slot or built-in
circuitry. This is classified as an indirect connection.

Ports Expansion Slots

http://www.pearsonitcertification.com/content/images/chap3_9780789756459/elementLinks/03fig26_alt.jpg

1.8.1 SATA Ports

The Serial Advanced Technology Attachment (SATA) is a computer communication bus interface that
connects storage devices to the motherboard. A user can connect Hard Disk Drives (HDDs); optical
drives and Solid-State Drives (SSDs) to the ports using SATA cables. SATA devices are hot-
swappable, the device can be removed or installed switching off the computer.

SATA Ports
https://www.legitreviews.com/wp-content/uploads/2015/04/Gigabyte-Z97X-UD3H-BK-Layout-SATA-Ports.jpg

Page 10 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.8.2 Non-Volatile Memory Express

Non-Volatile Memory Express NVMe is computer communication bus interface that connects SSDs to
the motherboard. The bus allows SSDs to read/write at much high speed than via a SATA
communication bus.

1.8.3 M.2 Format

SSDs and HDDs are both secondary storage that permanently store applications and data. SSDs are
much faster than HDDs, the reason for this will be discussed later.
With the increase in speed of SSDs and the decrease in size (2.5inches), the SATA interface was
becoming too slow and bulky. The M.2 format is designed for manufacturers to install a variety of high
speed devices that require very little power, in small spaces. M.2 cards include Wi-Fi and Bluetooth
radios and SSDs. The M.2 slot can use any of the following communication buses: SATA 3.0; PCI
Express (PCIe) 3.0, USB 3.0 and NVMe.

https://www.legitreviews.com/wp- https://www.groovypost.com/wp-
content/uploads/2015/04/Gigabyte-Z97X-UD3H-BK-Layout-m2- content/uploads/2018/02/push-m2-ssd-into-slow-medium-
Slot.jpg pressure-1280x853.jpg

1.8.4 Graphic Cards

The graphics card translates the information that the computer is working on into images and sends
them to a display. The more powerful the Graphics Processing Unit (GPU), the faster images can be
displayed, and the better the visual experience.
An integrated or onboard GPU does not have its own RAM, it uses the RAM of the computer to
store information it needs to process and is built into the motherboard. Integrated graphic cards are
cheaper and are ideal for watching or editing videos, 2D gaming and general word processing.

https://www.howtogeek.com/wp-content/uploads/2014/06/motherboard-connectors.jpg

Dedicated or discrete GPUs are designed for 3D gaming or for professional graphic designers. A
dedicated GPU has its own video memory such as GDDR SDRAM and does not use the RAM of the
computer.

Learning Unit 1 Hardware Page 11

 Exploring CAT: Grade 11

https://www.soundonsound.com/sound-advice/graphics-cards

1.9 The Power Supply Unit (PSU)

The computer Power Supply Unit (PSU) converts electricity, Alternating Current (AC) into low-voltage
Direct Current (DC) power for the components of the computer.

https://www.geewiz.co.za/12393-large_default/astrum-atx-power-supply-psu-230w-204pin.jpg

CHECKPOINT 1

1. You are given the following photographs of different devices that could be connected in or to a
typical computer.
You are required to write in the name of each of the components/devices in the second column
and their MAIN function in the third column. Note: When filling in the function, think of what
makes the device unique.

1.1 1.2

Page 12 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.3 1.4

Question Name of Device Main Function

Number
1.1
1.2
1.3
1.4

2. Expand the acronyms given AND explain how these hardware components influence the
performance of a computer.
2.1. RAM
2.2. CPU
3. Cache Memory aids the CPU in speeding up the processing of the computer.
3.1. Explain how cache memory speeds up processing.
3.2. Give TWO examples of where cache memory can be found.
4. Explain why you can still use graphics on your computer even if you take out the graphics card
you purchased.
5. What does the term non-volatile mean when referring to ROM?

1.10 Input Devices

1.10.1 Scanners

https://freepngimg.com/thumb/technology/49855-9-computer-scanner-images-free-clipart-hq.png

A scanner is a device that captures physical images from photographic prints, posters, magazine
pages and documents; and converts the images into a digital format.

• Types of scanners include hand-held, feed-in or flatbed.

• Scanners usually connect to your computer via the USB port.
• Scanners work together with TWAIN software programs, which imports the data from the
scanner and allows the user to manipulate the image.
• Some scanning software includes Optical Character Recognition (OCR) which recognises the
scanned text so that it can be edited by word processing software.

Learning Unit 1 Hardware Page 13

 Exploring CAT: Grade 11

1.10.1.1 Advantages
• Scanners provide high quality resolution for both black and white and colour document.
Resolution for scanners is measure in dots per inch (dpi).
• Scanners create digital copies of documents and photographs so that the user can store the
files electronically saving paper, energy and physical storage space.
• Scanned images can be modified by graphics application software.

1.10.1.2 Disadvantages
• Images files captured by a scanner are usually very large in size.
• Images lose some quality in the scanning process.
• The quality of the final image depends on the quality of the original image.

1.10.2 Digital Cameras

A digital camera uses digital optical components to register the intensity
and colour of light and converts it into pixel data. Pixels, which is short for
“Picture Elements”, are the small little dots that make up the images on
computer displays.
A digital camera’s memory card works at a certain speed, measured in
megabytes per second (MB/s), this determines how many images it can
capture per second and the speed of uploading. The memory card’s
capacity, usually measure in gigabytes (GB), determines how many
images can be stored on the card.

https://www.bhphotovideo.com/images/images1500x1500/sandisk_sdsdxpk_064g_ancin_extreme_pro_uhs_ii_64gb_1275619.jpg

There are four ways to save images taken on a digital camera or smartphone camera:

• Using a card reader – by connecting a card reader to the computer, a user can transfer the
image files from the memory card onto the computer.
• Using a USB cable – many cameras have a mini-USB port so that the user can connect the
camera directly to the computer using a USB cable to transfer the images.
• Connecting via Bluetooth of Wi-Fi – many cameras can be connected to a smartphone or
computer via Bluetooth or Wi-Fi technology, allowing images to be transferred and stored.
• Uploading files to the Internet – some cameras (including smartphones) can connect directly
to the internet and upload the image files to social media sites or cloud storage.

https://freepngimg.com/png/21707-digital-slr-camera

1.10.2.1 Advantages
The following list describes the advantages of using a digital camera instead of a traditional film
camera.

• The storage card is much smaller, cheaper, has the capacity for many more images and is
easier to transport than film.

Page 14 Learning Unit 1 Hardware

Exploring CAT: Grade 11

• Most smart devices have built-in cameras, this means that anyone with a smart device has
access to digital photography.
• The images can be digitally edited either on the camera itself or if the file is transferred to a
computer then by using editing software, many more effects can be done to the image.

1.10.2.2 Disadvantages
• A corrupt memory card will result in the photograph files being “lost”.
• The camera battery can go flat, and the user will be unable to take photographs until the battery
is recharged.

1.10.3 Biometric Input

A biometric input device inputs a person’s biological features or characteristics and stores the
representation digitally in order to identify the user. There two categories of biometric sensors:
Physiological

• Fingerprint
• Iris of retina
• Face
• DNA
Behavioural

• Voice
• Signature
Biometric devices can be used to uniquely identify individuals. They are more reliable than using
passwords to authenticate a user.

1.10.3.1 Fingerprint Scanners

Fingerprint Scanners record an image of a person's fingerprint by mapping the arches, whorls, loops
and furrows of a fingerprint. The scanning of the fingerprint is very reliable, however some people,
particularly the elderly, do not have identifiable fingerprints.
Fingerprint scanners are used to protect access to computer devices and entry through doors.
Cheaper, less advanced fingerprint scanners can easily be bypassed by fake fingerprints.

https://freepngimg.com/png/49563-biometric-access-control- https://im.rediff.com/getahead/2017/apr/24fingerprint.jpg
system-hd

Learning Unit 1 Hardware Page 15

 Exploring CAT: Grade 11

1.10.3.2 Retina or Iris Scanners

Retina or Iris Scanners identifies a person by scanning the patterns
in the ring-shaped colour that surrounds the pupil of the eye. These
scanners are more secure than other biometric devices, because it is
not possible to duplicate the retina or iris. Retina or iris scanners are
used to protect entry to secured rooms and smartphones use the
technology to prevent access to the device.

https://www.samsung.com/global/galaxy/galaxy-s8/security/images/galaxy-s8_security_kv_phone.png

1.10.3.3 Face Scanners

Face scanners identify a person by taking measurements of a person’s face.
The device measures characteristics of a human face, including the distance
between a person’s chin, eyes, nose and mouth. High quality face scanners
can distinguish between a picture of a person and a real person, making
them a very secure device.
Social networking web sites like Facebook uses software for face recognition
to tag the people in photographs. Google Photos uses facial recognition to
categorise online photo albums according to the people in the photo
collection. It can also recognise, buildings, pets and other animals.
https://www.idemia.com/sites/corporate/files/styles/product_visual_slider_desktop/public/innovation/visual/idemia-3d-
face.jpg?itok=gF69_vmF

1.10 3.4 Voice Recognition

Voice recognition devices identify a person by converting
analogue audio into digital signals. The device software
matches the stored patterns in its digital database to the
received signals. These scanners can improve security, but
less advanced voice recognition scanners can be bypassed
using a tape recording. In-home digital assistants from
Google (Google Home), Amazon (Amazon Alexa) and Apple
(HomePod) have implemented voice recognition software to
interact with users.

https://isabela.iweb.co.uk/resize/ZT0xMjA5NjAwJmg9NTAwJnE9NzUmdD1vdXRib3VuZCZ1cmw9aHR0cHMlM0ElMkYlMkZzdGF0a
WMubXltZW1vcnkuY28udWslMkZtZWRpYSUyRmNhdGFsb2clMkZwcm9kdWN0JTJGMyUyRjQlMkYzNDk5NjAtNS5qcGcmdz01MDA

https://cdn.ttgtmedia.com/rms/onlineImages/crm-voice_recognition.png

Page 16 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.10.3.5 Advantages
• Unique, they make it possible to differentiate one individual from another.
• Universal, biometrics can be found in all individuals.
• Recordable (with or without consent).
• Measurable, allowing for future comparison.

1.10.4 Handheld Input Devices

A handheld or mobile input device is a device that can easily be carried by a user, for the purposes
of inputting data into a computer system.
Hand-held input devices include barcode readers and game controllers.

1.10.4.1 Barcode Readers

Barcode readers are devices that are used for reading bar coded data (data in the form of many light
and dark lines). The barcode reader scans the image and converts it to an alphanumeric value.
Examples of barcodes include labelling products in a shop, labelling the books in a library and
personal identification numbers. QR codes have become more useful than barcodes since they can
store much more data, including URLs of web sites, geographical coordinates, and text. QR codes
can be read using freely available applications on mobile devices such as tablets and smartphones.

https://www.tutorialspoint.com/computer_fundamentals/images/b https://encrypted-
arcode_reader.jpg tbn0.gstatic.com/images?q=tbn:ANd9GcQZnSnvUx5ofh8P
rowKnqZ77CZIX-8LWGW9vUvrItUx_iSN9X0KvQ&s

1.10.4.2 Game Controllers

A game controller, gamepad, joypad or video game controller is a handheld input device
designed to connect a user to a computer or gaming systems. These devices usually have multiple
buttons and one or two mini joysticks. Each button and/or joystick is configured to perform and
specific actions in the gaming system. Examples of gaming system that use game controllers include
Xbox, PlayStation and Nintendo.

Learning Unit 1 Hardware Page 17

 Exploring CAT: Grade 11

https://freepngimg.com/png/27163-xbox-controller- https://www.takealot.com/joy-con-pair-neon-purple-neon-
transparent orange-nintendo-switch/PLID56261844

1.10.4.3 Virtual Reality (VR) Controllers

Virtual reality (VR) controllers allow users to explore the virtual world environment and pickup or
manipulate virtual objects.
These devices work using the following principles:

• Head tracking: a user wears a virtual reality (VR) headset, the picture shifts as they look up
down and side to side or angle their heads.
• Motion tracking: devices track a person’s real-world movement and translates it to movement
in the virtual world. Users can walk, jump, pickup and move virtual objects.
• Eye tracking: an infrared sensor monitors the user’s eyes inside the headset, so the system
knows where the user’s eyes are looking in virtual reality. For example, if the user’s eyes look at
an object in the distance, the technology blurs the foreground, just like people experience in the
real world.

https://qph.fs.quoracdn.net/main-qimg-c3103186dab0b8d1cd626f868b8d5b9b
https://freepngimg.com/png/71342-headset-
rift-f8-oculus-virtual-reality-zuckerberg

Page 18 Learning Unit 1 Hardware

Exploring CAT: Grade 11

CHECKPOINT 2

1. Match the description in COLUMN A with the term in COLUMN B.

COLUMN A Answer COLUMN B

1 A hardware component that one would A Sound card
most likely have to upgrade for video
editing.
2 A method of connecting peripherals to B DPI
a computer whereby devices are
plugged into the computer without
switching the computer off.
3 A technology that uses equipment that C OCR
allows a user to interact with an
imaginary world.
4 The small little dots that make up the D Barcode scanner
images on computer displays.
5 A type of software that recognises E Plug and Play
characters in a scanned image.
6 A device that converts an image into F Pixels
an alphanumeric value.
7. A biometric device that can control G VR
access to a user's computer or device.
H Hot swapping
I Face scanner
J Graphics card
K AR

2. Many flash disks now come with built-in fingerprint recognition features.
2.1. What is the general or generic name given to the device that can identify and make use of
the physical characteristics of a person?
2.2. What will be the purpose of having fingerprint recognition features on a flash disk?
2.3. Other than fingerprint recognition, name ONE other way a system can identify users by
their physical characteristics.
3. You would like to have a digital camera to be able to record the events of the school. Name
TWO specifications that you ought to consider when choosing a digital camera, besides the cost
and warranty.
3.1. After taking, the photographs would have to be available to be included in a newsletter or
posted on the school’s website. Name TWO ways in which the photograph files could be
transferred (saved) from the digital camera to the computer.
3.2. You would like to print high-quality colour photographs taken of the school. Recommend
the best type of printer to perform these tasks and explain the reason for your
recommendation.

Learning Unit 1 Hardware Page 19

 Exploring CAT: Grade 11

1.11 Output Devices

1.11.1 Monitor Display
A computer screen or monitor is an output device that displays text and graphic images to the
device user.
Liquid Crystal Display (LCD) monitors are slim in design, have low power consumption and are used
for desktop computers and mobile computing devices.

• Resolution refers to the number of individual dots of colour,

known as pixels, contained on a display. Resolution affected
by the size of the screen and is measured by identifying the
number of pixels on the horizontal axis (rows) and the number
of the vertical axis (columns), for example 1024x768;
1280x1024; 1280x800.
• Aspect ratio is the width of the display screen in relation to
the height, for example 4:3, 16:9.
• For LCD monitors the screen size is measured in inches,
diagonally, from corner to corner inside the external casing,
for example 19”; 24”; 27”.
https://resize.hswstatic.com/w_285/gif/monitor-lcd-diagonal.jpg
• The contrast ratio is defined as the ratio of the luminance of the brightest colour (white) in
relation to the darkest colour (black) that the display system can produce.
• The response time is the amount of time a pixel in a display takes to change. It is measured in
milliseconds (ms).
• A touch screen is any display that a user can interactive with by touching the display. They
function as a combination of an input and output device.

1.11.2 Monitor Ports

External monitors are connected to devices using Video Graphics Array (VGA) or High-Definition
Multimedia Interface (HDMI).

Page 20 Learning Unit 1 Hardware

Exploring CAT: Grade 11

The following table provides a comparison between the two port types.

VGA HDMI

Image

https://www.hdcabling.co.za/wp-
content/uploads/2019/06/HDMItype-2.jpg

Signal Type Analog Digital

Maximum 2048x1536 Up to 8K (7680 × 4320) video
Resolution
Signal transfer 200+Mbp Up to 48 Gbps
speed (bandwidth)
Audio No Yes
Connections Monitor Home Entertainment (TVs, DVD players,
Projector Satellite decoder, gaming systems)
Monitor
Projector
https://kbimg.dell.com/library/legacy/kcswisdom/images/kcswisdom_sol_20140108160642/1376300716300.display_cables_compar
ison.jpg

1.11.3 3D Printers
3D printing technology can be used to create
anything from prototypes and simple parts to highly
technical final products including eco-friendly
building, medical implants, artificial organs and
food.
3D printing or additive manufacturing is a
process where a 3D printer creates three-
dimensional solid objects by depositing materials
layer by layer from a 3D digital model. Filaments,
made of different materials, serve as the “ink” for
3D printers.
https://envisiontec.com/wp-content/uploads/2016/09/Homepage-Parts-collection-2-e1478762330895.jpg

Learning Unit 1 Hardware Page 21

 Exploring CAT: Grade 11

1.11.3.1 Examples of 3D printer products

• Eyewear
• Dental products
• architectural scale models
• prosthetics
• movie props
• design (lamps, furniture etc)
• reconstructing fossils in palaeontology
• replicating ancient artefacts in archaeology
• reconstructing bones and body parts in forensic pathology
• reconstructing heavily damaged evidence retrieved from a crime scene

1.11.3.2 Advantages
• Faster production – 3D printing is quicker that traditional manufacturing, users can design a
prototype and print a sample is a very short time frame.
• Cost effective – a single user can print many items using from a computer and 3D printer.
• The user has complete control over the quality of the 3D object printed as opposed to a bulk
manufactured part.
• Users have unlimited design capacity using a 3D printer.

1.11.3.3 Disadvantages
• It requires a lot of electricity to print a 3D object.
• The initial financial layout to purchase and setup a 3D printer is high.
• The filament needed a 3D printer to print is limited to certain materials.
• Currently, 3D printers are slow.
• The 3D printer could be used to 3D print dangerous weapons and devices.

https://gadget.co.za/wp-content/uploads/2019/11/42646407572_6d086c9d34_b.jpg

1.12 Devices for Physically Challenged Users

Specially designed devices for physically challenged users have made their activities simpler,
allowing them to interact in the world.

1.12.1 Input Devices for People with Disabilities

If a user has a mild or severe disability, there are special input devices that the user can use to input
data.

Page 22 Learning Unit 1 Hardware

Exploring CAT: Grade 11

• A microphone can assist physically challenged users, special software converts speech into
text and actions.
• Joysticks and Trackballs – Joysticks, that are usually associated with playing games, can
help physically challenged people control their computers with their head, chin or non-
functioning hand. Trackballs, which are like the computer mouse, let the user move the cursor
by rolling the ball and click the screen with programmable buttons.

https://www.pretorianuk.com/images/virtuemart/product/ultra- https://mouse4all.com/img/articles/20190613-input-devices-
joystick3.jpg for-disabled-computer-users-part-1.jpg

• An Eye-controlled Mouse gadget uses special software and cameras attached to glasses.
Users “train” the gadget to control the cursor by moving their eyes.

https://image.businessinsider.com/50eefc2fecad045a7600000e?width=300&format=jpeg&auto=webp
• A Foot Mouse can be used by a user that has limited or no upper arm movement. Most foot
mouses have straps that hold the device in place, users control the cursor with one part of the
device, and the other part is used to click.

https://www.geek.com/wp-content/uploads/2007/12/foot_mouse_02.jpg

Learning Unit 1 Hardware Page 23

 Exploring CAT: Grade 11

• Special keyboards accommodate for users with different

disabilities. Ergonomic keyboards that are split in the middle
assist users with Capel Tunnel Syndrome; for users with poor
motor control there are keyboards that have larger keys; on
braille keyboards each key has a set of raised dots that are felt
by the fingertips of the blind user and the pattern of dots can then
be recognised by the user as a specific letter.
https://nanopac.com/wp-content/uploads/2018/05/Braille-Keyboard.jpg

https://images-na.ssl-images-
amazon.com/images/I/61Z0mwfur2L._AC_SL1500_.jpg
http://www.continuetolearn.uiowa.edu/nas1/07c187/Pictures/Larg
e-Key-Keyboard-Example.jpg

• 'Tongue Drive System' - a small magnet is implanted in the users

tongue and the user moves their tongue which then moves the cursor.

http://c655279.r79.cf2.rackcdn.com/images_24319_thumb_65.jpg?1385692255

• Puff-suck Switch devices enable quadriplegic users to control a computer by breathing. The
technology includes a special wand which allows the user to send signals to the keyboard using
air pressure by inhaling or exhaling in the wand.

Page 24 Learning Unit 1 Hardware

Exploring CAT: Grade 11

https://edsgaray.weebly.com/uploads/1/3/5/5/13556484/645606454.jpg

1.12.2 Output Devices for People with Disabilities

There are special output devices that a user with disabilities can use to output information that has
been process by a computer.

• Speakers can assist visually impaired users, special software converts text into speech, which
is broadcast in sound format.
• An extra-large screen hardware screen magnifier can assist visually impaired users by
magnifying the screen display.

https://assistech.com/store/image/thumbnails/18/88/ctc20h_jpg-100480-120x120.jpg
• A braille printer prints by embossing raised braille dots onto braille paper. Pins are pressed
into the one side of the paper in order to create raised dots on the other side of the paper.

https://i.pinimg.com/originals/b4/9a/6c/b49a6c4a075086afef801b2fd389c563.jpg

1.13 Storage Devices

1.13.1 Secure Digital (SD) Cards
• A common type of memory card, Secure Digital (SD) cards are used in multiple electronic
devices, including digital cameras and smartphones.
• SD cards are non-volatile solid-state storage devices
which use NAND flash memories to store data
(millions of transistors).
• Cards are rectangular in design with one side
"chipped off" to prevent the card from being inserted
into the device the wrong way.
• There are a variety of sizes: Standard SD, miniSD
and microSD. An SD adapter can be used if your SD
card is not of the correct size.
• The storage capacity of the SD card also varies;
increasing in cost as the capacity increases.
https://www.ruggedinformer.com/how-to-choose-the-right-sd-card/

Learning Unit 1 Hardware Page 25

 Exploring CAT: Grade 11

1.13.2 Hard Disk Drive (HDD)

• Hard disk drives are non-volatile magnetic storage devices.
• Hard disk drives can store 160 gigabytes (GB) to 2
terabytes (TB) of data.
• Internal hard disk drives can be plugged directly onto the
motherboard (SATA) or a portable external hard disk drive
can be connected via a USB or SATA port.
• A hard disk drive has moving parts.
• A hard disk drive needs to be defragments as files can be
stored nonconsecutively slowing down the read and write
process.
https://images.anandtech.com/doci/9866/wdc_red_hdd_678_678x452.jpg

https://img.bhs4.com/60/0/60040448ad54e9a4d396c0599bf02de0ec2ce98c_large.jpg

1.13.3 Solid State Drives (SSD)

A solid state drive is purely electrical but is non-volatile meaning it can store data permanently. They
are smaller than HDDS, use less power and can load and store data much faster than HDDs. An SSD
can be installed inside the computer replacing the HDD or an additional external portable drive
providing the user with extra storage space.

• Internal solid-state drives can be plugged directly onto the motherboard (SATA or PCIe/PCIe
m.2) or a portable external solid-state drive can be connected via a USB or SATA port.
• Solid-state drives have a capacity of 64 gigabytes (GB) – 30 terabytes (TB).
• Solid-state drives have extremely fast read/write speeds and no moving parts.

https://assets.pcmag.com/media/images/574571-wd-blue-for-
best-ssds-for-laptops.jpg?thumb=y&width=980&height=740 https://5.imimg.com/data5/JW/GI/JJ/SELLER-
43396213/verbatim-vx500-ssd-external-solid-state-drive-
240gb-500x500.jpg

Page 26 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.13.4 Network Attached Storage (NAS)

Network Attached Storage (NAS) is a device that plugs directly into a network without a computer to
provide local storage space to users on a network.

• The hardware device has multiple storage drives, processors and RAM.
• A NAS device can store any type of data, such as audio, video, websites, text files and
Microsoft Office documents.
• A NAS device is like having a private cloud. With a NAS, authenticated users can access the
NAS remotely from anywhere in the world.
• The device can be used to backup data from computers and mobile devices on the network.

https://www.aomeitech.com/nas/images/what-is-nas-storage-and-how-it-works/01QNAP-TS-410-full.jpg

1.14 Online Cloud storage

Cloud storage involves storing data on hardware in a remote physical location, which can be
accessed from any device via the internet. Storage is available to users from third-party companies as
a service, for example Google Drive, Apple iCloud, Microsoft OneDrive and Dropbox.
Cloud backup, online backup or remote backup, is a strategy for sending a copy of stored data to an
off-site location, using an Internet or network connection.

1.14.1 Types of Cloud Storage

• Personal cloud storage – uses a on-premises storage device (NAS) that allows users to
stored personal data.
• Private cloud storage – uses company owned on-premises storage servers that allows
users to stored company data.
• Public cloud storage – storage is available to users from third-party companies as a
service, for example Google Drive, Apple iCloud, Microsoft OneDrive and Dropbox.

1.14.2 Advantages
• Cloud storage can save costs as individuals and companies do not need to purchase expensive
infrastructure for storing data.
• Cloud storage data can be accessed anywhere the user has Internet access.
• Should the computer/storage media be damaged or stolen the cloud storage data is not lost.
• Potentially the user saves storage space on their devices.
• The cloud storage service provides synchronisation of data between devices.
• Cloud storage allows for easily sharing of data, especially large data files.
• Data redundancy is included in the service, cloud storage companies keep multiple copies or
the user’s stored data.

Learning Unit 1 Hardware Page 27

 Exploring CAT: Grade 11

• Cloud storage companies have advanced security features to protect against threats such as
ransomware or malware.

1.14.3 Disadvantages
• Cloud storage requires a reliable Internet connection.
• Uploading (coping) and downloading (retrieving) data to and from the cloud may be slower as
Internet bandwidth and cloud storage speed may be limited compared to local device and
network access.
• Accessing cloud storage may affect the user’s other Internet related activities.

https://freepngimg.com
https://financesonline.com/upload
/png/66837-google- https://freepngimg.com https://financesonline.com/uploads/
s/2019/08/icloud-logo1.png /png/62455-icons-
driving-storage-drive- 2019/08/OneDrive-For-Business-
suite-logo-cloud storage-computer-user- logo1.png
file-dropbox-airdrop

CHECKPOINT 3

1. Select the MOST appropriate answer to each question:

1.1. Which of the following hardware components is the most likely to affect the speed of the
PC?
A) DVD-ROM
B) Printer
C) RAM
D) Monitor
1.2. The type of memory card that is used by digital cameras.
A) USB pen
B) SIMM card
C) SD card
D) Zip Disk
1.3. A modern storage device used to transport data that has much larger capacity, transfers
data quickly and plugs into a USB port.
A) USB Memory Stick
B) Compact disk
C) Stiffy disk
D) DVD
1.4. An HDD is used in a ...
A) printer.
B) desktop computer.
C) smartphone.
D) tablet.

Page 28 Learning Unit 1 Hardware

Exploring CAT: Grade 11

1.5. Which storage device will be more likely to break when it is accidentally dropped?
A) HDD.
B) USB flash drive.
C) SSD.
D) MicroSD card.
1.6. The best way to share a very large file with many users via the Internet is a/an …
A) USB flash drive.
B) e-mail attachment.
C) cloud storage service.
D) SD card.
1.7. Which ONE of the following options is NOT an example of portable storage?
A) USB flash drive.
B) Cloud storage.
C) External 2.5" HDD.
D) DVD.
1.8. Which one of the following devices has the greatest storage capacity?
A) 1 GB DDR RAM.
B) 1 kB L1 cache.
C) 1 TB SSD.
D) 1 MB L3 cache.
1.9. Cloud storage refers to …
A) shared data storage on a central server usually managed by a hosting company.
B) the DVD drive in a laptop.
C) software that allows a user to copy and send their data over a network.
D) a set of linked hard drives in a computer.
2. Name TWO input or output devices that could make computers accessible to visually impaired
users.
3. Give TWO advantages of using HDMI technology instead of VGA technology.
4. Explain each of the following key specifications regarding screens:
4.1. Pixels
4.2. Contrast ratio
4.3. Response time

1.15 The Boot Process

When you boot (switch on) a computer:

• The CPU executes a Power-On Self-Test (POST), which checks that all the connected
hardware is functioning correctly. The list of connected hardware is stored in the
Complementary Metal Oxide Semi-Conductor (CMOS) chip. If there is a problem during POST,
the user is alerted by beep codes or error messages are displayed on the computer monitor.

Learning Unit 1 Hardware Page 29

 Exploring CAT: Grade 11

• The BIOS, store in ROM, checks for the location of the operating system according to the
sequence of storage devices defined in the BIOS, this is known as the boot sequence. If the
boot device is not found, an error message is displayed on the computer monitor and the
system fails to start.
• The boot loader loads the operating system kernel from the storage device into system
memory (RAM). The kernel is the core program of an operating system; it loads the device
drivers and the user interface.

1.16 Troubleshooting Basic Hardware Problems

Troubleshooting a system for possible errors is not always easy, a simple troubleshooting strategy will
help the user find and fix the problem.
There are different problems that could impact users and for each problem listed in the following table
a step by step solution (algorithm) is provided:

Possible Problem(s) Possible Solution(s)

A beeping noise comes from the • The computer BIOS POST test has picked up a fault with
computer when it is switched on the HDD, RAM, keyboard, etc. A technician would have
and the computer does not boot to check the motherboard and all components to see
up. which one is faulty.
Screen Error: Non-System Disk or • Check if there is a CD/DVD in one of the drives which is
Hard Drive not found. not a bootable disk.
• Check if there is a USB flash drive or external hard drive
plugged into a USB port.
• Check the BIOS has the correct start-up device or
restore BIOS defaults.
• Check if the BIOS still has its stored information, as the
motherboard battery may not have charge.
• Check the connection cable to the main storage device
from the motherboard is secure.
• Check if the Hard drive is damaged or corrupt by
plugging it into a working computer a check the file
structure is readable.
Screen Error: Corrupted Hard Disk • Perform a Hard Drive diagnostic test in the BIOS.
(Hard Disk #(XXX) Error).
The screen is blank. • Check if the computer is in Hibernate or Sleep mode.
Click the mouse or press any key on the keyboard to
wake it.
• Check the monitor is plugged into power and is turned
on.
• Check the computer is plugged into power and turned on.
• If you're using a desktop computer, make sure the
monitor cable is properly connected to the computer
tower and the monitor.
• Check graphics card has power and is seated in the slot
correctly.
• Check if the monitor’s display cable is properly
connected to the computer.
• Check if the device driver has not been corrupted.
• Check if the display brightness is not turned down.

Page 30 Learning Unit 1 Hardware

Exploring CAT: Grade 11

Possible Problem(s) Possible Solution(s)

The mouse or keyboard has • Check, if it is a wired mouse or keyboard, that it is
stopped working. correctly plugged into the computer.
• Check, if it is a wireless mouse or keyboard, that the
batteries have charge and the device is turned on.
• Update the device driver in Device Manager.
• If you installed a new driver, which caused the device to
stop working, Rollback the driver to the previous version.
• Perform a System Restore in Windows.
Printer is not responding or printing • Check the printer is plugged in to power and switched on.
the file. • Check that the cable connecting the computer and printer
is plugged in securely.
• Check that the printer is installed with the correct device
drivers.
• Check that there is the correct paper in the printer tray.
• Check that the ink/toner cartridge(s) is/are not empty.
The computer fails to switch on. • Check the power cord to ensure it is plugged in to the
device and the power plug.
• Check if the power has tripped or the hardware has been
a burning smell, which could have been caused by a
power surge.
• Check for a power failure by turning on a light.
• Check for hardware damage: Open the computer case
while there is power to the computer (but do not touch
anything inside the chassis). Look for a light on the
motherboard. If the light is on, then the motherboard is
receiving power, this means there is a problem with
motherboard.
• Check for hardware damage: Sometimes a power
supply’s fan spins but the power supply unit (PSU) does
not have enough power to run all the components of the
computer. Try an emergency power supply from outside,
just to check if your current power supply is faulty.

Learning Unit 1 Hardware Page 31

 Exploring CAT: Grade 11

CHECKPOINT 4

The Nerd Squad provides remote support for all clients. Technicians can connect to clients'
workstations over the Internet to quickly resolve IT issues; or customers are able to bring their
computers into one of the equipped workshops. Zachary Robins is one of the technicians available to
help customers.
1. Explain to a customer what damage a power surge can cause to computer devices.
2. A customer complains that each time he turns on his computer, he only hears a 'long beeping
noise' and the computer never boots up. Explain to the customer why this is happening AND
state how Zachary could solve the problem.
3. A customer complains that his monitor doesn't display any image. Name THREE checks that
Zachary could perform to see if the monitor is in working order.
4. When a customer switched on their home computer, it gave them a message that said, 'Non-
System Disk', and did not boot any further. Give THREE reasons why this message could
appear.
5. A customer calls to complain that her new wireless keyboard and mouse are not working.
Describe ONE check can she perform to see if she can get the devices working.

Page 32 Learning Unit 1 Hardware

Exploring CAT: Grade 11

Learning Unit 2 Software

2.1. Operating Systems
2.1.1 Functions of an Operating System (OS)
• Manages hardware components – the operating system manages all the input, output,
storage devices and the components of the computer. Device drivers, which are programs, of
the operating system relay instructions from applications to the hardware devices.
• Provides a user interface – the Graphical User Interface (GUI) is the interface between the
user and the computer hardware.
• Provides a structure for file management – an operating system manages all the file-related
actions, for example: folder structure, file coping, file moving, file deleting and file sharing.
• Provides a platform for application software to operate – application software is used to
perform specific tasks. The operating system provides an environment for application software
to function.
• Provides built-in utility programs – utility programs manage, maintain and control the overall
system health and functionality to improve performance. Examples of utility programs are disk
tools, backup software and antivirus software.

2.1.2 Examples of Operating Systems

• Microsoft’s Windows operating systems (Windows 10 Pro, Windows 10 Education, Windows 10
Enterprise, Windows Phone OS).
• Linux’s open source operating system. (Open Source refers to software that anyone can
access the source code and modify the program).
• Apple’s MacOS and iOS operating systems.
• Google’s Android operating system.

https://www.omegaweb.com/wp-content/uploads/2012/09/linux-mac-windows.jpg
https://image.flaticon.com/icons/png/512/226/226770.png

2.1.3 Installing Hardware

There are two options for installation of new devices:

• Plug & Play – a component that can be used as soon as the device is connected (the user
does not have to manually install device drivers).
• Hot Swappable – a computer component can be connected (or removed) without switching off
the computer. Hot swappable uses plug and play with the improvement that the computer does
not need to be turned off when the new device is added.

Learning Unit 2 Software Page 33

 Exploring CAT: Grade 11

2.1.3.1 Device Drivers

A device driver is a software program that that enables the operating system to communicate with
connected hardware devices. An operating system has many device drivers included the product.
When a new device is installed on a computer system, the operating system loads the device driver
and allocates two computer resources:

• Interrupt Request (IRQ)

• Direct Memory Access (DMA)

2.1.3.2 Interrupt Request (IRQ)

The operating system assigns a unique number to the device which identifies and orders the way the
CPU will process the instructions sent from that device.
For example, if a mouse has an IRQ of 3 and the keyboard has an IRQ of 5. When both devices
interrupt the instruction process, the CPU will know the interrupt on IRQ 3 belongs to the mouse and 3
is lower than 5, the mouse instructions will be processed before the keyboard instructions on IRQ 5.

2.1.3.3 Direct Memory Access (DMA)

Direct Memory Access is a method of transferring data directly to the computer’s RAM, from a device,
without the CPU having to process the instruction(s).

2.1.4 Virtual Memory

Virtual memory is a memory management capability of an Operating System (OS) to use secondary
storage as an extension of RAM which is primary storage. When RAM is full the OS will transfer data
to secondary storage. When the processor needs the data that is not in RAM, the OS will transfer the
data back to RAM.

Data need by the CPU

Hard Drive /
Solid Stated Drive
RAM (Primary Memory)
Virtual Memory

Less used Data

Page 34 Learning Unit 2 Software

Exploring CAT: Grade 11

2.1.5 Disk Cache

Disk cache is when operating system reserves a
section of memory (RAM) to keep a copy of data
that previously read from the computer’s storage
device to speed up the process of accessing and
storing data.
It is much faster for the CPU to access data that
is store in RAM than it is to access data stored
on a hard disk drive or solid-state drive.

https://www.pcmag.com/encyclopedia_images/CACHDISK.GIF

2.1.6 Spooling and Buffering

Compared to the CPU, input and output devices are much slower. One way of improving the
efficiency is to use caching, where a faster device is used to temporarily store the data that is to be
accessed from a slower device. For example, disk cache uses RAM to store data to be accessed from
secondary storage, and cache memory or processor cache stores data to be accessed from slower
RAM in faster SRAM on or near the CPU.
The performance and efficiency of input and output devices can also be improved by using spooling
and buffering.

Spooling Buffering
Spooling is a process in which data is Buffering is the process of temporarily storing
temporarily stored in secondary storage until data in RAM intended for a device while
the device is ready to process the data. processing other data.
Compared to a buffer, which is a small area in A buffer is the temporary storage area allocated
RAM, the data that is spooled is larger and is in primary memory that stores data so it can be
usually a file. accessed quickly.
Example: Spooling allows a user to send Example: Buffering allows a streamed video to
multiple print jobs to a printer which are saved be loaded while the user is watching it. The
in spool files in secondary storage. The print operating system pre-downloads and stores the
jobs form a queue and are sent to the printer video in memory before playback begins on the
one by one. device.

https://afteracademy.com/blog/what-is-spooling-in-
operating-system
https://www.slideshare.net/myrajendra/5-spooling-and-
buffering

Learning Unit 2 Software Page 35

 Exploring CAT: Grade 11

2.2 Windows 10 Graphical User Interface (GUI)

2.2.1 Task View
Task View allows a user to efficiently manage their open windows. It provides features to locate an
open window, hide all windows and show the desktop, and to manage windows across multiple
monitors or virtual desktops. Task View is found next to the Search icon on the bottom left of the
screen.

Task View Description

Task View: Allows the user

to add and switch between
multiple desktops.
Click the Task View button
on the taskbar, then click
the New Desktop button for
each additional desktop.
Click a desktop’s thumbnail
in Task View to switch to it.

2.2.2 Action Centre

Action Center is a unified location for all system notifications and quick access to a variety of settings.
It is opened by clicking the icon at the extreme bottom right of the screen on the taskbar.

Action Centre Description

The Action Centre gathers recent Tablet Mode Toggles tablet mode on/off.
notifications.
Network Opens the Network connections pane.
Click the Action Center button on the
taskbar to reveal the Action Centre icons: All Settings Opens the Settings app.
Nearby Toggles nearby sharing on/off.
Sharing
Airplane Toggling on will turn off all radios.
mode
Location Toggles location services on/off.

Focus assist Toggles the Focus assist options:

• Focus assist
• Priority only
• Alarms only
Mobile Toggles the Mobile hotspot feature
Hotspot on/off.
Night light Toggles the Night light feature on/off.

Bluetooth Toggles Bluetooth services on/off.

Page 36 Learning Unit 2 Software

Exploring CAT: Grade 11

Action Centre Description

VPN Displays VPN settings in the Setting
app.
Screen snip Launch the Screen Snip feature which
allows users to take screenshots and
edit, save, share the images.
Project Display the computer project options:
PC Screen only; Duplicate; Extend;
Second screen only.
Connect Connect to wireless devices (i.e.
Bluetooth).
Wi-Fi Toggles Wi-Fi connection on/off

Battery Saver Toggle Batery Saver mode on/off.

(only found This mode is designed to extend the
on a mobile laptop or tablet’s battery life. Windows
device) will automatically enable Battery
Saver when the device’s battery runs
low, a user can control this leve and
the feature of Battery Saver.
Brightness Move the Brightness slider to adjust
Slider the brightness of the devie’s screen.

Learning Unit 2 Software Page 37

 Exploring CAT: Grade 11

ACTIVITY 1
Creating a Desktop Shortcut
Shortcuts are convenient for applications that you frequently use.

Click the Start button on the taskbar, or, press the key.
Look for the Calculator application by scrolling through the
Apps list at the left side of the menu.
Click, drag and drop the application’s shortcut from the Start menu
to the desktop. The word Link appears when the mouse pointer
hovers over the desktop. Release the mouse button to create a link
to the program, also known as a desktop shortcut.

2.2.3 Windows 10 Settings

Windows settings allow the user to manage the resources of the computer, such as the storage,
sound, display, notifications, network, devices and more.

Quick Reference A – Windows 10 Settings

A summary of some of the Windows 10 Settings.

Settings Menu Option(s) or Icon(s) Description

An application that includes settings for a
user to control how the Windows 10
operating system operates on a computer.
Click the Start button, then click the
Settings icon to open and modify the
Settings App system settings.

The System menu provides tools for the

computer’s Display, Storage, Sound card
and Battery (where appropriate).

Settings App - A user can also adjust the icon tiles in the
System Menu Action Center in Notifications & actions
options.

Page 38 Learning Unit 2 Software

Exploring CAT: Grade 11

Settings Menu Option(s) or Icon(s) Description

Settings App -
The Network & Internet menu provides
Network &
options for the computer’s Status, Wi-Fi,
Internet Menu
Ethernet, VPN, Airplane mode and Mobile
hotspot.

Settings App –
The Devices menu provides settings for
Devices Menu
the computer’s Bluetooth & other devices,
Printers & scanners, Mouse, AutoPlay and
USB.

Settings App – The Backup options allow a user to

Update & protect their files by backing up their files
Security Menu to either an external disk drive, a network
drive or to cloud storage.

The Windows Update options will show

the current status of the computer -
whether it is updated or not.
A user can check for the latest updates
manually by clicking on Check for
Updates. The system will then start
checking for the available updates and
download it on the computer automatically.

Learning Unit 2 Software Page 39

 Exploring CAT: Grade 11

Settings Menu Option(s) or Icon(s) Description

Security Windows Security: Click the Security
Centre Center icon in the system tray.
Settings If any of the categories have a security
issue, the category will display a yellow
warning symbol:
Virus & threat protection periodically
checks the computer for viruses and other
malicious files.
Account protection provides security for
the user’s account and sign-in.
Firewall & network protection configures
network firewalls for private and public
networks, to keep your computer safe from
network attacks.
App & browser control is where the user
can configure warnings for suspicious
files, applications, and websites that they
download and visit.
Device performance & health keeps
track of system, software, and driver
updates, while monitoring storage space
and battery life.
Family options lets a user set up parental
controls on the computer, as well as
connected devices.
Device Driver updates for Windows 10, for
Manager example audio inputs and outputs,
biometric devices, network adapters,
monitors, printers, and video cards, are
automatically downloaded and installed
through Windows Update.
To update a device driver manually, use
the Device Manage window.

ACTIVITY 2
Updating Device Drivers
Device drivers can become outdated with better, more
improved drivers available. The driver for a device
can be easily update.
In the search box on the taskbar, enter “device
manager”, then select Device Manager.
Select a category to see names of devices, by
clicking on the arrowhead to the right of the
description.
Select the Sound, video and game controllers
category. Right-click on the device listed under
this category (for example: “Intel Display Audio”).

Page 40 Learning Unit 2 Software

Exploring CAT: Grade 11

Select Update Driver.

Select Search automatically for updated driver software.

Click the Close button if no updated driver is found.

NOTE: If the driver needs updating, check with your teacher before applying any changes to the
system.

ACTIVITY 3
Changing the Default Printer
If a user's computer has the ability to print to multiple
printers, then it is useful to set a particular printer as the
default.

Click the Start button on the taskbar, or, press the

key.
Click on the Settings icon.
Click on Devices menu option.
Click on Printers & scanners. A list of printers will
appear in the window.
Ensure that the option Let Windows manage my
default printer is not selected (the box should not
contain a tick). If the option is selected, unselect the
option by clicking on the tick to toggle the setting off.

Learning Unit 2 Software Page 41

 Exploring CAT: Grade 11

Click on the printer you want to make the default printer and select the button Manage.
Click on the button Set as default.

Opening the Printer Queue

Sometimes it is useful to see that print jobs are queued on the printer. A list of print jobs from the
multiple users on a network can be viewed.

Click the Start button on the taskbar, or, press the key.
Click on the Settings icon.
Click on Devices menu option.
Click on Printers & scanners. A list of printers will appear in the window.
Click on the printer whose printer queue you would like to display.
Select the button Open queue.
A list of items waiting to print will be displayed in
the print queue window.
By selecting the Printer menu option, a user
may modify the Printing Preferences or
printer’s Properties. From the Document menu
option, the user may pause, resume or
restarted printing.

2.2.3 Troubleshooting Basic Operating System Problems

Troubleshooting a system for possible errors is not always easy, a simple troubleshooting strategy will
help the user find and fix the problem.
There are different problems that could impact users and for each problem listed in the following table
a step by step solution (algorithm) is provided:

Possible Problem(s) Possible Solution(s)

Troubleshooting audio problems. • Verify that all Windows Updates are installed.
• Check your cables, plugs, jacks, volume,
speaker, and headphone connections.
• Devices and/or applications can be muted. If
any of them are muted, there will be a red
circle with a line through it next to the volume
control, select the volume control to unmute.
• Check the device properties to make sure that
devices have not been disabled.
• Update your audio drivers.
• Set your audio device as the default device.
• Turn off audio enhancements.
• Restart Audio Services.
• Try different audio formats.
• Restart to apply installed updates.
• If you have microphone issues, make sure
your privacy settings are configured properly.

Page 42 Learning Unit 2 Software

Exploring CAT: Grade 11

Troubleshooting printing problems. • Check the printer for missing cables or

wireless connectivity.
• Install missing printer drivers or update
existing printer driver.
• Change the default printer to the required
printer.
• Check the printer queue to see if your
document is queued to be printed.
• Run the Windows 10 Troubleshoot.

CHECKPOINT 1

1. Which one of the following is not an Operating System?

1.1. Windows
1.2. Android
1.3. C++
1.4. Linux
2. Whenever the CPU has insufficient memory for some of the applications that need to be run on
the computer, the CPU also has access to Virtual Memory. What is Virtual Memory?
3. _________ is the method of transferring data directly to the computer’s RAM from a device.
4. is a section of RAM, reserved by the operating system, to speed up the
process of accessing and storing data.
5. Compare printer spooling and printer buffering.

Learning Unit 2 Software Page 43

 Exploring CAT: Grade 11

2.3 Management of Files and Folders

2.3.1 File Explorer
File Explorer is a program that allows a user to navigate through the folders and files on their
computer.

Toolbar Title Bar Address Bar Search Box

Displays buttons Click and drag to Displays the location of the Enter keywords to
and menus for move the window. folder that is currently open. search the folder.
common
commands.

Backward and
Forward buttons
To navigate to
other folders or
libraries you've
already opened
without closing
the current
window.

Navigation Pane
Provides quick Details Pane
navigation to Displays details
folders and files. about selected
Browse to files.
favourite
locations,
libraries,
homegroups,
Computer, and
the network.

Quick Reference B – File Explorer – View and Search

The tools to modify the layout of the files and folders can be found on the View tab in File Explorer.

Formatting Menu Option or Icon Description

Select the layout of the items displayed in
Layout the Details pane the window.

Current Sort by – Sort items in this view by a

View column.
Group by – Group the items in this view
by a column.
Add columns – Display more columns of
information.
Size all columns to fit – Changes to
width of al the columns to fit their content.

Page 44 Learning Unit 2 Software

Exploring CAT: Grade 11

Formatting Menu Option or Icon Description

Show/hide File name extensions – Show or hide the

set of characters added to the end files
that identifies the file type or format.
Hidden items – Show or hide the files that
are marked as hidden.

Search Use this toolbar for the search options

Tools once a search string has been entered:
Date Modified; Kind; Size and Other
properties.

ACTIVITY 4
Modifying the File Explorer Window
The order files and folders are displayed can be altered to organise the data according to a variety of
criteria.
Using File Explorer, navigate to LU 3 of the Learner Files folder in the CAT Grade 11 folder.
Sort the file(s) and folder to display the newest files first:
On the View tab, select the Sort by drop down arrow, select Date from the options
displayed.
On the View tab, select the Sort by drop down arrow, select Descending from the
options displayed.
Change the view to also display the date and time when the file(s) and folder were last modified:
On the View tab, select the Add columns drop down arrow, select Date modified from
the options displayed.
Group the files by size:
On the View tab, select the Group by drop down arrow, select Size from the options
displayed.
Display the file extensions of the items :
On the View tab, check the Hidden items checkbox.

Searching for a File in File Explorer

If reordering the files and folders does not help, you search for the file or folder by entering the name
or part of the name in the Search text box.
Using File Explorer, select a location from the left pane to search or browse:
Select LU 3 of the Learner Files folder in the CAT
Grade 11 folder.
In the search box type "south africa".

Learning Unit 2 Software Page 45

 Exploring CAT: Grade 11

Press Enter.
The files south-african-flag-small and rhino will be displayed in the Display pane.

Using Open With

Each file has a default application that will automatically open a file based on the file extension. For
example, files with .docx are opened with MS Word. We can change the application that is set to open
a file regardless of the file extension.
Using File Explorer, navigate to LU 2 of the Learner Files folder in the CAT Grade 11 folder.
Select the Keeping Your Bank Account Safe on the Internet.pdf.
Right-click on the selected file.
Select Open With, then Choose another app.

Navigate to select More apps.

Navigate to select Word.
NOTE: Should the user always want this file type to opening using the selected app, they should
check the Always use this app to open.pdf files before clicking OK.
Click on the OK button.
The selected pdf file will now open in Microsoft Word (it is a feature of Microsoft Word that the
document will be converted to a word document).

Page 46 Learning Unit 2 Software

Exploring CAT: Grade 11

2.3.2 Properties of Files

Each file has data about the files such as the date created, the file extension, the size of the file,
whether the file is hidden and the author of the file. File properties differ according to file type. A user
can edit some of these properties in File Explorer.

ACTIVITY 5
Viewing Extended File Properties
Using File Explorer, navigate to LU 2 of the Learner Files folder in the CAT Grade 11 folder.
Select the file The Smart Home and Our Connected Life.docx:
Right-click on the file name, select Properties from the menu options.

Adding, Modifying or Removing Extended File Properties

Check the Read-Only checkbox to set the file to read only.
Navigate to the Details tab.
Select the link Remove Properties and Personal Information.
Select the radio button for the option Remove the following properties from this file.
Click Select All.
Click OK.
Select the file Flower2.JPG:
Right-click on the file name, select Properties from the menu options.
Navigate to the Details tab.
Select the property Authors. Add your name as the image author.
Click OK.
Select the hidden file Lion.JPG:
Right-click on the file name, select Properties from the menu options.
Uncheck the Hidden checkbox so that the file is no longer a hidden file.
Move the file to the folder Super Seven.
Click OK.

Learning Unit 2 Software Page 47

 Exploring CAT: Grade 11

2.3.3 Compressing and Extracting Files and Folders

File Explorer comes with native support for easily compressing (zip) and uncompressing (unzip) files
or folders on a Windows computer.

ACTIVITY 6
Using File Explorer, navigate to LU 2 of the Learner Files folder in the CAT Grade 11 folder.

Using File Compression

Compress the folder Super Seven:
Select the folder Super Seven.
Right-click on the selected folder, select Send to from the options. Select Compressed
(zipped) folder from the displayed options.
Name the compressed folder Wildlife.zip.
The folder Super Seven and the seven images in the folder will now be compressed into
the new file.

Extracting Files
Extract the contents of the compressed file Unsplash internet source of freely usable
images.zip into a folder called Skateboards:
Select the compressed file Unsplash internet source of freely usable images.zip.
Right-click on the selected file, select Extract All… from the options.
In the destination field, replace the text "Unsplash internet source of freely usable images" with
the text "Skateboards".
Click on Extract.
Nine images will be extracted from the compressed file and stored in a new folder called
Skateboards.

2.3.4 Sharing of Files

Quick Reference C – File Explorer - Share

The tools to share files and folders can be found on the Share tab in File Explorer. When a file or
folder is shared to another user, both users have access to the file. Any changes made by one user
will be immediately visible to the other user. A copy is not made of the file which reduces confusion
when multiple, similar copies of a file are created.

Formatting Menu Option or Icon Description

Send Share – Choose an app to share the elected
files
Email – Send the selected items in an email
(files are sent as attachments and folders as
links).
Zip – Create a compressed (zipped) folder
that contains the selected items.
Print – Send the selected files to the printer.

Page 48 Learning Unit 2 Software

Exploring CAT: Grade 11

Formatting Menu Option or Icon Description

Share with Specific people – Sort
Remove access – Stop sharing the selected
item.

EXERCISE 1

1. Before you can download files from the website, you will need to create a folder on your own
hard drive (called the C: drive) on your computer. Create a folder called CAT Grade 11 in your
C: drive.
2. Type in http://www.funworks.co.za/FileDownloads/CATFiles.aspx in the search bar. You will
be taken to the webpage where the Exploring CAT: Grade 11 files are stored for learners.
3. Click on the drop-down arrow next to the Grade 11 folder title. Select Download from the menu
options. A compressed file containing all the files will be prepared for downloading and the file
will be downloaded to your default downloads folder.
4. Navigate to your default download folder. You will notice that the type of file that was
downloaded is a zip file with a very long name filled with numbers. Unzip the files to the
Destination folder CAT Grade 11 on Local Disk (C:).

EXERCISE 2

1. Using File Explorer, navigate to LU 2 of the Learner Files folder in the CAT Grade 11 folder.
2. Add properties to the file Protect Your Data as follows:
2.1. Set the Title detail to be "How to Protect Your Data in a Connected World".
2.2. Set the Author detail to be your name.
3. Compress the three image files Flower1, Flower2 and Flower3 into a single file called
FlowerImages.
4. Create a shortcut to your Alarms & Clock app as follows:
4.1. In LU 2 of the Learner Files folder, create a new folder called Alarms & Clock app.
4.2. Within the folder, create a shortcut to the Alarms & Clock app.
5. Open the document called ComputerManagement, in LU 2 of the Learner Files folder. Answer
the following questions in the appropriate section:
5.1. Provide the name as well as the version of the operating system your computer is using.
5.2. Amahle received a notification to update her print driver. List the steps she must take to
search automatically for and install and updated driver software.

Learning Unit 2 Software Page 49

 Exploring CAT: Grade 11

2.4 Backing up and Archiving Files

2.4.1 Backup
A backup is a copy of data that can be used to restore the original data if the data is lost or damaged.
If a user or organisation experiences data loss due to hardware failure, human error or natural
disaster, a backup can be used to quickly restore that data.
Examples of backups include nightly backups of all files on a computer, or photographs backing up on
a smartphone to the cloud. File servers and databases can also be backed up.

2.4.2 Archives
An archive is data that is kept for long-term retention and used for future reference. Archives contain
data that is not actively used.
Examples of Archives include copies of school reports, tax records and business accounting records.

CHECKPOINT 2

1. 'Read-only' and 'Hidden' are examples of file ...

2. Which program is used to easily view the contents of your computer and manage your files?
3. Using the Open With option to open a file:
3.1. Explain why or when a user would use the Open With option.
3.2. Why would the user tick the check box towards the bottom left-hand corner of the dialog
box, when using the Open With option?
4. A user wants to free up some disk space and a suggestion was made that they archive their
files, as making backups of the files will not have the same result.
4.1. Explain the concepts archive and backups.
4.2. Give ONE example of each concept above that clearly explains the difference between
the two concepts.

2.5 Application Software

2.5.1 Software Licensing models
Software can be divided into common software license models:

• Commercial or Proprietary Software – Copyrighted software developed, usually by a

commercial company, for sale to users. An End User Licence Agreement (EULA) is the legal
agreement between the developer and the user of the software. An example is Microsoft Office
or Microsoft Windows.
• Perpetual license – Software with a non-expiring license, the user does not have to pay for
software support or software updates. An example is Adobe Photoshop Elements 2020.
• Subscription license – Software with this type of renewable license, usually monthly or
annually, have software support and software updates during the period. An example is
Microsoft Office 365.
• Consumptive license – Software with this type of license have a cost based on the user’s
usage. An example is Microsoft Azure.

Page 50 Learning Unit 2 Software

Exploring CAT: Grade 11

• Shareware – Copyrighted software (usually downloaded from the Internet) that the user can
use for a certain number of days on a trial basis before a user pays for the software. Shareware
often has limited functionality or may only be used for a limited time before requiring registration
and payment. An example is WinZip.
• Freeware – Copyrighted software that a user can freely download, install, use and share.
Although freeware is cost free, it is copyrighted and the developer retains his/her right to
intellectual property, so other developers cannot market the software as their own. An
example is Google Chrome.
• Open source software – Software that a user can download, with its source code, to install,
use, inspect, modify, enhance and share. Software that is both free software and open-source
software is known as Free and Open source software (FOSS). An example is Linux operating
system.

2.5.2 Basic System Minimum and Recommended Requirements

The user must consider the system requirements of the software. These requirements are the
necessary specifications that the computer must have for the software to function correctly.
When buying software, a user should consider the minimum and recommended requirements for
the software.

• Minimum Requirements - “have to have” specifications of the computer system, these include
the CPU speed, the amount of RAM, amount of free hard disk drive space and the minimum
Operating System required. The software will not run without these minimum specifications.
• Recommended Requirements - “should have” specifications of the computer system. The
software will have better usability if the recommended specifications are met.
For example: The minimum and recommended system requirements for the iconic game “StarCraft
II”.

Required PC System Requirements:

• Windows®8 (Updated with the latest Service Packs) with DirectX® 9.0c
• 2.6 GHz Pentium® IV or equivalent AMD Athlon® processor
• 128 MB PCIe NVIDIA® GeForce® 6600 GT or ATI Radeon® 9800 PRO video card or better
• 12 GB available HD space
• 1 GB RAM (1.5 GB required for Windows Vista®/Windows® 7 users)
• Broadband Internet connection
• 1024 X 720 minimum display resolution
Recommended PC System Requirements:

• Windows® 10
• Dual Core 2.6Ghz Processor
• 2 GB RAM
• 512 MB NVIDIA® GeForce® 8800 GT/GTS or ATI Radeon® HD 3870 or better

Learning Unit 2 Software Page 51

 Exploring CAT: Grade 11

The recommended requirements are higher than the required requirements, therefore StarCraft II will
have better performance on a computer with the recommended requirements.

2.5.3 Full or Custom Installation

• Full or Complete Install Option – all the required, recommended and optional features of the
software are installed.
• Custom Install Option - all the required features of the software are installed. The user can
individually select the recommended and optional features to install, as per their requirement,
during the install process.

2.5.4 Installing Application Software

A software wizard or setup assistant is a Graphical User Interface (GUI) that that guides a user
through a task by asking the user a series of questions. Based on the user’s responses, the software
will perform a series of actions.

ACTIVITY 7
Install Notepad++
Notepad++ is an application that will be used in coding HTML. The application needs to be
downloaded from the Internet.
Open an Internet browser, and navigate download page of the Notepad++ website:
https://notepad-plus-plus.org/downloads/
Select the latest release of the Notepad++ software from the list, by clicking on the release
name.
On the release download page, select the required 32-bit or 64-bit installer package by clicking
on the Installer link.
Save the target file in LU 2 of the Learner Files folder.
Run the executable file, by double clicking on the downloaded
file in LU 2 of the Learner Files folder.
In the first dialogue window, select English from the drop-down
menu and click OK.
Click Next on the Welcome window.

Page 52 Learning Unit 2 Software

Exploring CAT: Grade 11

Read through the License Agreement and click on I Agree.

Leave the default Destination Folder or Browse to search and locate a folder on your
computer where you would like to install the Notepad++ IDE. Click Next.

If required, select any additional the components you want to install in additional to the
recommended and required components already selected. Click Next.

Learning Unit 2 Software Page 53

 Exploring CAT: Grade 11

Select the Create Shortcut on Desktop check box. Click Install.

The install dialog of the wizard is displayed which shows the progress of the installation. When
the installation is complete. To Launch Notepad++ click Finish. If you do not want to launch
Notepad++ then uncheck the Run Notepad++ checkbox before clicking Finish.

2.5.5 Compatibility issues

No two users' systems are alike; each one has customizations and configuration variations.
Compatibility issues, with software, can occur when there is a new version or an update to the
operating system or when a user installs a device or software package on the computer that causes
software that used to run as expected before the installation or upgrade to no longer run as expected.

2.5.6 Versions, patches and service packs

• Software Version – All software applications have version numbers (series of numbers
separated by periods) or version words associated with each release. This number/word helps
track iterations of the software, including updates and upgrades. For example, version 1.0 is
usually used to represent the initial release of a program.
• Patches – This is a small piece of software published by the developer that is designed to fix a
specific error or bug or flaw in their software program. It can also be used to improve the
operation of their software and correct any security vulnerabilities found after the software was
published.
• Service Packs – This is a collection of patches for a specific software program.

Page 54 Learning Unit 2 Software

Exploring CAT: Grade 11

2.5.7 Updating or Upgrading Software

A software update or software patch, is a free download for an application, operating system, or
software suite that:

• fixes errors, bugs or flaws in the software.

• adds minor software enhancements and compatibility.
• protects against new security risks.
• improves the efficiency of the software.
A software upgrade is a new version of the software that has substantial changes or major
improvements to the software over the previous version. Often a software upgrade requires the
current users of the software to purchase the new version of the software, sometimes at a discounted
price.

2.5.8 Uninstalling Application Software

If a program is no longer being used, or additional space is required by the user, it may be necessary
to uninstall or delete software from the computer.
A user cannot simply delete the unwanted program files from the disk drive, they need to use one of
the following methods to remove the software:

• An Uninstall Wizard created by the software developer. This wizard deletes the files originally
installed and sometimes allows for the option of deleting the associated user data.
• In Windows Settings, under the Apps category, a user has the facility to uninstall Apps &
Features. To uninstall a software package, the user selects the software by name, then clicks
on the associated Uninstall button. The software will be removed from your system by the
operating system.

CHECKPOINT 3

1. The following information is found on a software website, what concept does it illustrate?
Application version 1.0 runs on OS version 1.0

Application version 1.0 does not run on OS version 2.0

1.1. Downloading
1.2. Archiving
1.3. Accessibility
1.4. Compatibility
2. Which of the following statements will always be TRUE regarding open-source software?
2.1. It is free of charge.
2.2. The source code is made available.
2.3. Changes can be made and distributed.
2.4. It is distributed only with new computers.
3. Select the correct term:
3.1. A EULA/AUP is legal agreement between a software author and a user.
3.2. Intellectual property/copyright infringement is used to describe the ownership rights of a
software developer.

Learning Unit 2 Software Page 55

 Exploring CAT: Grade 11

3.3. Linux is a proprietary/FOSS operating system.

4. What should a user do when the trial period of a software product has expired?
5. The following statement was made by one of the participants at the expo:
'Windows 10 has no option to turn off automatic system updates.'

5.1. Give TWO reasons for a software developer to release updates.

5.2. Why would a software developer NOT give a user the choice to disable automatic
updates?
5.3. State ONE potential disadvantage of not being able to disable automatic updates.
6. Give ONE reason why a company or organisation would prefer to use a proprietary software
package (Microsoft Office) instead of an open-sourced, free software package (OpenOffice).
7. Samantha : “My computer is running slow, and I see I have a lot of programs in my program
files folder. Can I just delete the program files?” Respond to the question by giving the steps to
safely remove these programs.

2.6 Utility Programs

Quick Reference D – Windows 10 Utility Programs

Windows 10 Utility software assists the user in organising, maintaining and improving the efficiency of
a computer system.

Utility App Description

Task Scheduler A user can automatically start a program
on their computer, at the specified time.

Page 56 Learning Unit 2 Software

Exploring CAT: Grade 11

Utility App Description

Disk Clean-up A user can decide to remove any
unnecessary files, any temporary files and
any unneeded backup files, to free up disk
space on their computer.

2.7 Software for People with Disabilities

There are several software packages available to assist disabled users.

2.7.1 Screen Readers

Screen readers are software programs that allow blind or visually impaired users to read the text that
is displayed on the computer screen with a speech synthesizer or braille display. A screen reader
links the user to the computer and allows them to hear out loud, everything that is being displayed on
the monitor.

2.7.2 Voice Recognition Software

Voice recognition is an alternative to typing
on a keyboard. It takes a user’s speech and
turns it into text on the screen. Voice
recognition software programs works by
analysing sounds and converting them to text.
A microphone is needed to enable a user to
capture their speech on the computer.
This software can be useful for people who
have limited or difficulty with movements of
the upper limbs. This tool is useful for fully or
partially visually challenged people.
https://www.personneltoday.com/wp-content/uploads/sites/8/2015/05/shutterstock_213119035.jpg

Learning Unit 2 Software Page 57

 Exploring CAT: Grade 11

2.6.3 Zoom Tool

Most software applications have the facility to allow a user to zoom in
closer to the work being displayed (output) on the screen.
A user can choose to zoom in at different magnifications from 100% to
around 500%.
This tool can be useful for people with poor eyesight.

2.7.3 Predictive Text

This input technology is mostly found on mobile phones. The technology allows words to be entered
by a single keypress for each letter. Instead of a user having to type out the whole word, the software
tries to predict the most likely word that you want.
Predictive text allows a user to type faster and to reduce the number of keystrokes or key presses that
they must make, thus helping people who have difficulties typing.

2.7.4 Sticky Keys

Sticky Keys is a feature available with most computers. It is an accessibility feature to aid users who
have physical disabilities. Sticky keys allow the user to press a 'modifier' key such as <Shift>, <Ctrl>,
<Alt> and have it remained active until another key is pressed.
To turn on Sticky Keys, press the <Shift> key
5 times. A window will pop up asking if you
want to turn on Stick Keys. Click Yes. To turn
off Sticky Keys press the <Shift> key 5 times
again.

When Sticky Keys is activated in Windows, a

beep is sounded whenever the <Shift>, <Ctrl>
or <Alt> keys are pressed.

Page 58 Learning Unit 2 Software

Exploring CAT: Grade 11

CHECKPOINT 4

1. What is the main function of utility software?

2. The main task of the Disk Cleanup utility is to …
3. What is the difference between Disk Cleanup and Archiving?
4. Match the feature description in COLUMN A with the feature name in COLUMN B.

COLUMN A Answer COLUMN B

1 An accessibility option that allows a user to press A Screen Reader
key combinations such as <Ctrl>+<Alt>+<Delete>,
one key at a time.
2 A technology used in devices for paralysed users. B Sticky Notes
3 An operating system feature designed to make the C Voice Recognition
computer accessible for blind users. Software
D Magnifier
E Sticky Keys
F Narrator
G Predictive Text

5. How do you activate Sticky Keys?

Learning Unit 2 Software Page 59

 Exploring CAT: Grade 11

Learning Unit 3 HTML Coding

3.1 Understanding Webpages and Websites
A webpage is a file written in HyperText Markup Language (html or HTML). A webpage is accessed
by entering a Uniform Resource Locator (URL) address in a web browser application and may
contain text, graphics, and hyperlinks to other webpages and files.

https://www.microsoft.com/en-za/

A website is made up of several related web pages connected by links called hyperlinks. A
webpage is a single page of information in a website.
If you think of a website as an “Choose Your Own Adventure” book that lets you choose, at the end of
the chapter, which plot of the story you would like to follow (i.e. the book chapters do not follow in
sequence, the reader selects which plot to follow and turns to that chapter in the book). Each
webpage is an individual HTML file with its own Web address (URL). The first page you usually
request at a site is known as the home page; from the home page you follow links to any of the other
connected webpages.

Page 60 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

3.2 HTML Structure

HTML is a language used to create electronic documents, especially pages on the World Wide Web
(WWW) that contain connections called hyperlinks to other pages.
HTML is the standard language for documents that is interpreted by a web browser. All HTML
documents are divided into two main parts: the head and the body.
To build any webpage you will need four primary tags: <html>, <head>, <title> and <body>.
These are container tags that must appear as pairs with a beginning and an ending. A pair consists of
a starting tag and end tag. All end tags are prefixed with the '/' character. For example, <html> and
</html>.
<!--filename html--> Head
<html>
<head>
The title of your webpage.
<title>Demo Web page</title>
Information for search engines.
</head>
Body
<body>
The content of the webpage with includes
formatted
text, images and links to other webpages.
</body>
</html>

Every webpage you see on the Internet, contains HTML code that formats the text and display images
in an easy to read format. Without HTML a browser would not know how to format a page and would
only display plain text with no formatting that contained no links.

3.2.1 HTML Editors

HTML text editors are used to create and modify webpages. HTML codes can be written in any text
editor as long it is saved with an extension “.html”. Some of the popular HTML text editors include:

• Notepad
• Notepad++ IDE
• Wordpad++ IDE
• Microsoft Word
• Sublime Text 3
• Atom
• GeeksforGeeks IDE
For the purposes of your Computer Applications Technology examinations, currently, you will be
required to work with HTML in a TEXT BASED Integrated Development Environment (IDE)
application. All the practical work in this Learning Unit will be done using the Notepad++ IDE.
Instructions for downloading and installing Notepad++ can be found in section 2.5.4 in Learning Unit
2.

Learning Unit 3 HTML Coding Page 61

 Exploring CAT: Grade 11

ACTIVITY 1
Creating a HTML Document
In this activity you will open an empty file in Notepad++, save this file with the .html extension and
close Notepad++.
Open Notepad++.
When Notepad ++
opens, it automatically
creates a new blank
document.

Saving a HTML document

Save the blank document by clicking of the File tab, then Save As... Since this the first time the
document is to be saved, Save As will open. Browse to Learner Files folder.
Open the Learner Files folder, then the + subfolder. Enter blank.html as a file name and click
Save.
You can also save a document under another name by using the Save As menu option.

Closing a HTML document

Close the blank document by clicking of the File tab, then Close.
You can close all open files in Notepad ++ by selecting the Close All option under the File
menu.

ACTIVITY 2
Opening a HTML Web Page Source File
The HTML source code for a webpage can be viewed in Notepad++.
Open Notepad
To open an existing file, click File, then the Open … from the menu options.
Navigate to the file called sample.html in the folder LU 3.
Double click on the file and the file should open in Notepad++ showing the HTML source code.
Scroll through the file to see an example of an HTML file.
Close the document when you are finished.

3.2.2 Viewing a Webpage

You can view what the file sample.html looks like in a web browser. Since the file sample.html is
stored locally on your computer you will not need to connect to the Internet to view your webpage.

ACTIVITY 3
Open File Explorer.
Find the sample.html file saved in LU 3 of the Learner Files folder.

Viewing a HTML Webpage in a Web Browser

Double-click the webpage file so it opens in your default web browser.

Page 62 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

The file is set to open as a web page in a web browser. You can view the HTML code of this file if you
right click on the file and select Notepad++ or open the file in Notepad++ as we previously did.
A web page should be displayed in your web browser as follows:

Viewing a HTML Source Code in a Web Browser

In a web browser navigate to www.funworks.co.za

To inspect the source code of a website:

In the Google Chrome web browser, right click on the website page. Select the menu
option View page source. The webpage source code is displayed in the web browser.

Learning Unit 3 HTML Coding Page 63

 Exploring CAT: Grade 11

In the Microsoft Edge web browser, right click on the website page.

Select the menu option View source. The webpage source code is displayed in the web
browser.

Close the web browser.

Page 64 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

3.3 Basic HTML Tags

HTML requires a defined layout described by tags. Tag attributes are specified inside the opening tag,
as name=value. The value must be inside single or double quotes (double quotes is standard).
The web browser interprets these tags as instructions on how to display the text or images.

Quick Reference A – HTML Basic Tags

TAG Description Example
<html> </html> Every HTML document begins and ends with <html>
the <html> tag. This tells the browser that the
following document is an html file. </html>
<head> </head> The <head> tag contains the title of the <head>
document along with general information about
the file, like the author, copyright, keywords
and/or a description of what appears on the </head>
page.
<title> </title> Appears within the <head> tags and gives the <title>My first
title of the page. Try to make your titles webpage</title>
descriptive, but not more than 20 words in
length. The title appears at the very top of the
browser page on the title tab.
<body> </body> The main content of your page is placed within <body>
the body tags: your text, images, links, tables,
etc. </body>
<body bgcolor=" Sets the background colour of the webpage. <body
ColourName"> bgcolor="yellow">
Note the American spelling of color.
HTML string colour values:
“Black”; “Yellow”; “Red”; “Maroon”;
“Gray”; “Lime”; “Green”; “Olive”;
“Silver”; “Aqua”; “Blue”; “Navy”;
“White”; “Fuchsia”; “Purple”;
“Teal”.
<body text=" Sets the colour of the body text of the webpage. <body
ColourName"> text="blue">
HTML string colour values:
“Black”; “Yellow”; “Red”; “Maroon”;
“Gray”; “Lime”; “Green”; “Olive”;
“Silver”; “Aqua”; “Blue”; “Navy”;
“White”; “Fuchsia”; “Purple”;
“Teal”.
<br/> This is an empty tag and stands alone. Use the <br/>
<br/> tag to insert one or more blank lines.
<!-- --> Include comments into your webpage which <!-- This text
would be hidden to the average browser. cannot be seen by
the user unless
the Source is
viewed.-->

Learning Unit 3 HTML Coding Page 65

 Exploring CAT: Grade 11

ACTIVITY 4
In this activity, you will create your first web page with blue text on a yellow background. Your web
page will include the four primary tags: <html>, <head>, <title> and <body>.

In Notepad++, create a new document with the file name mywebpage.html.

Save the document as mywebpage.html in LU 3 of the Learner Files folder.

Entering Source Code in a HTML webpage

Type the following text into the blank mywebpage.html as shown:
<!-- This text cannot be seen by the user unless the Source is
viewed.-->
<!--mywebpage html-->
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<body bgcolor="yellow">
<body text="blue">
Your webpage content goes here
<br/>
<br/>
Type your name and your class
</body>
</html>

If you have inserted the code correctly then Notepad++ will automatically reformat the source code by
indenting between matching tags and changing the colour of the tags and your text. This is to help
you find errors like a missing tag.

The minus/plus (-/+) sign is a toggle button that allows you to open and collapse each of the tagged
sections.
Click on the - next to the <head> tag, to see the text after the tag is collapsed and the –
changes to a +.

Page 66 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

Save and close the document in LU 3 of the Learner Files folder.

Open mywebpage.html in a web browser so that you can see that you have the webpage
coded correctly.

3.4 Adding HTML Text Tags

The text in the web page can be formatted to be different sizes, heading styles, colours, fonts and
alignment.

Quick Reference B – HTML Text Tags

TAG Description Example
<h1> </h1> <h1>…</h1> to <h6>…</h6>. <h1>Headings</h1>
<h2> </h2> <h1>…</h1> Creates the largest, most <h2>are</h2>
<h3> </h3> important heading. <h3>great</h3>
<h4> </h4> <h6>…</h6> Creates the smallest, least <h4>for</h4>
<h5> </h5> important heading. <h5>titles</h5>
<h6> </h6> Search engines use the headings to <h6>and
index the structure and content of your subtitles</h6>
web pages.
The web browser will render the h1 tag
elements bigger and will make the
elements size smaller as the h number
increases.
<b> </b> Defines bold text. <p>An example of
<b>Bold Text</b></p>
<strong> </strong> Defines strong text, with added semantic <p>An example of
importance*. <strong>Strong
Text</strong></p>

Learning Unit 3 HTML Coding Page 67

 Exploring CAT: Grade 11

<i> </i> Defines italic text. <p>An example of

<i>Italic
Text</i></p>
<em> </em> Defines emphasized text, with added <p>An example of
semantic importance*. <em>Emphasized
Text</em></p>
<del> </del> Defines text with a line through the text <p>An example of
(strikethrough). <del>strikethrough
Text</del></p>
<font size=" NumValue Defines font size for text. <p><font
1-7"> </font> HTML string size range: “1” (smallest) to size="5">Here is a
“7” (largest). size 5
font.</font></p>
The default size of a font is “3”.

<font color= Sets font colour. <p><font color=

"ColourName"> Note the American spelling of color. "Maroon">This text
</font> is
HTML string colour values: maroon.</font></p>
“Black”; “Yellow”; “Red”;
“Maroon”; “Gray”; “Lime”;
“Green”; “Olive”; “Silver”;
“Aqua”; “Blue”; “Navy”;
“White”; “Fuchsia”; “Purple”;
“Teal”.
<font Sets font type. <p><font
face="NameOfFont"> Choose a different font face by specifying face="Garamond">This
</font> any font you have installed. As a web paragraph has had
designer, be aware that if you specify a its font formatted
custom font type and users viewing the by the font
page don't have the exact same font tag!</font></p>
installed, they will not be able to see it.
Instead the chosen font will default to
Times New Roman.
<p> </p> Every time you want to begin a new <p>This text will be
paragraph, use the container paragraph displayed as a
tags. paragraph.</p>
<p Aligns a paragraph to the "left" (default), <p
align="alignment"> "right", "center" or “justify”. align="justify">This
</p> text will be
justified in the web
browser.</p>

*Semantic importance: While <b> and <i> are direct instructions for the web browser to display text as
bold or italic; <strong> and <em> give the text special meaning, and the web browser chooses the
formatting. By default, web browsers display <strong> as bold text and <em> as italic text.

ACTIVITY 5
This activity demonstrates how the text can be formatted in varying sizes, fonts and colours.
In Notepad++, create a new document with the file name formatting.html.
Save the document as formatting.html in LU 3 of the Learner Files folder.

Page 68 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

Formatting Text in a HTML webpage

Type the following text into the blank formatting.html as shown:
<!--Formatting html-->
<html>
<head>
<title>Formatting Text</title>
</head>
<body>

<p><h1>Level 1 Headline</h1> </p>

<p><h2>Level 2 Headline</h2> </p>
<p><h3>Level 3 Headline</h3> </p>
<p><h4>Level 4 Headline</h4> </p>
<p><h5>Level 5 Headline</h5> </p>
<p><h6>Level 6 Headline</h6> </p>

<p><b>Here is bold text.</b> </p>

<p><strong>Here is strong text.</strong></p>
<p><i>Here is italic text.</i></p>
<p><em>Here is text emphasized.</em> </p>
<p><del>Here is text with strikethrough.</del></p>

<p><font size="2">Font Size 2</font></p>

<p><font size="4">Font Size 4</font></p>
<p><font size="6">Font Size 6</font></p>

<p><font color="red">Red Font</font></p>

<p><font color="yellow">Yellow Font</font></p>
<p><font color="blue">Blue Font</font></p>

<p><font face="Times New Roman">Times New Roman Font</font></p>

<p><font face="Arial">Arial Font</font></p>
<p><font face="Impact">Impact Font</font></p>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p align="right">
This paragraph is right aligned on the webpage.
HTML elements tell the browser how to display the content.
HTML elements are represented by tags.
HTML tags label pieces of content such as "heading", "paragraph",
"table".
Browsers do not display the HTML tags, but use them to display the
contents of the page.

Learning Unit 3 HTML Coding Page 69

 Exploring CAT: Grade 11

</p>

</body>
</html>
Save and close the document in LU 3 of the Learner Files folder.
Open formatting.html in a web browser so that you can see that you have the webpage coded
correctly.

3.5 Adding HTML List Tags

HTML offers two ways for specifying lists of information:

• An ordered list which is numbered; 1, 2, 3,…or uses characters; a, b, c, …i, ii, iii,…
• An unordered list uses characters like bullets (small solid circles), open circles and squares.
Each list must be enclosed with either <ul> </ul> tags (unordered) or <ol> </ol> tags and each
item within the list must be enclosed with a list element <li> </li> tags. All lists must contain one
or more list elements.

Quick Reference C – HTML List Tags

TAG Description Example
<ul> </ul> An unordered list. This will list items
using bullets.
<ol> </ol> An ordered list. This will list items
using numbers.
<li> </li> Each list item starts with the <li> tag
and ends with the </li> tag.

Page 70 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

<ul type="TypeName"> Defines the type of bullets used: <h1>An unordered

</ul> Disc - Sets the list item marker to a list:</h1>
bullet (default) <ul type="circle">
Circle - Sets the list item marker to a <li>List item </li>
circle <li>List item</li>
Square - Sets the list item marker to a <li>List item</li>
square </ul>
None - The list items will not be <ul type="square">
marked <li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ol Defines the type of numbering used: <h1>An ordered
type="TypeName"></ol> type="1" list:</h1>
The list items will be numbered with <ol type="A">
numbers (default) <li>This is List
type="A" item number 1</li>
The list items will be numbered with <li>This is List
uppercase letters item number 2</li>
<li>This is List
type="a"
item number 3</li>
The list items will be numbered with
</ol>
lowercase letters
<ol type="i">
type="I"
<li>This is List
The list items will be numbered with
item number 1</li>
uppercase roman numbers
<li>This is List
type="i"
item number 2</li>
The list items will be numbered with
<li>This is List
lowercase roman numbers item number 3</li>
</ol>

ACTIVITY 6
In this activity, you will create a variety of unordered list with different list characters.
In Notepad++, create a new document with the file name shoppinglist.html.
Save the document as shoppinglist.html in LU 3 of the Learner Files folder.

Unordered HTML List with Bullets

Type the following text into the blank shoppinglist.html as shown:
<!--Shopping List html-->
<html>
<head>
<title>Shopping List</title>
</head>

<body>

<h1>Shopping list</h1>

Learning Unit 3 HTML Coding Page 71

 Exploring CAT: Grade 11

<h2>Groceries</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Sugar</li>
</ul>

<h2>Fresh Produce</h2>
<ul style="list-style-type:disc;">
<li>Apples</li>
<li>Tomatoes</li>
<li>Onions</li>
<li>Potatoes</li>
</ul>

<h2>Frozen Foods</h2>
<ul style="list-style-type:circle;">
<li>Ice cream</li>
<li>Fish</li>
<li>Chips</li>
</ul>

<h2>Cold drinks</h2>
<ul style="list-style-type:square;">
<li>Coke</li>
<li>Fanta Orange</li>
<li>Sprite</li>
<li>Gingerbeer</li>
</ul>

<h2>Stationery</h2>
<ul style="list-style-type:none;">
<li>Newspaper</li>
<li>Exam pad</li>
<li>Glue</li>
<li>Scissors</li>
</ul>

</body>
</html>
Save and close the document in LU 3 of the Learner Files folder.
Open shoppinglist.html in a web browser so that you can see that you have the webpage
coded correctly.
Note that each list has a different bullet under a heading. The last list does not have any bullet set for
each item.

Page 72 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

ACTIVITY 7
Creating an ordered list is like an unordered list. You do not need to specify the numbers for the list,
this will be done automatically. If you
In Notepad++, create a new document with the file name krugerpark.html.
Save the document as krugerpark.html in LU 3 of the Learner Files folder.

Ordered HTML List with Numbers

Type the following text into the blank krugerpark.html as shown:
<!--kruger park html-->
<html>
<body>

<h1>Kruger Park Animals</h1>

<h2>The Big Five</h2>

<ol type="1">
<li>Lion</li>
<li>Leopard</li>
<li>Buffalo</li>
<li>Elephant</li>
<li>Rhinoceros</li>
</ol>

Learning Unit 3 HTML Coding Page 73

 Exploring CAT: Grade 11

<h2>Antelope</h2>
<ol type="A">
<li>Common Duiker</li>
<li>Steenbok</li>
<li>Bushbuck</li>
<li>Impala</li>
<li>Kudu</li>
</ol>

<h2>Predators</h2>
<ol type="a">
<li>Wild dog</li>
<li>Black-backed Jackal</li>
<li>Spotted Hyena</li>
<li>Cheetah</li>
</ol>

<h2>Other Mammals</h2>
<ol type="I">
<li>Giraffe</li>
<li>Hippopotamus</li>
<li>Vervet Monkey</li>
</ol>

<h2>Small Mammals</h2>
<ol type="i">
<li>Dwarf Mongoose</li>
<li>Tree Squirrel</li>
<li>Scrub Hare</li>
<li>Porcupine</li>
</ol>

</body>
</html>
Save and close the document in LU 3 of the Learner Files folder.
Open krugerpark.html in a web browser so that you can see that you have the webpage coded
correctly.

Page 74 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

ACTIVITY 8
A list can contain another list and, using matching HTML tags, this can be interpreted as such by the
browser. A list within a list is called a nested list. It is important that the HTML tags are indented to
show the inner list within the outer list.
In Notepad++, create a new document with the file name vitamins.html.
Save the document as vitamins.html in LU 3 of the Learner Files folder.

A Nested HTML List

In HTML code below, highlight the matching tags, each with a different colour.
Write down what you think will be displayed in the web browser.
<!--vitamins html-->
<html>
<body>

<h1>Types of Vitamins</h1>

<h2>Fast facts on vitamins</h2>

<ul>
<li>Vitamin A</li>
<ul>
<li>Fat Soluble</li>
<li>Deficiency may cause night-blindness and
keratomalacia.</li>
<li>Good sources include: Carrots, broccoli, sweet potato,
butter, spinach, pumpkin, egg, apricot and milk.</li>
</ul></li>
<li>Vitamin B
<ul>
<li>Water Soluble</li>
<li>Deficiency may cause beriberi and Wernicke-Korsakoff
syndrome.</li>
<li>Good sources include: Pork, cereal grains, sunflower
seeds, brown rice, oranges, liver, and eggs.</li>
</ul></li>
<li>Vitamin C</li>
<ul>
<li>Water Soluble</li>
<li>Deficiency may cause megaloblastic anaemia.</li>
<li>Good sources include: Fruit and vegetables.</li>
</ul></li>
</ul>

</body>
</html>
Type the text into the blank file called vitamins.html.
If you have inserted the code correctly then Notepad++ will automatically reformat your text by
indenting according to the tags.

Learning Unit 3 HTML Coding Page 75

 Exploring CAT: Grade 11

Save and close the document in LU 3 of the Learner Files folder.

Open vitamins.html in a web browser so that you can see that you have the webpage coded
correctly.

CHECK POINT 1

1. What does HTML stand for?

2. What is an IDE?
3. What are the four primary tags in HTML.
4. What is a hyperlink?
5. Name three common errors that could occur when coding a HTML file.
6. Why is it important to indent your HTML source code?

Page 76 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

7. Do all HTML tags have a matching end tag?

8. Explain the difference between an ordered and unordered list.
9. Give an example when an ordered list would be suitable.
10. Give an example when an unordered list would be suitable.
11. What is a nested list?

EXERCISE 1

1. You are required to finalise the webpage created to provide the “Computer Lab Rules”. In
Notepad++, open the incomplete rules.html webpage, in LU 3 of the Learner Files folder.
2. Add HTML code so that the text “Computer Lab Rules” appears in the browser tab.
3. Change the background colour of the webpage to blue.
4. Change the font colour of all the text on the webpage to white.
5. Format the level 1 heading “Rules for the Computer Lab” as follows:
6. A level 1 heading.
7. Horizontally centred.
8. Edit the unordered list that appears on the web page as follows:
8.1. Change the list to an ordered list.
8.2. Change the font size of all the items
in the list to 4.
9. Save and close the webpage in LU 3 of
the Learner Files folder.
10. Open rules.html in a web browser so that
you can see that you have the webpage
coded correctly.

3.6 Adding HTML Image Tags

An image can improve the design and the appearance of a web page. HTML can use three image
types:

• .gif files are best to use for banners, clip art, and buttons.
• .jpeg files are best to use for photo galleries or artworks.
• .png files have a high-compression rate and transparent colouring, this image format can be
used for any web graphics.

Learning Unit 3 HTML Coding Page 77

 Exploring CAT: Grade 11

Quick Reference D – HTML Image Tags

TAG Description Example
<img Adds an image on a webpage. <img
src="filename"> Every image has a src attribute which src="img_computer.jpg"
tells the browser where to find the alt="Desktop Computer">
image to display.
If not specified, the browser expects to <img
find the image in the same folder as the src="/images/img_smartp
webpage. hone.png"
If images are stored in a sub-folder. The alt="Smartphone">
folder name must be included in the src
attribute.

<img src="name" Displays alternative text when the <img

alt="alternative mouse hovers over the image or when src="missingfile.gif"
text"> the image is not found. alt="Laptop Computer">

<img src="name" Sets the height and width of an image, <img

width="200" height in percentage or absolute value. src="/pictures/mouse.jp
="200"> The attribute values are specified in g" height="100%"
pixels by default. width="100%">
Percentage values are relative to the
parent HTML element (usually the <img
body), which means if you have a src="/pictures/keyboard
parent element like a <body> element .png" height="50"
that is the whole screen (1024x768), width="100">
then an image with a height and width
of 100% will take up that entire body
element (1024x768).
By hard-coding these values, we are
ensuring that the image will only display
50 pixels high by 100 pixels wide, even
if the picture file itself happens to be
much larger. If the dimensions of the
picture are much larger, then we risk
some severe skewing as the browser
tries to shrink our image into our small
box.
<img src=" By default, an image is aligned at the
filename" left side of the page, but it can be
align="left"> aligned to “center” or right using the
“align” attribute.
<p Aligns an image in the "center", can
align="center"><img also be "middle".
src="
filename"></p>
<img src=" Sets the size of the border around an
filename" image. By default, every picture has a
border="1"> border around it. By using the border
attribute, the thickness of the border
can be changed. A thickness of “0”
means that there will be no border
around the picture.

Page 78 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

<hr /> Inserts a horizontal line on the

webpage.
<hr size="3"> Sets size (height) of a line.
<hr width="80%"> Sets the width of a line, in percentage Add in examples using
or absolute value. pixels
also add in height
<hr color= Sets the colour of the line.
"ColourName"> Note the American spelling of color.
HTML string colour values:
“Black”; “Yellow”; “Red”;
“Maroon”; “Gray”; “Lime”;
“Green”; “Olive”; “Silver”;
“Aqua”; “Blue”; “Navy”;
“White”; “Fuchsia”; “Purple”;
“Teal”.

ACTIVITY 9
In Notepad++, create a new document with the file name saflag.html.
Save the document as saflag.html in LU 3 of the Learner Files folder.

Inserting an Image in HTML

In this activity, you will include an image, south-african-flag-small.jpg provided to you in LU 3, in
HTML source code. file. Ensure that the image is in the same folder as your HTML source code.
Type the following text into the blank saflag.html as shown:
<!--saflag html-->
<html>
<head>
<title>Flag of South Africa</title>
</head>
<body>
<body bgcolor="aqua">

<h1>This web page has a blue background</h1>

<h2>It displays an image of the South African Flag</h2>
<img src="south-african-flag-small.jpg">
</body>
</html>
Save and close the document in LU 3 of the Learner Files folder.
Open saflag.html in a web browser so that you can see that you have the webpage coded
correctly.

Learning Unit 3 HTML Coding Page 79

 Exploring CAT: Grade 11

ACTIVITY 10
In Notepad++, create a new document with the file name tictac.html.
Save the document as tictac.html in LU 3 of the Learner Files folder.

Formatting Images in HTML

Images can be formatted to include a border and placed in different positions on the page.
Type the following text into the blank tictac.html as shown:
<!--tictac html-->
<html>
<head>
<title>Noughts and Crosses</title>
</head>
<body>
<h1>Noughts and Crosses</h1>
<hr />
<img src="o_pink.png" width="200" height ="200">
<img src="o_yellow.png" align="right" width="200" height ="200">
<hr width="60%">
<p align="center">
<img src="x_black.png" alt="Click here" width="200" height="200">
</p>
<hr size="5" color="blue">
<p>
<img src="x_red.png" align="right">
<img src="x_green.png" align="left" border="1">
</p>
<p align="center">
<img src="game_over.gif">
</p>
</body>
</html>
Save and close the document in LU 3 of the Learner Files folder.
Open tictac.html in a web browser so that you can see that you have the webpage coded
correctly.

Page 80 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

CHECKPOINT 2

1. The HTML code of a web page contains the following line:

<!-- School information here -->
1.1. What is the purpose of this type of HTML code (tag)?
1.2. What is displayed by this HTML code when the web page is displayed in a browser?
2. What is the purpose of adding the 'Alt' section in the HTML code below?
<img src=''school.jpg'' Alt=''School badge''>
3. What is the connection between the <head> section of an HTML web page and the information
displayed in the browser tab?
4. Identify TWO mistakes in the following HTML code:
</ul>
<li>Item 1</li>
<li>Item 2</li>
<ol>
5. The owner of a business has tried to create a basic website to advertise the current specials.
Study the HTML code below. Explain how you would correct the following mistakes:
<title>
Current specials
<hr />
</title>
<body>
<h1> OUR BEST SPECIALS TO DATE! </h1>
<font colour="red">
Come to our store now and save big!
</font> <br />
</body>
5.1. The horizontal line is not displayed.
5.2. The heading “OUR BEST SPECIALS TO DATE!” should be smaller.

Learning Unit 3 HTML Coding Page 81

 Exploring CAT: Grade 11

5.3. The text “Come to our store now and save big!” should be displayed in a red font, but it is
displayed in black.
6. The ACTUAL size of an image called "google.jpg" is 1080x900. This image should display
smaller when the following HTML code is executed:
<img src="google.jpg" width="540" height="50" />
6.1. How does the image size specified in the HTML code affect the original size of the image
saved on a disk?
6.2. Why does the displayed image appear distorted?

EXERCISE 2

1. Your teacher attempted to create a webpage to promote rhino awareness at school. He needs
your expertise to fix the page so that it displays correctly. In Notepad++, open the incomplete
rhino.html webpage, in LU 3 of the Learner Files folder.
2. Set the title of the webpage to “Adapted from www.savetherhino.org”.
2.1. Format the font of the title as Italics.
3. Add the image rhinologo.png to the webpage, above the text “From Save the Rhino
International”.
3.1. If the image cannot be displayed the text “www.savetherhino.org” should appear.
3.2. Align the image to the left.
4. Add the necessary tags and attributes in order to display the heading “From Save the Rhino
International” formatted in a Heading 1 style.
5. The sentence “We always love to hear from our rhino supporters.” Add the tags to modify the text
as follows:
5.1. Centre this text.
5.2. Display this text as strong.
5.3. Start on a new line.
6. After the sentence starting with “Save the Rhino International …”, add a horizontal line with a size
of 3 and a green colour.
7. The paragraph “The current rhino poaching crisis...” Add the tags to modify the text as follows:
7.1. Centre this paragraph.
7.2. Display the text as Font Size 2.
7.3. Display this text as Courier New.
7.4. Display the text in green.
7.5. Add a horizontal line, after the paragraph, with a size of 3 and a green colour.
8. Change the list of Rhino Species to be displayed as an unordered list. This list must display the
species using disc bullets.
9. Under both the headings “Black Rhino...”and “White Rhino...”, add the HTML tags to bold the
following words:
9.1. “Description:”
9.2. “Weight:”
9.3. “Population:”
9.4. “Location:”

Page 82 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

9.5. “Habitat:”
9.6. “Scientific name:”
10. Add HTML tags to display the Species-Black-Credit-Phill-Perry.jpg image as follows:
10.1. The image should appear next to the text “Black Rhino...”
10.2. If the image cannot be displayed the text “Black Rhino” should appear.
10.3. Change the alignment of the image to the right of the webpage.
10.4. Change the image to have a display width of 384 and height of 256.
10.5. Add a border of the size 1 to the image.
11. Add HTML tags to display the Species-White-Credit-Steve-and-Ann-Toon.jpg image as
follows:
11.1. The image should appear next to the text “White Rhino...”
11.2. If the image cannot be displayed the text “White Rhino” should appear.
11.3. Change the alignment of the image to the right of the webpage.
11.4. Change the image to have a display width of 384 and height of 256.
11.5. Add a border of the size 1 to the image.
11.6. Above the heading “Rhino Poaching”, add a horizontal line with a size of 3 and a green
colour.
12. Add HTML tags to display the sentence, “Two rhino species have”, as emphasised text.
13. Add HTML tags to display the RhinoPoachingStats2007-2018.jpg image, below the sentence,
“Two rhino species have”, as follows:
13.1. The image should appear under a bold heading “African rhinos poached 2006-2018”
13.2. If the image cannot be displayed the text “From South Africa” should appear.
13.3. Change the alignment of the heading and image to the center of the webpage.
13.4. Change the image to have a display width of 500 and height of 332.
14. At the end of the webpage, add a horizontal line with a size of 3 and a green colour.
15. Your final webpage should look like the following:

Learning Unit 3 HTML Coding Page 83

 Exploring CAT: Grade 11

16. Save and close the webpage in LU 3 of the Learner Files folder.
17. Open rhino.html in a web browser so that you can see that you have the webpage coded
correctly.

Page 84 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

3.7 Adding HTML Link Tags

One of the advantages of web pages is that they link to other pages either within the same web site or
to another web site.

Quick Reference E – HTML Link Tags

TAG Description Example
<a href="URL">Link Creates a hyperlink, clicking <a href="
Text</a> on the link text will send you http://www.funworks.co.za/">
to the specified address. Funworks link text</a>
URL: specifies the destination
address of the link.
Link Text: is the visible
words of the link for users to
click on.
Clicking on the Link Text
will send the user to the
specified webpage address.
<a href="URL"><img Creates an image link, <a
src="imagefile"></a> clicking on the image will href="://www.funworks.co.za/">
send you to the specified <img src="funlogo.png"></a>
address.
URL: specifies the destination
address of the link.
ImageFile: is the visible
image of the link for users to
click on.
Clicking on the Image will
send the user to the specified
webpage address.
<a Creates a HTML link <h2 id="Prices">Price
id="bookmark"></a> bookmark which allows users List</h2>
to jump to specific parts of a
webpage.
To make a bookmark, first
create the bookmark, and
then add a link to it.
<a href= When the link is clicked, the <a href="#Prices">Jump to
"#bookmark"></a> webpage will scroll to the Price List</a>
location of the bookmark on
the same webpage.

ACTIVITY 11
In Notepad++, create a new document with the file name mylinks.html.
Save the document as mylinks.html in LU 3 of the Learner Files folder.

Inserting Links in HTML

Type the following text into the blank mylinks.html as shown:
<!--my links html-->
<html>

Learning Unit 3 HTML Coding Page 85

 Exploring CAT: Grade 11

<head>
<title>My Links</title>
</head>
<body>
<a href= "#Links"> <h1>Links</h1></a>
<h1>Online dictionaries and Internet search engines for Information
Technology</h1>
<a href="https://computer.howstuffworks.com/"><img
src="detective.png"></a>

<a name="Links"></a><h3>Links</h3>
<body>
<p>Click on the following links to find definitions for computer
terms:</p>
<p><a href = "https://techterms.com/">TechTerms - The Tech Terms
Computer Dictionary</a></p>
<p><a href =
"https://www.computerhope.com/jargon.htm">ComputerHope - Computer
terms, dictionary and glossary</a></p>
Two more useful dictionaries are <a href =
"https://www.techopedia.com/dictionary">Technology Dictionary</a>
and <a href = "https://www.webopedia.com/">Webopedia Online Tech
Dictionary</a>

</body>
</html>
Save and close the document in LU 3 of the Learner Files folder.
Open mylinks.html in a web browser so that you can see that you have the webpage coded
correctly.

Page 86 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

CHECKPOINT 3

1. Give an example of a program (NOT a website) that can be used to edit HTML files.
2. What is the relationship between a web page and a website?
3. What is the difference between www and the Internet?
4. Indicate whether the following statements are TRUE or FALSE. Correct the statement if it is
FALSE. Change the underlined word(s) to make the statement TRUE.
4.1. HTML is a markup language used to create websites.
4.2. A hyperlink can be used to navigate on web pages and websites.
4.3. A comment in HTML code will appear after all the tags when the web page is displayed in
the browser.

EXERCISE 3

1. You are required to finalise the webpage created to provide the “Indoor Air Pollution”. In
Notepad++, open the incomplete 17goals.html webpage, in LU 3 of the Learner Files folder.
2. Display the text “The Global Goals” in the browser tab.
3. Add HTML tags to display the goals.png image in LU 3 of the Learner Files folder.
3.1. Place the image above the paragraph starting “In 2015, world...”
3.2. Align the image to the centre.
4. Insert a line break between the paragraph of text and the heading “The 17 Goals”.
5. Insert a horizontal line, above the heading “The 17 Goals”, with the following properties:
5.1. The line must only be 60%
5.2. The line must be the colour blue.
6. Increase the size of the heading “The 17 Goals”.
7. Add HTML tags to display the 2030goals.jpg image as follows:
7.1. Change the image to have a display width and height of 200.
7.2. Change the alignment of the image to the right of the webpage.
7.3. Add a border of the size 3 to the image.
8. Change the unorder list to be an ordered number list of the type 1, 2, 3…
9. Center align the final paragraph under the second horizontal line.
10. Insert a link on the words “Convention on the rights of the Child” that links to the document
UN0332751.pdf found in LU 3 of the Learner Files folder.
11. Add a hyperlink to the words “Get Involved” to link to the website www.globalgoals.org.
12. Your final webpage should look like the following:

Learning Unit 3 HTML Coding Page 87

 Exploring CAT: Grade 11

13. Save and close the webpage in LU 3 of the Learner Files folder.
14. Open 17goals.html in a web browser so that you can see that you have the webpage coded
correctly.

EXERCISE 4

1. You are required to update the webpage created to provide the “Top 20 Songs”. In Notepad++,
open the incomplete music.html webpage, in LU 3 of the Learner Files folder.
NOTE: http://top40sa.co.za/ currently provides two Top 40 Charts, you may use the information
from any Chart list website as your source. You will need to download an image to use at the
bottom of the webpage for your hyperlink.
2. Display the text “Top 20 Songs” in the browser tab.
3. Change the background colour of the webpage to black.
4. Change the font type of all the text on the webpage to ”Verdana” and set the font colour to white.
5. Format the text “Top 20 Songs” as a level 1 heading.
6. Add tags to the sentence “Chart last updated” to appear as emphasised. Update the date to
reflect the
7. Add a white horizontal line with a width of 80%, above and below the comment “<!--list the
current Top 20 Songs-->:”.
8. Find a website that displays the latest South African Top Songs.
8.1. Update the “Chart last updated:” to include the date of the date of the chosen Chart.
8.2. Below the comment “<!--list the current Top 20 Songs-->:”, before the added horizontal line.
Add the HTML tags to display an ordered number list of the type 1, 2, 3…of the current
Top 20 Songs.
8.2.1. Display the song title as Font Size 5.
8.2.2. Display the Artist(s) as the default Font Size.
9. Below the comment “<!--Link an image to the Chart List website-->”:
9.1. Add the HTML tags to insert a sentence describing the Chart website used as your
source.

Page 88 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

9.2. Add the HTML tag to insert a blank line between the text and the image.
9.3. Add the HTML tags to display an image hyperlink to the Chart website you used as your
source of information.
9.4. Add the HTML tag to resize the hyperlink image to 25% of the webpage width.
10. Your final webpage should similar to the following:

11. Save and close the webpage in LU 3 of the Learner Files folder.
12. Open music.html in a web browser so that you can see that you have the webpage coded
correctly.

3.8 Debugging HTML Code

Bugs are mistakes in code which causes the code (website) not to be displayed, or link, as planned.
Debugging is a problem-solving process of finding and fixing bugs in the code.
Indentation of code is the placement of text farther to the right or left of the surrounding text, making
it easier to understand the code’s structure.

Learning Unit 3 HTML Coding Page 89

 Exploring CAT: Grade 11

3.8.1 Common HTML bugs

• Using the wrong header tag.
• Closing and opening tag(s) are switched.
• Not closing a tag.
• Closing tags out of order.
• Spelling a tag name wrong.
• Not placing content inside a tag.
• Not placing a list item inside a type of list element tag.
• Not placing quotes around attributes values.
• Not placing the equals sign between attribute name and value.
• Referencing the wrong file path for an image.

3.8.2 Strategies for debugging HTML code

• Looking for missing tags.
• Figuring out what section of the code has the problem (making the problem smaller).
• Removing sections to see which section is causing problems.
• Thinking about when the code last worked and what code had been added since then.
• Asking a friend for help.

ACTIVITY 12
You are required to find the bugs in the code of the webpage “Debugging Text”. In Notepad++,
open the debugtext.html webpage, in LU 3 of the Learner Files folder.
Line numbers are included to identify each line of code.
1. <!--Debugging Text Formatting html-->
2. <html>
3. <head>
4. <title>Debugging Text</title>
5. </head>
6. <body>
7. <h3>Heading</h1>
8. <ol> <li> Item 1</li> Item 2 <li> Item 3</li> </ol>
9. </body>
10. </html>

Debugging Non-matching tags in HTML

The heading text “Heading” does not display correctly due to the incorrect opening tag <h3>
which does not match the closing tag </h1>:
Navigate to line 7 of the code; correct the opening tag <h3>, by replacing the tag with
<h1>.
The code should now appear as follows:
<h1>Heading</h1>

Debugging Missing Tags in HTML

The second item on the list does not have a list number:
Correct the list by separating the lines of code and indenting the list items. Navigate to line
8 of the code; press Enter after <ol>; press Enter after </li>; press Enter after Item
2; press Enter after </li>.
Indent the new lines of code – lines 9, 10 and 11.

Page 90 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

Correct the Item 2 list by typing in the missing list item tags <li>Item 2</li>.
The code should now appear as follows:
<ol>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ol>
Save and close the document in LU 3 of the Learner Files folder.
Open debugtext.html in a web browser so that you can see that you have correct the webpage
code correctly.

ACTIVITY 13
You are required to find the bugs in the code of a webpage. In Notepad++, open the
debugfashion.html webpage, in LU 3 of the Learner Files folder.
1. <!--Debugging fashion html-->
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1>Five hot upcoming designers</h1>
7. by Bongani Tau, Business Insider SA
8. Otsile Sefolo
9. <li>Bi-Parel, Kumkani, Bespoke </li>
10. <li>Beachcult, Heart & Heritage</li>
11. <break>
12. www.businessinsider.co.za/5-hot-new-sa-designers-2018-6 Link
13. </body>
14. </html>

Debugging Text Formatting Errors in HTML

The heading text “by Bongani Tau, Business Insider SA” does not display as a Heading as the tags
are missing:
Navigate to line 7 of the code; add the opening tag <h2> and the closing tag </h2> to
format the text as Heading 2.
The code should now appear as follows:
<h2>by Bongani Tau, Business Insider SA</h2>

Debugging List Tag Errors in HTML

The item list does not have the correct tags to display the list correctly:
Correct the list by separating the lines of code and indenting the list items.
Navigate to line 8 of the code; add <ol>; press Enter after <ol>.
Navigate to line 15 of the code; add </ol>; press Enter after </ol>.
Add the tags <li> </li> to each item in the list.
The code should now appear as follows:

Learning Unit 3 HTML Coding Page 91

 Exploring CAT: Grade 11

<ol>
<li>Otsile Sefolo</li>
<li>Bi-Parel</li>
<li>Kumkani</li>
<li>Bespoke </li>
<li>Beachcult</li>
<li>Heart & Heritage</li>
</ol>

Debugging Link Tag Errors in HTML

The hyperlink “link” does not have the correct tags to display the text as a clickable
hypertext:
Navigate to line 17 of the code; add the opening tag <a href = https://" before the
website address and the closing tag "> after the website address.
Add the tag </a> to format the “Link” a clickable hyperlink.
The code should now appear as follows:
<a href = "https://www.businessinsider.co.za/5-hot-new-sa-
designers-2018-6">Link</a>
Save and close the document in LU 3 of the Learner Files folder.
Open debugfashion.html in a web browser so that you can see that you have correct the
webpage code correctly.

ACTIVITY 14
You are required to find the bugs in the code of a webpage. In Notepad++, open the
debugimages.html webpage, in LU 3 of the Learner Files folder.
1. <!--Debugging images html-->
2. <html>
3. <head>
4. <title>Fast Cars</title>
5. </head>
6. <body>
7. <body bgcolour="Silver">
8. <h1>Six Fastest Cars</h1>
9. <a href="https://www.themanual.com/auto/fastest-cars-in-the-
world/"></a>
10.
11. <ul type=”block”>
12. <h3>Bugatti Chiron Super Sport 300+</h3>
<img src="" width="50%" height ="50%" border="1" alt="Bugatti Chiron
Super Sport 300+">
13. <p>489 km/p</p>
14. <li>
15. <h3>Hennessey Venom F5</h3>

Page 92 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

16. <img src="hennesseyvenomf5.jpg" border="1" alt="Hennessey Venom

F5">
17. </li>
18. <p>484 km/h</p>
19. <li>
20. SSC Tuatara</h3>
21. <img scr=".\car_images\tuatara.jpg" border="1" alt="SSC Tuatara">
22. </li>
23. <p>483 km/h</p>
24. <li>
25. <h3>Koenigsegg Agera RS</h3>
26. <img src".\car_images\KoenigseggAgeraRS.png" width="1024" height
="540" border="1" alt="Koenigsegg Agera RS">
27. <p>447 km/h</p>
28. </li>
29. <li>
30. <h3>Hennessey Venom GT</h3>
31. <img src=".\car_images\hennesseyvenomgt.jpg" border=1
alt="Hennessey Venom GT">
32. <p>436 km/h</p>
33. </li>
34. <li>
35. <h3>Bugatti Veyron Super Sport</h3>
36. <img src=".\car_images\bugattiveyron.jpg" border="1" alt="Bugatti
Veyron Super Sport">
37. <p>431 km/h</p>
38. </li>
39. </ul>
40. </html>

Debugging Tag Attribute Errors in HTML

The webpage background colour does not display silver as it is coded:
Navigate to line 7 of the code; correct the tag attribute spelling of bgcolor.
The code should now appear as follows:
<body bgcolor="Silver">
The hyperlink to the website does not display on the webpage:
Navigate to line 9 of the code; add the words “The Manual” between the > for the link
tag and </a> to display text on the webpage for the link.
The code should now appear as follows:
<a href="https://www.themanual.com/auto/fastest-cars-in-the-
world/">The Manual</a>
The unordered list does not display items with a square bullet:
Navigate to line 11 of the code; correct the tag attribute to square.
The code should now appear as follows:
<ul type="square">

Debugging Link Tag Errors in HTML

The unordered list does not display six items:
The first item is not included as a bulleted item, add the missing opening list tag <li> as
a new line 12.
The first item is not included as a bulleted item, add the missing closing list tag </li> as
a new line 16.

Learning Unit 3 HTML Coding Page 93

 Exploring CAT: Grade 11

The speed of “Hennessey Venon F5” is not included in the item. Navigate to line 20, move
the closing list tag </li> to after the speed “484 km/h”.

Debugging Image Tag and Attribute Errors in HTML

The image for the “Bugatti Chiron Super Sport 300+” does not display as the image file name is
missing:
Navigate to line 14 of the code; add the path and file name between the “” of the image
attribute.
The code should now appear as follows:
<img src=".\car_images\bugattichiron.jpg"
The image for the “Hennessey Venom F5” does not display as the image file is not in the same
folder as the webpage:
Navigate to line 19 of the code; add the path of the image, .\car_images\ to the image
file name attribute.
The code should now appear as follows:
<img src=".\car_images\hennesseyvenomf5.jpg"
The image for the “SSC Tuatara” does not display as the tag to display an image is spelt
incorrectly:
Navigate to line 24 of the code; current the spelling of the image attribute.
The code should now appear as follows:
<img src=".\car_images\tuatara.jpg" border="1" alt="SSC Tuatara">
The image for the “Koenigsegg Agera RS” does not display as the tag to display an image is
missing the =:
Navigate to line 29 of the code; add “=” to the image attribute, between scr and “.
The code should now appear as follows:
<img src=".\car_images\bugattichiron.jpg"
The “Koenigsegg Agera RS” image border attribute value is missing the “”:
Navigate to line 32 of the code; add “” to the image attribute, on either side of the value 1.
The code should now appear as follows:
border="1"
The image for the “Bugatti Veyron Super Sport” is too large for the webpage:
Navigate to line 39 of the code; add the image attributes to change the size of the image
width=960 and height=540.
The code should now appear as follows:
width="960" height ="540"
Save and close the document in LU 3 of the Learner Files folder.
Open debugimages.html in a web browser so that you can see that you have correct the
webpage code correctly.

Page 94 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

Learning Unit 3 HTML Coding Page 95

 Exploring CAT: Grade 11

EXERCISE 5

1. You are to find the mistakes in a given webpage. In Notepad++, open the findmistakes.html
webpage, in LU 3 of the Learner Files folder.
2. Format the code to make it easier to read, by adding new lines and indentation.
3. Fix all the bugs so that your page matches the following webpage:

Page 96 Learning Unit 3 HTML Coding

Exploring CAT: Grade 11

4. Save and close the webpage in LU 3 of the Learner Files folder.

5. Open findmistakes.html in a web browser so that you can see that you have the webpage
coded correctly.

Learning Unit 3 HTML Coding Page 97