Activity 4.2: 4.3. HTML Basics

UNIT-4 Web Development
Web development is the actual creation or building of websites while website

design deals with defining the layout and overall look of the website. Websites can
be developed using a WYSIWYG (What you see is what you get) software like
Adobe Dreamweaver. Simple text editors such as Notepad are the other alternative
software to develop websites. Though developing webpages using simple text
editors is a little more difficult than WYSIWYG software, it is more effective in
enabling the learner to master the language.
Activity 4.2
1. Describe the purpose of website design.
2. Discuss with your classmates the guidelines for website design.
3. Take the website of UN Women (https://www.unwomen.org/ ) and eval-
uate the website in a group using the guidelines discussed above. Then,
present the result of your evaluation including suggestions for areas of
improvement for the website.
4. Design a website layout on paper for your school taking the guidelines
given above into consideration.
4.3. HTML Basics
HTML is a markup language that is used to create webpages. The different elements
of a webpage such as headings, tables, paragraphs, images, and others are defined
using the predefined set of markup tags of HTML.
HTML has gone through multiple revisions since its invention in 1989. The current
version of HTML is HTML5.
HTML documents can be prepared using simple text editor software such as
Notepad. The documents are saved with a “.html” extension. For example, home.
html is a valid file name for an HTML document or a webpage.
4.3.1 HTML Tags and Elements
HTML tags are a set of predefined names enclosed in angle brackets. Each HTML
tag has its specific meaning, and web browsers are designed to interpret or render
HTML tags according to their intended purposes. Sample HTML tags and their
meanings are shown in Table 4.1.
80 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK
Table 4.1 Sample HTML tags
Tag Name Meaning

<b> Bold
<p> Paragraph
<i> Italic
<h1> Heading
Links
Visit the following webpage for the list of all html tags:
https://www.w3schools.com/tags/default.asp
HTML elements are components of an HTML document and normally have

a <start tag> followed by content and an </end tag>. HTML elements are the
building blocks of a webpage. Figure 4.3 shows some examples of HTML elements
and their outputs on the browser.
HTML Code
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<b>This is a bold text</b>
<i>This is an italic text</i>
Output on the Web Browser
This is a heading
This is a paragraph
This is a bold text This is an italic text
Figure 4.2 HTML elements
Notes
In Figure 4.3 that while the heading and the paragraph elements are
displayed on a separate line each, the bold and italic texts are displayed
next to each other. This is because the browser inserts a new line every
time it finds HTML elements like <h1> and <p>, but it doesn’t insert
new lines for <b> and <i> HTML elements.

Activity 4.3
• Write an HTML document that has two paragraphs.
Though a significant majority of HTML elements conform to the <start tag>
content </end tag> format, there are some HTML elements that have a different
format. These HTML elements are known as void elements. The following table
shows the format of void elements and their meanings. Void elements do not have
an end tag.
Table 4.2 Void elements
HTML element Meaning

<br> Inserts a new line
<img> Inserts an image
<hr> Inserts a horizontal line
Notes
Note that the <img> element needs an attribute that indicates the
address of the image for the browser to insert the image into the
webpage. An example of how to insert an image is given in Section
4.3.3

HTML Code
<hr >
<p>This is a <br> paragraph </p>
<hr >
Figure 4.3 Inserting horizontal and new lines
Notes
Note that the two horizontal lines placed above and below the
paragraph are the result of the two <hr > elements. Also, note that the
text “paragraph” is shown in a new line because the <br > element is
inserted right before it, inside the <p> element.
Activity 4.4
• Create a webpage that has three paragraphs enclosed by horizontal lines.
4.3.2 Structure of HTML Documents
All HTML documents or webpages have a common structure. What changes from
one webpage to another is what goes inside the <body> and the <head> sections
of HTML documents. Figure 4.2 shows what the structure of HTML documents
looks like in HTML5.

Figure 4.4 Structure of an HTML document
Notes
<!DOCTYPE html>: this element indicates the type of the document.
<html> …</html>: represents the entire document, and it is divided
into two major sections: the head (<head>..</head>) and the body
(<body>…</body>) sections.
<head>..</head>: this part of the HTML document is used to keep all
the information about the webpage such as the page title.
<body>…</body>: is the part of the HTML document where the
content of the webpage is kept. Everything that is shown in the web
browser, when the webpage is displayed, is what is contained in this
part of the HTML document.
Activity 4.5
• Open a webpage from the Internet. Right-click on any area of the webpage
and click on the “View page source” option. Then, after the complete
HTML code is displayed, identify those tags that you are familiar with,
and explore more about those that you do not recognize.
4.3.3 HTML Attributes
HTML attributes are used to define more properties to HTML elements. HTML
paragraphs, for example, are left-aligned by default. However, if a paragraph is

needed to be presented with the texts aligned to the right, the “align” attribute
should be used. Attributes are written inside the start tag with attribute-value pairs
(attribute=value). Figure 4.4 shows how the text of a paragraph is aligned to the
right using the “align” attribute.
HTML Code
<h1>This is a heading</h1>
<p align=”right” > This is a paragraph </p
This is a heading
This is a paragraph
Figure 4.5 HTML “align” attribute
Attributes are normally optional to many of the HTML tags. However, there are
some HTML elements that cannot function as intended without the use of some
attributes. The <img> HTML element is one such example. The <img> element
should have the “src” attribute, which refers to the name and location of the actual
image that is required to be inserted into the webpage. See the following example.
HTML Code
<img src=”derartu tulu.jpg” >
Figure 4.6 <img> HTML element

Notes
Note that the example in Figure 4.6 assumes that the image file and the
HTML file are located in the same folder.
Activity 4.6
1. Write an HTML element that displays a heading with the text right-
aligned.
2. Write an HTML document that has three images each placed in a
separate line.
The other HTML element that uses the “src” attribute is the <video> element.
<video> element is used to add a video to a webpage as shown in the following
example.
HTML Code
<video width=”320” height=”200” controls
src=”Country Landscape.mp4” >
</video>
Figure 4.7 <video> HTML element

Notes
The meaning of the attributes in the <video> element is given as follows:
The controls attribute adds controls like play, pause, and volume. Note
that no value is assigned to the controls attribute.
The width and height attributes control the width and height of the
video on the webpage depending on the value given.
The src attribute is used to refer to the file name of the video.
Activity 4.7
1. Get a short MP4 video and put it inside a folder.
2. Create an HTML document in the same folder and add a <video> ele-
ment in the HTML document to display the video that you just added to
the folder.
3. Open the HMTL document and see if the video opens.
4. Change the values of the height and width attributes and observe the
differences on the webpage. Observe also the change on the video when
the controls attribute is removed.
4.4. HTML Links
HTML links are used to navigate from one webpage to another or from one part
of a webpage to another. The links could come in the form of text or images and
are normally known as hyperlinks. Hyperlinks can easily be distinguished by the
hand symbol that the mouse cursor is turned to when the mouse is hovering over
the hyperlinks.
4.4.1 Links to other Pages
The anchor tag (<a>) is used to create hyperlinks. An HTML element that is formed
from an anchor tag has the following format:

<a href =
=”URL”>
URL > clickable text </a>
This is the part of the

hyperlink that will
This is the anchor tag. be visible to the user
when the webpage is
href is the attribute URL stands for
displayed on the web
that the URL of the Uniform Resource
browser. When this is
destination web- Locator. It is used to
clicked, the user will
page is assigned to. reference the address
be redirected to the
of the linked web-
given URL.
page.
Figure 4.8 Format of HTML links
The example in Figure 4.9 shows how a link to Google is created and what the
hyperlink looks like when it is displayed on the web browser.
HTML Code Output on the

Web Browser
<a href=”http://www.google.com”>Google</a> Google
Figure 4.9 Defining a link to Google
Notes
Note that it is only the clickable link that is displayed when the webpage
is displayed on the browser. If the user clicks on Google, the user is
moved to Google’s webpage. That is because the URL of Google is
given as a value to the href attribute.
Another important attribute of the anchor tag is the “target” attribute. The value of
the “target” attribute determines where the linked document is displayed. See the
following table for the meaning of each value of the “target” attribute.
Table 4.3 The “target” attribute and its values
Value Meaning
_self The webpage is displayed in the same window/tab. (Default)
_blank The webpage is displayed on a separate window/tab.

Activity 4.8
1. Using Notepad, create an HTML document that has links to Ethiopian
Airlines, ethio telecom, and Commercial Bank of Ethiopia using the
following URLs:
https://www.ethiopianairlines.com
https://www.ethiotelecom.et
https://www.combanketh.et
2. Modify the HTML code you just created above so that the pages are
displayed in a new tab.
In addition to texts, images also can be used as links that users can click on to go
to a specified webpage. To use images as a link, simply embed the image element
inside the anchor tag as shown in Figure 4.10.
HTML Code Output on the

Web Browser
<a href=”http://www.google.com”
target=”_parent”>
<img src=”google.png”>
</a>
Figure 4.10 Image HTML link
Notes
Note that the image element is placed between <a> and </a>. Also
note that a relative URL, as opposed to an absolute URL, is used to
reference the “google.png” image. The assumption in the way the URL
is given is that the image and the current webpage are found under the
same folder.
Absolute URL: is a URL that includes every element of a URL such
as the protocol, the hostname, as well as path of the webpage. In other
words, it will have a form such as this:
http://www.somewebsite.com/somefile.html
Relative URL: is a path given relative to the location of the current

webpage. Example: somedirectory/somefile.html
Activity 4.9
• Redo the first question of Activity 4.8 using three images as hyperlinks.
4.4.2 Links to Page Sections
Hyperlinks can be created not only to establish links to other pages, but also to
different parts, or sections of the same page. This is especially useful in a webpage
that has a large size content. Readers can easily go to different sections of the page
without having to scroll up and down.
To create such types of links, the <a> tag is used in two different ways: in
designating names to specific locations and in creating links to the locations from
other places on the same page. While the “name” attribute is used to designate a
name to a location, the “href” attribute is used to create links to the locations. See
the following example.
<h3>Section One
<a name=”section_one”></a>
</h3>
.
.
.
.
<a href=”#section_one”>Go to section one</a>
The HTML element you see at the bottom of the above code creates the Go to
section one link. If this link is clicked, the user is moved back to the top of the
webpage. (Note that in order to see this effect the webpage should be long enough
that the link and the top of the document cannot be seen on one screen.)
Notes
Note also that the way the value to the href attribute is given. The value
is given as the # symbol followed by the name of the section.

Activity 4.10
1. Create three HTML documents in the same folder. Then create a link in
each of the HTML documents to all the others so that one can access all
the pages by simply opening only one of them.
2. Create a webpage that has a content that is grouped into at least three
sections and then create:
a. a link at the end of each section to the top of the document.
b. a link at the beginning of each section to the beginning of all the
other sections. (Note that the top of the document will be the same
as the beginning of section one)
4.5. HTML Tables
An HTML table is used to organize data in terms of rows and columns. Tables are
one way of organizing contents or defining a layout for contents in a webpage. The
major HTML tags used for creating tables and their meanings are presented in the
following table.
Table 4.4 HTML tags used for creating tables
HTML Tags Meaning

<table> Used to define the tables
<th> Used to define table headers
<tr> Used to define table rows
<td> Used to define data cells
The number of rows of a table is determined by the number of <tr> elements that
the <table> has while the number of columns is determined by the number of <td>
elements that are found in each <tr>. The example in Figure 4.5 creates a table with
3 columns and 3 rows.

HTML Code
<table border=1>
<tr>
<th>Mountain Name</th>
<th >Elevation</th>
</tr>
<tr>
<td>Ras Dashen</td>
<td>4,620 m</td>
</tr>
<tr>
<td>Tullu Dimtu</td>
<td>4,377 m</td>
</tr>
<tr>
<td>Guge</td>
<td>4,200 m</td>
</tr>
<tr>
<td>Amba Alagi</td>
<td>3,949 m</td>
</tr>
</table>
Mountain Name Elevation
Ras Dashen 4,620 m
Tullu Dimtu 4,377 m
Guge 4,200 m
Amba Alagi 3,949 m
Figure 4.11 HTML table

Notes
Note the following points from Figure 4.11:
• The table has a “border” attribute, which is assigned the value 1.
This adds a border to the table when displayed on the web browser as
shown in the example. If the border attribute is not used, the data will
be displayed in the same way but without a border.
• The information in the table is about some of the mountains found
in Ethiopia.
Activity 4.11
1. Design a table that should look like the following when displayed on the
web browser.
column 1 column 2 column 3 column

4
1 2 3 4
2 4 6 8
3 6 9 12
4 8 12 16
2. Modify the table you designed in the first activity so that the output on
the browser will look something like the one shown below.
column 1 column 2 column 3 column

4
row 1 1 2 3 4
row 2 2 4 6 8
row 3 3 6 9 12
row 4 4 8 12 16
When the layout of the table needs the merging of multiple columns or rows,
“colspan” and “rowspan” attributes can be used respectively. For example, the
HTML code in Figure 4.12 shows how two columns are merged both for the
“Cases” and “Deaths” data cells of the table.

HTML Code
<table border=1>
<tr>
<th></th>
<th colspan=2>Cases</th>
<th colspan=2>Deaths</th>
</tr>
<tr>
<th>Date</th>
<th >Total</th>
<th >New</th>
<th >Total</th>
<th >New</th>
</tr>
<tr>
<td>07/29/21</td>
<td>279,629</td>
<td>3,592</td>
<td>4,381</td>
<td>61</td>
</tr>
</table>
Cases Deaths
Date Total New Total New
07/29/21 279,629 3,592 4,381 61
Figure 4.12 Merging columns in HTML tables

Notes
Note the following points from Figure 4.12:
• The first <th> of the first <tr> does not have data as shown in the
output.
• As the value given to the “colspan” attribute of the second and third
<th> of the first <tr> is 2, the “Cases” and “Deaths” columns span the
two columns under them.
• The data shown in the table is adopted from World Health Organization
and is about the spread of COVID-19 in Ethiopia.
The “colspan” and “rowspan” attributes can also be used to define the layout of
an entire page. The following HTML code generates a typical page layout with
Header, Sidebar, Content area, as well as Footer using an HTML table as shown in
the output of Figure 4.13.

HTML Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table width=”100%”>
<tr>
<td colspan=”2” height=”100px” bgcolor=”#666666”>
<h1>Website Logo</h1>
</td>
</tr>
<tr>
<td width=”20%” bgcolor=”#cccccc” height=”300px”>
<h3>Sidebar</h3>
</td>
<td width=”80%” bgcolor=”#eeeeee”>
<h3>Content</h3>
</td>
</tr>
<tr>
<td colspan=”2” bgcolor=”#777777”>
Footer
</td>
</tr>
</table>
</body>
</html>
Figure 4.13(a) HTML code for Page layout using tables

Figure 4.13(b) Page layout using tables
Notes
Note the following points from Figure 4.13(a) and Figure 4.13(b):
• The “width” attribute is given the value 100% so that the table
occupies the entire width of the page.
• “px” stands for pixel.
• The “width” of the first <td> of the second <tr> is assigned 20% so
that the “Sidebar” occupies 20% of the width of the table. 80% of the
width of the table is occupied by the second <td> of the second <tr>.
• “colspan” attribute is used to merge the top and bottom rows of the
table.
Activity 4.12
• Create a table that has the following layout:
• The table should occupy the entire width of the page.
• The width of each of the first and third data cells of the second
row occupies 20% of the width of the table.

4.6. HTML Lists
HTML lists are used to present different types of lists. The types of lists are known
as ordered lists, unordered lists, and description lists.
4.6.1 Ordered List
<ol> is the tag that is used to create ordered/numbered lists. The <li> tag, on
the other hand, is used to insert individual items into the list. By default, Arabic
numerals are used for ordering purposes in ordered lists. However, using the “type”
attribute the ordering type can be changed to some other form such as the English
alphabet. See Table 4.4 for the list of values that the “type” attribute can be assigned
to and their meanings.
Table 4.5 The “type” attribute and its values for the Ordered List
Value Meaning
1 Arabic numeral (Default)
I Upper-case Roman number
i Lower-case Roman numeral
A Upper-case English alphabet
a Lower-case English alphabet
The HTML code in Figure 4.15 shows an example of an ordered list, and what the
output on the web browser looks like. (The data refers to the top 10 causes of death
in Ethiopia. Source: World Health Organization 2018)

HTML Code Output on the Web Browser

<ol>
<li>Coronary heart disease</li> 1. Coronary heart disease
<li>Influenza and pneumonia</li>
2. Influenza and pneumo-
<li>Diarrheal diseases</li> nia
<li>Stroke</li> 3. Diarrheal diseases
<li>Tuberculosis</li>
4. Stroke
<li>Road traffic accidents</li>
5. Tuberculosis
<li>Liver disease</li>
<li>Diabetes mellitus</li> 6. Road traffic accidents
<li>HIV/AIDS</li> 7. Liver disease
<li>Breast cancer</li> 8. Diabetes mellitus
</ol>
9. HIV/AIDS
10.Breast cancer
Figure 4.15 HTML Ordered List
Activity 4.13
1. Create an ordered list of the full names of your friends.
4.6.2 Unordered List
<ul> is the tag that is used to create unordered/bulleted lists. The <li> tag and the
“type” attribute are used similarly as they are used in ordered lists. The default
bullet type is “disc”. The “type” attribute is, therefore, used to change the default
type to any of the other types. See Table 4.5 for the list of values that the “type”
attribute can be assigned to and their meanings in unordered lists.

Table 4.6 The “type” attribute and its values for Unordered List
Value Meaning
Disc  (Default)
square
circle 
Notes
As stated in Table 4.6, the default bullet type for unordered lists is
“disc”. In the example shown in Figure 4.9, however, the output
shows the list using the “circle” bullet type. That is because the type
is explicitly changed in the list as shown in the code.
HTML Code Output on the Web

Browser
<ul type=”circle”> o Save energy
<li>Save energy</li> o Plant trees

<li>Plant trees</li>
o Reduce water
<li>Reduce water waste</li> waste
<li>Avoid plastic wherever o Avoid plastic
possible</li>
wherever possible
</ul>
Figure 4.16 The “type” attribute in Unordered Lists
Activity 4.14
• By changing the value of the “type” attribute, design different types of
ordered and unordered lists.

Lists can be nested. Any type of list can be placed under any other type of list. The
following example in Figure 4.17 shows how an ordered list can be nested inside
an unordered list.
HTML Code Output on the Web

Browser
<ul> • Actions one can
<li>Actions one can do to stop do to stop climate
climate change change
<ol> 1. Save energy
<li>Save energy</li> 2. Plant trees
<li>Plant trees</li>
3. Reduce water
<li>Reduce water waste
waste</li> 4. Avoid plastic
<li>Avoid plastic wherever pos-
sible
wherever possible</li>
</ol>
</li>
</ul>
Figure 4.17 Nested lists
Notes
In the HTML code of Figure 4.17, observe where the <li> of the <ul>
begins and ends. As you can see, the <ol> is embedded inside the <li>
of the outer <ul>.

Activity 4.15
• Create the following list.
• Fruits:
o Orange
o Banana
o Pineapple
• Vegetables:
o Carrot
o Cabbage
o Onion
4.6.3 Description List

In a description list, the <dl> tag is used to define the whole description. The <dt>
tag, on the other hand, is used to add the item that is to be described or defined.
The description or definition is added using the <dd> tag. See the example given in
Figure 4.18 to learn how the three tags are used together.
HTML Code Output on the Web Browser

<dl> Ol
<dt>ol</dt> -Ordered list
<dd>-Ordered list</dd> ul
<dt>ul</dt>
-Unordered list
<dd>-Unordered list</dd>
dl
<dt>dl</dt>
-Description list
<dd>-Description list</dd>
</dl>
Figure 4.18 HTML Description List
Activity 4.16
• Create a description list for the dictionary definition of three of your
favorite English words.
Unit Summary
In this unit, you have learnt about:
• what the Web is and its relationship with the Internet

• foundations of the Web, such as HTTP, HTML, web browser, and web
server
• what is meant by a website and its uses
• what is meant by website design
• some guidelines for website design
• the difference between website design and website development
• what HTML is and the structure of an HTML document
• HTML tags and HTML elements and their differences
• how to insert basic elements like images, videos, paragraphs, headings,
and the like on webpages
• HTML attributes and how they are used to control the properties of
HTML elements
• how hyperlinks are created using the anchor tag (<a>)
• how to use images as a hyperlink
• the difference between absolute and relative URL
• how links are created to different parts of the same page using the
anchor tag (<a>)
• how HTML tables are created to define the structure of data as well as
the layout of webpages
• the three types of lists namely, ordered lists (<ol>), unordered lists
(<ul>), and description lists (<dl>)
• how lists can be nested and how one type of list is embedded under
another type

Key Terms
Absolute URL is a URL that includes every element of a URL such as the
protocol, the hostname, as well as path of the webpage
Description lists <dl> are used to create description/definition lists
HTML attributes are used to define more properties to HTML elements
HTML elements are components of HTML documents that normally begin
with a start tag and end with an end tag
HTML tags are a set of predefined names enclosed in angle brackets
HTML is a language that is used to develop webpages
HTTP is a protocol that browser software and web server software used to
communicate with each other
Hypertext is a link that connects webpages
Ordered Lists <ol> are used to create ordered/numbered lists
Relative URL is a path given relative to the location of the current webpage
The Web is one of the popular services of the Internet
Uniform Resource Locator (URL) refers to the address of web resources
Unordered Lists <ul> are used to create bulleted lists
Void elements are HTML elements that do not have end tags
Web Browser is a software that is used to view webpages
Web Server is a software that is used to manage websites
Webpage is a web document that can store text, images, videos, and the like
Website is a collection of interrelated webpages

Review Questions
Part I: Write True if the statment is correct and False if it is incorrect.
1. The Web and the Internet are the same things.
2. The <head> and the <body> sections are the two major sections of HTML
documents.
3. “rowspan” is the attribute that is used to merge rows of a table.
4. “circle” is a valid value to the “type” attribute in ordered lists.
5. It is only texts that can be used as hyperlinks.
Part II: Match the items given under column B with associated items in
column A
A B
1. Internet service a. Web Browser
2. Section of an HTML document where b. The Web
actual content goes c. <body>
3. User or Client-side web software d. <h1>
4. An HTML element used to create e. <dd>
headings f. URL
5. Address of webpages g. HTTP
h. .html
i. Internet
Part III: Choose the correct answer from the given alternatives.
1. Which of the following is the language used to develop webpages?

A. HTML B. HTTP
C. Web server D. Web browser
2. The building blocks of webpages are ____________.

A. HTML tags B. HTML elements
C. Images D. Headings

3. Which of the following is an example of void HTML elements?

A. <h1> B. <p>
C. <img> D. <b>
4. Which of the following is used to define additional properties to HTML

elements?
A. HTML tags. B. HTML attributes.
C. HTML documents. D. URL
5. Which of the following is used to define a header for HTML tables?

A. <tr> B. <td>
C. <th> D. “colspan” attribute
Part IV: Fill in the blank spaces

1. A protocol that a web server and a web browser use to communicate with
each other is __________.
2. The extension used for file names in HTML documents is ________.
3. A type of URL that doesn’t contain information such as web protocol is
called ______________.
4. The attribute of <a> that is used to give names to sections of a webpage is
__________________.
5. A tag that is used to create horizontal line is __________________

Part V: Code Writing

1. The following data is about life expectancy in Ethiopia between 1960 and
2016. (Source: World Health Organization). Create an HTML table that
displays the data as shown below.
Year Male Female All

1960 37.3 40.2 38.7
1970 41.5 44.5 43.0
1980 43.3 46.3 44.8
1990 46.1 49.1 47.5
2000 49.3 53.1 51.2
2010 60.1 63.6 61.8
2016 63.7 67.3 65.5
2. Create an Ordered List of the subjects you are currently taking in the
order of your preference.
3. Create the following list:
1. Famous Ethiopian female athletes:
 Derartu Tulu
 Tirunesh Dibaba
 Meseret Defar
2. Famous Ethiopian male athletes:
 Abebe Bikila
 Haile Gebrselassie
 Kenenisa Bekele

4. Create the layout of a page using an HTML table according to the

example shown below. The table has the following features:
• The “width” attribute of the table is assigned to the value
”100%”so that the table occupies the entire width of the page.
• The “bgcolor” attribute of the data cell of the first row has the
value ”#999999”.
• The “bgcolor” attribute of the first data cell of the second row
has the value ”#dddddd”, and its “width” attribute is assigned
to the value ”25%”. This data cell also has hyperlinks to the
three organizations shown in the example. Moreover, the content
should be aligned to the top using the “valign” attribute.
• The “bgcolor” attribute of the second data cell of the second
row has the value ”#eeeeee”, and its “height” attribute has the
value ”200”. The content should be aligned to the top using the
“valign” attribute using the value ”top”.
• The data cell of the last row has the same background as the first
one and, its text is center-aligned.
This is My Page Title

Links My Contents
Ethiopian Air Lines
Ethio telecom
CBE
Copyright © 2021 Yourname.com

HARDWARE
UNIT TROUBLESHOOTING
AND PREVENTIVE
MAINTENANCE
5
Learning Outcomes
At the end of this unit, students will be able to:
Explain maintenance procedures and troubleshooting

State hardware problems
Describe hardware preventive maintenance
Perform basic hardware troubleshooting & preventive maintenance
Recognize the value of hardware troubleshooting to keep computer
safety
Unit Overview
Computers must be protected from any kind of threat that causes the computer
to malfunction. Computer users should have some basic knowledge of
troubleshooting and solving hardware-related problems. This unit covers
hardware troubleshooting and preventive maintenance.
5.1. Hardware Troubleshooting
Brainstorming 5.1
What do you know about computer hardware troubleshooting and

maintenance?
Hardware troubleshooting is a systematic approach to locating the cause of a fault

in a computer system and solving technical problems. It starts with general issues
and then gets more specific.

UNIT-5 Hardware Troubleshooting and Preventive Maintenance
5.1.1 Hardware Troubleshooting Procedures
Hardware troubleshooting is the process of reviewing, diagnosing, and identifying

operational or technical problems within a hardware device or equipment. It aims
to resolve physical and/or logical problems and issues within computing hardware.
On the other hand, software troubleshooting is the process of scanning, identifying,
diagnosing, and resolving problems, errors, and bugs in software.
Computers can malfunction and get damaged if computer users are not aware of
some of the basic procedures for checking hardware problems. Many computer
problems can be solved by checking the following simple hardware problems:
• Check that your computer is plugged into a working power outlet.
• Check that everything is turned on.
• If the computer is on but the screen is blank, there may be an issue with the
connection between the computer and the screen. First, check to see if the
monitor is plugged into a power outlet and if the connection between the
monitor and computer system unit is connected securely.
• Check that the keyboard, mouse, monitor, speakers, etc. are properly plugged
into the computer system. Try a different port to check if it is a port issue, or
change the device if the device is damaged.
Notes
It is necessary to switch off the computer before undertaking any
hardware maintenance such as removing or replacing computer parts.
5.1.2 Check POST
POST stands for Power On Self-Test. This is part of a computer’s startup program
that is used to diagnose the keyboard, the Random Access Memory (RAM), disk
drives, and other hardware to make sure they are working properly. If the POST
detects any errors in the hardware, it either displays a text error message on the
screen or emits a series of short and long beeps.
If an error message appears as you boot your computer, type the exact error message
and then search on the Internet to find more information about the error.

Activity 5.1
1. If your computer cannot start, what are the preliminary hardware diag-
noses you do to identify and fix the problems?
5.1.3 Beep Codes
Beep codes are sounds emitted by the computer during Power on Self-Test (POST).
Each BIOS manufacturer has a unique beep sequence, a combination of long and
short beeps, for hardware failures. If there is a problem with the computer, listen
for the beep codes when the computer starts. As the system proceeds through the
Power on Self-Test (POST), most computers emit one beep to indicate that the
system is booting properly. If there is an error, you might hear multiple beeps. You
need to document the beep code sequence and search on the Internet to determine
the specific problem. Some of the beep codes and the respective problems are as
follows:
• No beep but the system turns on and runs fine - Under normal
circumstances, most computer systems will beep one short beep when turned
on. If your computer doesn’t produce a beep sound, your “beeper” may have
died out.
• No beep - The power supply is not plugged in or turned on. If not, the power
supply is completely dead.
• Steady, short beeps - The power supply may be bad or the voltages might
be wrong. A replacement would usually be necessary.
• Steady, long beeps - The power supply has gone bad.
• Long, continuous beep - Your Random Access Memory (RAM) sticks may
have gone bad. If there is more than one stick installed, try taking one out
to see if the computer boots. If it does not, try the same thing with the other
stick. This will tell you which stick has gone bad, and you can replace or
upgrade accordingly. If there is only one stick installed, you will need to
replace or upgrade it to fix the problem.

• One long, two short beeps - There has been a video card failure. Your first
action is to try reseating the video card. This often solves the problem when
the computer system is connected to projectors because the VGA/DVI or
Video cable gets moved so often that the card can be slowly unplugged. If
reseating doesn’t work, replace the video card.
5.1.4 BIOS Information
BIOS stands for basic input/output system. BIOS is a program used by a computer
to start the computer system after it is powered on. It also manages data flow
between the computer’s operating system (OS) and attached devices, such as the
hard disk, video adapter, keyboard, mouse, and printer. If the computer boots and
stops after the POST, your computer has a BIOS setting problem. Fixing BIOS
problems requires a good knowledge of computer hardware. Therefore, when you
face a BIOS setting problem, you are advised to contact a computer hardware
technician to solve the problem.
5.1.5 CMOS Error
The CMOS (Complementary Metal-Oxide Semiconductor) is an onboard chip that

stores information ranging from the time and date to system hardware settings;
its primary function is to handle and store the BIOS configuration settings. If a
computer shows a CMOS alert message on the screen, it indicates that the CMOS
battery needs to be replaced. Upon receiving such type of error message, remove
the CMOS battery carefully, and insert a new battery that is exactly the same as the
old one.
Notes
Replacing a CMOS battery may be more difficult in laptop computers
than in desktop computers. If the user of the computer does not have
sufficient computer hardware troubleshooting experience, leaving the
task to a professional computer technician is advised.
5.1.6 Event Viewer
When system or application errors occur on a computer running Windows, the

Event Viewer is updated with information about the errors. The Event Viewer,
shown in Figure 5.1, records the following information about the problem:

• The problem that occurred
• The date and time of the problem
• The severity of the problem
• The source of the problem
• The event ID number
• Which user was logged in when the problem occurred
The following steps can be followed to launch the Event Viewer:
1. On the Windows Search box, write event viewer
2. A pop-up menu appears which looks like the one shown in Figure 5.1
3. Click on Event Viewer
Figure. 5.1 Launching Event Viewer
Events are placed in different categories as shown on the left side of Figure 5.2.
Expand each category to get more information. Each category is related to a log
that Windows keeps on events regarding that particular category. While there are
a lot of categories, the vast amount of troubleshooting you might want to do is
related to the Windows Log category, which contains the following items:
• Application: The Application log records events related to Windows system

components, such as drivers and built-in interface elements.
• System: The System log records events related to programs installed on the
system.

• Security: When security logging is enabled (it is off by default in Windows),

this log records events related to security, such as logon attempts and resource
access.
Figure 5.2 Event Viewer
When you click on Application under Windows log, you get a list of Application
log records events.
If you want to get detailed information about the error, double-click on the error,
and then you get detailed information in the pop-up window. Although the Event
Viewer lists details about an error, you might need to do further searching on the
Internet about the problem to identify an appropriate solution.
5.1.7 Hardware Problems
Many computer problems are caused by hardware failures or problems with

hardware drivers. Windows usually displays notifications about devices that have a
problem. Device Manager is used to check the status of different hardware devices.
The following steps can be followed to identify hardware problems in Windows-
based systems:
1. Click on the Windows search box in the lower-left corner.
2. Type Control Panel.
3. Double-click the Control Panel on the Windows pop-up menu.

4. Click Hardware and Sound.
5. Under Device and Printers, Click on Device Manager (see Figure 5.3)
Figure 5.3 Windows Control Panel
The Device Manager has the following four benefits.
1. It works as a centralized utility from which all the hardware on a system

can be configured.
2. It provides a central and organized view of all hardware- Microsoft

Windows-recognized hardware- installed on a system.
3. It helps to manage all the hardware devices installed on a system. This

includes keyboards, hard disk drives, USB devices, etc.
4. It helps to change hardware configuration options, manage drivers, enable

or disable hardware, identify conflicts between hardware devices, etc.
When you click on the Device Manager on the Control Panel as shown in Figure
5.3, the Device Manager window is displayed (see Figure 5.4). The devices that
have a problem would have an error icon displayed right next to the name of the
device. The operating system flags the devices with an error icon.
• A yellow triangle with an exclamation mark indicates that the device has
a problem.
• A red X means that the device is disabled or removed or Windows can’t

locate the device.
• A downward-pointing arrow means the device has been disabled.

• A yellow question mark indicates that the system does not know which
driver to install for the hardware. This problem will be solved by installing
the appropriate driver software for the device
Figure 5.4 Device Manager
Activity 5.2
1. Open the Device Manager and check if there is any problem on your
DVD/CD-ROM drives.
2. If you find a yellow triangle with an exclamation mark on one of your

hardware devices, what will you do to solve the problem?
5.1.8 Diagnostic Tools
Diagnostic Tools are software tools that are used to help troubleshoot, diagnose
and solve hardware problems. Manufacturers of system hardware usually provide
diagnostic tools of their own. For instance, a hard drive manufacturer might provide
a tool to boot the computer and diagnose why the hard drive does not start the
operating system.
The top two diagnostic tools are Windows Performance Monitor and Windows
Resource Monitor.
a) Windows Performance Monitor
The performance monitor gives a quick view of vital information about computer
hardware. The computer’s CPU, Memory, Disk, and Ethernet information can be
checked from there. Performance Monitor is used to examine the effects of running
applications in both real-time and by collecting data to check out for later analysis
(See Figure 5.5).
For example, to view the Performance Monitor, the following steps can be followed:
1. Press CTRL + ALT + Delete button at the same time.
2. Choose Task Manager, and the window shows that appears in Figure 5.5.r
3. Then click on the Performance tab to see the performance of the CPU and
other devices in the computer.
Figure 5.5 Task Manager
Notes
One quick way of reducing the load from the CPU in Windows is
to restart the computer to remove any unwanted temporary files. Make
sure that all files are saved before proceeding with this step.
The other option is to look for the applications that are using maximum
CPU resources on the Task Manager. If any application shows CPU
usage of almost 100%, disable the application and then start it again.
Activity 5.3
• Open Task Manager and see if any applications are using excessively
large amounts of the computer’s CPU or memory, and if there are any,
disable them.

b) Windows Resource Monitor
Windows Resource Monitor is better suited for tracking CPU, Network, Memory,
and Disk usage. This tool allows to take an in-depth look into which processes are
affecting the CPU, how much memory is being used, the disk activities, and the
network information such as current TCP (Transport Control Protocol) connections,
and which processes are listening on which port.
The following steps can be followed to open the Windows Resource Monitor:
1. On the Windows search box, write Resource Monitor
2. Click on the Resource Monitor, and then the window shows what appears
in Figure 5.6.
Figure 5.6 Windows Resource Monitor
Clicking on the CPU tab in the Windows Resource Monitor lists the four sections
namely, Processes, Services, Associated Handles, and Associated Modules. The
processes that are running are shown in black color under the Processes section,
and those that are suspended are shown in blue color while the processes that are
not responding are shown in red color. Upon selection of a specific running process
from the Processes section the related data under the Services, Associated Handles,
and Associated Modules get populated.

If you find your computer slowing down unexpectedly, take a look at the CPU
column. If an application is taking up a lot of CPU resources, shut down the
application and restart it.
To stop the application
1. Open resource monitor window
2. Right-click on the application
3. Click on End process
If you want to know more about an application, you can follow the following steps
in the Resource Monitor window:
1. Right-click on the name of the application
2. Choose Search online
This opens your default browser displaying the search result of the application on
the default search engine of your browser. Click on the application links and learn
more about the application.
Activity 5.4
1. What do you understand by hardware troubleshooting?
2. If your computer is slow, what will be the possible problem and what
course of action can you take to solve it?

5.2. Basics of Preventive Maintenance
Brainstorming 5.2
Reflect on any preventive maintenance methods you are aware of.
Preventive maintenance is the practice of routinely taking measures in hardware

administration that reduces the risk of hardware failures. It also improves the
likelihood of quick recovery in the event that a failure does occur. Maintenance
activities include performing diagnoses on different hardware components such
as circuit boards and memory and replacing any components that show signs of
excess wear. It also includes keeping hardware components clean from dust to
reduce the likelihood of overheating and hardware failures.
5.2.1 Preventive maintenance for Dust
There are various ways of cleaning dust off the computer. Some examples of
preventive maintenance against dust such as Cloth, chemical cleaners, and vacuum
cleaners are presented below.
1) Cloth
The outside of the computer case can be cleaned using a soft cotton cloth. Special
cleaning cloth like microfiber cloth is effective in removing dust without damaging
screens (See Figure 5.7). Microfiber cloth is made from a high-quality material that
absorbs and removes all fingerprints, smudges, oils, and dust from the screen. Use
of this material as a first step before applying any liquid sanitizing wipe or screen
cleaner is recommended.
Figure. 5.7 Microfiber Cleaning Cloth

2) Chemical cleaner
There are different chemical cleaners in the market which can be used to clean
computer screens. Alcohol-Free Sprays such as Koala Cleaner are safe for all kinds
of screens. It can be used on all screens from tablets to laptops.
3) Vacuum Cleaner
Dust on the outside of a computer can travel through cooling fans to the inside part
of the computer. Accumulated dust prevents the flow of air and reduces the cooling
of components. Hot computer components are more likely to break down. Using
a combination of compressed air, a low-air-flow vacuum cleaner, and a small lint-
free cloth, dust can be removed from the inside of a computer. It is good to make it
a regular habit like monthly to clean computers’ air ventilators, connection ports,
and keyboards with a vacuum cleaner.
5.2.2 Run antivirus
A computer virus is a type of computer program that(when executed) replicates

itself by modifying other computer programs and inserting its own code. Computers
may be infected with viruses when they are connected to the Internet or when
someone else’s flash disk is inserted into a computer system. Virus infection is not
detected until it creates a problem on the computer.
Antivirus, which is also known as anti-malware, is a computer program used to

prevent, detect and remove malware. There are freeware and commercial antivirus
software. The freeware antivirus software can be freely downloaded and used. Some
examples of free antivirus software are AVAST, AVG, AVIRA, and Bitdefender.
In order to install antivirus software:
1. Search the antivirus software, for example, on Google
2. Then click on the search result on the name of the Antivirus software you
want to download (see Figure 5.8)
3. You can directly install from the Internet or save the antivirus software on
your hard disk

4. If it is saved on the hard disk, install the antivirus software in the same way
you install other types of application software by starting the setup file.
Figure 5.8 Installing Antivirus Software
It is important to run the antivirus program on a regular basis to make sure any
changes made, or files that are downloaded have not compromised the system.
Additionally, running the antivirus program because some malicious programs
embed into systems without warning and require specific actions to trigger.
Scanning computer systems regularly with antivirus software help prevent the
computer system from virus infection.
Activity 5.5
1. Discuss the problems you will face if you do not have installed antivirus
software on your computer.
2. Reflect on computer problems that will be caused by dust.
5.2.3 Backups
Backup is a process of transferring data or files from a computer system to external

storage devices. The backup file is used to recover data loss during computer
failure. Computer users should have at least one method for backing up users data,
whether it is on a cloud storage server or an external hard drive (see Figure 5.9). It
is necessary to take time to update the backups as frequently as needed. If up-to-
date backups are available, computer users will not have to worry about losing a
day’s work in the event a PC is unexpectedly crashed.

Figure 5.9 Data backup
Notes
Backup is the first step before any troubleshooting on a computer
system is done. If a backup has not been taken, do not take any
troubleshooting activity. Before undertaking any troubleshooting, it
is recommended to check with the computer user about the date of the
last backup, contents of the backup, data integrity of the backup, and
availability of all backup media for data restore.
The following steps can be followed to take a backup on a Windows-based

computer:
1. Open the Control Panel
2. Choose Backup and Restore
3. Choose Set up back-up
4. The window will be displayed as shown in Figure 5.10.
Figure 5.10 Disk Backup Window
5. Click on Create a system image,

6. Select the storage drive either a hard disk, DVD disk, or a Network drive
where you intend to store your backup.
7. Then click on the next button, and
8. Finally click on the start backup button
Notes
You can alternatively write backup on the Windows search box at the
lower left corner, and then select backup settings to open the backup
window.
5.2.4 Scan Hard Disk
When old files are deleted from the hard disk and new files are saved, the files
become fragmented. Fragmentation is the scattering of portions of files in the disk
in nonadjacent areas, thus greatly slowing access to the files.
When a hard disk is new, the operating system puts files on the disk contiguously
(next to one another). However, when a file is updated over time, new data for that
file is distributed to unused spaces. These spaces may not be contiguous to the
older data in that file. It, therefore, takes the operating system longer to read these
fragmented files.
A defragmenter utility program, commonly called a “defragger,” finds all the

scattered files on the hard disk and reorganizes them into the smallest number of
adjoining regions (See Figure. 5.11). In other words, defragmentation is a process
that reduces the degree of fragmentation. This increases the computer’s speed.
Figure 5.11 Disk Defragmentation

The following steps can be followed to undertake disk defragmentation:
1. Type Windows Administrative Tools on the Windows search box and click
on Windows Administrative Tools.
2. Double-click on Defragment and Optimize Drives.
3. Then the window shown in Figure 5.12 will be displayed.
4. Select the drive, and then click on the Optimize button.
Figure 5.12 Disk Optimization Window
Notes
As shown in Figure 5.12, if the drive’s current status says (0%
fragmented), there is no need to do defragmentation.
5.2.5 Power Protection Devices
Electric power causes many problems on computer hardware components. The

following tools are used as a means to prevent potential damages that can be caused
by electric powers.
1) Use a surge protector to protect against too much electricity: Plug

all your hardware into a surge protector (suppressor), which will prevent
damage to your equipment if there is a power surge (See Figure 5.13).
2) Use a stabilizer to ensure the level of voltage being supplied at a desired

level: Plug your computer into a stabilizer (See Figure 5.13) to adjust

for power variations, which will deliver a consistent voltage level to the
equipment. Power fluctuations can cause damage to electrical motors and
components. This damage could be severe and immediate. It may result in
a shorter operating lifespan.
Figure 5.13 Power surge protectors
3) Use a voltage regulator to protect against too little electricity: Plug your
computer into a voltage regulator (also called a line conditioner) to adjust
for power sags or brownouts (see Figure 5.14).
Figure 5.14 Power voltage regulator
4) Consider using a UPS to protect against the complete absence of

electricity: Consider plugging your computer into a UPS (Uninterruptible
Power Supply). The UPS is kind of a short-term battery that (when the
power fails) will keep your computer running long enough (5–30 minutes)
for you to save your data before you turn off the computer (See Figure
5.15). It also acts as a surge protector.

Figure 5.15 UPS power surge
5.2.6 Shut Down Properly
At the end, make sure you save your work before closing all your programs and
shutting down your PC. Leaving your PC turned on when it is not used prevents
it from cooling, and can impact the machine’s performance. If shutting down
interferes with your daily routine or business requirements, put your computer into
a low-power or hibernation mode instead.
Activity 5.6
1. Discuss the purpose of taking backups of your computer files.
2. Reflect on the effect of disk fragmentation on your computer.

Unit Summary
• what is meant by hardware troubleshooting and preventive maintenance

• messages of POST, which stands for Power On Self-Test
• beep code sounds as alert message for hardware failures
• what is meant by CMOS alert message
• how to identify system or application errors through event viewer
window
• how to identify and troubleshoot hardware problems through device
manager
• how to use Diagnostic Tools to diagnose and troubleshoot hardware
problems
• how to use Windows Resource Monitor to track CPU, Network,
Memory and Disk usage
• the different hardware prevention mechanisms
• how to clean a computer from dust.
• what is meant by Virus and Antivirus software
• how to protect a computer from virus.
• how to undertake system data backup.
• what is meant by disk fragmentation and defragmentation
• mechanisms for protecting computers from power problems

Key Terms
Antivirus is computer software that is used to clean viruses from a computer
system.
Backup is a process of transferring data or files from a computer system to
external storage devices so as to recover data lost during a computer failure.
Beep codes are sounds emitted by the computer during Power on Self-Test
(POST).
BIOS is a program used by a computer to start the computer system after it
is powered on.
The CMOS (Complementary Metal-Oxide Semiconductor) is an onboard
chip that stores information ranging from time and date to system hardware
settings.
Diagnostic Tools are software tools that are used to help diagnose and solve
hardware problems.
Power On Self-Test (POST) is part of a computer’s startup program that is
used to diagnose the keyboard, the Random Access Memory (RAM), disk
drives, and other hardware to make sure they are working properly.
Preventive maintenance is a regular and systematic inspection, cleaning,
and replacement of worn parts, materials, and systems that ensure computer
hardware have long and productive life.
Troubleshooting is a systematic approach to locating the cause of a fault in a
computer system and solving technical problems. It starts with general issues
and then gets more specific.
Virus is a type of computer program that (when executed) replicates itself by
modifying other computer programs and inserting its own code.

Review Questions
1. Preventive maintenance is a regular and systematic inspection, cleaning,
and replacement of worn parts of the computer to ensure smooth
operation of the organization
2. Troubleshooting is a systematic approach to identify and solve hardware
problems.
3. Cleaning dusts off from the inside and outside parts of a computer system
may lead to hardware problems.
4. Beep codes are used to identify software problems on a computer system.
5. Diagnostic Tools are software tools that are used to diagnose hardware
failures.
6. Antivirus is software that is used to prevent, detect and remove malware.
7. Backup is used to clear viruses from a computer system.
8. Disk fragmentation reduces the speed of a computer.
9. A surge protector is used to protect a computer against too little
electricity.
10. When a computer is not used, shutting down computers is useful for a
longer life of hardware components.
Part II: Fill the blank spaces

1. ________ sounds indicate a hardware problem on a computer system.
2. ________ are software tools that are used to help troubleshoot, diagnose
and solve hardware problems.
3. A data protection mechanism through copying data from a computer
system to external storage devices is known as ___________________.
4. A type of software that is used to clean virus from a computer system is
called ________________.
5. A regular and systematic inspection, cleaning, and replacement of worn
hardware components is called _______________.

Part III: Give short answers to the following questions

1. What is hardware troubleshooting?
2. What is a software tool that is used to check the status of different
hardware devices?
3. What are the different hardware preventive maintenance methods?
4. What are the software tools used to monitor the performance of a
computer system?
5. How do you solve the problem of slow CPU performance while it is in
operation?
Part IV: Discussion Questions

1. Discuss in groups the problems organizations face if they do not take
timely backup?
2. Form a group and maintain a computer that does not work entirely. Write
down the procedures you followed to identify the problem and fix the
problem. Share your experience with the class.

UNIT FUNDAMENTALS OF
PROGRAMMING
6
Learning Outcomes
At the end of this unit, students will be able to:
Define computer programs

State and describe types of programming languages
Explain syntax and semantics of programming languages
Explain variables and data types
Differentiate the concept of statements and expressions in Python
Analyze simple programs written in Python
Write simple programs with input and output
Unit Overview
A computer program is a set of instructions that commands a computer what to do.
Computers do whatever task they do by simply following the instructions stated
in programs. This unit covers topics related to computer programs including
programming languages, syntax, and semantics. The high-level programming
language known as Python is used to demonstrate the basic concepts of
programming.
6.1. Types of Programming Languages
Brainstorming 6.1
How do computers do the types of tasks we observe them doing?
Programming languages are computer languages that are used to write different
types of computer programs. They are generally grouped into machine language,
assembly language, and high-level language.
UNIT-6 Fundamentals of Programming
6.1.1 Types of Programming Languages
Machine Language
Machine language is a low-level computer language. It is a language in which

everything including instructions, numbers, and memory locations are represented
in 1s and 0s – binary system. Machine language is the language that computers
understand directly without any need for translation. That is why it is very fast and
uses memory efficiently. However, writing programs in machine language is very
difficult.
Assembly Language
Assembly language is also a low-level computer language but, instead of 1s and

0s, it uses symbols known as mnemonics. Though it is easier than using a binary
system, assembly language is still difficult.
Since computers do not directly understand any program outside the machine
language, programs that are written in assembly language require a special type of
software. This software is known as Assembler, and it is used to translate assembly
language instructions into machine language.
High-Level Language
High-level languages are closer to human languages compared to both assembly

and machine languages. This type of language allows programmers to focus more
on the problem they want to solve than on the programming language. Examples
of high-level programming languages include C, C++, Java, C#, Python, Perl, and
Ruby.
Just like assembly language programs, high-level language programs also cannot
be directly executed by the computer. The programs have to be first translated
into a machine language using translator software. Depending on the programming
language, the translator software can be either a Compiler or an Interpreter.
Compilers translate high-level language written programs all at once into machine
language. The machine language is then executed by the computer. Examples of
programming languages that use compilers are C, C++, Java, and C#.

Interpreters, on the other hand, translate and execute programs a statement at a

time. They don’t translate the whole program together as do compilers. Examples
of programming languages that use interpreters include Python, Perl, and Ruby.
6.1.2 Syntax and Semantics
Like any human language, all programming languages have syntax and semantics.
Syntax refers to the rules of the programming language. It defines the structure or
grammar of the language that programs should strictly follow. The semantics of a
programming language, on the other hand, is related to the meaning of elements of
a program and what they do.
A program must be written with the correct syntax dictated by the programming
language for the program to be executed by the computer. If a program violates any
of the syntax rules of a language, the compiler or the interpreter produces an error
message. Such type of error is known as a syntax error.
A program can have no syntax error and get executed properly but can still behave
in a way different from what it is intended to. This kind of error is known as logic
error and is associated with the semantics of a language. Since compilers or
interpreters do not catch logic errors, they are far more difficult to identify and fix
than syntax errors.
Links
See Section 6.2 for practical examples of syntax and logic errors.
Activity 6.1
1. Compare and contrast the three types of programming languages.
2. Why are logic errors more difficult to fix than syntax errors?
6.2. Basics of Python
Python is one of the popular high-level programming languages in use today. It is

widely considered a much easier language to learn. This is one of the main reasons
why it is a widely chosen language for teaching programming to those who are new
to programming.

Python has a free integrated development environment known as IDLE. IDLE stands
for Integrated Development and Learning Environment. To write Python codes, the
interactive interpreter or the text editor of the IDLE can be used. The interactive
interpreter is used to write one line of Python code at a time and is less convenient
to write and execute a large number of codes. Using the text editor, however, any
number of codes can be written and get executed with a single command.
6.2.1 Using the Interactive Interpreter
The Interactive Interpreter contains a Python shell, which is a textual user interface
used to work with the Python language. The Interactive Interpreter is displayed
when the IDLE is opened. Figure 6.1 shows the Interactive Interpreter.
Figure 6.1 IDLE Interactive Interpreter
Links
See Section 6.4 to learn about expressions in Python.
Notes
The >>> is where codes are written and is called the prompt. After
a user writes a code and presses the enter key, the prompt (>>>)
reappears for the user to write the next code.
The following example demonstrates what the Interactive Interpreter does when
the enter key is pressed after a simple expression is written.

Notes
5+6 is a syntactically valid expression that evaluates to 11. Therefore,
the Python interpreter evaluated the expression and displayed 11. If,
for example, a syntactically invalid expression like 5+ is given, the
interpreter generates the following syntax error:
To display something on the screen, the print() function is used in Python. The
following example shows how a string is displayed using the print() function.
Notes
Note that the IDLE uses different types of colors for the different
elements of a Python code to make them easily distinguishable. By
default, outputs are displayed in blue color; functions are displayed
in purple color, and strings are displayed in green color. A string is a
sequence of characters placed under quotation marks such as ”Hello
World” as can be seen in the above example. See Table 6.1 for more
on strings and operators in Python.
Links
See Section 6.5 for more on the print() function.
Activity 6.2
• Use the print() function and display your full name on the screen using the
interactive interpreter.
6.2.2 Using the Text Editor
Python codes can be written in a file using the text editor of Python’s IDLE. The
code that is kept in such files is known as a script. A file that keeps Python scripts
is saved with the .py extension and is called a script file.

Figure 6.2 Opening a Text Editor
A script file can be easily created by selecting “New File” from the “File” menu
in the IDLE’s interactive interpreter as shown in Figure 6.2. Then the text editor is
opened in a separate window, and it looks something like what is shown in Figure
6.3.
Figure 6.3 Python IDLE’s Text Editor
Notes
Note that the prompt (>>>) is not shown in the text editor. The >>>
appears only when code is written in the interactive interpreter, not in
the text editor. While only one line of code is written and executed in
the interactive interpreter, as many lines of code as required can be
written in the text editor.
The example shown in figure 6.4 is a script that calculates and displays the area of
a circle for a given radius value of 3. Before the script is run/executed, the script
has to be saved with the .py extension by selecting the “save” option from the “file”
menu in the text editor. To execute the script, the “Run Module” option from the
“Run” Menu should be selected. After the script is executed, the output is displayed
in the IDLE shell/interactive interpreter in a format as shown in the figure below.

Python Script Output on the IDLE Shell
Figure 6.4 Running a script file
Notes
Note the following points from the script shown above:
There are four statements in the script. However, the script is executed
with a single command.
There is no prompt (>>>) in the script. The prompt is shown only in
the interactive interpreter.
Though there are four statements in the script, only one output is
shown in the IDLE shell. This is because it is only the last statement
that produces an output.
The output of a script written in the text editor is shown in the IDLE
shell or the interactive interpreter.
Links
The * is multiplication operator in Python and ** is exponentiation operator.
Operators are discussed in section 6.3
Links
See section 6.4 to learn about statements in Python.
The example in Figure 6.5 demonstrates a logic error that is related to the semantics
of programming languages.
Python Script Output on the IDLE Shell
Figure 6.5 Logic error

Notes
Note that the area of a circle in the above example in Figure 6.5 is
incorrectly calculated as “area=PI*radius*2”. The correct formula for
the area of a circle is “area=PI*radius**2”. However, the interpreter
did not generate any error and simply displayed the incorrect output.
This is a logic error: even though the program does not have any
syntax error, it does not produce the intended correct output.
The * symbol serves as a multiplication operator in Python. Table 6.1
of this chapter has a list of operators in Python and examples of how
they are used.
Activity 6.3
1. What is the difference between Python’s interactive interpreter and text editor?
2. Use the print() function to display your full name on the screen using the text
editor.
6.3. Variables and Data Types
6.3.1 Variables
Variables are computer memory locations. They are the means to store data in
computer memory. A variable is used every time user data or intermediary data is
needed to be kept.
In Python, a variable is created along with its value. Values are assigned to variables
using the assignment (=) operator, which has two operands. The operand to the left
of the operator is always a variable while the operand to the right of the operator
is either a literal value or any other type of expression. The following example
demonstrates how a variable named “x” is created with the value 5 in the interactive
interpreter.

The example that follows shows how a variable named “y” is created and assigned to
the result of an expression. The value of “y” would be the sum of 5 and 9, which is 14.
Links
See section 6.4 to learn about expressions in Python.
To see the current value of a variable, you can simply type the name of the variable
and press the enter key in the interactive interpreter. The value will then be displayed
as shown in the following example.
The value 25 that is shown in blue color is the value of the variable y. Moreover, a
variable can be assigned to another value than the one it was previously assigned
to. The following example shows how the value of y is changed from 25 to 30.
6.3.2 Identifier
The name that is given to variables is called an identifier. Identifiers are a string
of one or more characters and have to conform to some rules in Python to be
considered valid. The rules of identifiers are:
• The first character should be either a letter or an underscore ( _ ).
• If the identifier is made up of more than one character, the characters after the
first one should be a letter, number, or underscore.
• An identifier cannot be the same as any of the keywords in Python. See Figure
6.6 for a list of keywords in Python.
• Identifiers are case-sensitive. (For instance, x and X are considered as

different identifiers in Python)

and del from not while

as elif global or with
assert else if pass yield
break except import print
class exec in raise
continue finally is return
def for lambda try
Figure 6.6 Keywords in Python
Notes
Keywords are reserved words that have predefined meanings in a
programming language.
According to the above rule, the following are valid identifiers:

X
area
area_5
x5
The identifiers given below, on the other hand, are not valid identifiers as they
violate the rules stated above.
1x
*_5
while
X_&
Notes
The first two identifiers begin with a character that is not allowed. The
third identifier used the name that is considered a keyword in Python.
The last identifier is invalid because its last character is not allowed to
be used in identifiers.

Although meeting the above requirements suffices to define a valid identifier, it is

always recommended to use identifiers that are self-descriptive. Self-descriptive
identifiers are names that express what they are intended to be used for. Using such
types of identifiers makes programs more understandable and clearer.
Activity 6.4
• Identify the valid identifiers and explain why they are so.
a. x
b. 1x
c. _x
d. x*y
6.3.3 Data Types
A data type is a classification that specifies the type of values a variable can have,
and the type of operations defined on the values. Integer (int), floating-point number
(float), string (str), and Boolean (bool) are some of the major built-in data types in
Python.
Notes
Floating point numbers are numbers with decimal points that
represent real numbers. See Table 6.1 for more on Python operators.
Built-in data types are data types that are built into the Python
language.
The data type of variables in Python is set when values are assigned to the variables.
If an integer number is assigned to a variable, the variable will be of type int. If a
string is assigned to a variable, the variable then will be of type str. The following
example in the interactive interpreter shows how data types are set to variables
based on the value assigned to the variables.

Notes
As you can see in the above example, string values should be placed
in quotation marks.
To learn the data type of a particular variable, the type() function
can be used. Simply write type(variable_name) and press enter. The
interactive interpreter displays the data type of the variable as shown
above. In the above example, the data type of the variable x is int
while the data type of the variable y is str.
The four major built-in data types in Python and their descriptions are given in
Table 6.1. The table also contains the various types of operators that apply to the
respective data types with examples of how the operators are used.

Table 6.1 Data types
Data Meanings and Associated operators Sample expressions

Type sample values
Int Integer numbers Arithmetic operators
Example: • Addition (+)
34 • Subtraction (-)
4 • Division (/)
56 • Floor Division (//)
10 • Multiplication (*)
• Modulus (%)
• Exponentiation (**)
float Floating-point Arithmetic operators

numbers.
• Addition (+)
Example:
• Subtraction (-)
4.5
• Division (/)
10.6
• Multiplication (*)
100.0
• Exponentiation (**)
Str A sequence of Concatenation (+)
characters en-
closed in a dou-
ble quotation.
Example:
”Hello world”
Bool True or False Boolean operators
values.
• and
Example:
• or
True
• not
False

Notes
Note the following points on some of the operators listed in Table 6.1:
The + operator behaves differently depending on the type of the operand.

When the operands are integer or floating-point numbers, the operator
serves as a normal addition operator known in mathematics. But
when the operands are strings, the operator serves as a concatenation
operator, which combines the strings given to it into one.
The modulus (%) operator returns the remainder of the division of the
left operand by the right one.
The floor division also known as integer division (//) operator divides
and returns only the integer value of the quotient. The division (/)
operator, however, generates the exact division result including the
fraction part if any.
The exponentiation (**) operator raises the left operand to the power
of the right operand.
Variables can be assigned to values of a different data type than the one they
were previously assigned to. Therefore, the value of a variable, as well as
its type, can be changed to something different from what it was first set to
in Python. As you can see in the following example, the variable “x” is first
assigned to a floating-point number. Then it is assigned to a string value
“Hello”. The second assignment results in a change not only in the value but
also in the data type of the variable.

Activity 6.5
• Write the results of the following expressions.
a. 10%2 ________________
b. 2.5**3 ________________
c. 11//3 ________________
6.3.4 Data Type Conversion
Type conversion is the process of converting the value of one data type to another.
Type conversion is of two types in Python: implicit conversion and explicit
conversion.
Implicit conversion is a type of conversion in which Python does the conversion

without the involvement of the programmer. This is usually done to avoid loss of
data. See the following example.
Notes
Note the following points from the above example:
The data types of x and y are int and float respectively as shown in the
example.
The variable z is assigned to the value of x+y, and its data type is
automatically set to float. This is because Python always converts
smaller data types (int in this case) to larger data types (float in this
case) to avoid data loss. If the data type of z is set as int, the value that
will be stored in it will not be the correct value.

Explicit conversion is a type of conversion of one data type to another that is done
by the programmer. The predefined functions associated with the different kinds of
data types such as int(), float(), and str() are used for explicit conversion.
The syntax for conversion is given as follows:

<required_dataType>([value])
The following example demonstrates how Python responds to an attempt to add
string and integer variables.
Notes
As shown in the above example, Python does not allow adding an
integer number with a string. If the numbers stored in the integer and
the string variables are to be added up, an explicit type conversion has
to be used. See the following example to learn how the above error is
avoided using explicit type conversion.

Notes
As shown in the above example, the code did not generate any error
this time. This is because explicit type conversion is used to convert
the value of y to int type before it is added with the value of x.
Activity 6.6
• Write the expressions used to convert the value 1.5 into integer as well as
string values?
6.4. Statements and Expressions
A statement is an instruction that the Python interpreter executes. As discussed in

the introduction section, instructions are the orders or commands that the computer
follows to do something. Assignment and print() statements are the two types of
statements that are in some ways mentioned in the previous sections. An assignment
statement, for instance, assigns value to a variable while a print() statement displays
the value that is given to it. There are several other types of statements in Python
including the “if” statement, “while” statement, and “for” statement, which are
covered in the 12th Grade IT textbook.
The example in Figure 6.7 demonstrates the use of assignment and print() statements
in Python.
Python Script Output on the

IDLE Shell
x=5
y=10
print(x+y)
Figure 6.7 Assignment and print() statements
Notes
As you can see in the output in Figure 6.7, it is only the print statement
that produces an output. The two assignment statements simply assign
values to the variables and do not produce any output.

Expressions are what the Python interpreter evaluates to produce some value. An
expression could be a simple literal value, a variable, or something more complex
which is a combination of literals, variables, and operators.
Table 6.2 shows the three types of expressions, and how they are used in assignment
and print() statements.
Table 6.2 Types of expressions
Literal value expressions Variable expressions Complex expressions

x=7 x=y x=4*(y-5)
y=“Hello” print(x) print(x+5)
z=5.5
print(“Python”)
“Python”
Notes
Note that the expressions in the above table are those encircled with
red.
Using the print() and assignment statements, Figure 6.8 further shows the differences
and relationships between statements and expressions in Python.
Figure 6.8 Statements and Expressions

If an expression is typed into the interactive interpreter, the Python interpreter

evaluates and displays the value as shown in the following example.
Notes
However, if any expression is written in the text editor, it will not be
displayed unless it is put inside the parenthesis of a print() statement.
Therefore, to see the value of expressions on the screen while using the
text editor, the print() function has to be used.
Activity 6.7
1. What is the difference between statements and expressions in Python?
2. Identify the statements from the following list that produce outputs.
x=4*3
y=”Programming in Python is fun”
print(y)
z=x/2
print(z)
y=10
print(type(x))
3. When the code given in activity #2 is executed, what would be the out-
put on the screen?

6.5. Writing a Simple Program
Programs normally accept input and process the input to produce an output. As
shown in the preceding sections, the print() function is used to produce output
on the IDLE shell. As shown in multiple examples in the preceding sections, the
print() function has the following syntax:
print([value])
A function is a piece of code that performs some task and is called by its name. It
can be passed data as input to operate on, and can optionally return data as output.
print(), input() and type() are examples of functions.
In the above syntax, the name of the function is print. The value that is given to the
print() function as input can be any type of expression that evaluates to some value.
See the example in Figure 6.9 for the different types of values that the print()
function can take as input.
Notes
A function is a piece of code that performs some task and is called
by its name. It can be passed data as input to operate on, and can
optionally return data as output. print(), input() and type() are examples
of functions.
In the above syntax, the name of the function is print. The value that is
given to the print() function as input can be any type of expression that
evaluates to some value.
See the example in Figure 6.9 for the different types of values that the
print() function can take as input.

Python script Output on the

IDLE Shell
x=6.5
print(5)
print(x)
print(x*5)
print(”This is a string”)
Figure 6.9 Inputs of the print() function
To accept input from the keyboard, the input() function is used. The input() function
has the following syntax.
variable_name=input([prompt])
Notes
The following points are important to understand how the input() function works:
The prompt that is given as input to the input() function is a string that
tells the user what kind of value the user is expected to enter. Example
“Enter an integer number”
After the user enters a value and presses the enter key, the input()
function returns the value the user entered as str type. This means that
irrespective of the type of value that the user enters, the value that
the input() function returns is of str type. Therefore, if the value that
is required is of another type, the str type should be converted to the
required type.
Example:
x=input(”Enter an integer number”)
x=int(x)
The value the input() function returns should be assigned to a variable.
This indicates that when the input() function is used, it is used as an
expression in an assignment statement.

Activity 6.8
• Write a program in the text editor that has the following elements:
° Accept the name, age, and Body Mass Index (BMI) of a person
from the keyboard using the input() function,
° Convert the values to their appropriate data type , and
° Display the values using the print() function.
The following example demonstrates how the input() and the print() functions are
used in a program. It shows how the input() function is used to accept data from the
keyboard, and how the print() function is used to display the result on the screen.
The program simply accepts the radius of a circle from the user and displays the
area and circumference of the circle.
Python Script
PI=3.14
x=input(”Enter the radius:”)
radius=float(x)
area=PI*radius**2
circumference=2*PI*radius
print(”The area of the circle is:”)
print(area)
print(”The circumference of the circle is:”)
print(circumference)
Output on the IDLE Shell
Figure 6.10 Using input() and print() functions

Notes
The following points are important to note regarding the program shown in
Figure 6.10:
The prompt given to the input() function should be written in a manner

that helps the user clearly understand what to do.
The data type of the value that is returned by the input() function is
changed to float, which is the right data type for values like the radius
of a circle.
print() function displays its outputs in separate lines. Therefore, the
strings and the values are displayed each on a separate line.
In the example shown in Figure 6.10, a print() function is used to display each
output separately. However, if multiple values are required to be displayed in one
line, the values should be given to the print() function with comma separation. See
Figure 6.11 for the modified version of the program in Figure 6.10.
Python Script
PI=3.14
x=input(”Enter the radius:”)
radius=float(x)
area=PI*radius**2
circumference=2*PI*radius
print(”The area of the circle is:”, area)
print(”The circumference of the circle is:”, circumference)
Output on the IDLE Shell
Figure 6.11 Displaying multiple values in one line

Notes
As shown in Figure 6.11, the string literal values and the variables are
given to the print() function with comma separation. As a result, the
results are displayed in one line.
Activity 6.9
1. Write a program that accepts two numbers from the user and displays
the product on the screen.
2. Write a program that displays the BMI of a person by accepting the
weight and height from the keyboard.

Unit Summary
• what is meant by a computer program

• the three types of programming languages, namely, machine language,
assembly language, and high-level language
• translation software, such as Assembler, Compiler, and Interpreter
• the difference between compilers and interpreters
• the concept of syntax and semantics in programming languages, and the
associated error types
• what the high-level programming language called Python is
• how to write Python scripts using the interactive interpreter and the text
editor
• how to save Python script files and how to run the scripts
• the concept of variables and data types in Python
• valid and invalid identifiers
• the basic built-in data types
• assigning values to variables using an assignment operator
• operators, such as arithmetic operators (+, -, /, //, %, *, **), Boolean
operators (and, or, not) and assignment operator (=)
• conversion of values from one data type to another using explicit and
implicit type conversion methods
• the concept of statements and expressions in Python
• the differences and relationships between statements and expressions
• how to write a simple program by reading data from the keyboard using
the input() function and displaying results using the print() function

Key Terms
Assembler is a software used to translate programs written in assembly
language into machine language.
Assembly Language is a low-level programming language that uses symbols/
mnemonics.
Assignment Operator (=) is an operator used to assign values to variables.
Binary System is a system in which everything is represented in terms of 1s
and 0s.
bool is a data type that represents True or False values.
Data type specifies the type of values a variable can have and the operations
defined on the values.
Explicit type conversion is a data type conversion done by the programmer
using built-in functions.
Expression is what the Python interpreter evaluates to a certain value.
float is a data type for floating-point numbers.
Floating Point Number is a number with a decimal point.
Function is a piece of code that performs some tasks.
High-level Language is a programming language closer to human language.
Identifier is the name of variables.
IDLE shell is the same as the interactive interpreter.
IDLE stands for Integrated Development and Learning Environment.
Implicit type conversion is a data type conversion done by Python without
the involvement of the programmer.
int is a data type for integer values.
Keywords are reserved words that have predefined meanings in Python.
Machine Language is a low-level programming language that the computer
understands directly.

Program is a set of instructions that commands the computer what to do.

Programmer is a professional who writes computer programs.
Programming Languages are computer languages used to write computer
programs.
Python is a popular high-level programming language.
Python’s Interactive Interpreter contains Python shell to write and execute
Python codes one line at a time.
Python’s Text Editor is a text editor to write unlimited lines of Python codes
that can be saved.
Script file is a file with Python scripts.
Script is codes found in a file saved with .py extension.
Semantics is related to the meaning of elements of a program and what they
do.
Statement is an instruction executed by the Python interpreter.
str is a data type for strings enclosed with a double/single quotation.
Syntax is the grammatical rules of a programming language.
Type conversion is the process of converting values from one data type to
another.
Variable is a computer memory location used to store data.

Review Questions
1. A program written in assembly language can be directly understood by
the computer.
2. It is only high-level programming languages that have syntax and
semantics.
3. Syntax errors are easier to fix than logic errors.
4. Python’s interactive interpreter can be used to execute multiple lines of
codes at a time.
5. When Python’s text editor is opened, the prompt (>>>) immediately
appears.
6. Once a variable is set to a specific data type, its type cannot be changed.
7. The results of the two expressions 5/2 and 5//2 are not the same.
8. In implicit type conversion, the programmer has to use built-in functions
to convert values from one type to another.
9. The data type “bool” has only two possible values.
10. Expressions and statements are the same things in Python.

Part II: Match the items given under column B with associated items in
column A
A B
1. Rules of a language a. Interpreter
2. A keyword such as str b. Compiler
3. Name of variables c. Machine Language
4. That which is evaluated to some value d. Assembly Language
5. Meanings of elements of a language e. Statement

f. Syntax
6. 1s and 0s
g. Operator
7. Interface to work with Python language
h. Semantics
8. Mnemonics
i. IDLE shell
9. Translating the whole program
j. Identifier
10. Translating one line at a time
k. Type conversion
l. Data type
m. Expression
Part III: Choose the correct answer from the given alternatives.
1. Which of the following programming languages is the one that is directly

understood by the computer?
A. Assembly Language B. High-level language
C. Machine language D. Python
2. Which of the following is not an example of high-level programming

languages?
A. C++ B. Java
C. Python D. None of the above
3. The operand on the left side of the assignment operator (=) is always:
A. A variable B. String value
C. Integer value D. An expression

4. Which of the following is a valid identifier?

A. &_x B. _xs.
C. 123 D. print
5. Identify the function that is not used for type conversion purposes.
A. int() B. type()
C. str() D. float()
Part IV: Fill in the blank spaces

1. A programming language that is an example of those that use compilers is
____________.
2. A special type of software used to translate assembly language programs
into machine language is known as _____________.
3. A type of error related to violating the rules of a programming language is
known as ______________.
4. A type of error related to the semantics of a programming language is
known as _____________.
5. The extension with which Python script files are saved by is _________.

Part V: Code Writing

1. Using the print() function, write a program in the text editor that displays
all of the subjects you are taking in the current semester each on a new
line.
2. Write a program in the text editor that does the following:
a. Creates three variables with integer, floating-point number, and
string values.
b. Displays their values and data types. (hint: use the type() function
to know the data types)
3. Write a program in the text editor that does the following:

a. Creates a variable with one type of value.
b. Reassigns the variable to a different type of value.
c. Displays the data type of the variable before and after the
reassignment.
4. Write a program in the text editor that converts the following two string
values into floating-point numbers and displays their product on the
screen.
”4.5” ”30.2”
5. Write a program that accepts two numbers from the user and displays the
following:
a. The sum
b. The product
c. The average value

Activity 4.2: 4.3. HTML Basics

Uploaded by

Copyright:

Available Formats

Activity 4.2: 4.3. HTML Basics

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Activity 4.2: 4.3. HTML Basics

Uploaded by

Copyright:

Available Formats

UNIT-4 Web Development

Web development is the actual creation or building of websites while website

4.3. HTML Basics

4.3.1 HTML Tags and Elements

Table 4.1 Sample HTML tags

Tag Name Meaning

HTML elements are components of an HTML document and normally have

81 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

HTML element Meaning

82 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Figure 4.3 Inserting horizontal and new lines

4.3.2 Structure of HTML Documents

83 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Figure 4.4 Structure of an HTML document

4.3.3 HTML Attributes

84 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Figure 4.5 HTML “align” attribute

Output on the Web Browser

Figure 4.6 <img> HTML element

85 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Figure 4.7 <video> HTML element

86 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

3. Open the HMTL document and see if the video opens.

4.4. HTML Links

4.4.1 Links to other Pages

87 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

This is the part of the

Figure 4.8 Format of HTML links

HTML Code Output on the

Figure 4.9 Defining a link to Google

88 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

HTML Code Output on the

Figure 4.10 Image HTML link

 Relative URL: is a path given relative to the location of the current

4.4.2 Links to Page Sections

90 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

4.5. HTML Tables

HTML Tags Meaning

91 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Figure 4.11 HTML table

column 1 column 2 column 3 column

column 1 column 2 column 3 column

93 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Figure 4.12 Merging columns in HTML tables

94 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

95 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

96 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

Output on the Web Browser

Figure 4.13(b) Page layout using tables

97 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

4.6. HTML Lists

4.6.1 Ordered List

98 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

HTML Code Output on the Web Browser

Figure 4.15 HTML Ordered List

4.6.2 Unordered List

99 INFORMATION TECHNOLOGY GRADE 11 ~ STUDENT TEXTBOOK

HTML Code Output on the Web

<li>Save energy</li> o Plant trees

Relative URL: is a path given relative to the location of the current

Explain maintenance procedures and troubleshooting

What do you know about computer hardware troubleshooting and